- 综合排序
- 最热优先
- 最新优先
- 来自专栏code秘密花园
设计稿转代码 — Semi D2C 实践方案
TL;DR Semi Design 是抖音前端团队开发的设计系统，包括 Semi UI 组件库，DSM 设计系统定制，D2C 设计稿转代码等方向。 D2C 为 Design to Code 的缩写，意即设计稿转代码。 设计稿转代码是一个非常宽泛的描述，本文指的设计稿转代码，同时也是 Semi Design D2C 所提供的能力范围，主要集中在以下场景： 目标、定位是什么？ 定位：前端工程师的辅助工具。 因此通过设计稿转出的代码距离实际线上代码是有一定区别的，D2C 转不出设计稿上未表达的逻辑，绝大部分场景下我们依然需要一定的二次编辑。 在中后台场景的设计稿转代码识别中，支持组件粒度的识别是能否应用于生产环境的决定性因素。
1.4K30编辑于 2023-08-23 - 来自专栏神光的编程秘籍
C2D 代码转设计稿是怎么实现的？
前面调研过 D2C，也就是设计稿转代码，它的原理是 figma、sketch 等插件可以拿到设计稿的数据，因为是矢量设计稿，所以存储的是一个 JSON，类似这样： 而且这个结构和网页的基础组件是能对应上的 C2D 是代码转设计稿，举两个实际应用的案例： semi design 是抖音开源的组件库，它支持主题的自定义，比如指定不同的主题色、字体大小、圆角尺寸等，而且提供了一个可视化的主题编辑器： 改了主题变量后可以直接预览 semi design 也是这样做的： 总结 D2C 是拿到设计稿的 json 经过一系列处理转成各种框架的代码，而 C2D 则是用代码把组件在设计稿中画出来。 做 C2D 其实更重要的目的是在设计稿中加入一些埋点信息，可以在后面拿到设计稿 json 做 D2C 的时候能够根据这些信息生成组件代码。 总之，C2D 的实现还是依赖设计师提供的和网页组件库对应的 figma 组件库，代码里只需要引入组件传入参数，然后在 figma 设计稿画出来就可以了，代码部分相比 D2C 是简单很多的。
1.1K30编辑于 2023-02-01 - 来自专栏腾讯电子签技术
设计稿到代码真的可行吗？
背景：众所周知，在前端开发过程中，视觉搞到重构稿是一个不可忽略的过程，通常较为成熟而稳定的团队是配置了专门的重构开发团队来做这些事情，他们的职责是： 1、负责视觉搞对重构稿的还原，抽取基础公共组件。 和前端研发同事对接 3、维护整体前端页面框架 4、考虑响应式，解决浏览器样式兼容性问题 那么，有么假如团队规模比较小，没有配置重构团队，那么，这件事情毫无疑问会丢给前端研发同学，前端研发同学通常也具备一定的视觉稿到代码的转换能力 https://github.com/cirediatpl/FigmaChain FigmaChain 是一组基于 Python 脚本的工具，根据 Figma 设计生成 HTML/CSS 代码。 利用 OpenAI 的 GPT-3 模型，FigmaChain 使开发人员能够从 Figma 设计输入快速生成 HTML/CSS 代码。 整体来讲，我认为通过figma生成可以重用的代码，还有些路要走 1、figma组件化设计，提供更多的冗余信息，或者描述信息 2、ChatGPT prompt工程，让其找到哪些节点是一个最小合集，需要表达为一个组件
2.2K80编辑于 2023-08-27 - 来自专栏前端Q
抖音前端团队的设计稿转代码 — Semi D2C 实践方案
TL;DR Semi Design 是抖音前端团队开发的设计系统，包括 Semi UI 组件库，DSM 设计系统定制，D2C 设计稿转代码等方向。 D2C 为 Design to Code 的缩写，意即设计稿转代码。 设计稿转代码是一个非常宽泛的描述，本文指的设计稿转代码，同时也是 Semi Design D2C 所提供的能力范围，主要集中在以下场景： 目标、定位是什么？ 定位：前端工程师的辅助工具。 因此通过设计稿转出的代码距离实际线上代码是有一定区别的，D2C 转不出设计稿上未表达的逻辑，绝大部分场景下我们依然需要一定的二次编辑。 在中后台场景的设计稿转代码识别中，支持组件粒度的识别是能否应用于生产环境的决定性因素。
1.8K30编辑于 2023-08-23 - 来自专栏JAVA 框架/源码学习
由设计稿智能生成代码的神器
一个由设计稿智能生成代码的神器 imgcook，一个由设计稿智能生成代码的神器 imgcook 是专注以各种图像（Sketch/PSD/静态图片）为原材料烹饪的匠心大厨，通过智能化手段将各种视觉稿一键生成可维护的前端代码 全链路采用计算机视觉、深度学习等智能化手段依次去除对设计稿的约束，智能生成代码。一键智能还原与丰富的操作面板，实时保证代码和视觉的高度还原。促进团队的高效协作。 ? imgcook 使用简单，直接上传设计稿（最好找上传sketch或psd源文件） ? 即可快速生成代码。点击后可以选择DSL，最后导出到本地即可。 ? 最后打开浏览器查看界面调试即可。 ? imgcook 可以学习代码的结构，通过手动调整代码有利于进一步提高代码规范以及开发页面结构和调整页面样式的能力。还可以和小伙伴一起协作开发。快快邀请小伙伴一起使用叭。
1.2K20发布于 2021-04-02 - 来自专栏IMWeb前端团队
细谈设计稿还原
本文作者：IMWeb 结一 原文出处：IMWeb社区 未经同意，禁止转载 按道理来说，做重构切页面那本来就是要还原设计稿啊，没话说。但是如果设计师真的细究到0px还原，那还真不是个小事。 首先一个网站落到PS中，都是图片或文字（附加对图片或文字进行相关处理），而对应到重构来说就是一个个元素，所以要做到还原设计稿，主要要解决下面这三个问题： 元素大小 元素与元素之间的间距 元素在页面的位置 总结起来就是两点：保证图片跟设计稿一样大小；保证字体大小及类型一致。 假设我们设计师给的稿子都是认真完成的，我们还可能面临以下问题： 设计师水平本身不在同一条水平线上，不同的设计师审美效果不太一样。 设计师的像素真的是完美的吗，出现小数点像素怎么办？ 设计师的有些设计到底是故意为之还是出了点小差？ 移动端各种手机尺寸，只给一个标准的，其他自由发挥怎么搞？ 所以最后如果要细究到0像素还原，最艰难的问题只有两个：文字的问题；完美的设计稿。
1.7K10发布于 2019-12-05 - 来自专栏IMWeb前端团队
细谈设计稿还原
按道理来说，做重构切页面那本来就是要还原设计稿啊，没话说。但是如果设计师真的细究到0px还原，那还真不是个小事。 首先一个网站落到PS中，都是图片或文字（附加对图片或文字进行相关处理），而对应到重构来说就是一个个元素，所以要做到还原设计稿，主要要解决下面这三个问题： 元素大小 元素与元素之间的间距 元素在页面的位置 总结起来就是两点：保证图片跟设计稿一样大小；保证字体大小及类型一致。 假设我们设计师给的稿子都是认真完成的，我们还可能面临以下问题： 设计师水平本身不在同一条水平线上，不同的设计师审美效果不太一样。 设计师的像素真的是完美的吗，出现小数点像素怎么办？ 设计师的有些设计到底是故意为之还是出了点小差？ 移动端各种手机尺寸，只给一个标准的，其他自由发挥怎么搞？ 所以最后如果要细究到0像素还原，最艰难的问题只有两个：文字的问题；完美的设计稿。
2.9K70发布于 2018-01-08 - 来自专栏石云升
研发提效：通过设计稿自动生成前端代码
而做这个项目的目的就是为提高前端同学的研发效率，少写代码甚至不写代码。 所以京东就开始探索，如何利用设计稿直接自动生成代码的解决方案（匹配多端）。这里主要分为两个阶段。 第一阶段，UI设计稿直接生成静态页面。 第二阶段，UI设计稿直接生成带有逻辑的页面。 在探索的过程中主要有三个难点：设计效果的还原度、代码逻辑的合理性、代码的可读性。 具体怎么做的呢？ 首先，先要将设计稿数据处理成程序可使用的格式。 这里面有很多细节问题需要克服，具体我没做过所以不好具体说，不过我估计会对设计人员的设计稿制定一系列的标准，以便更好的生成代码。 其次，使用布局算法将设计稿数据还原为结构良好的代码。 这里简单说就是，你需要通过布局还原算法，智能的识别设计稿里的对象，如何正确的成行成列以及样式的合理计算。最终形成跟设计稿相同的程序代码。 再次，让代码具有语义化。
1.3K10编辑于 2022-08-25 - 来自专栏神光的编程秘籍
D2C 设计稿转代码是怎么实现的？自己做一个可行吗？
D2C 是指 Design to Code，设计稿转代码，输入是 sketch、figma、PSD 等设计稿，输出是 vue、react、小程序等各平台的前端代码。 这就是设计稿转代码的实现原理了，理想情况下，直接把设计稿结构转成 DSL 的结构，生成 flex 布局和对应的组件信息，然后打印成代码就可以。 Deco 再来看下京东的 deco，它也是支持 sketch 设计稿转各平台代码。 Imgcook Imgcook 是淘宝的设计稿转代码的工具，支持 figma、sketch、psd，甚至还支持图片。 除了通过插件上传数据外，也可以直接上传设计稿文件。 Locofy Locofy 是国外的设计稿转代码的工具，支持 figma 设计稿转 react、react native、next.js、gatsby 等代代码。
2.8K10编辑于 2022-11-11 - 来自专栏异名
设计稿生成游戏界面
从库的开发到封装的界面编辑器，其实我们的游戏界面搭建效率已经很高了，但是从设计稿直出，业内也一直没有停止过尝试，一些比较主流的引擎像laya、unity都有相关的设计稿生成画面的插件，cocosCreator 有了设计稿的结构描述文件+资源，接下来要在引擎的界面编辑器上还原就比较简单了，这里有两种方式，一种是直接转换，把设计稿的scheme描述文件转换成引擎界面编辑器的fire描述文件，引擎生成界面描述语言这部分源码并没有开源 获取sketch结构 进程间的通信是通过引擎暴露的IPC机制，其实就是在插件进程里把资源处理好，然后在面板进程里面加载资源并递归插入节点，这部分的代码如下： /** * 添加节点到画面中 * @param 因为简单的设计稿结构读取和导出是不能满足需求的，最直接的就是设计稿上会有大量的节点的冗余，因为稿子中也保存了设计师创作的一些中间过程，比如大量的路径和未合并的图层，在导出的时候需要做甄别，同时设计师在创作的时候也需要按照一定规范去约束层级关系 最近几年前端有一个很前沿的方向就是前端智能化，就是通过AI/CV技术，使前端工具链具备理解能力，进而辅助开发提升研发效率，其中基于设计稿智能布局和组件智能识别就是其中一个。
1.2K10发布于 2020-09-15 - 来自专栏深度学习与python
如何将设计稿转成高度可维护的代码？ | ArchSummit
11 月 12-13 日，ArchSummit 全球架构师峰会（深圳站）策划了【面向未来的前端技术】专题，我们邀请了来自京东的资深前端开发工程师李伟涛老师，分享议题“研发提效 2.0：设计稿转代码的探索与实践之路 ”，在本次分享中，李伟涛老师将结合团队具体的业务场景，分享京东在设计稿转代码上的思路方案以及遇到的问题，带领大家全方位了解如何将设计稿转换成高度可维护的代码，从而减少前端工程师的工作量，提升开发效率，创造更多业务价值 目前很多设计稿转代码工具，依旧面临着许多技术难点问题，例如识别不全面、识别准确度不高、无法满足定制化需求等，设计要落地为代码，生成的代码结构往往也面临可维护性方面的挑战。 如何由设计稿生成静态代码，又如何让静态代码拥有灵魂，完美地还原设计稿，本次分享李伟涛老师将结合京东大促业务场景为大家带来最佳实践。 议题前沿亮点： 设计稿转代码的应用实践 深度学习、NLP 等 AI 能力为业务赋能 此外，【面向未来的前端技术】专题还邀请了同程旅行架构师李宁老师分享“同程旅行 Flutter 的应用实践”以及腾讯 PCG
1.1K30编辑于 2023-04-01 - 来自专栏云云众生s
Locofy发布设计转代码的“大设计模型”
Locofy全新“大设计模型”（LDM）让用户通过轻松点击按钮将网页设计转化为前端代码。我们采访了创始人。 Locofy是一款专为前端开发人员设计的工具，通过一个Figma插件主要将设计转换为代码。 据该公司称，LDM使用户能够在仅需一次点击的情况下将Web设计转换为前端代码。 但是，使用新产品Lightning，将设计转换为代码只需一次点击，尽管在产品推出后不久仍然需要一些微调。 转换后，Lightning允许您检查生成的代码的任何元素，以便根据需要进行调整。 Locofy设计到代码的过程。 LDM 是什么以及是否使用 LLM？
51610编辑于 2024-03-28 2025年9月最全盘点：支持设计稿转前端代码的5款工具，腾讯云CodeBuddy凭何胜出？
本文梳理5款主流“设计稿转前端代码”工具的最新功能、价格与2025年9月官方活动，重点解读腾讯云代码助手CodeBuddy如何凭借“混元大模型+设计识别引擎”把设计稿还原度拉到95%以上，并直接对接腾讯云 正文 一、为什么现在必须关注“设计稿转代码” • 2025年State of Frontend报告显示：前端仍有30%的时间花在“像素对齐”和“手写样式”上。 二、5款热门设计转代码工具横评（2025.9官网数据） 维度 腾讯云CodeBuddy Figma Dev Mode 五、如何立即上手 打开腾讯云官网 → 代码助手CodeBuddy → 设计转代码 → 立即体验（2025-09活动送50个免费导出）。 结语 当设计稿转代码进入“大模型+云原生”时代，腾讯云CodeBuddy以95%还原率、50个免费导出额度、99元/年的Pro价格，把“像素对齐”变成“一键交付”。
1.1K10编辑于 2025-09-02- 来自专栏owent
Redis全异步(HA)Driver设计稿
Redis全异步高可用Driver设计稿 前言 现在Redis的集群功能已经Release。但是并没有一个官方直接提供的高可用性的API可以使用。有的只有解决方案，Sentinel和Cluster。 所以有必要自己设计一套高可用的Driver层以供业务使用。 Cluster Redis 3.X已经release，这个版本提供了一个重要的功能，那就是集群（Cluster）。 > ASK跳转还有一个特别的步骤是客户端先要发送一个ASKING命令，然后再重发这次的命令，不然处于导入转态的槽会被拒绝访问 > 在重新分片过程中的多个键值操作核能导致TRYAGAIN错误，这时候需要尝试重发命令 根据对hiredis源代码的分析，（除了subscribe和unsubscribe命令外）这时候hiredis一定会回调所有没有完成的callback，然后响应disconnect事件，并且这时候redisReply 流程图如下： image.png Sentinel适配设计 设计思路 Sentinel比较简单，大体上和Cluster一致，有几个不一样的地方如下: 第一次连接的是Sentinel节点而不是数据节点
1.4K10发布于 2018-08-01 - 来自专栏FunTester
千万级日志回放引擎设计稿
主要就是读了goreplay的源码以及它设计思路，用Java重现实现一遍。 思路 总体设计思路如下： 千万级日志回放设计 PS：流量递增和动态增减尚未实现，还在研究goreplay的源码。 代码实现 生产者Demo： def ft = { output("创建线程") fun { int i = 0 while (key) { e, s -> e.setRequest(get) } i++ } } } ft() 读取文件代码 HttpRequestBase request) { this.request = request; } } } PS：这里用到了多个group，原因在设计稿中标记了
76531编辑于 2022-02-08 - 来自专栏前端工程
不会设计也能做站：我用 OpenClaw + Stitch 2.0 半小时出了整套设计稿和代码
我用 Google Stitch 2.0 + OpenClaw，30 分钟出了一套完整的 Landing Page 设计稿——带 HTML/CSS 代码，可以直接交给开发。 02 接入 Stitch：两种方式 方式一：网页版（最简单，适合手动操作） 打开 stitch.withgoogle.com Google 账号登录 创建项目，输入描述，等 2 分钟 拿到设计稿 + 代码 08 代码导出：拿走就能开发 最后一步：把设计稿的代码导出来。 看设计稿截图就知道 自己选字体/配色 Design System 已在代码里 手动写响应式 Tailwind 已处理 重点：全部 重点：替换文案 → 替换图片 → 补 JS 交互 → 接 API → 而且输出的不是设计图，是可直接使用的代码。
96110编辑于 2026-03-31 Lighthouse+Figma MCP 0代码实现设计稿到网页快速还原
面对精美的设计稿，如何将它们完美地还原成网页，既要保持设计的高保真，又得保证网页性能流畅？ 今天，我们将带你一起探讨如何利用这两款强大工具，实现零代码高保真设计还原。通过Lighthouse的一键部署和Figma的高效设计交互，我们将展示如何将创意设计图转化为一个优化良好的网页。 手把手教你如何在零代码的基础上完成设计到网页的高保真还原。让你领略Lighthouse和Figma带来的跨界协作魅力——完美设计、极速开发。 "url": "http://ip地址/xxxxx/sse" } }}从json导入，粘贴信息并点击确定打开开关在对话页面添加MCP服务器开始使用食用方法首先可以在这里了解其基本功能快速还原设计稿以以下设计稿为例 node-id=0-711&t=3XjlenpJrdZfLEMD-4使用 Frameli-get_figma_data 工具获取Profile的所有信息，并根据设计稿信息进行开发- 使用HTML，Tailwindcss
83710编辑于 2025-06-19- 来自专栏从头开始学习测试开发
《设计师的 AI 外挂：用 Skill 将 Figma 设计稿秒变高质量 React 代码》
还原偏差：开发者需要手动测量间距、颜色、字体大小，这个过程极易出错，导致最终实现与设计稿存在“像素级”的偏差。 在 Chat 面板中输入指令： 请使用 FigmaToCodePro 技能，将我刚刚复制的 Figma 设计稿转换为 React 代码。 整个过程流畅、自然，仿佛有一个隐形的前端专家在你身边，随时待命，将设计稿变为现实。 四、超越基础转换：智能增强与最佳实践 FigmaToCodePro 的价值远不止于基础的代码生成。 它能分析设计稿在不同断点下的表现，并在生成的代码中加入合理的媒体查询或 Tailwind 的响应式类（如 md:flex, lg:hidden），为开发者提供一个良好的响应式起点。 现在，就去安装这个 Skill，让你的下一个设计稿，瞬间变为可运行的代码吧。
2K20编辑于 2026-02-04 - 来自专栏代码男人
设计图转Compose代码，Relay帮你轻松搞定
Relay是什么 官方一点说：Relay 可以在设计人员和开发者之间即时移交 Android 界面组件。 环境配置 基本配置 创建一个Figma账号https://www.figma.com/signup Figma是一个专业的原型图或UI设计工具，设计师通常用此用来为开发者提供UI图。 这一步骤的教程实际开发中都是设计师需要操作的，我们了解即可。 上述环境配置好之后我们就可以来在项目中尝试了。 intent 信息注解的设计在构建期间能够正确转换为代码。 在 Figma 中创建 UI 包 因为我不是专业的设计师，所以这里我使用官方提供的HelloFigma.fig示例组件来演示。
1.6K10编辑于 2024-01-11 设计稿一键变代码，VTJ.PRO 让想象与实现再无距离。
VTJ.PRO 首发 MasterGo 设计智能引擎，设计稿秒级生成高质量 Vue 代码还在为设计稿与代码的鸿沟而头疼？设计师精心打磨的界面，交付后却要在开发手中经历漫长的“翻译”过程？ 只需上传你的 MasterGo 设计稿，AI引擎瞬间洞悉设计意图，一键秒级输出高质量、可维护的 Vue (支持 Vue2/Vue3) 组件代码，从此打通设计与开发的无缝协作高速路！ 高保真 & 高质量： 生成的代码结构清晰，样式高度还原设计稿，组件化思维内置，告别“一次性”代码，拥抱可维护性。️ 百万额度任你用： 足够支持您和团队大量设计稿的代码生成需求，彻底体验 AI 提效革命。⏰ 限时开放： 免费额度池有限，先到先得，领完即止！机会不容错过！ “设计稿一键变代码，VTJ.PRO 让想象与实现再无距离。”
35511编辑于 2025-07-10
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号