Claude Code 的 Frontend Design 技能：让 AI 做网页告别“紫色渐变创业风”

AI 做网页最烦人的点是什么？

不是代码跑不起来。

而是它太爱输出那种“紫色渐变 + 毛玻璃卡片 + 巨大圆角 + 模糊阴影”的初创公司官网风。

你让它做一个 SaaS 落地页，它给你紫色渐变。

你让它做一个财务后台，它也给你紫色渐变。

你让它做一个律师事务所官网，它还敢给你紫色渐变。

真是离谱到有点稳定。😅

Anthropic 官方出了一个 Claude Code 技能：Frontend Design。

它的作用很明确：让 AI 在写前端代码前，先把审美方向想清楚。

不是上来就开写 div。

而是先决定：

• 这个页面应该是什么气质？
• 用什么字体？
• 配色要克制还是张扬？
• 卡片密度多高？
• 动效该轻还是明显？
• 信息层级怎么排？

一句话：让 AI 从“会写页面”变成“像个懂设计的人再写页面”。

Frontend Design 是什么？

Frontend Design 是 Anthropic 官方维护的一个 Claude Code 技能。

它不是一个单独的网页生成器，也不是那种点几下出模板的玩具。

它更像是给 Claude 装了一个“前端审美插件”。

你描述网站或组件需求后，它会先帮你确定视觉风格，再生成对应的前端实现。

它能处理这些东西：

• 页面布局
• 色彩系统
• 字体搭配
• 视觉层级
• 组件构图
• 动效节奏
• 响应式适配
• 整体风格统一

重点是：它会减少那种 AI 默认审美。

也就是大家已经看腻的“紫色渐变初创风”。

适合谁用？

如果你属于下面几类人，这个技能很值得装上。

1. 独立开发者

你会写功能，但 UI 总差一口气。

后台能跑，页面像内部测试版。

这时候让 Claude 帮你先定风格，再写页面，会省很多来回修改的时间。

比如你正在做：

• AI 工具官网
• 个人作品集
• SaaS 落地页
• Chrome 插件介绍页
• 小程序管理后台

它能让你的第一版页面别那么“程序员味”。

2. 前端工程师

你不一定缺代码能力。

你缺的是快速出一版“能给产品和老板看的稿”。

用它做首版很舒服。

你可以让 Claude 先生成结构、样式和交互，再自己精修。

别从空白页开始硬憋。

3. 产品经理 / 设计协作者

你可能不会写复杂前端，但你能描述需求。

比如：

我想要一个面向 B 端采购系统的仪表盘，不要花哨，要专业、密度高、信息清楚。

Frontend Design 这类技能就能把抽象描述变成可视化页面。

拿去沟通，比空口讲半小时强多了。

安装方法

安装很简单。

在终端执行：

npx skills add github.com/anthropics/skills --skill frontend-design

装好后，它会在支持的工具里可用。

官方技能库是开源的，由 Anthropic 维护。

根据公开信息，这个技能所在仓库已经有大量关注，安装量也很夸张。能火起来不奇怪，AI 前端审美这事，大家真的被折磨太久了。

支持哪些工具？

这个技能不是只能在 Claude Code 里玩。

它兼容多种开发工具和 CLI 工作流，包括：

• Claude Code
• Cursor
• Codex
• Gemini CLI
• OpenCode
• 其他支持 Skills 工作流的工具

也就是说，你装一次，后面多个会话都能用。

不用每次新项目都重新教 AI：

拜托你不要再用紫色渐变了。

这句话终于可以少说几遍。😂

基础使用流程

使用方式可以压缩成 4 步。

安装技能

npx skills add github.com/anthropics/skills --skill frontend-design

描述你要做的网站或组件

比如：

我要做一个面向中小企业老板的现金流管理工具官网。
核心卖点是：自动同步银行流水、预测未来 90 天现金缺口、生成老板看得懂的报表。
请帮我设计首页。

指定风格方向

别只说“好看”。

“好看”太虚了。

你要给它方向。

比如：

风格要求：
- 专业、可信，不要科技感过重
- 适合 35 岁以上企业主
- 色彩克制，偏金融工具气质
- 页面要有强转化，不要像博客
- 不要紫色渐变，不要毛玻璃

