[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-29":3,"comments-29":22},{"id":4,"title":5,"summary":6,"cover":7,"author":8,"tags":13,"viewCount":14,"likeCount":15,"collectCount":15,"commentCount":15,"status":16,"publishedAt":17,"contentMd":18,"contentHtml":19,"likedByMe":20,"collectedByMe":20,"updatedAt":21},29,"D2C：从设计稿到页面代码，AI 如何打通设计到开发","设计稿 → AI → 代码 → 浏览器 → 验证","https:\u002F\u002Fdevshare-assets.oss-cn-guangzhou.aliyuncs.com\u002Fuploads\u002F2026\u002F09\u002F01095e01-d222-47e0-a533-f0d26433112b.png",{"id":9,"username":10,"avatar":11,"bio":12},1,"DevShareAdmin","https:\u002F\u002Fdevshare-assets.oss-cn-guangzhou.aliyuncs.com\u002Fuploads\u002F2026\u002F09\u002F98609a86-e08d-437b-b921-1291fc5a1b4d.jpg","DevShare（技享）官方账号",[],21,0,"published","2026-09-16T15:59:21.330Z","一、D2C 是什么？\n\nD2C 可以简单理解为：\n\n> **Design to Code**\n\n也就是：\n\n```text\nDesign\n  ↓\nAI\n  ↓\nCode\n```\n\n但真正成熟的 D2C 不应该只是：\n\n> 截图 → HTML。\n\n真正有价值的是：\n\n```text\nFigma\n ↓\n读取设计系统\n ↓\n识别组件\n ↓\n映射已有组件\n ↓\n生成代码\n ↓\n运行项目\n ↓\n浏览器验证\n ↓\n视觉 Diff\n ↓\n修改\n```\n\n## 二、为什么截图转代码还不够？\n\n假设设计稿里面有一个 Button。\n\nAI 如果不知道你的项目，很可能直接生成：\n\n```vue\n\u003Cbutton class=\"...\">\n  提交\n\u003C\u002Fbutton>\n```\n\n但是你的项目其实已经有：\n\n```vue\n\u003CAppButton \u002F>\n```\n\n于是 AI 重新造了一个。\n\n这就是：\n\n> **AI 能写代码，但不了解你的代码库。**\n\n## 三、理想的 D2C\n\n```text\nFigma\n ↓\nDesign Token\n ↓\nDesign System\n ↓\nComponent Mapping\n ↓\nAI Agent\n ↓\nVue\n ↓\nBrowser\n ↓\nVisual QA\n```\n\n这时候 AI 不再是：\n\n> “帮我把图片变成代码。”\n\n而是：\n\n> **“根据设计系统，在现有项目中实现这个页面。”","\u003Cp>一、D2C 是什么？\u003C\u002Fp>\n\u003Cp>D2C 可以简单理解为：\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>\u003Cstrong>Design to Code\u003C\u002Fstrong>\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>也就是：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">Design\n  ↓\nAI\n  ↓\nCode\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>但真正成熟的 D2C 不应该只是：\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>截图 → HTML。\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>真正有价值的是：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">Figma\n ↓\n读取设计系统\n ↓\n识别组件\n ↓\n映射已有组件\n ↓\n生成代码\n ↓\n运行项目\n ↓\n浏览器验证\n ↓\n视觉 Diff\n ↓\n修改\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>二、为什么截图转代码还不够？\u003C\u002Fh2>\n\u003Cp>假设设计稿里面有一个 Button。\u003C\u002Fp>\n\u003Cp>AI 如果不知道你的项目，很可能直接生成：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-vue\"><button class="...">\n  提交\n<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>但是你的项目其实已经有：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-vue\"><AppButton \u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>于是 AI 重新造了一个。\u003C\u002Fp>\n\u003Cp>这就是：\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>\u003Cstrong>AI 能写代码，但不了解你的代码库。\u003C\u002Fstrong>\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Ch2>三、理想的 D2C\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-text\">Figma\n ↓\nDesign Token\n ↓\nDesign System\n ↓\nComponent Mapping\n ↓\nAI Agent\n ↓\nVue\n ↓\nBrowser\n ↓\nVisual QA\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>这时候 AI 不再是：\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>“帮我把图片变成代码。”\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>而是：\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>**“根据设计系统，在现有项目中实现这个页面。”\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",false,"2026-10-09T12:00:00.169Z",{"items":23,"nextCursor":24},[],null]