figma mcp + claude code 配置快速修改设计稿

figmamcp+claudecode配置快速修改设计稿不谈玄学，只讲落地。我是一名深耕算法工程化一线的实践者，擅长将新技术、关键技术、AI/ML技术从论文和demo转化为可规模化部署的生产系统。 figmamcp+claudecode配置快速修改设计稿本文介绍了如何通过ClaudeCode结合FigmaMCP插件实现AI驱动的设计稿快速修改。 最后通过实际案例演示了如何使用自然语言指令（如“修改字体颜色为白色”）让Claude自动识别设计稿中的节点并完成样式修改，展示了AI辅助设计工作流的高效性。 figma相关应用建立通道修改设计展开代码语言：ShellAI代码解释❯修改字体颜色为白色，https://www.figma.com/design/gFJBe3KRQZHsOB6pp7lx6v/Obra-shadcn-ui 已将Frame"AL"中的两个文本元素的字体颜色修改为白色：1."Obrashadcn/ui组件库"-标题文本2."一个精心制作的基于shadcn/ui的Figma组件库，为您的设计系统提供起点。"

【干货】送给初级设计师的设计稿修改意见

我们先来看看这张 改动前 的海报设计图： ? 从海报中提炼出的重点信息有：活动名称是创新课堂，主题是工艺细节和设计的重要性，还有讲师信息，以及电话或扫码报名。 该设计是初入设计行业的设计师设计的，首先优点就是已经可以按照重点信息的优先顺序，进行了比较合理的摆放。但视觉美观和细节上还可以有改动的必要。下面我们一起来看一下，改之后的效果 ? 我们来对比一下每一部分的信息修改前后的对比。首先，我们先整体看一下信息在 8列网格 中的分布对比 ? ? 不难看出修改后，构图更加饱满，信息分布更紧凑，层次感更强。 修改后，人物比例更饱满，更有利于与其他信息产生层次，画面主体突出，主次分明。符合格式塔心理学中的图底明确原则。 人物称谓信息修改前后对比： ? ? 人物称谓信息与右侧板块角色垂直中线对齐更整齐。 设计师们，企业需要你们！ 对你有帮助的话，记得发你的作品PSD过来，我们一同分享！快乐进步！

VTJ 上线 AI 识别 Sketch 和 Figma 设计稿

VTJ的AI助手支持识别 Sketch 和 Figma 设计稿的元数据，当需要高精度还原设计图时，您可以使用这种方式通过AI开发页面组件。 AI识别元数据​ 打开VTJ设计器在 在AI助手新建话题 选择元数据，选择导出的 Sketch 或 Figma 元数据json文件，即可通过AI高精度还原设计图。

细谈设计稿还原

本文作者：IMWeb 结一 原文出处：IMWeb社区 未经同意，禁止转载 按道理来说，做重构切页面那本来就是要还原设计稿啊，没话说。但是如果设计师真的细究到0px还原，那还真不是个小事。 首先一个网站落到PS中，都是图片或文字（附加对图片或文字进行相关处理），而对应到重构来说就是一个个元素，所以要做到还原设计稿，主要要解决下面这三个问题： 元素大小 元素与元素之间的间距 元素在页面的位置 总结起来就是两点：保证图片跟设计稿一样大小；保证字体大小及类型一致。 假设我们设计师给的稿子都是认真完成的，我们还可能面临以下问题： 设计师水平本身不在同一条水平线上，不同的设计师审美效果不太一样。 设计师的像素真的是完美的吗，出现小数点像素怎么办？ 设计师的有些设计到底是故意为之还是出了点小差？ 移动端各种手机尺寸，只给一个标准的，其他自由发挥怎么搞？ 所以最后如果要细究到0像素还原，最艰难的问题只有两个：文字的问题；完美的设计稿。

细谈设计稿还原

按道理来说，做重构切页面那本来就是要还原设计稿啊，没话说。但是如果设计师真的细究到0px还原，那还真不是个小事。 首先一个网站落到PS中，都是图片或文字（附加对图片或文字进行相关处理），而对应到重构来说就是一个个元素，所以要做到还原设计稿，主要要解决下面这三个问题： 元素大小 元素与元素之间的间距 元素在页面的位置 总结起来就是两点：保证图片跟设计稿一样大小；保证字体大小及类型一致。 假设我们设计师给的稿子都是认真完成的，我们还可能面临以下问题： 设计师水平本身不在同一条水平线上，不同的设计师审美效果不太一样。 设计师的像素真的是完美的吗，出现小数点像素怎么办？ 设计师的有些设计到底是故意为之还是出了点小差？ 移动端各种手机尺寸，只给一个标准的，其他自由发挥怎么搞？ 所以最后如果要细究到0像素还原，最艰难的问题只有两个：文字的问题；完美的设计稿。