让 Claude 输出代码

你可以要求它直接生成：

• HTML + CSS
• React 组件
• Next.js 页面
• Tailwind CSS 页面
• Vue 组件
• shadcn/ui 风格组件

比如：

请使用 Next.js + Tailwind CSS 实现。
要求组件结构清晰，移动端适配完整。

一条好用的提示词模板

直接复制这段，用的时候改里面的信息。

请使用 frontend-design 技能帮我设计并实现一个页面。

项目背景：
【这里写你的产品、网站、业务】

目标用户：
【这里写具体人群，比如独立开发者、财务经理、健身教练、跨境卖家】

页面目标：
【比如获取预约、引导注册、展示产品价值、提高购买转化】

内容模块：
- Hero 区域
- 核心卖点
- 产品截图展示
- 使用流程
- 用户评价
- 价格方案
- FAQ
- CTA 区域

视觉风格：
【比如克制、专业、日式留白、杂志感、企业级、极简黑白、高端消费品风】

限制条件：
- 不要紫色渐变
- 不要毛玻璃滥用
- 不要模板感太强
- 不要使用过多阴影
- 不要所有卡片都大圆角

技术要求：
使用 【React / Next.js / Vue / HTML + CSS / Tailwind CSS】 实现。
代码要清晰，可直接复制运行。

风格怎么选？别再只说“高级感”了

很多人用 AI 做设计，最大的问题是描述太空。

“高级感”是什么？

有人觉得黑金高级。

有人觉得大留白高级。

有人觉得苹果官网高级。

有人觉得瑞士网格高级。

你不说清楚，AI 只能拿默认套路糊你。

这里给你一组可直接用的风格词。

SaaS 官网

适合 AI 工具、B 端产品、开发者工具。

风格：现代 SaaS 官网，信息清晰，转化导向，配色克制，按钮突出，少用装饰。
参考气质：Linear、Vercel、Stripe，但不要照抄。

企业后台

适合 CRM、ERP、财务系统、数据平台。

风格：企业级管理后台，信息密度高，层级清楚，表格可读性强，色彩用于状态区分，不追求花哨。

高端服务官网

适合咨询、律师、财税、建筑设计。

风格：高端服务业官网，大量留白，字体稳重，配色低饱和，强调信任感和专业感。

消费品牌落地页

适合咖啡、香氛、服饰、家居。

风格：生活方式品牌，视觉温暖，图片区域突出，排版有杂志感，文案短而有情绪。

开发者工具页面

适合 API、SDK、数据库、部署工具。

风格：开发者友好，暗色或浅色均可，代码块清晰，强调速度、稳定性和文档入口。

示例：做一个 AI 简历优化工具首页

假设你要做一个 AI 简历优化工具。

不要这样说：

帮我做一个 AI 简历网站，要好看。

这类提示词大概率会产出一张“紫色渐变 AI 官网”。

换成这样：

请使用 frontend-design 技能设计一个 AI 简历优化工具首页。

产品定位：
帮助求职者把普通简历改成更适合投递互联网、金融、咨询岗位的版本。

目标用户：
应届生、转行求职者、工作 1-5 年的职场人。

页面目标：
让用户上传简历并开始免费分析。

风格要求：
- 清爽、可信、有求职服务的专业感
- 不要强科技感，不要紫色渐变
- 使用浅色背景，突出上传入口
- 页面要让用户感觉：这个工具靠谱，不会乱改我的简历

页面模块：
- 顶部导航
- Hero 区域，包含上传简历 CTA
- 三个核心能力：岗位匹配、表达优化、ATS 通过率检查
- 简历优化前后对比
- 使用步骤
- 用户评价
- FAQ
- 底部 CTA

技术要求：
使用 Next.js + Tailwind CSS。
输出完整页面代码。

这类描述就很具体。

Claude 不需要猜你的产品气质。

它会更容易做出像样的页面。

让页面更像“人做的”：加这些约束

AI 页面常见问题不是丑到不能看。

而是太像 AI。

你一眼就能看出来：

• 每个区块都差不多高
• 每张卡片都一个样
• 每个标题都特别满
• 每个按钮都像模板
• 每个图标都在凑数

