Claude Skills · 设计

最好用的网站与 UI 设计 Claude skill

设计 skill 是一个 SKILL.md 文件，教 Claude Code（以及 Codex、Cursor 等 agent）怎么做设计：选什么颜色和字体，避开哪些一看就是 AI 做的默认样式，交付之前又该怎么检查效果。没有它，agent 往往会交出千篇一律的渐变加卡片页面。下面是 2026 年值得安装的设计 skill、各自最擅长什么，以及怎么安装，信息都来自各项目自己的仓库。

开始使用 对比这些 skill

快速推荐

  • 做新的落地页或公司官网：Taste Skill。它会先定设计方向，用真实照片，交付前还会在浏览器里按四种宽度检查页面。
  • 打磨已有的 UI：Impeccable（提供 polish、critique、audit 等命令，外加基于规则的 AI 味检测器）或 unslop（按顺序修间距、颜色、图标、文案和字体）。
  • 想要 Anthropic 出品的稳妥默认选项：官方 skill frontend-design，帮你避开千篇一律的 AI 设计。
  • 为任意平台挑风格、配色和字体：UI UX Pro Max，一个覆盖网页、移动端和桌面端的可搜索设计数据库。
  • 动效和细节：Emil Kowalski 的 skill。
  • 按无障碍和 UX 规则审查代码：Vercel 的 web-design-guidelines。

网站与 UI 设计 skill 对比

Star 数和许可证来自 2026 年 11 月 8 日的 GitHub API，已取整。包含多个 skill 的仓库，Star 数按整个仓库计算。

Skill最适合支持的工具Star许可证
frontend-design（Anthropic）为任何新 UI 做出有辨识度的设计；先规划一套 token 体系Claude Code、Claude.ai~189k（整个仓库）Apache 2.0
UI UX Pro Max网页、移动端和桌面端的风格、配色、字体搭配和 UX 规则Claude Code、Cursor、Codex 及另外约 20 种~147kMIT
Taste Skill公司官网和营销网站，在真实浏览器里检查效果Claude Code、Codex、skills CLI~112kMIT
Impeccable评审和打磨已有界面；AI 味检测器Claude Code、Codex、Cursor 等~105kApache 2.0
Emil Kowalski 的 skill动画、打磨和组件细节通过 skills CLI 支持任意 agent~54kMIT
web-design-guidelines（Vercel）按 100 多条无障碍和 UX 规则审查 UI 代码通过 skills CLI 支持任意 agent~34k（整个仓库）MIT（据 README）
shadcn在 React 应用里正确使用 shadcn/ui 组件通过 skills CLI 支持任意 agent~128k（整个仓库）MIT
Huashu Design（花叔）一句提示词生成网页、App 原型、演示文稿和动效；用中文写成Claude Code、Cursor、Codex 等~29kMIT
unslop一轮一轮把 AI 味的 UI 改成真正经过设计的界面Claude Code、Codex~11kCC BY 4.0
Stitch skills（Google）先在 Stitch 里设计，再构建 React 或 React NativeClaude Code、Cursor、Codex；需要 Stitch MCP~9kApache 2.0
Figma skills把 Figma 设计稿转成代码，以及在 Figma 里搭建设计系统（beta）Claude Code、Cursor；需要 Figma MCP~2kFigma Developer Terms

如何安装和使用设计 skill

  1. 装一两个就够，别全装

    几个都想主导设计方向的 skill 会互相打架。挑一个负责设计的（frontend-design、Taste Skill 或 UI UX Pro Max），需要的话再加一个负责审查的（Impeccable、unslop 或 web-design-guidelines）。

    # Anthropic's official frontend-design (Claude Code)
/plugin install frontend-design@claude-plugins-official

# Taste Skill
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

# Impeccable
npx impeccable install

# UI UX Pro Max (Claude Code, Cursor, Codex and more)
npm install -g ui-ux-pro-max-cli && uipro init --ai claude

# unslop (Claude Code)
git clone https://github.com/heydamir/unslop
mkdir -p ~/.claude/skills && cp -r unslop/skills/unslop ~/.claude/skills/

  2. 把需求讲清楚

    说明页面是做什么的、给谁看，再给出一两个你喜欢的网站。这些 skill 大多会先问设计方向，需求写得多具体，结果就有多具体。

  3. 让它自己检查

    Taste Skill 会按四种宽度渲染页面，并运行收尾检查（finish gate）；Impeccable 的检测器用 npx impeccable detect src/ 跑 62 条规则。把这些检查开着，截图也要自己看一遍。

  4. 把结果存成设计系统

    好几个 skill 都会写一份 DESIGN.md（Impeccable、Taste Skill、Stitch）。把它留在仓库里，之后的会话和其他 agent 就会沿用同样的颜色、字体和间距。参见 CLAUDE.md 指南。

