设计师 Skill 推荐

AI 写前端有个老毛病：功能都对，但看着就是不对劲。

你大概见过这种页面——Inter 字体、紫色渐变标题、卡片套卡片、低对比度灰色标签、按钮颜色像是随机抽的。不是 CSS 写错了，是 AI 根本没有"审美"这个概念。它在模仿训练数据里最常见的页面模板，所以所有 AI 生成的界面都长一个样。

有人管这个叫"AI slop"——AI 汤，看着像那么回事，但没有辨识度。下面的 Skill 要解决的就是这个问题。

一览表

impeccable：UI 质量提升。安装：npx skills add pbakaus/impeccable -y。使用技巧：让它审查一个已经生成出来的页面，不要只让它凭空讲审美。
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：风格、布局和交互优化。安装：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。使用技巧：说明动效、色彩和输出媒介。
remotion：Remotion 视频动画、素材和渲染规范。安装：npx skills add remotion-dev/skills --skill remotion。使用技巧：给出时长、画幅、节奏和交付格式。

impeccable 是整本手册里最被低估的 Skill 之一。它不帮你写代码，它帮你改审美。

它的核心机制是两组规则：

23 条设计命令（告诉 AI 要做什么）——比如"用黑白灰做主色，彩色只用来表示状态"、"间距用 4px 倍数"、"不要在卡片里套卡片"。

25 条反模式规则（告诉 AI 不要做什么）——比如"不要用紫色渐变标题"、"不要用低对比度的灰色标签"、"不要让按钮颜色看起来像随机选的"。

npx skills add pbakaus/impeccable -y

使用： /impeccable 帮我看一下这个页面的 UI 设计有什么问题

装上之后，Claude 输出的页面会明显"去 AI 味"：配色干净、间距有节奏、信息层级清晰。不会一夜之间变成设计大师的作品，但至少不再是那种"一看就是 AI 做的"页面。

Anthropic 官方 Skill。给一段描述，快速产出可上线的页面或组件。适合快速原型、落地页、仪表盘等场景。

npx skills add anthropics/skills --skill frontend-design

使用： /frontend-design 做一个 SaaS 后台 Dashboard，左侧导航栏、顶部数据卡片、中间表格和图表

Vercel 出品，100+ 条设计规则覆盖可访问性、性能、UX 和视觉。比 impeccable 更偏向"规范"，比 frontend-design 更偏向"原则"。适合在做正式项目时挂上，作为 AI 输出的质量门槛。

npx skills add vercel-labs/agent-skills --skill web-design-guidelines

使用： /web-design-guidelines 帮我检查这个页面的设计规范

如果你对 UI 的要求不只是"过得去"，这个 Skill 会让你更接近专业设计师的输出——提供风格方向、布局方案和交互细节优化。

npx skills add nextlevelbuilder/ui-ux-pro-max-skill

使用： /ui-ux-pro-max 帮我优化这个注册页面的交互流程

生成静态视觉稿：海报、社交媒体图片、品牌素材。给一段文案和风格方向，输出高质量的静态设计。

npx skills add anthropics/skills --skill canvas-design

使用： /canvas-design 做一张产品发布海报，科技感风格

用代码生成算法艺术作品——粒子系统、几何图形、分形图案。适合需要独特视觉风格的项目。

npx skills add anthropics/skills --skill algorithmic-art

使用： /algorithmic-art 生成一个粒子系统的动态艺术图案

用 React 写视频。Remotion 已经是"程序员做视频"的首选工具，这个 Skill 让它更好用——规范动画参数、素材管理和渲染配置。

npx skills add remotion-dev/skills --skill remotion

使用： /remotion 帮我做一个 30 秒的产品介绍视频