让 Claude 变身设计搭档！figma-ui-designer 深度测评

让 Claude 变身设计搭档！Figma UI Designer 深度测评

做 UI 设计最怕什么？甲方说「感觉不对」但说不清哪里不对，设计师改到第三版已经忘了第一版长什么样，而开发拿到稿子发现间距对不上、颜色对不上、字体对不上……

今天挖到一个超实用的 Claude Skill——figma-ui-designer，专门解决设计师和 AI 协作的痛点。它不是一个简单的 Figma 读取工具，而是一个带着 UX 专家大脑的设计搭档。

它能做什么？

figma-ui-designer 有四个工作流，覆盖了设计到开发全链路：

A. 截图现有 App，反推设计方向
你丢一张竞品截图，它自动分析设计语言、配色、布局逻辑，帮你提炼可以借鉴的设计模式。

B. 从零设计新项目
不只是生成界面，它会先启动一个 UX 专家 agent，检索真实产品案例作为参考，然后给出有据可查的设计方向建议。简单说——先研究再动手，不是上来就画图。

C. 优化现有功能
给一个现有界面截图，它能从用户体验角度提出改进点，按优先级排列，适合做设计迭代。

D. Figma 设计稿 → 设计规范/开发计划/代码
这是最核心的能力。直接粘贴 Figma 文件链接，它提取设计 tokens（颜色、字号、间距、阴影），生成结构化的设计规范，甚至可以直接输出实现计划或代码。

为什么值得装？

传统 design-to-code 工具最大的问题是：设计师改了颜色，代码不会自动同步。figma-ui-designer 的设计 tokens 提取是自动化的，改完 Figma 再跑一次就能拿到最新规范。

另外它带了一个 UX 专家 agent，不是简单生成 UI，而是会先做竞品研究，这一步往往是最被低估但最有价值的。

适用人群

• 产品设计师：想把 Figma 设计稿快速转成开发可用的规范
• 前端开发者：需要精准还原设计稿，减少设计-开发反复
• UX 研究员：需要一个能快速做竞品分析、结构化输出洞察的工具
• AI 开发者：想探索 design agent 方向的，这个 skill 的 UX agent 设计思路很值得参考

安装方式

git clone https://github.com/abhattacherjee/claude-code-skills.git
cp -r claude-code-skills/figma-ui-designer ~/.claude/skills/figma-ui-designer

或者：

npx skills add https://github.com/abhattacherjee/claude-code-skills --skill figma-ui-designer

GitHub 仓库：https://github.com/abhattacherjee/claude-code-skills

作者：赵一凡 | 定位：设计创意/AIGC/海外前沿 Skill 搬运

GitHub: https://github.com/abhattacherjee/claude-code-skills