[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EWR3VPF2ZHP4MMYK4KGH27":3,"skill-same:01M6EWR3VPF2ZHP4MMYK4KGH27":102},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":31,"publishedAt":52,"linkOnly":53,"markdownContent":54,"markdownBody":55,"frontMatter":56,"refName":57,"commitSha":58,"skillDirectory":59,"forksCount":60,"repositoryHtmlUrl":61,"repositoryHomepageUrl":62,"ownerHtmlUrl":63,"ownerBlogUrl":6,"ownerDescription":64,"updatedAt":65,"install":66,"resources":79},"01M6EWR3VPF2ZHP4MMYK4KGH27","design-to-code",null,"Pixel-perfect Figma to React conversion using coderio. Generates production-ready code (TypeScript, Vite, TailwindCSS V4) with high visual fidelity. Features robust error handling, checkpoint recovery, and streamlined execution via helper script.","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fmigoxlab\u002Fdesign-to-code\u002FSKILL.md",[18,23,28],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",{"categoryNo":29,"categoryName":30,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师",[32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51],"code","design to code","design","checkpoint","with","helper","error","visual","pixel","figma to react","conversion","ready","vite","recovery","execution","figma","error handling","react","typescript","tailwindcss","2026-11-10 10:12:30",false,"---\nname: design-to-code\ndescription: Pixel-perfect Figma to React conversion using coderio. Generates production-ready code (TypeScript, Vite, TailwindCSS V4) with high visual fidelity. Features robust error handling, checkpoint recovery, and streamlined execution via helper script.\n---\n\n# Design to Code\n\nHigh-fidelity UI restoration from Figma designs to production-ready React + TypeScript components.\nThis SKILL uses a **robust helper script** to minimize manual errors and ensure pixel-perfect results.\n\n## Prerequisites\n\n1.  **Figma API Token**: Get from Figma → Settings → Personal Access Tokens\n2.  **Node.js**: Version 18+\n3.  **coderio**: Installed in `scripts\u002F` folder (handled by Setup phase)\n\n## Workflow Overview\n\n```\nPhase 0: SETUP    → Create helper script and script environment\nPhase 1: PROTOCOL → Generate design protocol (Structure & Props)\nPhase 2: CODE     → Generate components and assets\n```\n\n---\n\n# Phase 0: Setup\n\n## Step 0.1: Initialize Helper Script\n\n**User Action**: Run these commands to create the execution helper and isolate its dependencies.\n\n```bash\nmkdir -p scripts\n\n# 1. Copy script files\n# Note: Ensure you have the 'skills\u002Fdesign-to-code\u002Fscripts' directory available\ncp skills\u002Fdesign-to-code\u002Fscripts\u002Fpackage.json scripts\u002Fpackage.json\ncp skills\u002Fdesign-to-code\u002Fscripts\u002Fcoderio-skill.mjs scripts\u002Fcoderio-skill.mjs\n\n# 2. Install coderio in scripts directory (adjust version if needed)\ncd scripts && pnpm install && cd ..\n```\n\n## Step 0.2: Scaffold Project (Optional)\n\nIf starting a new project:\n\n1.  Run: `node scripts\u002Fcoderio-skill.mjs scaffold-prompt \"MyApp\"`\n2.  **AI Task**: Follow the instructions output by the command to create files.\n\n---\n\n# Phase 1: Protocol Generation\n\n## Step 1.1: Fetch Data\n\n```bash\n# Replace with your URL and Token\nnode scripts\u002Fcoderio-skill.mjs fetch-figma \"https:\u002F\u002Ffigma.com\u002Ffile\u002F...\" \"figd_...\"\n```\n\n**Verify**: `process\u002Fthumbnail.png` should exist.\n\n## Step 1.2: Generate Structure\n\n1.  **Generate Prompt**:\n\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs structure-prompt > scripts\u002Fstructure-prompt.md\n    ```\n\n2.  **AI Task (Structure)**:\n    - **ATTACH**: `process\u002Fthumbnail.png` (MANDATORY)\n    - **READ**: `scripts\u002Fstructure-prompt.md`\n    - **INSTRUCTION**: \"Generate the component structure JSON based on the prompt and the attached thumbnail. Focus on visual grouping. **Use text content to name components accurately (e.g. 'SafeProducts', not 'FAQ').**\"\n    - **SAVE**: Paste the JSON result into `scripts\u002Fstructure-output.json`.\n\n3.  **Process Result**:\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs save-structure\n    ```\n\n## Step 1.3: Extract Props (Iterative)\n\n1.  **List Components**:\n\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs list-components\n    ```\n\n2.  **For EACH component in the list**:\n\n    a. **Generate Prompt**:\n\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs props-prompt \"ComponentName\" > scripts\u002Fcurrent-props-prompt.md\n    ```\n\n    b. **AI Task (Props)**:\n    - **ATTACH**: `process\u002Fthumbnail.png` (MANDATORY)\n    - **READ**: `scripts\u002Fcurrent-props-prompt.md`\n    - **INSTRUCTION**: \"Extract props and state data. Be pixel-perfect with text and image paths.\"\n    - **SAVE**: Paste the JSON result into `scripts\u002FComponentName-props.json`.\n\n    c. **Save & Validate**:\n\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs save-props \"ComponentName\"\n    # If this fails, re-do step 'b' with better attention to the thumbnail\n    ```\n\n---\n\n# Phase 2: Code Generation\n\n## Step 2.1: Plan Tasks\n\n```bash\nnode scripts\u002Fcoderio-skill.mjs list-gen-tasks\n```\n\nThis outputs a list of tasks with indices (0, 1, 2...).\n\n## Step 2.2: Generate Components (Iterative)\n\n**For EACH task index (starting from 0)**:\n\n1.  **Generate Prompt**:\n\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs code-prompt 0 > scripts\u002Fcode-prompt.md\n    # Replace '0' with current task index\n    ```\n\n2.  **AI Task (Code)**:\n    - **ATTACH**: `process\u002Fthumbnail.png` (MANDATORY)\n    - **READ**: `scripts\u002Fcode-prompt.md`\n    - **INSTRUCTION**: \"Generate the React component code. Match the thumbnail EXACTLY. **Use STRICT text content from input data, do not hallucinate.**\"\n    - **SAVE**: Paste the code block into `scripts\u002Fcode-output.txt`.\n\n3.  **Save Code**:\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs save-code 0\n    # Replace '0' with current task index\n    ```\n\n## Step 2.3: Final Integration\n\nInject the root component into `App.tsx`. Use the path found in the last task of Phase 2.1.\n\n---\n\n# Troubleshooting\n\n- **\"Props validation failed\"**: The AI generated empty props. Check if `process\u002Fthumbnail.png` was attached and visible to the AI. Retry the props generation step.\n- **\"Module not found\"**: Ensure `node scripts\u002Fcoderio-skill.mjs save-code` was run for the child component before the parent component. Phase 2 must be done in order (0, 1, 2...).\n- **\"Visuals don't match\"**: Did you attach the thumbnail? The AI relies on it for spacing and layout nuances not present in the raw data.\n","# Design to Code\n\nHigh-fidelity UI restoration from Figma designs to production-ready React + TypeScript components.\nThis SKILL uses a **robust helper script** to minimize manual errors and ensure pixel-perfect results.\n\n## Prerequisites\n\n1.  **Figma API Token**: Get from Figma → Settings → Personal Access Tokens\n2.  **Node.js**: Version 18+\n3.  **coderio**: Installed in `scripts\u002F` folder (handled by Setup phase)\n\n## Workflow Overview\n\n```\nPhase 0: SETUP    → Create helper script and script environment\nPhase 1: PROTOCOL → Generate design protocol (Structure & Props)\nPhase 2: CODE     → Generate components and assets\n```\n\n---\n\n# Phase 0: Setup\n\n## Step 0.1: Initialize Helper Script\n\n**User Action**: Run these commands to create the execution helper and isolate its dependencies.\n\n```bash\nmkdir -p scripts\n\n# 1. Copy script files\n# Note: Ensure you have the 'skills\u002Fdesign-to-code\u002Fscripts' directory available\ncp skills\u002Fdesign-to-code\u002Fscripts\u002Fpackage.json scripts\u002Fpackage.json\ncp skills\u002Fdesign-to-code\u002Fscripts\u002Fcoderio-skill.mjs scripts\u002Fcoderio-skill.mjs\n\n# 2. Install coderio in scripts directory (adjust version if needed)\ncd scripts && pnpm install && cd ..\n```\n\n## Step 0.2: Scaffold Project (Optional)\n\nIf starting a new project:\n\n1.  Run: `node scripts\u002Fcoderio-skill.mjs scaffold-prompt \"MyApp\"`\n2.  **AI Task**: Follow the instructions output by the command to create files.\n\n---\n\n# Phase 1: Protocol Generation\n\n## Step 1.1: Fetch Data\n\n```bash\n# Replace with your URL and Token\nnode scripts\u002Fcoderio-skill.mjs fetch-figma \"https:\u002F\u002Ffigma.com\u002Ffile\u002F...\" \"figd_...\"\n```\n\n**Verify**: `process\u002Fthumbnail.png` should exist.\n\n## Step 1.2: Generate Structure\n\n1.  **Generate Prompt**:\n\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs structure-prompt > scripts\u002Fstructure-prompt.md\n    ```\n\n2.  **AI Task (Structure)**:\n    - **ATTACH**: `process\u002Fthumbnail.png` (MANDATORY)\n    - **READ**: `scripts\u002Fstructure-prompt.md`\n    - **INSTRUCTION**: \"Generate the component structure JSON based on the prompt and the attached thumbnail. Focus on visual grouping. **Use text content to name components accurately (e.g. 'SafeProducts', not 'FAQ').**\"\n    - **SAVE**: Paste the JSON result into `scripts\u002Fstructure-output.json`.\n\n3.  **Process Result**:\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs save-structure\n    ```\n\n## Step 1.3: Extract Props (Iterative)\n\n1.  **List Components**:\n\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs list-components\n    ```\n\n2.  **For EACH component in the list**:\n\n    a. **Generate Prompt**:\n\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs props-prompt \"ComponentName\" > scripts\u002Fcurrent-props-prompt.md\n    ```\n\n    b. **AI Task (Props)**:\n    - **ATTACH**: `process\u002Fthumbnail.png` (MANDATORY)\n    - **READ**: `scripts\u002Fcurrent-props-prompt.md`\n    - **INSTRUCTION**: \"Extract props and state data. Be pixel-perfect with text and image paths.\"\n    - **SAVE**: Paste the JSON result into `scripts\u002FComponentName-props.json`.\n\n    c. **Save & Validate**:\n\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs save-props \"ComponentName\"\n    # If this fails, re-do step 'b' with better attention to the thumbnail\n    ```\n\n---\n\n# Phase 2: Code Generation\n\n## Step 2.1: Plan Tasks\n\n```bash\nnode scripts\u002Fcoderio-skill.mjs list-gen-tasks\n```\n\nThis outputs a list of tasks with indices (0, 1, 2...).\n\n## Step 2.2: Generate Components (Iterative)\n\n**For EACH task index (starting from 0)**:\n\n1.  **Generate Prompt**:\n\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs code-prompt 0 > scripts\u002Fcode-prompt.md\n    # Replace '0' with current task index\n    ```\n\n2.  **AI Task (Code)**:\n    - **ATTACH**: `process\u002Fthumbnail.png` (MANDATORY)\n    - **READ**: `scripts\u002Fcode-prompt.md`\n    - **INSTRUCTION**: \"Generate the React component code. Match the thumbnail EXACTLY. **Use STRICT text content from input data, do not hallucinate.**\"\n    - **SAVE**: Paste the code block into `scripts\u002Fcode-output.txt`.\n\n3.  **Save Code**:\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs save-code 0\n    # Replace '0' with current task index\n    ```\n\n## Step 2.3: Final Integration\n\nInject the root component into `App.tsx`. Use the path found in the last task of Phase 2.1.\n\n---\n\n# Troubleshooting\n\n- **\"Props validation failed\"**: The AI generated empty props. Check if `process\u002Fthumbnail.png` was attached and visible to the AI. Retry the props generation step.\n- **\"Module not found\"**: Ensure `node scripts\u002Fcoderio-skill.mjs save-code` was run for the child component before the parent component. Phase 2 must be done in order (0, 1, 2...).\n- **\"Visuals don't match\"**: Did you attach the thumbnail? The AI relies on it for spacing and layout nuances not present in the raw data.\n",{"name":5,"description":7},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Faiskillstore\u002Fmarketplace\u002Fmigoxlab\u002Fdesign-to-code",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":8,"skillName":5,"commands":67,"prompt":77,"zipAvailable":78},[68,71,74],{"tool":69,"command":70},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill design-to-code",{"tool":72,"command":73},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill design-to-code",{"tool":75,"command":76},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill design-to-code","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fmigoxlab\u002Fdesign-to-code\u002FSKILL.md",true,[80,86,92,96],{"path":81,"resourceType":82,"resourceTypeDesc":83,"sizeBytes":84,"sourceHtmlUrl":85},"LICENSE.txt","LICENSE","许可证",10880,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fmigoxlab\u002Fdesign-to-code\u002FLICENSE.txt",{"path":87,"resourceType":88,"resourceTypeDesc":89,"sizeBytes":90,"sourceHtmlUrl":91},"scripts\u002Fcoderio-skill.mjs","SCRIPT","脚本",13059,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fmigoxlab\u002Fdesign-to-code\u002Fscripts\u002Fcoderio-skill.mjs",{"path":93,"resourceType":88,"resourceTypeDesc":89,"sizeBytes":94,"sourceHtmlUrl":95},"scripts\u002Fpackage.json",122,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fmigoxlab\u002Fdesign-to-code\u002Fscripts\u002Fpackage.json",{"path":97,"resourceType":98,"resourceTypeDesc":99,"sizeBytes":100,"sourceHtmlUrl":101},"skill-report.json","REFERENCE","参考文档",23034,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fmigoxlab\u002Fdesign-to-code\u002Fskill-report.json",[103,115,125,134,140,147],{"skillNo":104,"name":105,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":111,"publishedAt":52},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[108],{"categoryNo":109,"categoryName":110,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[112,113,114],"model","model hierarchy","model hierarchy skill",{"skillNo":116,"name":117,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":121,"publishedAt":52},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[120],{"categoryNo":109,"categoryName":110,"taxonomyType":21,"taxonomyTypeDesc":22},[122,123,124],"MCP","zoom","zoom mcp",{"skillNo":126,"name":127,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":128,"categories":129,"keywords":130,"publishedAt":52},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[131,132,133,123],"sdk","zoom apps sdk","apps",{"skillNo":135,"name":136,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":137,"categories":138,"keywords":139,"publishedAt":52},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[136],{"skillNo":141,"name":142,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":143,"categories":144,"keywords":146,"publishedAt":52},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[145],{"categoryNo":109,"categoryName":110,"taxonomyType":21,"taxonomyTypeDesc":22},[142],{"skillNo":148,"name":149,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":150,"categories":151,"keywords":152,"publishedAt":52},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[149]]