看到喜欢的App界面想复刻？试试这个AI设计系统提取工具

你有没有遇到过这种情况——看到一个超喜欢的 App 界面，想复刻它的设计风格，但不知道从哪里下手？

颜色是什么？字体大小是多少？间距怎么定？组件样式呢？

UI Designer 这个 Skill 就是来解决这个问题的。它的工作流非常系统：

第一步：喂参考图
把你喜欢的 UI 截图丢给它，它会用 AI 多模态能力分析这张图，把颜色体系、字体层级、间距规范、组件样式全部提取出来，生成一份完整的设计系统文档。

第二步：生成 PRD
如果你还没有产品需求文档，它还能帮你协作生成，结合你的产品概念输出结构化的 MVP 需求说明。

第三步：组合成可落地的 UI 提示词
把设计系统 + PRD 喂给 vibe-design-template，它会输出一个可以直接用来实现 UI 的提示词，包含多个设计变体（移动端 3 个、Web 端 2 个），组织成独立的 React 组件。

第四步：检查环境 + 直接实现
它会检查你本地有没有 React 环境，没有的话给你一条命令直接初始化。然后用第三步生成的提示词直接实现页面。

整个链路是：参考图 → 设计系统 → PRD → UI 实现提示词 → React 页面。

适合谁用：
– 设计师想快速验证自己脑海中的风格能不能落地
– 开发者接到一个”要做成 XXX 那种风格”的需求，不知道具体要什么
– 产品经理想快速搭 MVP，但不想跟设计师来回沟通
– 任何人看到喜欢的 UI 想快速出可代码实现的高保真原型

GitHub 仓库在这里：
https://github.com/daymade/claude-code-skills/tree/main/ui-designer

用之前确保本地有 Node.js 环境，npm 装好 tailwindcss 和 lucide-react。这个 Skill 不负责代码托管，它负责把视觉变成可实现的指令，代码还是你自己写。

GitHub: https://github.com/daymade/claude-code-skills/tree/main/ui-designer