daymade UI Designer Skill
从 UI 参考图反向解码设计系统——抽取 tokens、组件、模式,输出可直接喂给 v0 / Cursor / frontend-design 的实现 prompt。作者:@daymade。
作者: daymade
来源: github.com
安装
npx degit daymade/claude-code-skills/ui-designer ~/.claude/skills/ui-designer
ui-designer 是生成式设计工具的反向——它不生成 UI,而是看你已经喜欢的 UI
并解码出来。
工作流程
- 丢一张参考图:截图、设计稿、Figma 截图都行
- 抽取设计系统:颜色 token、字体梯度、间距、圆角、组件模式、微交互
- 输出一份结构化 prompt:可直接粘贴到 v0、Cursor、
frontend-design或其他实现工具
它对的几件事
- 颜色抽取是语义化的(primary、surface、accent),而不是只给 hex
- 组件感知:识别按钮、卡片、导航作为模式,而不是像素网格
- 输出 prompt 而非代码:把实现工具留在流程里,避免那种”AI 生成的 React” 一眼就破绽的味道
适合什么场景
- 想克隆某个设计调性但不抄源码
- 给 v0 / Cursor session 做briefing:一张参考图 + prompt → 一个实现
- 快速理解一个产品的视觉规则,入职新设计语言时用得上
搭配使用
frontend-design:用有审美的方式落地 promptweb-artifacts-builder:打包成单文件 HTMLtheme-factory:把抽取的 tokens 一致地套到其他页面
调用示例
用 ui-designer 解析这张 Linear dashboard 截图。
抽取设计系统(颜色 tokens、字体梯度、组件模式),
生成一份可粘贴到 v0 的实现 prompt,让我做一个类似的界面。
相关 Skill
来自 daymade 的更多 skill
art code macos
daymade Capture Screen Skill
macOS 窗口级截图自动化。按窗口截图,可脚本化,可重复。作者:@daymade。
pdf document markdown
daymade Doc to Markdown Skill
把 .doc / .docx / .pdf / .pptx 转换成干净 Markdown——抽文本、保留结构、保存内嵌图片。作者:@daymade。
art animation code
daymade CLI Demo Generator Skill
程序化录制终端演示,用于 README 和文档。基于 VHS——写脚本,每次都得到完美 GIF。作者:@daymade。