腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

综合排序丨最热优先丨最新优先

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组件库，为您的设计系统提供起点。"

2026-01-10

4.7K0

标签:

腾讯云AI编程达人秀

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

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

2019-09-25

8510

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

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

脚踩两条虫

2025-06-04

7630

标签:

细谈设计稿还原

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

IMWeb前端团队

2019-12-05

1.8K0

标签:

细谈设计稿还原

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

IMWeb前端团队

2018-01-08

3.1K0

标签:

设计稿生成游戏界面

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

2020-09-15

1.5K0

标签:

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

背景：众所周知，在前端开发过程中，视觉搞到重构稿是一个不可忽略的过程，通常较为成熟而稳定的团队是配置了专门的重构开发团队来做这些事情，他们的职责是： 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本身有组件的概念，是否可以要求设计师组件化设计

2023-08-27

2.6K0

标签:

代码生成工具

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

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

2022-02-08

9201

标签:

腾讯云测试服务

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 * **命令就可以完成这些功能，并且总是随机取发送目标。

2018-08-01

1.5K0

标签:

云数据库 Redis®

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

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

2021-04-02

1.4K0

标签: