设计师 Skill 推荐
UI/UX 设计、原型制作、视觉内容——让 AI 输出的界面从"能用"变"好看"。
先明确页面目标、读者、品牌和关键状态，再选择设计工具。Skill 可以提供方法与参考，实际质量需要在页面和截图上检查。
本页调用示例使用 Claude Code / Cursor 的 /技能名；Codex 等工具见 快速入门。
一览表
- impeccable：UI 质量提升。安装：
npx skills add pbakaus/impeccable --list。使用技巧：让它审查一个已经生成出来的页面，不要只让它凭空讲审美。 - frontend-design：页面和组件搭建。安装：
npx skills add anthropics/skills --skill frontend-design。使用技巧：给出产品类型、页面目标和主要信息层级。 - web-design-guidelines：网页设计规范检查。安装：
npx skills add vercel-labs/agent-skills --skill web-design-guidelines。使用技巧：适合在正式交付前做一轮设计和可用性检查。 - ui-ux-pro-max：设计系统和 UI/UX 规则库。安装：
npx skills add nextlevelbuilder/ui-ux-pro-max-skill。使用技巧：让它先给风格、配色、字体和检查清单。 - canvas-design：海报、视觉稿和品牌素材。安装：
npx skills add anthropics/skills --skill canvas-design。使用技巧：补充尺寸、文案和用途。 - algorithmic-art：算法视觉和生成艺术。安装：
npx skills add anthropics/skills --skill algorithmic-art。使用技巧：说明动效、色彩和输出媒介。 - awesome-design-md：品牌 DESIGN.md 设计参考库。GitHub：voltagent/awesome-design-md。使用技巧：下载目标品牌的 DESIGN.md 放进项目根目录，再让 AI 按照它的视觉语言生成页面。
- remotion：Remotion 视频动画、素材和渲染规范。安装：
npx skills add remotion-dev/skills --skill remotion-best-practices。使用技巧：给出时长、画幅、节奏和交付格式。 - hyperframes：用 HTML 写可渲染视频。安装：
npx skills add heygen-com/hyperframes。使用技巧：先调用/hyperframes，根据安装器当前核心选项选择，需要时再补充。
Codex Product Design 和 ui-ux-pro-max 怎么选
如果你主要用 Codex 做产品界面，优先把 Product Design 当主流程。它适合真实产品里的完整设计闭环：确认 brief、审计现有流程、生成 3 个视觉方向、从截图 / URL 做成可运行原型，再做截图级 QA。也就是说，当你的目标是"把一个页面真的改好、做出来、验收掉"，先用 Product Design。
ui-ux-pro-max 更像设计系统和 UI/UX 规则库。它适合在新项目开始时快速确定风格、配色、字体、布局模式和交付检查清单，也适合生成可持久化的 design-system/MASTER.md 作为后续参考。它不是用来替代现有产品设计系统的；如果项目里已经有 tokens、组件库和品牌规范，先遵守项目自己的设计语言，再用它补判断。
简单说：Product Design 负责执行流程，ui-ux-pro-max 负责补设计系统判断。不要让两个工具同时抢主导权。先用 Product Design 跑主线，遇到"这类产品该用什么风格、字体和交互密度"这类问题时，再让 ui-ux-pro-max 出规则建议。
impeccable：给 AI 装上审美
Impeccable 提供设计技能与操作入口，覆盖审查、排版、布局、动效和可访问性等任务。先查看当前技能名称，再选择需要改善的环节。
安装
npx skills add pbakaus/impeccable --list使用： 按当前仓库说明选择设计技能，并给它实际页面、截图和目标。不要把仓库名默认当成可调用技能名。
什么场景用
- AI 生成的页面"看起来不对"但你说不出哪里不对
- 想让 Claude 输出的 UI 达到"能拿去评审"的水平
- 团队没有专职设计师，需要 AI 撑起 UI 质量底线
怎么检查
比较改前改后的布局、对比度、信息层级与关键交互；手机和桌面都看一遍。改动是否有用，以产品页面和使用任务为准。
页面与组件搭建
frontend-design
Anthropic 官方 Skill。给一段描述，生成页面或组件原型，再检查运行、布局与交互。适合快速原型、落地页、仪表盘等场景。
npx skills add anthropics/skills --skill frontend-design使用： /frontend-design 做一个 SaaS 后台 Dashboard，左侧导航栏、顶部数据卡片、中间表格和图表
更多教程：用 Skill 生成原型图和前端页面 · Claude Code 打造专属技能
web-design-guidelines
Vercel 出品，设计规范覆盖可访问性、性能、UX 和视觉。比 impeccable 更偏向"规范"，比 frontend-design 更偏向"原则"。适合在做正式项目时挂上，作为 AI 输出的质量门槛。
npx skills add vercel-labs/agent-skills --skill web-design-guidelines使用： /web-design-guidelines 帮我检查这个页面的设计规范
ui-ux-pro-max
如果你对 UI 的要求不只是"过得去"，这个 Skill 会让你更接近专业设计师的输出——提供产品类型匹配、风格方向、配色、字体、布局模式和交互检查清单。
npx skills add nextlevelbuilder/ui-ux-pro-max-skill使用： /ui-ux-pro-max 为这个 AI SaaS Dashboard 生成一套设计系统建议
什么场景用：
- 新产品还没有稳定设计系统，需要先定风格、颜色、字体和信息密度
- 做落地页、后台、移动端界面前，想让 AI 给出行业匹配的视觉方向
- 已经有页面，但需要一份更系统的 UI/UX 检查清单
什么场景不优先用：
- 已经在 Codex 里做完整产品原型、视觉方案选择和截图 QA：优先用 Product Design
- 只是要按现有截图或页面还原代码：优先用对应的图转代码 / Product Design 流程
- 项目已经有成熟 tokens 和组件规范：不要让它覆盖项目原有设计语言
视觉与创意
canvas-design
生成静态视觉稿：海报、社交媒体图片、品牌素材。给一段文案和风格方向，输出高质量的静态设计。
npx skills add anthropics/skills --skill canvas-design使用： /canvas-design 做一张产品发布海报，科技感风格
algorithmic-art
用代码生成算法艺术作品——粒子系统、几何图形、分形图案。适合需要独特视觉风格的项目。
npx skills add anthropics/skills --skill algorithmic-art使用： /algorithmic-art 生成一个粒子系统的动态艺术图案
设计参考库
awesome-design-md
Google Stitch 定义了一种叫 DESIGN.md 的格式——纯文本的设计系统文档，AI 读取后能生成视觉一致的 UI。awesome-design-md 收集了 多个品牌网站的 DESIGN.md 文件，拿来直接用。
比如你想让 AI 做一个 Linear 风格的后台页面，只要把 Linear 的 DESIGN.md 下载到项目根目录，然后告诉 AI "按照 DESIGN.md 的风格来"，先比较排版、配色和信息密度，再决定是否适合自己的产品。
覆盖的品牌包括：
| 分类 | 代表品牌 |
|---|---|
| AI 平台 | Claude、Mistral、ElevenLabs、Ollama |
| 开发工具 | Cursor、Vercel、Raycast、Superhuman |
| 设计工具 | Figma、Framer、Webflow |
| SaaS 产品 | Linear、Notion、Stripe、Resend |
| 消费品牌 | Apple、Nike、Airbnb、Spotify |
| 汽车 | Ferrari、Tesla、BMW、Lamborghini |
使用方式：
# 1. 从 GitHub 下载目标品牌的 DESIGN.md
curl -o DESIGN.md https://getdesign.md/linear/design-md
# 2. 放到项目根目录，然后让 AI 按照它生成页面
# prompt: "按照 DESIGN.md 的设计语言，做一个项目管理 Dashboard"什么场景用：
- 做原型时想模仿某个成熟产品的视觉风格
- 让 AI 输出的页面有明确的设计参照，而不是"自由发挥"
- 快速对齐品牌视觉，省去反复调 prompt 描述风格
remotion
用 React 写视频。已有 Remotion 项目时，可用当前技能补充其工作方式——规范动画参数、素材管理和渲染配置。
npx skills add remotion-dev/skills --skill remotion-best-practices使用： /remotion-best-practices 帮我做一个 30 秒的产品介绍视频
更多教程：Remotion 视频生成案例 · Skills + Remotion 自动做视频
hyperframes
用 HTML + CSS 写视频，渲染成确定的 MP4。和 Remotion 的差别是：Remotion 用 React，HyperFrames 用普通 HTML，可以沿用 HTML/CSS 的制作方式。
先装核心路由，让 /hyperframes 按任务再拉工作流。根据安装器当前核心选项选择，需要时再补充。
npx skills add heygen-com/hyperframes使用： /hyperframes 做一个 10 秒产品介绍视频，标题淡入，配背景音乐
已经有 React 视频项目要迁过去，再用 /remotion-to-hyperframes。Codex 里也可以直接装 HyperFrames 插件。
下一步
- 想要大厂级视觉参考？→ awesome-design-md 品牌的 DESIGN.md 一键下载
- 想用 Skill 做高保真原型？→ 花叔 huashu-skills 内置设计方向顾问
- 产品经理做原型？→ 产品经理 Skill 推荐
- 想系统化设计流程？→ 创建自定义 Skill