你可以在提示词里加这些约束。

请避免 AI 模板感：
- 每个区块的节奏要有变化，不要全部等高卡片
- CTA 不要重复太多次
- 图标只在真正有帮助的地方使用
- 标题文案要短，不要堆概念
- 页面留白要有呼吸感，但不要空到像没内容
- 移动端不要简单缩小，要重新考虑阅读顺序

这段非常有用。

尤其适合做首页和落地页。

想让它更准？给它“反向审美”

很多人只告诉 AI 想要什么。

更有效的做法是：告诉它你讨厌什么。

比如：

不要使用以下风格：
- 紫色、蓝紫色大面积渐变
- 毛玻璃背景
- 过度发光的按钮
- 3D 小人插画
- 夸张的圆角卡片
- 无意义的抽象波浪背景
- 每个模块都带阴影

这很关键。

因为 AI 的默认审美库里，这些东西出现频率太高了。

你不拦，它就敢用。

常见技术组合怎么要求？

你可以根据项目栈直接指定输出格式。

React + Tailwind

请用 React + Tailwind CSS 实现。
组件拆分为 Header、Hero、Features、Pricing、FAQ、Footer。

Next.js App Router

请用 Next.js App Router 实现，输出 app/page.tsx。
样式使用 Tailwind CSS。

Vue

请用 Vue 3 单文件组件实现，输出完整 .vue 文件。
使用 scoped CSS。

纯 HTML + CSS

请输出一个可直接打开的 HTML 文件，CSS 写在 style 标签里。
不要依赖构建工具。

shadcn/ui

请使用 shadcn/ui 的设计语言实现。
保留足够的自定义样式，不要像默认模板。

避坑清单

用 Frontend Design 时，别犯这些错。

坑 1：只说“做得高级一点”

这句话没用。

换成：

使用高端咨询公司官网风格：大留白、低饱和配色、稳重字体、少装饰、强调信任。

坑 2：不说目标用户

给大学生看的页面，和给企业 CFO 看的页面，完全不是一回事。

你要写清楚：

• 谁会看这个页面
• 他们关心什么
• 他们怕什么
• 他们下一步要做什么

坑 3：模块太多

AI 很听话。

你让它塞 12 个模块，它真会塞。

结果页面像信息垃圾场。

首页建议先控制在 6～8 个模块。

做出来后再加。

坑 4：不限制视觉套路

如果你不说“不要紫色渐变”，它可能又回去了。

别不好意思。

直接写进限制条件。

坑 5：一次性要求太完美

更好的做法是分两轮。

第一轮：让它定设计方向和页面结构。

先不要写代码。请给我 3 个视觉方向，每个方向说明配色、字体、布局和适合原因。

第二轮：选一个方向再写代码。

采用方向 2，实现完整页面。

这样产出的质量通常更稳。

推荐工作流：先审美，再代码

别一上来就让 Claude 写完整页面。

咱们可以这么走。

第一步：让它出 3 个风格方向

请基于我的产品，给出 3 个不同的首页视觉方向。
每个方向包含：
- 适合的用户感受
- 配色建议
- 字体气质
- 布局特点
- 不适合的地方
先不要写代码。

第二步：选方向并要求细化

我选择方向 1。
请细化首页结构，给出每个模块的标题、文案、布局说明和交互建议。

第三步：再生成代码

按照刚才确认的结构，使用 Next.js + Tailwind CSS 实现完整首页。
要求移动端适配，代码可直接运行。

第四步：让它自查

请检查这个页面是否存在 AI 模板感。
重点检查：配色、卡片重复、按钮层级、移动端阅读顺序、文案空泛问题。
给出修改版。

这套流程比“一句话生成网页”靠谱太多。

小结

Frontend Design 解决的不是“AI 会不会写前端”。

它解决的是更现实的问题：AI 写出来的页面能不能看、像不像一个有审美的人做的。

如果你经常用 Claude Code、Cursor 或其他 AI 编程工具做页面，这个技能值得装。

记住一个核心原则：

不要只让 AI 写代码。先让它定风格、定结构、定视觉边界。

审美方向定住了，代码才不会一路跑偏。

紫色渐变可以休息一下了。