将前端转为figma

单页面转换

第一次，先规划

我脑海中的规划

1.根据参考图得出本次设计的UI设计规范。 2.根据设计规范，结合demo里面的内容进行figma设计

然后我给到Cursorplan一下，其中UI设计规范也要落盘，便于后续直接调用。

生成的figma文件指定位置存放

UI设计规范我不是很懂，遵守到什么程度？我觉得组件可以复用，就是组装即可。不需要硬编码

规划出来了

写的很长，我扫了一眼，我的要求包含进去了，有些我也看不懂。觉得应该问题不大，开始执行了。规划的工作流如下： ![[Pasted image 20260413143608.png]]

等待出结果吧。等待的过程还是很烦的，因为担心浪费我宝贵的时间。

现在用AI去执行任务总有这方面的不放心，每次都担心不能完成我的工作。

何以解忧？

那就把一个任务交给两个智能体去做，完成后你选择一个你满意的。

好了，闲聊到此。现在出现一个问题。 ![[Pasted image 20260413144540.png]]

根据我查MCP的说法，是读取有限制，写入没限制，我再去查查资料去。

答案应该是没有放在团队里面，我移进去了，暂时没有问题了。继续执行。

完全写不进去，我先了解一下figma自带的这几个skill怎么工作的。 figma-use：

• 作用：教你如何用 use_figma 在 Figma 文件里执行 JS（Figma Plugin API）去读/改画布节点（创建 Frame、改 AutoLayout、改颜色、批量改文本、绑定变量等）。
• 适用：你要“自动修 Figma”、“批量改一堆图层”、“把某块布局重排”等写操作。
• 特点：强调原子性、分步执行、必须 return 节点 id，避免常见坑（字体加载、页面切换、0-1 颜色等）。 figma-implement-design：
• 作用：把 Figma 设计稿 → 生产可用 UI 代码（通常是 React/Tailwind 风格草稿 + 组件建议），并提醒你映射到项目现有组件/规范。
• 适用：你说“按这个 Figma 还原前端页面/组件”。 figma-generate-design
• 作用：把 代码/描述 → 写回到 Figma，并优先通过设计系统（组件、变量、样式）搭建整页，避免硬编码样式。
• 适用：你说“把当前页面生成到 Figma / 在 Figma 里搭个同款大屏”。 figma-generate-library
• 作用：从代码库梳理/补齐 Figma 设计系统（tokens/变量、组件库、主题），让后续“设计↔代码”更一致。
• 适用：你觉得 Figma 很乱、没有规范，想先把“组件/变量/主题”建好。 figma-code-connect
• 作用：维护 Code Connect 映射文件，让 Figma 组件能关联到代码里的真实组件用法（更“可落地”的设计到代码）。
• 适用：你们团队用 Code Connect 做设计系统联动。

demo转figma效果奇差无比。