Claude Code 装上这个 Skill，AI 生成界面终于不像”AI 做的”了

Claude Code 里的设计师，居然比很多实习生还靠谱——不是因为它会画图，而是因为它真的懂设计。

今天挖到一个让我眼前一亮的 Skill：UX Designer Skill。作者是 dennytosp，基于 Anthropic 官方 Agent Skills 规范写了一套完整的 UI/UX 设计指南，专门给 Claude Code 用。安装之后，Claude 就不再是那个满屏 purple gradient + Inter 字体、一股”AI味儿”的生成器了——它开始像一个真正的设计师一样思考。

🎨 它解决了什么问题？

现在用 AI 生成界面实在太容易”翻车”了：要么颜色辣眼睛，要么排版挤成一团，最要命的是动不动就抄 iOS/Android 的通用设计语言，做出来的东西跟市面上一万个产品撞脸。

这个 Skill 的核心思路是：让 AI 先学会”不做什么”。它明确要求 Claude 在动手之前必须先问用户——颜色、字体、布局，改任何东西都要得到确认才能动。这种”协作式设计决策”机制，从根本上避免了 AI 自说自话、强行改造的问题。

🧩 技术细节

这个 Skill 采用了渐进式披露（Progressive Disclosure）架构，主文件只有 SKILL.md，里面放触发规则和核心指令；当需要具体技术细节时——比如响应式布局或无障碍标准——Claude 才会加载对应的分文件：

• RESPONSIVE-DESIGN.md：移动优先的响应式策略、触屏友好界面、断点设计模式
• ACCESSIBILITY.md：WCAG 2.1 AA 合规指南、语义化 HTML、ARIA 属性、键盘导航、屏幕阅读器兼容性

这意味着主上下文不会被大量技术细节撑爆，按需加载，Token 消耗也更低。

✨ 设计理念亮点

最让我认同的是它的审美主张——明确禁止了这些”AI 设计癌”特征：

• ❌ 通用 SaaS 蓝、液滴玻璃效果、模仿 Apple 的圆角
• ✅ 独特的色彩搭配、有思考的字体排版、定制化视觉语言

当前内置的设计偏好是：无阴影、无渐变、无玻璃效果，干净克制的视觉风格，以字体和色彩为核心竞争力。

🔧 怎么用

把仓库克隆到本地：

git clone https://github.com/dennytosp/nextjs-claude-design-skill ~/.claude/skills/ux-designer

然后在 Claude Code 里直接开始对话就行。比如问它：

• “帮我设计一个注册页面的配色方案”
• “这个导航结构合理吗？”
• “怎么做才能通过 WCAG AA 无障碍审核？”

Claude 会自动激活这个 Skill，开始以专业设计师的思维跟你协作——而不仅仅是生成代码。

📦 适合谁用

如果你正在用 Claude Code 做前端/全栈开发，这个 Skill 强烈建议装一个。尤其是：

• 对审美有要求，不想 UI 看起来像 AI 批量生产的
• 项目有无障碍合规要求（WCAG）
• 想建立统一的设计语言，不想每次都重新定义颜色字体

2 stars 不算高，但它代表了一种设计哲学的觉醒——AI 不只是代码生成器，也可以是真正意义上的设计搭档。

GitHub：https://github.com/dennytosp/nextjs-claude-design-skill

GitHub: https://github.com/dennytosp/nextjs-claude-design-skill