frontend-design 是 Anthropic 官方推出的一个前端设计技能。它的核心作用只有一个：让 AI 生成的前端页面不再千篇一律。
如果你用过 AI 写前端，大概率遇到过这种情况——功能实现了，布局也没错，但一看就是 AI 做的：白色背景、紫色渐变、Inter 字体、圆角卡片、三列布局。不是不能用，但“太像 AI 了”，没有个性，没有设计感。
frontend-design 要解决的就是这个问题。它不是一个 UI 组件库，也不是一个设计工具——它是一个设计工作流插件，强制 AI 在写代码之前先把设计语言定下来。先想清楚“这个页面长什么样、为什么长这样”，再动手写代码。
这个技能来自 Anthropic 官方技能库，已在 skills.sh 上线。它适用于 Claude Code、Cursor、Codex、Gemini CLI、Windsurf 等 15 个以上的 AI 智能体。
主要功能
1. 强制设计思维前置
frontend-design 最核心的机制是：在写任何代码之前，先完成一份设计计划。AI 必须先回答四个问题：
代码里的每个颜色、每个字体都必须能追溯到前面定的设计 token。这个流程模仿的是人类设计师的工作方式：先做情绪板，再定设计规范，最后才打开 Figma。
2. 自我审查机制
设计计划完成后，AI 会反问自己一句：“换个产品描述，我会不会也得出一样的方案？” 如果答案是“会”，说明方案还不够独特，推倒重来。确认方案真正有辨识度之后，才开始写代码。
3. 多样化的美学方向
frontend-design 提供了十多种明确的美学方向供选择：
极简主义（brutally minimal）
极繁主义混乱（maximalist chaos）
复古未来主义（retro-futuristic）
有机/自然（organic/natural）
奢华/精致（luxury/refined）
趣味/玩具般（playful/toy-like）
编辑/杂志风（editorial/magazine）
野兽派/原始（brutalist/raw）
装饰艺术/几何（art deco/geometric）
柔和/粉彩（soft/pastel）
工业/实用主义（industrial/utilitarian）
关键在于有意图地选择，而不是随机组合——大胆的极繁主义和精致的极简主义都有效。
4. 前端美学五大准则
frontend-design 在 SKILL.md 中详细规定了五条设计准则：
字体：选择漂亮、独特、有趣的字体。明确避开 Arial、Inter 这类泛用字体。搭配一套有辨识度的展示字体和一套精致的正文字体。
配色：用 CSS 变量保持一致性。大胆的主色配锐利的点缀色，效果远好于均匀分布、不敢用色的调色板。
动效：用动画做效果和微交互。一次精心编排的页面加载动效（带错落出现的时间延迟），比散落的 hover 效果更有感染力。滚动触发和悬停状态要做得出人意料。
空间构图：用非对称、重叠、对角线流动、打破网格的元素。要么用大量的留白，要么做有控制的密度。
背景与视觉细节：不要默认用纯色背景。用渐变网格、噪点纹理、几何图案、分层透明度、戏剧性阴影、装饰性边框、自定义光标和颗粒覆盖层来营造氛围和深度。
5. 明确禁止的“AI 套路”
frontend-design 直接在指令里列了一串“禁止清单”：
过度使用的字体（Inter、Roboto、Arial、system fonts）
俗套的配色方案（尤其是白色背景上的紫色渐变）
可预测的布局和组件模式
缺乏上下文特征的千篇一律设计
这些规则不是建议，是硬约束。
如何安装 frontend-design
前置条件
你不需要额外安装任何东西——frontend-design 通过 npx 运行。
安装命令
在终端中执行以下命令：
npx skills add https://github.com/anthropics/skills --skill frontend-design
这条命令会从 Anthropic 官方技能仓库中单独安装 frontend-design 技能。
安装过程
克隆 Anthropic 官方技能仓库
从仓库的 18 个技能中选出 frontend-design
询问你要安装到哪些 AI 智能体（Amp、Antigravity、Cline、Codex、Cursor、Gemini CLI、GitHub Copilot 等 45 个选项）
验证安装
安装完成后，通过以下命令确认：
npx skills list
应用场景
场景一：落地页和营销页面
这是 frontend-design 最常用的场景。你需要一个产品介绍页、活动报名页或品牌展示页，不希望它看起来像是从某个模板库里复制出来的。用 frontend-design，你可以指定风格方向——比如“野兽派”或“编辑杂志风”——AI 会按那个方向生成页面。
场景二：Dashboard 和应用界面
后台管理界面、数据看板、应用壳——这些页面功能性强，但设计往往被忽视。frontend-design 可以在保证功能完整的同时，让界面有明确的视觉层次和风格一致性。
场景三：老旧页面视觉升级
项目里有一些“能用但不好看”的老页面，想重做但没时间从头设计。把现有页面交给 AI，告诉它“用 frontend-design 帮我美化一下”，AI 会基于现有内容重新设计视觉方案。
场景四：快速探索视觉方向
在产品设计早期，想快速看看几种不同风格方向的效果。用 frontend-design 分别指定 brutalist、editorial、retro-futurist 等不同风格，几分钟内就能拿到多个可预览的方案。
场景五：设计系统搭建
不止做一个页面，而是想建立一套可复用的设计系统。frontend-design 生成的设计方案包含字体层级、颜色变量、间距节奏、布局逻辑和动效规则——这些本身就是设计系统的起点。
使用案例
案例一：从“白色背景+紫色渐变”到 brutalist 风格
一位开发者让 AI 做一个落地页，生成的结果是标准的“AI 模板风”：白色背景、紫色渐变、Inter 字体、三列卡片。
他安装 frontend-design 后，重新提了同样的需求，但加了一个词：“brutalist 风格”。这次 AI 没有直接写代码，而是先提交了一份设计计划——粗犷的排版、高对比的黑白配色、不规则的网格布局。确认计划后生成的页面，和之前完全是两个东西。
案例二：童话绘本生成器的界面美化
一个开发者在做“童话编剧与绘本生成器”项目，原有的前端界面是纯色浅底、橙色配灰白、大量使用 Emoji 图标、字体是微软雅黑。功能没问题，但“缺少设计，难以给用户视觉交互的美感”。
他安装了 frontend-design 后，对 AI 说“在原本前端的基础上进行美化，风格要温暖手工、暖色、柔和”。AI 按照 frontend-design 的工作流，先定了设计方向，然后重新生成了整套界面。
案例三：开源项目官网从“能用”到“能看”
一个开源项目的维护者要重新设计项目官网。他用 frontend-design 走了一遍完整流程：AI 先理解了项目的定位和受众，选定了一个大胆的美学方向，然后生成了完整的 HTML/CSS 页面。最终上线的官网和之前“能用但平庸”的版本相比，视觉质感提升明显。
案例四：三种风格，十分钟出三版方案
一个产品经理需要为一个 SaaS 产品做三种不同风格的 landing page 方案，用于内部评审。他用 frontend-design 分别指定了三个风格方向——editorial（杂志感）、retro-futurist（霓虹色+几何元素）、luxury（精致奢华）。
AI 每次都是先提交设计计划再生成代码。十分钟后，三套风格迥异、各具辨识度的页面方案摆在了评审会上。产品经理说：“以前找设计师出一版方案都要两天，现在十分钟出三版。”
总结
frontend-design 解决的是一个非常普遍但很少被正视的问题：AI 生成的前端页面太像 AI 生成的了。
功能完整、代码能跑，但“看一眼就知道是 AI 做的”——白色背景、紫色渐变、Inter 字体、圆角卡片。这种“AI 塑料感”不是因为 AI 不会设计，而是因为它没有被要求“好好设计”。
frontend-design 的本质，就是给 AI 装上一套设计师的工作方法：先想清楚再动手，有意图地做每一个视觉决策，避开所有“AI 默认选项”。
如果你受够了 AI 生成的“模板风”页面，frontend-design 可能是你装过的所有技能里，最能直接提升“成品观感”的那一个。
◯ 评论 0