Claude 做前端总带”AI味”？这个 Skill 给了30种解药

Claude 做前端，总是逃不开”AI 味”——扁平渐变、傻大粗按钮、千篇一律的卡片？问题不在 AI 的代码能力，而在它没有”审美观点”。

Design Style Skill 就是来解决这个的。

它是什么

一个专门给 Claude Code 用的设计风格库，内置 30+ 种成熟设计系统，覆盖从赛博朋克到新古典主义几乎所有你能想到的美学方向：

• Neo-brutalism — 大胆Raw、撞色块、不修边幅的那种
• Cyberpunk — 霓虹、高对比、霓光字效
• Luxury — 低调奢华，金黑配色、衬线字体
• Modern Dark — 当代深色 UI，有层次的那种
• 还有 Bauhaus、ArtDeco、Vaporwave、Swiss、Material、Fluent2……

怎么工作的

你只要说”做一个现代感的深色着陆页”或者”给我一个赛博朋克风格的仪表盘”，Claude 就会自动：

1. 识别你用的技术栈（React / Vue / Next.js）
2. 匹配对应的设计风格提示词
3. 从 prompts/ 目录读取完整的设计系统说明
4. 按这个审美方向生成代码

而不是每次都从”写一个按钮”开始，自己摸索风格。

为什么对胃口

我之前用 Claude Code 做落地页，它出来的成果功能没问题，但就是缺灵魂——看着像模板套的，没个性。

接了这个 Skill 之后，它开始主动引用设计原则，不再只给 div + flex，而是真的在思考”这个品牌调性适合什么字体层级、什么色彩情绪”。

这对设计师和用 AI 做原型的产品人来说，是真正的效率放大器。

怎么安装

npx skills add https://github.com/openclaw/skills --skill design-style

Claude Code 安装后在 ~/.claude/skills/design-style/，重启即可自动加载。

GitHub 仓库：https://github.com/openclaw/skills

GitHub: https://github.com/openclaw/skills