设计稿生成游戏界面

从库的开发到封装的界面编辑器，其实我们的游戏界面搭建效率已经很高了，但是从设计稿直出，业内也一直没有停止过尝试，一些比较主流的引擎像laya、unity都有相关的设计稿生成画面的插件，cocosCreator 有了设计稿的结构描述文件+资源，接下来要在引擎的界面编辑器上还原就比较简单了，这里有两种方式，一种是直接转换，把设计稿的scheme描述文件转换成引擎界面编辑器的fire描述文件，引擎生成界面描述语言这部分源码并没有开源 因为简单的设计稿结构读取和导出是不能满足需求的，最直接的就是设计稿上会有大量的节点的冗余，因为稿子中也保存了设计师创作的一些中间过程，比如大量的路径和未合并的图层，在导出的时候需要做甄别，同时设计师在创作的时候也需要按照一定规范去约束层级关系 虽然这种这种设计稿还原方式比较粗暴，但是在一些游戏场景比较简单又需要大批量生产的绘本游戏中，这套工作流规范一下还是有它的应用场景，我们可以参考一下行业内的标兵是如何是落地的。 最近几年前端有一个很前沿的方向就是前端智能化，就是通过AI/CV技术，使前端工具链具备理解能力，进而辅助开发提升研发效率，其中基于设计稿智能布局和组件智能识别就是其中一个。

设计稿到代码真的可行吗？

背景：众所周知，在前端开发过程中，视觉搞到重构稿是一个不可忽略的过程，通常较为成熟而稳定的团队是配置了专门的重构开发团队来做这些事情，他们的职责是： 1、负责视觉搞对重构稿的还原，抽取基础公共组件。 2、只有div，image，span，这三个基础的元素，很明显视觉稿上的checkbox没有体现，为什么没有，后面在调研figma 2 code时候，有源码分析。 https://www.locofy.ai/ 图片 这类产品在figma的插件体系里面比较多，随便搜搜 to code ，就可以收到，大家想试试的话，也可以体验这个locofy。 这也是一个开源项目，其原理是将figma文件使用figma api都出来，解析为node结构，修改ChatGPT去更具结构生成网页代码。 这些元素，因为ChatGPT也不可能凭空捏造出来，我理解技术往前一步，应该是figmaFile 提供足够多的冗余信息，让ChatGPT知道这是一个什么类型的控件，在此figma本身有组件的概念，是否可以要求设计师组件化设计

Redis全异步(HA)Driver设计稿

Redis全异步高可用Driver设计稿 前言 现在Redis的集群功能已经Release。但是并没有一个官方直接提供的高可用性的API可以使用。有的只有解决方案，Sentinel和Cluster。 所以有必要自己设计一套高可用的Driver层以供业务使用。 Cluster Redis 3.X已经release，这个版本提供了一个重要的功能，那就是集群（Cluster）。 设计总结 简单地说，就是需要在hiredis上包一层，来完成对Cluster中的内部操作。实现的过程中会导致多一次malloc和多一次sds复制操作。 流程图如下： image.png Sentinel适配设计 设计思路 Sentinel比较简单，大体上和Cluster一致，有几个不一样的地方如下: 第一次连接的是Sentinel节点而不是数据节点 设计总结 流程图如下： image.png 集群健康报告 对于Cluster而言，使用**CLUSTER * **命令就可以完成这些功能，并且总是随机取发送目标。

千万级日志回放引擎设计稿

主要就是读了goreplay的源码以及它设计思路，用Java重现实现一遍。 思路 总体设计思路如下： 千万级日志回放设计 PS：流量递增和动态增减尚未实现，还在研究goreplay的源码。 HttpRequestBase request) { this.request = request; } } } PS：这里用到了多个group，原因在设计稿中标记了

由设计稿智能生成代码的神器

一个由设计稿智能生成代码的神器 imgcook，一个由设计稿智能生成代码的神器 imgcook 是专注以各种图像（Sketch/PSD/静态图片）为原材料烹饪的匠心大厨，通过智能化手段将各种视觉稿一键生成可维护的前端代码 全链路采用计算机视觉、深度学习等智能化手段依次去除对设计稿的约束，智能生成代码。一键智能还原与丰富的操作面板，实时保证代码和视觉的高度还原。促进团队的高效协作。 ? imgcook 使用简单，直接上传设计稿（最好找上传sketch或psd源文件） ? 即可快速生成代码。点击后可以选择DSL，最后导出到本地即可。 ? 最后打开浏览器查看界面调试即可。 ?

