{"id":48883183,"url":"https://github.com/runkids/figma-to-prompt","last_synced_at":"2026-04-26T08:18:55.082Z","repository":{"id":351681220,"uuid":"1212030477","full_name":"runkids/figma-to-prompt","owner":"runkids","description":"🎨 Figma plugin — extract design frames into structured JSON \u0026 AI-ready prompts for code generation","archived":false,"fork":false,"pushed_at":"2026-04-20T08:21:25.000Z","size":1664,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-20T10:43:27.206Z","etag":null,"topics":["ai","design-to-code","developer-tools","figma","figma-plugin","json","llm","prompt"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/runkids.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-16T01:56:44.000Z","updated_at":"2026-04-20T08:15:41.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/runkids/figma-to-prompt","commit_stats":null,"previous_names":["runkids/figma-to-prompt"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/runkids/figma-to-prompt","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runkids%2Ffigma-to-prompt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runkids%2Ffigma-to-prompt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runkids%2Ffigma-to-prompt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runkids%2Ffigma-to-prompt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/runkids","download_url":"https://codeload.github.com/runkids/figma-to-prompt/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/runkids%2Ffigma-to-prompt/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32289992,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T06:26:00.361Z","status":"ssl_error","status_checked_at":"2026-04-26T06:25:58.791Z","response_time":129,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","design-to-code","developer-tools","figma","figma-plugin","json","llm","prompt"],"created_at":"2026-04-16T04:03:11.478Z","updated_at":"2026-04-26T08:18:55.076Z","avatar_url":"https://github.com/runkids.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Figma to Prompt\n\nA Figma plugin that extracts design data into structured JSON and AI-ready markdown prompts — paste into ChatGPT, Claude, or any LLM to generate frontend components.\n\n![Demo](.github/workflows/assets/demo.png)\n\n## Features\n\n- **JSON Export** — Full hierarchical JSON of any frame (layout, styles, typography, colors, design tokens)\n- **AI Prompt** — Auto-generates a framework-agnostic markdown prompt with embedded JSON spec\n- **Multi-selection** — Select any number of nodes; all image fills are collected into one export\n- **Image Export** — PNG / JPG / SVG at 1×–4× scale, or Original (uploaded raster)\n- **Per-image or Merged** — Export each image fill separately, or composite the whole selection into one file\n- **Custom filenames** — Rename each image asset inline before download; names sync into the prompt\n- **Copy / Download** — One-click clipboard copy and zip download\n- **Real-time** — Updates instantly when you change your selection\n\n## Install\n\n### Option 1: Download from Releases (Recommended)\n\n1. Go to [Releases](https://github.com/runkids/figma-to-prompt/releases) and download the latest `.zip`\n2. Unzip — you'll get a folder with `manifest.json` and `dist/`\n\nThen follow [Import into Figma](#import-into-figma).\n\n### Option 2: Build from Source\n\n```bash\ngit clone https://github.com/runkids/figma-to-prompt.git\ncd figma-to-prompt\npnpm install\npnpm build\n```\n\nThen follow [Import into Figma](#import-into-figma).\n\n### Import into Figma\n\n\u003e **Note:** Figma plugins can only be loaded in the [Figma Desktop app](https://www.figma.com/downloads/), not in the browser.\n\n1. Open **Figma Desktop** and any design file\n2. Click the **+** button in the top-right, then select **Import plugin from manifest...**\n   \u003cimg src=\".github/workflows/assets/import.png\" alt=\"Import plugin\" width=\"360\" /\u003e\n\n3. Select the `manifest.json` from the unzipped folder (or cloned repo root)\n4. Done! **Figma to Prompt** appears under **Plugins** → **Development**\n\n#### Launch\n\n- **Menu:** Plugins → Development → Figma to Prompt\n- **Quick search:** `⌘ /` (Mac) or `Ctrl /` (Windows), type `Figma to Prompt`\n\n## Usage\n\n1. Launch the plugin in Figma\n2. Select a frame, component, or group on the canvas\n3. Switch between tabs:\n   - **JSON** — Structured design data\n   - **Prompt** — AI-ready markdown prompt\n4. **Copy** — Click the copy button to copy to clipboard\n5. **Download** — Save as images (PNG/JPG/SVG, 1x–4x)\n6. Paste the prompt into your AI tool and generate frontend code\n\n## Use with AI Coding Agents\n\n### Install Skill (Recommended)\n\nThis repo includes a [design-to-code skill](skills/figma-to-prompt/SKILL.md) that teaches AI agents how to interpret plugin output and generate accurate UI components. Compatible with any agent that supports the skillshare format.\n\n```bash\nskillshare install runkids/figma-to-prompt\n```\n\nOnce installed, paste the copied prompt or JSON — the agent will automatically understand the node structure, map layout to flexbox, convert styles to CSS, and handle component dependencies.\n\n### Direct Paste\n\nNo setup needed — paste the **Prompt** tab output directly into ChatGPT, Claude, Gemini, Copilot, or any LLM. The prompt includes conversion guidelines, design tokens, and the full component structure.\n\n## Output Example\n\nThe plugin generates a `UISerializedNode` tree:\n\n```json\n{\n  \"id\": \"1:23\",\n  \"name\": \"Card\",\n  \"type\": \"FRAME\",\n  \"layout\": {\n    \"mode\": \"vertical\",\n    \"width\": 320,\n    \"height\": 200,\n    \"gap\": 12,\n    \"padding\": { \"top\": 16, \"right\": 16, \"bottom\": 16, \"left\": 16 },\n    \"primaryAxisAlign\": \"min\",\n    \"counterAxisAlign\": \"min\",\n    \"sizing\": { \"horizontal\": \"hug\", \"vertical\": \"fixed\" }\n  },\n  \"style\": {\n    \"backgroundColor\": \"#FFFFFF\",\n    \"borderRadius\": 8\n  },\n  \"children\": [...]\n}\n```\n\nThe **Prompt** tab wraps this in a markdown template with conversion guidelines, ready to use.\n\n## Development\n\n### Prerequisites\n\n- [Node.js](https://nodejs.org/) \u003e= 18\n- [pnpm](https://pnpm.io/)\n- [Figma Desktop](https://www.figma.com/downloads/)\n\n### Dev Mode\n\nRun both watchers in separate terminals:\n\n```bash\n# Terminal 1 — sandbox (Figma API side)\npnpm dev:sandbox\n\n# Terminal 2 — UI (plugin panel)\npnpm dev:ui\n```\n\nSave triggers a rebuild. Reopen the plugin in Figma to load the latest version.\n\n### Test\n\n```bash\npnpm test          # single run\npnpm test:watch    # watch mode\n```\n\n### Build\n\n```bash\npnpm build\n```\n\nOutputs `dist/code.js` (sandbox) and `dist/ui.html` (UI panel).\n\n## Tech Stack\n\n- **TypeScript**\n- **Preact** — UI framework (with React-compat alias for ecosystem libs)\n- **Vite** — Dual config bundler (sandbox + UI)\n- **Vitest** — Unit testing\n- **Tailwind CSS v4** — UI styling\n- **vite-plugin-singlefile** — Inlines everything into a single `ui.html`\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frunkids%2Ffigma-to-prompt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frunkids%2Ffigma-to-prompt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frunkids%2Ffigma-to-prompt/lists"}