来源：Anthropic 的 frontend-design skill

安装前需要知道的事

  • 有些 skill 会添加 hook 或下载引擎：Impeccable 会安装命令 hook，并默认开启遥测（设置 DO_NOT_TRACK=1 即可关闭）；Taste Skill 以 Stop hook 的形式运行收尾检查，需要 Node 22+ 和 Chrome。
  • 据 Taste Skill 的 README，完整构建一次可能要 30–45 分钟，消耗几十万 token。
  • UI UX Pro Max 需要 Python 3，另有付费高级版；开源的 skill 采用 MIT 许可。
  • unslop 采用 CC BY 4.0：复用它的文字时要注明作者。别把它和同名、但针对文字的仓库搞混。
  • Stitch 和 Figma 的 skill 需要各自的 MCP 服务器和账号；Figma 的画布写入功能还在 beta 阶段，免费席位有限制。
  • 我们团队的经验：我们用 Taste Skill 做过 Crewmark 自己的产品界面，也给 unslop 做过一条短视频。我们的姊妹项目 pretty-ui 是一个更新、更小的 skill，做的是同一件事。做手机 App 请看最好用的移动 App 设计 Claude skill。
用 Crewmark

给这些 skill 配一位每天上班的设计师

一个 skill 能让一个会话的设计做得更好。Crewmark 把 Claude Code 或 Codex 变成一位 AI UI 设计师：有目标（比如每周打磨好三个界面）、有工作时间，还有一块待修界面的看板；它按心跳醒来，提交附带前后对比截图的 Pull Request。

  1. 招聘 UI 设计师岗位

    岗位说明、目标和日常流程都已配好；参见 AI UI 设计师 和 AI App 设计师。

  2. 把设计 skill 装进仓库

    员工会像任何会话一样，使用 .claude/skills 里的 skill。

  3. 评审 Pull Request，而不是写提示词

    批准你喜欢的界面；要改的地方在看板上提出来。阅读什么是 AI 员工。

Claude 设计 skill 常见问题

做网站设计，最好用的 Claude skill 是哪个？

做新网站，用 Taste Skill 或 Anthropic 的 frontend-design；打磨已有 UI，用 Impeccable 或 unslop；跨平台挑风格和配色，用 UI UX Pro Max。大多数人会装一个负责设计的，再装一个负责审查的。

有官方的 Claude 设计 skill 吗？

有。Anthropic 在 anthropics/skills 里发布了 frontend-design，也在 claude-plugins-official 里以插件形式提供。它采用 Apache 2.0 许可，重点是避开千篇一律的 AI 设计默认样式。

怎样在 Claude Code 里安装 skill？

用插件市场（先 /plugin marketplace add owner/repo，再 /plugin install）、skills CLI（npx skills add owner/repo），或者把 skill 的文件夹复制到 .claude/skills/。

这些 skill 能在 Codex 和 Cursor 里用吗？

大多数可以：UI UX Pro Max、Impeccable、Taste Skill 和 Huashu Design 都写明了 Codex 的用法，skills CLI 也能把 SKILL.md 格式的 skill 装进 Cursor、Codex 和另外约 75 种 agent。

Claude 设计 skill 免费吗？

这里列出的 skill 都是开源的（MIT、Apache 2.0 或 CC BY 4.0）。围绕它们的部分产品要付费：UI UX Pro Max 有付费高级版，Stitch 和 Figma 也需要各自的账号。

Impeccable 和 Taste Skill 有什么区别？

Taste Skill 用来做新的公司官网和营销网站，并在真实浏览器里检查；Impeccable 最擅长处理已有的界面，提供评审、审计和打磨命令，以及基于规则的 AI 味检测器。

已于 2026 年 11 月 8 日对照各 skill 的 GitHub 仓库和 GitHub API 查证。

给你的看板配一位设计师，用上你信得过的 skill。

Crewmark 把 Claude Code、Codex、DeepSeek Harness 和 OpenCode 会话变成有岗位、目标、工作时间和心跳的 AI 员工。

开始使用