《设计师的 AI 外挂：用 Skill 将 Figma 设计稿秒变高质量 React 代码》

本文将展示一个革命性的工作流：通过一个名为 FigmaToCodePro 的 AI Skill，设计师在 Figma 中完成设计后，开发者只需在 VSCode (Cursor) 中右键点击，即可一键将整个页面或组件转化为结构清晰 构建设计树：将扁平的 Figma 图层数据，重构为一棵具有父子关系的 **“设计对象树”**。这棵树不仅包含视觉信息，还开始注入语义。 AI 驱动的语义标注：这是最关键的一步。 Cursor 会弹出一个对话框，让你确认设计稿来源。 等待几秒钟。AI 在后台完成所有解析、理解和生成工作。 它将两个曾经割裂的角色——设计师和开发者——通过 AI 的力量紧密地连接在一起。 在这个新的范式下： 设计师可以更加专注于创造性的探索，因为他们知道自己的想法能够被快速、准确地实现。 现在，就去安装这个 Skill，让你的下一个设计稿，瞬间变为可运行的代码吧。

千万级日志回放引擎设计稿视频版

=1648776723&vid=wxv_2202135972820189190&format_id=10002&support_redirect=0&mmversion=false 千万级日志回放引擎设计稿

如何把设计稿还原成真实网页

框化视觉稿 把设计稿上你能看到的所有元素都放进框中，实际上，一个HTML的标签（例如

123

为什么页面跟设计稿差距这么大

所以这里，建议设计师可以多比照其他 H5 网站的表现来进行设计，而不要经常比照 APP 的体验。 2，设计稿都是最完美的状态 是的，设计稿上面往往体现的都是最完美的状态。 所以老大问：为毛跟设计稿不一样？我们只能说，没这字体啊... 这里建议，即使是设计稿，活字也要用系统字体，否则就是坑啊，看着好看又实现不了。 当拿到设计稿时，确认好布局之后，就是各种溢出状态的确认了。 2，不分析设计稿就动手写代码 作为新手拿到设计稿之后，往往都想很快写代码，因为写代码才有快感。 5，不仔细看设计稿 最常见的错误就是，设计稿上有边框，但是颜色太淡没看到。或者设计稿没边框，由于迭代样式，加了深色背景，忽略了边框没有去掉。 但是你想想，假如你是设计师，辛辛苦苦做出来个设计稿，哪哪都对不齐，你不会觉得不爽？其实只要你认真仔细看，再加上一些练习，差几像素几乎一眼就可以看出来。

做网站-如何将设计稿还原为网页

一般由美工或者说设计师设计出页面的效果图，然后再把这个设计稿通过网页的形式来展现，那么这个过程到底如何来做?今天网站站小编就和大家一同来探讨一下... 通常来说，一个设计稿都是通过一些设计软件设计出来的，比如常见的PhotoShop、FireWorks。 所谓的设计图其实就是导出来设计好的图片，在确认好这些设计稿以后，我们需要通过"切片"的方式来还原网页，具体有以下几个步骤： 1、PhotoShop或fireworks进行图层切片 这个切片是啥意思呢？ 2、根据设计稿编写DIV+CSS布局 一个设计稿出来后，我们可以通过观察分析出它的布局。比如说是上中下结构，还是左右结构，或者说两者的结合。 总结： 以上5点关于设计稿还原为网页的步骤是做网站小编经常使用的方法，静态网页做好以后我们就可以用它来套用我们的程序进而作成动态的网站。

StableDiffusion线稿获取作画——AI线稿作画

前言 线稿作画的优势我在前文中说过，我就不做累述了StableDiffusion线稿获取方法——AI取线稿可以根据这篇文章来搞定，当我们获取到了线稿之后如何作画呢，那么本文就来具体的说明一下实际操作步骤 操作步骤1、完成线稿获取 我们根据上一篇文章就可以直接获取到线稿，这里省略。 操作步骤2、同步像素 这里有一个按钮，但是没有具体的文字显示，需要我们自己来点击一下才能获取到线稿的高度与宽度来替换原来的512*512，这样我们出图片的像素就与原图是一致的了。 操作步骤3、给出提示词 这里的提示词是根据线稿的要求想生成什么样的图片，我这里就随意的写了几个词，但是要注意，一定要转换成英文的，因为对中文的支持比较一般。

