Anthropic 开源了一个设计技能，AI 写的前端不一个样了

之前关于前端设计的技能也介绍过几篇文章：

Lazyweb 免费的 25.7 万截图库｜让 AI 写出好看的前端页面

开源设计工具 Penpot：为设计师、开发者和 AI 而生

今天介绍的是：Anthropic 的官方技能库里一个叫 Frontend Design 的技能。

它的设计理念：强制 Claude 在写代码之前，先把设计语言定下来。

用 AI 写过前端就知道为什么需要这东西。

就是最开始给你的感觉很惊艳，AI 能替代设计和前端了。

但是生成过一套两套之后，你发现可能它总是来回那几种风格。

用这个技能就可以做到每次不同风格，而且可以很有设计感。

第一步"设计计划"。

先定四个东西：色板（4到6个精确色值）、字体（展示字体和正文字体各一套）、布局概念、签名元素（这个页面唯一让人记住的东西）。

第二步"自我审查"。

根据第一步的设计计划反问：换个产品描述，我会不会也得出一样的方案？是的话推倒重来。

确认方案真正独特了，才开始实现。

代码里的每个颜色、每个字体必须能追溯到前面定的 token。

这个步骤就是在模仿人类设计师的工作流程：先 mood board，再 style guide，最后打开 Figma。

SKILL.md 里还直接设置了 AI 设计的三大套路：

暖奶油底加衬线体加陶土红、纯黑底配荧光绿、报纸式细线多栏。

还有好用的几条约束：

别上来就搞"大数字加小标签加渐变背景"的俗套，那是模板，大部分场景不需要。

排版别当搬运工用。

展示字体和正文字体怎么搭、字重间距怎么排，这些本身就应该让人记住。

编号标记（01/02/03）只在内容真是序列的时候用，不是装饰品。

动效要么不做，要做就做一次编排好的加载序列。

散装 hover 效果越多越像 AI 写的。

按钮上的字说清楚点了之后会发生什么。

错误提示说问题在哪、怎么修，不道歉。

空状态是叫人行动，不是渲染情绪。

下面的演示视频里，同样的需求，加上这个技能前后差距很大。

不加：标准 SaaS landing，渐变 hero、三列卡片、CTA 按钮，很俗套。

加上 brutalist：粗犷排版、高对比黑白、不规则网格，有设计感。

加上 editorial：杂志感标题、大量留白、字体层次清晰。

加上 retro-futurist：霓虹色、几何元素、80 年代科幻感。

把 Anthropic 官方技能库 clone 到 Claude Code 目录就行。

https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md

不止 Claude Code，Cursor、Codex、Gemini CLI、OpenCode 等 15 个以上的工具都能用。

用法简单：描述你要的网站，选个风格（brutalist / editorial / retro-futurist / luxury / maximalist），Claude 按那套设计语言生成 HTML、CSS、JS 或 React、Vue 组件。

以前让 AI 写前端，它偷偷帮你做了设计。现在你可以先看它的设计计划，再决定要不要写代码。

Frontend Design ：github.com/anthropics/skills

都说到前端设计了，末尾再推荐给朋友们两个最热门的 AI Code 工具皮肤。

给你的 Codex 和 WorkBuddy 换一个漂亮的外观。

Codex：https://github.com/Fei-Away/Codex-Dream-Skin

先克隆仓库。

macOS：

cd macos ./scripts/install-dream-skin-macos.sh --no-launch ~/.codex/codex-dream-skin-studio/scripts/switch-theme-macos.sh \ --id preset-romantic-rose

Windows 使用本地主题仓库与系统托盘，并会预置同一套「桥本有菜」。

powershell -ExecutionPolicy Bypass -File .\windows\scripts\install-dream-skin.ps1 powershell -ExecutionPolicy Bypass -File .\windows\scripts\start-dream-skin.ps1

粉系定制

财神版：

人民版：

红白科幻

WorkBuddy ：

https://github.com/cdredfox/workbuddy-skin-studio

安装方式：

用这个开源项目：https://github.com/cdredfox/workbuddy-skin-studio 帮我更换 WorkBuddy 的主题

黑色风情：

深色主题 · 原神星夜

你用什么前端设计？欢迎评论区留言。

-END-