用figma进行UI设计

先定UI设计规范

制作一个UI设计skill，给到AI参考图，就能按照参考图生成对应的设计规范，并存到figma上面。

规范出来大失所望，尤其是figma里面的规范。我是想的是能有图标和对应的展示，结果就是文字复述。 我是要把我让你参考的figma链接里面的对应字体和组件抽取出来，复制到UI设计规范里面 ![[Pasted image 20260414165516.png]] 我提出要求来说可以做到，还给我解释一番，看他表现了。

做了两个，感觉还行，于是我输入下面提示词： 你可以这样迭代没问题，但是不要让我以为你只能做到这一步。现在字体和配色都做的没问题，我希望的也是达到这个要求。你把设计规范最后产出的这个效果回写到skill里面。我希望最终的设计规范就是这个样子的。你逐步迭代的思路也可以写进去，但是要让用户感知到你可以继续迭代，而不是智能做到第一步那样的。 让他改进skill。

这里也给了我一个提醒，逐步迭代的思路也使用于建的skill。不要总是让skill一次做出一个完整的成品来，逐步迭代实现这种方式也可以在skill里面用。

对于AI来说，很多我们认为简单的，对于他们实现很复杂。

skill问题记录： UI设计我不懂，问的问题偏专业。 待确认的问题都放在md文档里面了 存的地方直接建新项目了，这个有点不符合我的要求 skill修改方向

• md和figma设计规范没有特别说明的时候一起出
• mcp断联就不执行了，等我把mcp修复了再做，不要生成其他md文件了。（已写）
• 服务经常断，可以写skill了。断了就直接终止，直到连接好了再搞。（已写） 最后把这个skill拆了两个出来。不知道结果如何。

按照设计规范进行UI设计

UI规范有了，接下来就是按照UI规范+原型来进行UI设计。原型是什么，原型是之前的demo。

我觉得也需要一个skill，用来读取原型，然后结合UI规范，生成要设计的UI设计稿的md。然后再用这个md在figma里面生成完整的UI设计稿。如果是元素比较多，且板块比较分明的UI图，则在md里面就写明按板块逐步输出。调用figma按照md进行UI设计稿生成时就可以按照md文件里面逐步的内容分多次调用figma来完成工作。 原型可以的demo可以是图片，读取的时候要把原型里面的元素按照设计规范里面的内容进行归类，如果没包含进去就可以自己硬编码来实现，只要是有规范的都用规范里面的组件、图标等来实现。

这个skill会不会太大了，又把两步的东西包到一步里面了呢？

已经分成4个skill。

按照这四个skill，做出来的效果一般，丢失的地方也很多。接下来就要手动调整了。 我记一下开始调整时间2026-4-15 09:32:26

小步快跑，一点一点做

figma设计的是初版的内容。

接下来我把我要它改的手动整合成画框。然后让他在按照我的要求进行修改。 先做标题，做好后，再做个栏目

开始多个智能体一起跑，多个智能体一定要把对话名字改了，不然你建智能体多了都不知道他在干啥了。

Figma 设计规范规则

所有大板块小版块均使用Frame（画框）嵌套包裹，小组件全部Group（编组），层级清晰，结构规范

• 大板块：页面一级区域（如头部、内容区、底部），用Frame
• 小版块：大板块内二级区域（如卡片区、按钮组、表单块），嵌套Frame
• 小组件：最小元素（图标、文字、按钮），用Group

所有弹窗、抽屉等浮层组件禁止在主页面上叠加遮挡，全部单独新建页面放置，所有主页面仅保留完整平铺的基础界面，无任何浮层覆盖。

主页面所有板块完全不重叠，按栅格系统规范布局，间距统一。

对于以上我研究的figma进行UI设计，我觉得我犯了方向性的错误。

我应该先做figma图，再出demo的。

大概做出来的效果差强人意。 我这四个skill能发布出去吗，现在缺少一个路由的skill。当进行UI设计规范输出、UI设计、原型设计时，需要调这套skill。这套skill虽然是想着出UI的，但是结果只能在figma出的图是原型效果。而且是缺乏交互的原型。

接下来还要读取figma的设计，再做成原型。