智能检测不对应设计稿的PS插件

—— 智能检测不对应的设计稿 免费体验地址：https://idoc.mockplus.cn/ 一、简洁美观——iDoc的PS插件全新界面 iDoc对PS插件的界面进行了全新设计，无论是登录、上传、还是设置界面 0.gif 二、同步上传——智能检测不对应的设计稿 如果你在PS中删除了几个画板，再次上传设计稿时，勾选插件设置中的“上传全部画板时自动检测不对应的画板”，iDoc插件就会在你上传全部画板后，自动剔除已删除的设计稿 ，iDoc中的画板数量将和你最新版的设计稿保持一致！ 以往设计师对于切图的形状，需要一个一个手动画出来图片的宽和高线，再添上线段长度，设计师的工作效率会变得很低。 现在有了区域标注这个功能，设计师只需要鼠标轻轻一画，一个动作就可以在设计稿上标记任意元素的宽和高，数值自动生成，非常方便。

研发提效：通过设计稿自动生成前端代码

所以京东就开始探索，如何利用设计稿直接自动生成代码的解决方案（匹配多端）。这里主要分为两个阶段。 第一阶段，UI设计稿直接生成静态页面。 第二阶段，UI设计稿直接生成带有逻辑的页面。 在探索的过程中主要有三个难点：设计效果的还原度、代码逻辑的合理性、代码的可读性。 具体怎么做的呢？ 首先，先要将设计稿数据处理成程序可使用的格式。 这里面有很多细节问题需要克服，具体我没做过所以不好具体说，不过我估计会对设计人员的设计稿制定一系列的标准，以便更好的生成代码。 其次，使用布局算法将设计稿数据还原为结构良好的代码。 这里简单说就是，你需要通过布局还原算法，智能的识别设计稿里的对象，如何正确的成行成列以及样式的合理计算。最终形成跟设计稿相同的程序代码。 再次，让代码具有语义化。 再加上AI协助处理文字分类、图片分类、翻译服务等。最后给到各个节点类名进行语义化处理。 最后，生成代码。 这里的代码要支持各类DSL及扩展。否则意义就不大了。 这时候的代码，还是静态代码。

响应式网页设计是什么？一套设计稿搞定所有设备！

设备大爆发的今天，屏幕尺寸各异，我们无法对每个设备都进行详细的设计，但可以借助响应式设计技术，用一套设计稿，也能搞定所有设备。 什么是响应式网页设计？ 4、弹性设计：响应式网页设计采用弹性设计，根据屏幕尺寸调整页面元素的布局和大小，保持一致的视觉效果和用户体验。 响应式网页设计和自适应网页区别是什么 最主要的区别是在于设计和开发的方式不同，响应式无论是电脑还是手机，都是使用的同一套设计稿和一份代码，自适应网页需要根据不同的设备，设计不同的设计稿，开发也需要开发多份代码进行设备识别和切换 ； 总结来看，响应式网页设计和自适应网页设计的区别还体现在以下几个方面： 1、设计复杂度：自适应网页设计需要开发多套界面，以适应不同设备类型，因此设计复杂度较高。 不过在2023年，有一款设计工具，可以帮助我们快速的构建响应式设计稿，并可一键交付给开发，开发可以从设计稿上自动获取布局规则。这款设计工具就是摹客DT，下面我们详细来看看如何设计响应式网页。

设计稿转代码 — Semi D2C 实践方案

对于这类页面，Figma 设计稿其实并不能完整表达我们的业务逻辑，非常多逻辑是通过 PRD 产品需求文档中的文本或者示意图承载的，例如条件判断语句 A 条件成立后，B 模块才展现，A 的值修改后 B 的值跟随联动等 页面的常见布局有 flex 布局和 absolute 布局，在设计稿中图层之间的关系一般是绝对定位，那么 D2C 把它直接转为绝对布局是最直接方式，但绝对定位不利于二次修改，且在不同屏幕上的适配性极差， 可以说，如果不支持 AutoLayout ，对设计师而言，这套 UI Kit 基本等于不可用。 与 AI 的结合，能做什么事情？ 但当前而言，AI 对于设计系统的支持，要提升精准度，需要做较多的调教，准确度是最大的问题，目前暂时没出现成本可接受且易用程度高的方案。 从 0 到 1，完全由 AI 去做识别，当前的可落地性不强，成本仍然较高。 前面提到，D2C 的另一个难点是使得转出的代码更像人类工程师书写，我们可以使用 AI 去加速改进这一过程。