{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/advanced/design-to-code","result":{"data":{"current":{"frontmatter":{"title":"Design to Code 设计稿转代码","order":5,"brief":null,"icon":"doc-code"},"fields":{"type":"advanced"},"tableOfContents":{"items":[{"url":"#简介","title":"简介"},{"url":"#调用方式","title":"调用方式"},{"url":"#示例","title":"示例"},{"url":"#与其他技术路线的差异","title":"与其他技术路线的差异"},{"url":"#更多说明","title":"更多说明"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"category\": \"设计协作\",\n  \"title\": \"Design to Code 设计稿转代码\",\n  \"icon\": \"doc-code\",\n  \"localeCode\": \"zh-CN\",\n  \"order\": 5\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar DesignToCodeFeature = makeShortcode(\"DesignToCodeFeature\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u7B80\\u4ECB\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"D2C \\u4E3A Design to Code \\u7684\\u7F29\\u5199\\uFF0C\\u5373\\u8BBE\\u8BA1\\u7A3F\\u8F6C\\u4EE3\\u7801\\u3002\\u4F5C\\u4E3A\\u524D\\u7AEF\\u5DE5\\u7A0B\\u5E08\\u7684\\u8F85\\u52A9\\u5DE5\\u5177\\uFF0C\\u80FD\\u6709\\u6548\\u52A0\\u901F\\u8BBE\\u8BA1\\u7A3F\\u8FD8\\u539F\\u7684\\u6548\\u7387\\uFF0C\\u964D\\u4F4E\\u4EBA\\u5DE5\\u7F16\\u5199 Html / CSS \\u7684\\u6210\\u672C\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5F97\\u76CA\\u4E8E Figma \\u5E73\\u53F0\\u751F\\u6001\\u539F\\u751F\\u80FD\\u529B\\uFF08Variant \\u53D8\\u4F53\\u3001DevMode\\u3001CodeConnect \\u7B49\\uFF09\\u7684\\u4E0D\\u65AD\\u589E\\u5F3A\\uFF0CD2C \\u7C7B\\u5DE5\\u5177\\u8FD1\\u4E9B\\u5E74\\u5728\\u751F\\u4EA7\\u73AF\\u5883\\u4E0B\\u7684\\u53EF\\u7528\\u6027\\u5DF2\\u7ECF\\u6709\\u4E86\\u975E\\u5E38\\u5927\\u7684\\u63D0\\u5347\\uFF0C\\u53EF\\u4EE5\\u652F\\u6491\\u5B8C\\u6574\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u63A5\\u5165\\uFF0C\\u505A\\u5230\\u7EC4\\u4EF6\\u7EA7\\u7684\\u8BC6\\u522B\\u4E0E\\u4EE3\\u7801\\u8F93\\u51FA\\u3002\\n\\u540C\\u65F6\\u501F\\u52A9 AI \\u5927\\u6A21\\u578B\\uFF0C\\u53EF\\u4EE5\\u6709\\u6548\\u5BF9 Figma \\u8F6C\\u8BD1\\u51FA\\u7684\\u6A21\\u677F\\u6837\\u5F0F\\u4EE3\\u7801\\u505A\\u8FDB\\u4E00\\u6B65\\u6539\\u5199\\uFF0C\\u5B9E\\u73B0\\u4E1A\\u52A1\\u903B\\u8F91\\u8865\\u5145\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi D2C \\u63D0\\u4F9B\\u5F00\\u7BB1\\u5373\\u7528\\u7684\\u8BBE\\u8BA1\\u7A3F\\u8F6C\\u4EE3\\u7801\\uFF1A\\u652F\\u6301\\u4E00\\u952E\\u8BC6\\u522B Figma \\u9875\\u9762\\u4E2D\\u56FE\\u5C42\\u5E03\\u5C40 + \\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u7EC4\\u4EF6\\uFF0C\\u50CF\\u7D20\\u7EA7\\u8FD8\\u539F\\u8BBE\\u8BA1\\u7A3F\\uFF0C\\u8F6C\\u8BD1\\u4E3A React JSX \\u548C CSS \\u4EE3\\u7801\\u3002\\u6B64\\u5916\\u8FD8\\u63D0\\u4F9B\\u4E86\\u4E30\\u5BCC\\u7684\\u6269\\u5C55\\u80FD\\u529B\\uFF0C\\u57FA\\u4E8E\\u81EA\\u5B9A\\u4E49\\u63D2\\u4EF6\\u7CFB\\u7EDF\\u5FEB\\u901F\\u6253\\u9020\\u56E2\\u961F\\u4E13\\u5C5E\\u7684\\u8BBE\\u8BA1\\u7814\\u53D1\\u534F\\u4F5C\\u5DE5\\u5177\\uFF0C\\u65E0\\u9700\\u4ECE 0 \\u5F00\\u53D1\\uFF0C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u501F\\u52A9 D2C\\uFF0C\\u4F60\\u53EF\\u4EE5\\u5C06 UI \\u8FD8\\u539F\\u7684\\u5DE5\\u4F5C\\u4EA4\\u7ED9\\u5DE5\\u5177\\uFF0C\\u66F4\\u4E13\\u6CE8\\u4E8E\\u5B9E\\u73B0\\u4E1A\\u52A1\\u903B\\u8F91\\u3002\"), mdx(DesignToCodeFeature, {\n    mdxType: \"DesignToCodeFeature\"\n  }), \" \"), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8C03\\u7528\\u65B9\\u5F0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6211\\u4EEC\\u63D0\\u4F9B\\u4E86\\u591A\\u79CD\\u5F62\\u6001\\u7684\\u8C03\\u7528\\u65B9\\u5F0F\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Figma \\u63D2\\u4EF6\\uFF1A\\u901A\\u8FC7 Figma DevMode \\u5FEB\\u901F\\u542F\\u52A8\\uFF0C\\u70B9\\u51FB\\u56FE\\u5C42\\u76F4\\u63A5\\u83B7\\u53D6\\u5BF9\\u5E94\\u4EE3\\u7801\\uFF0C\\u652F\\u6301\\u4E0D\\u540C\\u4EE3\\u7801\\u683C\\u5F0F Output\\u3002\\u652F\\u6301\\u901A\\u8FC7\\u81EA\\u5B9A\\u4E49\\u63D2\\u4EF6\\u81EA\\u7531\\u6D88\\u8D39 AST\\uFF0C\\u81EA\\u5B9A\\u4E49\\u51FA\\u7801\\u7ED3\\u679C\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"OpenApi\\uFF1A\\u5F00\\u653E\\u5F0F Http \\u670D\\u52A1\\uFF0C\\u63D0\\u4F9B\\u57FA\\u4E8E Figma URL \\u89E3\\u6790\\u51FA\\u5BF9\\u5E94\\u4EE3\\u7801\\u7684\\u80FD\\u529B\\uFF0C\\u53EF\\u7528\\u4E8E\\u5C06 D2C \\u96C6\\u6210\\u5230\\u4E1A\\u52A1\\u6D41\\u7A0B\\uFF0C\\u5982 LowCode \\u642D\\u5EFA\\u5E73\\u53F0\\uFF0C\\u6784\\u5EFA MCP \\u670D\\u52A1\\u7B49\\uFF08\\u5B57\\u8282\\u5185\\u90E8\\u53EF\\u7528\\uFF0C\\u793E\\u533A\\u7248\\u672C\\u6682\\u672A\\u63D0\\u4F9B\\u8BE5\\u80FD\\u529B\\uFF09\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"NodeSdk\\uFF1A\\u5B9A\\u5236\\u6027\\u5F3A\\uFF0C\\u53EF\\u7528\\u4E8E\\u5C01\\u88C5\\u56E2\\u961F\\u79C1\\u6709\\u7684 D2C \\u80FD\\u529B\\uFF0C\\u5982 CLI/HTTP \\u670D\\u52A1/VS Code \\u63D2\\u4EF6\\uFF08\\u5B57\\u8282\\u5185\\u90E8\\u53EF\\u7528\\uFF0C\\u793E\\u533A\\u7248\\u672C\\u6682\\u672A\\u63D0\\u4F9B\\u8BE5\\u80FD\\u529B\\uFF09\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u66F4\\u8BE6\\u7EC6\\u7684\\u4F7F\\u7528\\u8BF4\\u660E\\uFF0C\\u53EF\\u8BBF\\u95EE \", mdx(\"a\", {\n    href: \"/code\",\n    target: \"_blank\"\n  }, \"D2C \\u5B98\\u7F51\"), \" \\u67E5\\u9605\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u793A\\u4F8B\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6211\\u4EEC\\u51C6\\u5907\\u4E86\\u4E00\\u4E9B Figma \\u793A\\u4F8B\\u8BBE\\u8BA1\\u7A3F\\uFF0C\\u4EE5\\u53CA\\u4F7F\\u7528 Semi Figma \\u63D2\\u4EF6\\u5B9E\\u9645\\u8F6C\\u8BD1\\u7684\\u4EE3\\u7801 Codesandbox \\u94FE\\u63A5\\u3002   \"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5728\\u5B89\\u88C5\\u63D2\\u4EF6\\u540E\\uFF0C\\u4F60\\u53EF\\u4EE5\\u57FA\\u4E8E\\u8FD9\\u4E9B\\u73B0\\u6709\\u8BBE\\u8BA1\\u7A3F\\uFF0C\\u5FEB\\u901F\\u4F53\\u9A8C / \\u8BC4\\u4F30 Semi D2C \\u7684\\u80FD\\u529B\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u622A\\u56FE & Figma URL\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Codesandbox\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    href: \"https://www.figma.com/file/TlLeWouyImYUexTmhdLiIn/D2C-Getting-Start-Demo?node-id=5%3A2092\",\n    target: \"_blank\",\n    rel: \"noreferrer noopener\"\n  }, mdx(\"img\", {\n    src: \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/semi-linker/simple-demo-1.jpg\",\n    style: {\n      width: 400\n    }\n  }))), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0D\\u542B\\u7EC4\\u4EF6\\uFF0C\\u5185\\u5BB9\\u8F83\\u7B80\\u5355\\u7684\\u6A21\\u5757\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53EF\\u7528\\u4E8E\\u5FEB\\u901F\\u8FD8\\u539F\\u5E03\\u5C40\\u53CA\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    href: \"https://codesandbox.io/s/w1z9yx\",\n    target: \"_blank\",\n    rel: \"noreferrer noopener\"\n  }, \"Link\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    href: \"https://www.figma.com/file/TlLeWouyImYUexTmhdLiIn/D2C-Getting-Start-Demo?node-id=1%3A275\",\n    target: \"_blank\",\n    rel: \"noreferrer noopener\"\n  }, mdx(\"img\", {\n    src: \"https://lf3-files.qingfuwucdn.net/obj/inspirecloud-file/baas/tt38q7/2468f1c4f1756bc0_1676603194364.png\",\n    style: {\n      width: 400\n    }\n  }))), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0D\\u542B\\u7EC4\\u4EF6\\uFF0C\\u5185\\u5BB9\\u8F83\\u591A\\u6216\\u5E03\\u5C40\\u7A0D\\u590D\\u6742\\u7684\\u6A21\\u5757\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53EF\\u7528\\u4E8E\\u5FEB\\u901F\\u8FD8\\u539F\\u5E03\\u5C40\\u53CA\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    href: \"https://codesandbox.io/s/905ncn\",\n    target: \"_blank\",\n    rel: \"noreferrer noopener\"\n  }, \"Link\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    href: \"https://www.figma.com/file/TlLeWouyImYUexTmhdLiIn/D2C-Getting-Start-Demo%EF%BC%88Figma-Community%EF%BC%89?node-id=419%3A90854&t=PMnGQ3VQIoGQZZPl-4\",\n    target: \"_blank\"\n  }, mdx(\"img\", {\n    src: \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/semi-linker/semi-code-site/Simple Form.png\",\n    style: {\n      width: 400\n    }\n  }))), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u542B Semi \\u8868\\u5355\\u7EC4\\u4EF6\\u7684\\u6A21\\u5757\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53EF\\u7528\\u4E8E\\u5FEB\\u901F\\u8FD8\\u539F\\u5E03\\u5C40\\u53CA\\u5185\\u5BB9\\uFF0C\\u5E76\\u8BC6\\u522B\\u51FA Semi \\u7EC4\\u4EF6\\u7684 Props\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    href: \"https://codesandbox.io/p/sandbox/simple-form-9gq7fw\",\n    target: \"_blank\"\n  }, \"Link\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    href: \"https://www.figma.com/file/TlLeWouyImYUexTmhdLiIn/D2C-Getting-Start-Demo%EF%BC%88Figma-Community%EF%BC%89?node-id=419%3A128959&t=PMnGQ3VQIoGQZZPl-4\",\n    target: \"_blank\"\n  }, mdx(\"img\", {\n    src: \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/semi-linker/semi-code-site/Simple Table.png\",\n    style: {\n      width: 400\n    }\n  }))), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u542B Semi Table \\u7EC4\\u4EF6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53EF\\u7528\\u4E8E\\u5FEB\\u901F\\u8BC6\\u522B\\u8868\\u683C\\u5217\\u3001\\u521B\\u5EFA Table\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    href: \"https://codesandbox.io/s/happy-browser-dt34sr\",\n    target: \"_blank\"\n  }, \"Link\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    href: \"https://www.figma.com/file/TlLeWouyImYUexTmhdLiIn/D2C-Getting-Start-Demo?node-id=1%3A276\",\n    target: \"_blank\",\n    rel: \"noreferrer noopener\"\n  }, mdx(\"img\", {\n    src: \"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/semi-linker/d2c-landing-example.png\",\n    style: {\n      width: 400\n    }\n  }))), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6574\\u9875 Landing Page\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53EF\\u7528\\u4E8E\\u5FEB\\u901F\\u8FD8\\u539F\\u5E03\\u5C40\\u53CA\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    href: \"https://codesandbox.io/s/cvhhqt\",\n    target: \"_blank\",\n    rel: \"noreferrer noopener\"\n  }, \"Link\")))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4E0E\\u5176\\u4ED6\\u6280\\u672F\\u8DEF\\u7EBF\\u7684\\u5DEE\\u5F02\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u5E38\\u800C\\u8A00\\uFF0C\\u8BBE\\u8BA1\\u8F6C\\u4EE3\\u7801\\u9664\\u4E86\\u4F9D\\u8D56\\u4E8E\\u7279\\u5B9A\\u8BBE\\u8BA1\\u5E73\\u53F0\\u7684 Figma To Code / Sketch To Code \\u5916\\uFF0C\\u8FD8\\u6709 Image to Code\\uFF0C\\u57FA\\u4E8E\\u591A\\u6A21\\u6001 AI \\u5927\\u6A21\\u578B\\u7684 Code \\u751F\\u6210 \\u4E5F\\u53EF\\u4EE5\\u8BA4\\u4E3A\\u662F Image to Code \\u7684\\u4E00\\u79CD\\u53D8\\u4F53\\u3002\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Image to Code\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F20\\u7EDF\\u7684 ImageToCode \\u8DEF\\u7EBF\\u4F9D\\u8D56 yolo \\u7B49\\u624B\\u6BB5\\u5BF9\\u56FE\\u7247\\u5143\\u7D20\\u8FDB\\u884C\\u5207\\u5272\\uFF0C\\u7136\\u540E\\u8BC6\\u522B\\u3002\\u8FD9\\u7C7B\\u6280\\u672F\\u8DEF\\u7EBF\\u5BF9\\u76F8\\u4F3C\\u5143\\u7D20\\u7684\\u8BC6\\u522B\\u4E0D\\u4F73\\uFF08\\u4F8B\\u5982 Select \\u4E0E TreeSelect \\u5728\\u6837\\u5F0F\\u76F8\\u4F3C\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u8BC6\\u522B\\u53EF\\u80FD\\u4F1A\\u6DF7\\u6DC6\\uFF09\\uFF0C\\u540C\\u65F6\\u8BBE\\u8BA1\\u7A3F\\u8FD8\\u539F\\u5EA6\\u5728\\u8FBE\\u5230\\u4E00\\u5B9A\\u9608\\u503C\\u540E\\u5F88\\u96BE\\u518D\\u4F18\\u5316\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5927\\u6A21\\u578B\\u65F6\\u4EE3\\uFF0C\\u4F9D\\u8D56 LLM \\u591A\\u6A21\\u6001\\u80FD\\u529B\\u5982 GPT-4V \\u7B49\\u624B\\u6BB5\\u4EA6\\u80FD\\u505A\\u5230\\u5BF9\\u7B80\\u5355\\u8BBE\\u8BA1\\u7A3F\\u7684 toCode \\u8FD8\\u539F\\uFF0C\\u4F46\\u8BE5\\u8DEF\\u5F84\\u76EE\\u524D\\u4F9D\\u7136\\u5F88\\u96BE\\u627F\\u8F7D\\u4E00\\u4E2A\\u7279\\u5B9A\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF08\\u6216\\u8005\\u4E00\\u4E2A\\u7279\\u5B9A\\u8BBE\\u8BA1\\u7CFB\\u7EDF + \\u4E3B\\u9898\\u5B9A\\u5236\\u7684\\u884D\\u751F\\u4F53\\uFF09\\uFF0C\\u5E76\\u57FA\\u4E8E\\u7279\\u5B9A\\u7684\\u8BBE\\u8BA1\\u89C4\\u8303\\u53BB\\u8FD8\\u539F\\u3002\\u540C\\u65F6\\u5BF9\\u4E8E\\u95F4\\u8DDD\\u3001\\u5BF9\\u9F50\\u3001\\u5143\\u7D20\\u8BC6\\u522B\\u7B49\\u5B58\\u5728\\u975E\\u5E38\\u591A\\u8FB9\\u8FB9\\u89D2\\u89D2\\u7684 diff\\uFF0C\\u5BF9\\u8BBE\\u8BA1\\u5E08\\u6765\\u8BF4\\uFF0C\\u9A8C\\u6536\\u6210\\u672C\\u4F1A\\u5267\\u589E\\uFF0C\\u5BF9\\u4E8E Pixel Perfect \\u89C6\\u89C9\\u8FD8\\u539F\\u6548\\u679C\\u8981\\u6C42\\u9AD8\\u7684\\u573A\\u666F\\u800C\\u8A00\\uFF0C\\u5B9E\\u7528\\u6027\\u4F9D\\u7136\\u4E0D\\u4F73\\u3002\\u9488\\u5BF9\\u8FD9\\u4E9B case \\u7684\\u6539\\u5584\\u6210\\u672C\\uFF0C\\u76EE\\u524D\\u4F9D\\u7136\\u5C45\\u9AD8\\u4E0D\\u4E0B\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Figma to Code\\uFF1A  \"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"23/24\\u5E74\\u4E1A\\u754C\\u4E3B\\u6D41\\u7684 D2C \\u4EA7\\u54C1\\u57FA\\u672C\\u90FD\\u662F\\u57FA\\u4E8E\\u8BE5\\u6280\\u672F\\u8DEF\\u7EBF\\uFF0C\\u5B83\\u7531\\u4E8E\\u5C5E\\u4E8E\\u7ED3\\u6784\\u5316\\u4FE1\\u606F\\u7684\\u4E92\\u76F8\\u8F6C\\u6362\\uFF0C\\u6240\\u4EE5\\u5BF9\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u76F8\\u4F3C\\u5143\\u7D20\\u7B49 Image to Code \\u65E0\\u6CD5\\u89E3\\u51B3\\u7684 case \\u91CC\\uFF0C\", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u8BC6\\u522B\\u7CBE\\u51C6\\u5EA6\\u4E0A\\u4F1A\\u6709\\u975E\\u5E38\\u5927\\u7684\\u4F18\\u52BF\"), \"\\u3002Semi \\u7684 D2C \\u4EA6\\u57FA\\u4E8E\\u6B64\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E0E\\u5176\\u4ED6 D2C \\u65B9\\u6848\\u63D0\\u4F9B\\u8005\\u4E0D\\u540C\\uFF0C\\u6211\\u4EEC\\u672C\\u8EAB\\u4EA6\\u662F\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u7684\\u7EF4\\u62A4\\u8005\\uFF0C\\u4F1A\\u66F4\\u6CE8\\u91CD\\u4E0E\\u7279\\u5B9A\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u7684\\u8054\\u901A\\uFF0C\", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u63D0\\u4F9B\\u7684 D2C \\u539F\\u751F\\u652F\\u6301 Design System \\u7EC4\\u4EF6\\u7EA7\\u8F6C\\u7801\\u8BC6\\u522B\\uFF0C\\u4E5F\\u652F\\u6301\\u7B2C\\u4E09\\u65B9\\u8BBE\\u8BA1\\u7CFB\\u7EDF\"), \"\\uFF0C\\u57FA\\u4E8E Code To Design \\u80FD\\u529B \\u8DDF Figma \\u7684 Variant \\u505A\\u4E86\\u6253\\u901A\\u3002\\u5BF9 Figma \\u5E73\\u53F0\\u4E0A\\u5404\\u7C7B\\u529F\\u80FD\\u7684\\u66F4\\u65B0\\u4E5F\\u66F4\\u53CA\\u65F6\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6211\\u4EEC\\u6B63\\u5728\\u5C06\\u4E0A\\u8FF0\\u4E24\\u4E2A\\u8DEF\\u7EBF\\u505A\\u7ED3\\u5408\\uFF0C\\u7ED3\\u5408\\u4E24\\u8005\\u4F18\\u70B9\\u53BB\\u505A\\u66F4\\u9760\\u8FD1\\u5B9E\\u9645\\u5E94\\u7528\\u7684\\u751F\\u6210\\uFF0C\\u5148\\u57FA\\u4E8E Figma To Code \\u751F\\u6210\\u57FA\\u7840\\u4EE3\\u7801\\uFF0C\\u518D\\u7ED3\\u5408 Image \\u56FE\\u50CF\\u4FE1\\u606F\\uFF0C\\u501F\\u52A9\\u591A\\u6A21\\u6001 AI \\u5927\\u6A21\\u578B\\u5C06\\u57FA\\u7840\\u4EE3\\u7801\\u505A\\u66F4\\u5408\\u7406\\u7684\\u6539\\u5199\\uFF0C\\u5728\\u5B57\\u8282\\u8DF3\\u52A8\\u5185\\u90E8\\u7248\\u672C\\u7684 D2C \\u63D2\\u4EF6\\u4E2D\\uFF0C\\u6211\\u4EEC\\u63D0\\u4F9B\\u4E86 Quality \\u6A21\\u5F0F\\uFF0C\\u57FA\\u4E8E Doubao / Deepseek \\u96C6\\u6210\\u4EE5\\u4E0B\\u5F00\\u7BB1\\u5373\\u7528\\u7684\\u80FD\\u529B\\uFF1A\\u66F4\\u667A\\u80FD\\u7684\\u5B50\\u7EC4\\u4EF6\\u62C6\\u5206\\u3001\\u5217\\u8868\\u5FAA\\u73AF\\u7ED3\\u6784\\u57FA\\u4E8E map render \\u5B9E\\u73B0\\u3001classname \\u8BED\\u4E49\\u5316\\u3001jsx -> tsx \\u7C7B\\u578B\\u58F0\\u660E\\u8865\\u5145\\u3002  \")))), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"D2C + AI \\u662F\\u5F53\\u4E0B\\u9636\\u6BB5\\u80FD\\u6700\\u597D\\u517C\\u987E\\u8BBE\\u8BA1\\u8FD8\\u539F\\u5EA6 + \\u751F\\u6210\\u4EE3\\u7801\\u9AD8\\u53EF\\u7528\\u6027\\u7684\\u6280\\u672F\\u8DEF\\u7EBF\\uFF08D2C + AI  =  \\uD83D\\uDE80 Pixel Perfect + \\uD83D\\uDD29 \\u9AD8\\u53EF\\u7EF4\\u62A4\\u4EE3\\u7801\\uFF09\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u66F4\\u591A\\u8BF4\\u660E\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u66F4\\u591A\\u5173\\u4E8E Figma \\u63D2\\u4EF6\\u7684\\u5B89\\u88C5\\uFF0C\\u4F7F\\u7528\\uFF0C\\u6807\\u6CE8\\u81EA\\u5B9A\\u4E49\\u7EC4\\u4EF6\\uFF0CFigma \\u8BBE\\u8BA1\\u53D8\\u4F53\\u7684\\u4F7F\\u7528\\uFF0CD2C \\u7684\\u4F7F\\u7528\\u53D7\\u9650\\u7B49\\u7EC6\\u8282\\u4FE1\\u606F\\uFF0C\\u8BF7\\u67E5\\u9605 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://semi.design/code\"\n  }, \"https://semi.design/code\"))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/advanced/design-to-code","next":{"fields":{"slug":"en-US/advanced/dark-mode"},"id":"c6c9b34c-22f2-5e93-a7d8-3accd7202aab","frontmatter":{"title":"Dark Mode","localeCode":"en-US","icon":"doc-darkmode","showNew":null}},"previous":{"fields":{"slug":"en-US/advanced/design-to-code"},"id":"c279ca11-8576-5e2b-9d17-f690d6a007b8","frontmatter":{"title":"Design to Code","localeCode":"en-US","icon":"doc-code","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}