#设计稿还原

avatar
5 分钟 手把手教你Figma MCP+Claude code 还原设计稿 上次我在小红书发了个Ask me Anything 的帖子，发现评论区有好几个朋友，问我关于设计稿 转代码，AI 还原设计， Figma MCP 还原设计稿的教程与方法，受限于评论区篇幅，没能详细解释，这次我用一个视频把详细的教程端上来啦！不要收藏吃灰！
AI编程工具激战：Claude Code、Gemini Cli崛起· 1126 条信息
#Figma MCP #Claude Code #设计稿还原 #AI #教程
avatar
meng shao
1周前
提到网易，你会想到什么？猪肉（都，不对是严选！）、有道、游戏？我印象最深的还是网易的游戏（毕竟老玩家…） 游戏行业也是营销比赛和活动很多的行业，做过比赛/活动的程序员和设计师们应该都有感受，为了活动效果，这里面的设计元素是真的多，页面设计起来是真不容易，开发起来也是真的复杂繁琐。为了多个活动灵活管理、跟踪效果，还需要设计开发一个复杂的管理后台。 我们之前的前端组，开发同事们通常会想选择更有技术挑战的算法、逻辑开发，对活动页面开发（俗称切图仔），总感觉难度不高且事儿多，成就感不高。开发和设计联动起来就更复杂了，工作流程超长，修改成本超高，这种产品功能在产研内部基本属于不得不做，但确实不爱做的活儿。 现在有了 AI 原型开发工具（比如 Lovable 和 v0）和 AI 编程智能体（Claude Code、Codex、Cursor 等），能完全解决这个问题吗？还是不太能，主要问题还是 AI 对于设计平台的设计文件还原度不够，Figma 还算 AI 渗透高的，有 Figma MCP（虽然还原度还是不够）；而 Photoshop 和 Sketch、MasterGo 等设计平台，AI 能力的普及还很低，而又确实还是设计稿集中的平台。 最近体验网易推出的「CodeWave」，对设计稿的平台支持和还原度，感觉挺不错，Figma、Photoshop、Sketch 和 MasterGo 都支持，且主打企业全栈应用开发。找了一个 MasterGo 平台的 Dashboard 和一个游戏活动设计稿，咱们看看设计还原度（设计稿和网页预览对比，还原度相当可以！） CodeWave 体验地址：
#网易 #游戏活动 #AI原型开发工具 #CodeWave #设计稿还原
avatar
上次给大家分享了 Slide 产出在线排版！今天给大家分享利用 Juchats 新功能（直接 Artifact 选择对话内生图）产出 Bento Grid 宫格排版。还是纯 Prompt 控制，目前测试模型稳定的情况下，成功率 80%，大家也可以通过编码严格控制，我 Case 里面垫了我的设计稿，大家也可以不垫，或者用 Axure 画个框架图也可以，单纯为了识别布局。 你是世界顶级设计师和前端开发，你非常注重细节，完美完成设计稿内容，请深度思考后再执行！ 请根据图中的布局和样式 1:1 还原！需要注意的细节： 1. 每张卡片渐变是从 #000000 100% 到 #000000 0% 向上渐变 2. 渐变区域文字右一行大字（24px） 和 一行小字组成（14px）文字始终保持在渐变区域上 3. 引用 Inter Webfont 4. 所有图片可以使用<Img>标签先随意填充图像（Logo 和标题 在一行 Logo 样式 210*100px；标题样式：Formula 1 Inter Bold 64px ） 5. 渐变颜色覆盖，不能影响我选择图片<img>标签 6. 每张卡片内图片上下居中展示在卡片内，最好能支持到手动拖动位置 7. 卡片位置描述（请严格遵守卡片位置）： - Card1:280*400px - Card2:600*400px - Card3:280*160px - Card4:280*400px（在 Card3 下面） - Card5:380*160px（在 Card4 左边） - Card6:500*160px（在 Card5 左边） - 所有卡片间距是 20px - 所有卡片圆角 20px 8. 背景色：#FFFFFF 9. 卡片展示区域控制在区域内排列（不能超出） 10.页面内容区域整体和窗口保持上下居中
#Juchats新功能 #Bento Grid宫格排版 #Prompt控制 #设计稿还原 #前端开发