# Web Design Engineer Skill **一个让 AI 生成网页从"能用"进阶到"惊艳"的 Agent 技能。** [English](./README.md) · [返回集合首页](../../README.zh-CN.md) ![Web Design Skill](https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design-skill.webp) --- ## 这是什么？ 这是一个面向 AI 编程代理（如 [Claude Code](https://docs.anthropic.com/en/docs/claude-code)、[Cursor](https://cursor.com) 以及其他支持 `SKILL.md` 格式的工具）的可复用 **Skill**（结构化系统提示词），能显著提升 AI 生成的 HTML/CSS/JavaScript 产物的设计品质。 它将 [Claude Design](https://www.anthropic.com/news/claude-design-anthropic-labs) 系统提示词中的核心设计理念提炼为一个开放、可移植、可自定义的技能文件，可以直接放进任何项目中使用。 ### 问题 现代大语言模型已经能根据简单的提示词生成功能完整的网页。但它们的输出总是趋向同一种审美：Inter 字体、蓝色主按钮、紫粉渐变、大圆角卡片、emoji 充当图标、编造的好评数据。技术上没问题，视觉上千篇一律。 ### 解决方案 这个 Skill 通过以下方式将**设计品位**注入 AI 的决策过程： - **反俗套规则** —— 一份明确的 AI 设计雷区清单 - **设计系统宣告** —— 强制 AI 在写代码之前，先用自然语言说清配色、字体、间距和动效选择 - **oklch 色彩理论** —— 基于感知均匀色彩空间的配色派生，取代随机 hex 值 - **精选字体 × 配色组合** —— 高品质起点，替代默认的 Inter + #3b82f6 - **占位符哲学** —— 用诚实的 `[icon]` 标记代替拙劣的 SVG 假图 - **五旋钮 Design Read** —— 把受众、产物、品牌和约束转成可见的构图变化 / 动效 / 密度 / 素材 / 品牌保真决策 - **保留契约的改版协议** —— 动手前区分 Extension、Preserve 与 Overhaul - **上下文化失败模式** —— 识别布局、内容、素材、动效与 Dashboard 的常见 AI 问题，同时保留合理例外 - **结构化工作流** —— 需求 → 上下文 → 校准后的设计系统 → v0 草稿 → 完整构建 → 验证 - **按需浏览器验收** —— 只有用户明确提出验收或浏览器测试时，才运行响应式 / 交互 / 运行时 QA harness --- ## 快速上手 ### 用于 Claude Code / Cursor / AI Agent 将本 Skill 目录复制到你的项目中： ``` your-project/ ├── .agents/skills/web-design-engineer/ # 或 .claude/skills/web-design-engineer/ │ ├── SKILL.md # 主技能文件 │ ├── agents/openai.yaml # 宿主展示信息与默认提示词 │ └── references/ │ ├── advanced-patterns.md # 代码模板库（slide engine / 设备框架 / 动效时间线 / 数据可视化） │ ├── block-library.md # 已实现可复用 Block 索引 │ ├── browser-acceptance.md # 仅在用户明确要求时执行的浏览器验收 harness │ ├── design-calibration.md # Design Read + 五旋钮 + 可选 image-first 分支 │ ├── design-directions.md # 设计方向顾问（6 学派，差异化 3 选 1 推荐） │ ├── failure-patterns.md # 上下文化 AI 设计失败模式与修复方式 │ ├── redesign-protocol.md # Extension / Preserve / Overhaul 审计与受保护契约 │ ├── style-recipes/ # 25 套有 anchor 的风格配方（按需读单文件，每个 anchor 一个 .md） │ │ ├── INDEX.md # 目录索引 + 3 张索引表 + 跨配方反模式 │ │ ├── linear.md / aesop.md / pentagram.md / ... # 25 个独立 recipe 文件 │ └── critique-guide.md # 5 维评分细则 + 常见问题清单 └── ... ``` 也可以从集合首页通过 Claude Code 插件市场一键安装 —— 参见[根目录 README](../../README.zh-CN.md#%E5%AE%89%E8%A3%85)。 当你的请求涉及可视化/交互式前端工作时，Agent 会自动启用此技能。 ### 覆盖范围 | 输出类型 | 示例 | |---|---| | 网页 & 落地页 | 营销页面、产品页、作品集 | | 交互式原型 | 带设备框架的可点击 App 模型 | | 幻灯片 | HTML 演示文稿（1920×1080，键盘导航） | | 数据可视化 | 基于 Chart.js 或 D3.js 的仪表盘 | | 动画 | CSS/JS 动效设计，时间线驱动的演示 | | 设计系统 | Token 探索、组件变体 | --- ## 工作原理 ### 校准式工作流 ``` 1. 理解需求 → 信息充足就干活，信息不足才提问 2. 获取设计上下文 → 代码 > 截图；现有项目先判断改动模式 3. 产出 Design Read → 五个旋钮把 brief 映射为可见决策 4. 宣告设计系统 → 配色、字体、间距、动效 —— 用 Markdown 说明，写代码之前 5. 尽早展示 v0 → 占位符 + 布局 + token；让用户提前纠偏 6. 完整构建 → 组件、状态、动效；在关键决策点暂停确认 7. 验证 → 默认轻量自检；仅在用户明确要求时运行浏览器 harness ``` ### 核心设计原则 **反 AI 俗套清单。** Skill 明确禁止以下模式： - 紫粉蓝渐变背景 - 带左侧彩色边框的卡片 - Inter / Roboto / Arial / Fraunces / system-ui 字体 - 用 emoji 充当图标 - 编造的数据、假 logo 墙、虚假好评 **oklch 色彩系统。** 在感知均匀的 oklch 色彩空间中派生颜色。相同的亮度值在人眼中看起来确实一样亮——HSL 做不到这一点，HSL 中亮度 50% 的黄色看起来比亮度 50% 的蓝色亮得多。 **精选起点。** 六套经过验证的配色 × 字体组合，覆盖常见场景： | 风格 | 主色 | 字体组合 | 适用场景 | |---|---|---|---| | 现代科技感 | 蓝紫 | Space Grotesk + Inter | SaaS、开发者工具 | | 优雅杂志风 | 暖棕 | Newsreader + Outfit | 内容平台、博客 | | 高端品牌 | 近黑 | Sora + Plus Jakarta Sans | 奢侈品、金融 | | 活泼消费 | 珊瑚 | Plus Jakarta Sans + Outfit | 电商、社交 | | 极简专业 | 青蓝 | Outfit + Space Grotesk | 仪表盘、B2B | | 手作温度 | 焦糖 | Caveat + Newsreader | 餐饮、教育 | **风格配方库（25 套有 anchor，渐进式加载）。** 当用户点名"Linear 风" / "Aesop 风" / "Pentagram 级排版"时，Agent 只需读 `references/style-recipes/.md` 单个文件（约 50 行）；目录索引、3 张索引表、跨配方反模式都在 `references/style-recipes/INDEX.md`（约 150 行）。整个目录从不一次性加载。25 套配方分布在 7 个学派（Direction Advisor 的 6 学派 + 一个只能通过直接点名 anchor 触达的 *Specialty / Genre* 学派）： | 学派 | 配方 | |---|---| | Editorial / 极简 | `apple-hig` · `muji-kenya-hara` · `aesop` · `dieter-rams-braun` · `monocle-magazine` | | 信息架构 | `pentagram` · `vignelli-swiss-helvetica` · `bloomberg-terminal` · `tufte-dataink` · `nyt-the-daily` | | 现代工具 / Builder SaaS | `linear` · `vercel-mesh` · `raycast` · `notion-pre-ai` | | 动效 / 实验 | `field-io` · `active-theory` · `resn-storytelling` | | 粗粝 / Brutalist | `are-na` · `bloomberg-businessweek-turley` · `balenciaga-post-2017` | | 温暖人文 | `mailchimp-freddie` · `stripe-press` · `headspace-meditation` | | 特定风格 / 年代 | `y2k-retrofuturism` · `mid-century-modern` | --- ## 风格配方画廊 Skill 自带 **25 套有名字的配方**，每套都对应到真实的品牌、工作室或设计师。目录中的每个配方都在 demo 画廊里有一个完整的整页作品 —— 不是共用模板、不是缩略图情绪板，而是每套配方本来就该长成的那种东西：Aesop 是药剂师产品页、Bloomberg Terminal 是交易工作站、Mid-Century 是 Saul Bass 海报、Y2K 是世纪之交的门户网站。按学派浏览下方卡片，挑一套气质契合你 brief 的配方，或者直接读 `references/style-recipes/.md` 的 spec 文件。点击任意预览图打开完整分辨率的 2:1 大图。 > 所有截图都是来自 [`demo/web-design-engineer-demo`](../../demo/web-design-engineer-demo/) 这个 React + Vite 画廊的真实渲染 —— 字体、配色、签名手法都和 spec 文件里一致。每个 demo 位于 `src/recipes/.tsx`。 ### Editorial / 极简 · 5 套 > 留白、考究的排版、安静的奢华 —— 药剂师、博物馆图录、硬件产品页。
apple-hig preview
apple-hig
SF Pro Display、慷慨留白、柔和阴影 —— Apple Store 的语气
适合 · 硬件产品页 · 设备发布 · 高端消费电子 		muji-kenya-hara preview
muji-kenya-hara
空作为画布、灰与纸、器物悬浮在空气中拍摄
适合 · 器物目录 · 家居品牌 · 慢生活店铺
aesop preview
aesop
暖驼黄、鼠尾草 & 琥珀，衬线正文像文学杂志
适合 · 药剂师产品页 · 美妆 & 健康 · 独立零售 		dieter-rams-braun preview
dieter-rams-braun
十大设计原则、灰阶网格、技术正投影 —— 功能即形式
适合 · 工业设计档案 · 硬件 spec · 品牌原则页
monocle-magazine preview
monocle-magazine
世界主义简报、深海蓝与珊瑚色、脚注式好奇心
适合 · 杂志目录 · 城市 / 旅行简报 · 生活方式期刊
当 brief 里出现这些词
"考究" · "高端" · "安静" · "编辑感" · "少即是多"

spec 文件在 style-recipes/

### 信息架构 · 5 套 > 理性、数据驱动、克制 —— 指示系统、交易终端、脚注长文、报纸头版的重量。
pentagram preview
pentagram
一种大字体即艺术品、网格作骨架、仅墨色与底色
适合 · 标识样本 · 字体主导的作品集 · 画廊公告 		vignelli-swiss-helvetica preview
vignelli-swiss-helvetica
全字号 Helvetica、六种主色、纽约地铁信号图
适合 · 公共指示 & 交通 · 公共信息海报 · 品牌系统样本
bloomberg-terminal preview
bloomberg-terminal
深海军蓝底上的琥珀色、全等宽、密度高于舒适
适合 · 交易仪表盘 · 运维控制台 · 高密度专业工具 		tufte-dataink preview
tufte-dataink
段落内嵌微图、小型多重图、零图表杂质
适合 · 数据叙事 · 研究报告 · 学术长文
nyt-the-daily preview
nyt-the-daily
Cheltenham 衬线压在 Imperial 之上、日期线居首、宽幅报纸的重量
适合 · 新闻特稿 · 播客中枢 · 长篇深度报道
当 brief 里出现这些词
"数据密集" · "指示系统" · "高密度" · "理性" · "权威感"

spec 文件在 style-recipes/

### 现代工具 / Builder SaaS · 4 套 > 发丝级细节、暖色暗夜、单一点缀色 —— 2020 年代后期的开发者工具美学。
linear preview
linear
暖色调暗夜、发丝边、紫色点缀、键盘快捷键芯片
适合 · 开发者工具落地页 · Issue / 项目 SaaS · API & 基础设施产品 		vercel-mesh preview
vercel-mesh
纯黑、几何网格渐变、Geist Sans、命令行式清晰
适合 · 部署 / 运行时工具 · 框架发布 · 技术 hero 页
raycast preview
raycast
红光雾里的玻璃卡片、键盘优先、紧凑列表行
适合 · 命令面板 · launcher 应用 · 键盘驱动型工具 		notion-pre-ai preview
notion-pre-ai
米白页面、拖拽点、随性 emoji 标题、随处可见的提示条
适合 · 工作区文档 · 内部 Wiki · 友好的生产力应用
### 动态 / 实验 · 3 套 > 张扬、生成式、感官 —— brief 里写"电影感""WebGL""能拿 Awwwards"的时候。
field-io preview
field-io
粒子系统衬着编辑式字体、代码艺术美学、暗色工作室
适合 · 创意科技工作室 · 生成艺术案例 · WebGL 作品集 		active-theory preview
active-theory
WebGL 野心、全屏字、深黑底上的糖果色
适合 · 电影感产品发布 · 战役站 · 冲奖型微型站点
resn-storytelling preview
resn-storytelling
超现实、浓郁、每帧都是布景、标题压在噪点纹理上
适合 · 叙事滚动 · 娱乐 / IP 站 · 工作室作品集
当 brief 里出现这些词
"电影感" · "WebGL" · "沉浸式" · "Awwwards 级"

spec 文件在 style-recipes/

### 粗野 / Brutalist · 3 套 > 反设计、诚实、未抛光 —— 系统默认的网页、小报封面、反奢侈的奢侈。
are-na preview
are-na
刻意的系统字体、浏览器默认蓝色链接、诚实的网页
适合 · 研究型频道 · 独立社区 · 反设计内容工具 		bloomberg-businessweek-turley preview
bloomberg-businessweek-turley
警示黄 + 黑墨、字体作拼贴、手工剪切式标题
适合 · 编辑封面 · 评论文章 · 战役式海报
balenciaga-post-2017 preview
balenciaga-post-2017
全大写、破碎网格、白底冷面产品、反奢侈的奢侈
适合 · 时装系列 · drop 公告 · 逆向思考的奢侈品牌
当 brief 里出现这些词
"粗粝" · "诚实" · "反设计" · "小报感" · "不舒服"

spec 文件在 style-recipes/

### 温暖人文 · 3 套 > 平易近人、有机、手工感 —— 小生意的拉拉队长、手工装帧的书、每日重置。
mailchimp-freddie preview
mailchimp-freddie
Cavendish 黄、手绘涂鸦、对话式文案 —— 小生意的拉拉队长
适合 · 引导流程 · 中小企业营销工具 · 友好的消费类应用 		stripe-press preview
stripe-press
奶白纸、GT Super、手工装帧式奢华、思想作器物
适合 · 书籍详情页 · 长篇散文 · 出版社 / 出版品牌站
headspace-meditation preview
headspace-meditation
橙色太阳、圆润色团、手绘平静感、每日重置
适合 · 冥想 & 健康 · 习惯 / 情绪应用 · 温馨的消费类卡片
当 brief 里出现这些词
"友好" · "亲切" · "人情味" · "温馨" · "手工感"

spec 文件在 style-recipes/

### 类型 / 流派 · 2 套 > 时代编码、十年编码、主题编码 —— 只能通过直接 anchor 名字唤起。
y2k-retrofuturism preview
y2k-retrofuturism
铬合金倒角、磨砂玻璃、熔岩色块、随处可见的 MSN 蓝
适合 · Y2K 怀旧 · 早期网络门户 · Z 世代品牌大型整活 		mid-century-modern preview
mid-century-modern
芥末黄、砖红、青蓝；剪纸式几何；1957 年的乐观主义
适合 · 海报致敬 · 文化活动 · 复古印刷品牌语调
### 自己跑画廊 ```bash cd demo/web-design-engineer-demo npm install && npm run dev # http://localhost:5181/ ``` Hash 路由 URL（`#/linear`、`#/aesop`、…）可深链到任意配方。按 `H` 切换配方 HUD，`Esc` 返回画廊。布局细节见 demo 自己的 [README](../../demo/web-design-engineer-demo/README.md)。 --- ## 启用前后对比：Skill 开 / 关 仓库的 [`demo/web-design-demo/`](../../demo/web-design-demo) 目录包含使用相同提示词、分别在有 Skill 和无 Skill 条件下生成的页面对比。打开 [`demo/web-design-demo/demo2/index.html`](../../demo/web-design-demo/demo2/index.html) 查看对比展示页。 ### Demo 1：太空探索博物馆 **提示词：** *"帮我做一个'太空探索博物馆'的线上展览首页——全屏 Hero、4 个核心展览介绍、一个至少 6 个节点的时间线、参观预约 CTA、页脚。整体风格要沉浸感强、有宇宙的深邃感。"* | | 无 Skill | 有 Skill | |---|---|---| | **文件** | `demo/web-design-demo/demo2/demo1.html` | `demo/web-design-demo/demo2/demo1-with-skill.html` | | **色彩系统** | 硬编码 hex 值（#7cf0ff, #b388ff） | 基于 oklch 的 token 系统，使用 CSS 自定义属性 | | **字体** | Orbitron + Noto Serif SC | Instrument Serif + Space Grotesk + JetBrains Mono | | **布局** | 标准落地页结构 | 杂志编辑式布局，grid 组合排版 | | **细节** | 大量发光效果、霓虹渐变 | 克制的色彩方案、字体层级、装饰性数据元素 | | **整体感受** | 热情的初级设计师 | 有经验的设计总监 | ### Demo 2：摄影师作品集 **提示词：** *"帮我做一个独立摄影师的个人作品集网站首页。"* | | 有 Skill | |---|---| | **文件** | `demo/web-design-demo/demo2/demo2-with-skill.html` | | **角色塑造** | 虚构了北欧摄影师 "Mira Høst"，设计了一整套视觉身份 | | **配色** | 暖纸色浅底（#f2efe8）+ 墨色深文（#161513）—— 极度克制的双色调 | | **字体** | Instrument Serif（展示标题）+ Space Grotesk（界面）, 大量使用斜体 | | **布局** | 杂志编排式结构，编号分节、不对称网格、侧边竖排文字 | | **动效** | Hero 图片的慢速 Ken Burns 动画（24秒周期），胶片噪点纹理叠加 | | **导航** | `mix-blend-mode: difference` 顶栏 —— 在深浅背景间无缝过渡 | > 启发本 Skill 的 Claude Design 原始系统提示词保留在 [`dist/prompt/claude-design-system-prompt.md`](../../dist/prompt/claude-design-system-prompt.md)。 --- ## 背景 此 Skill 的灵感来自 [Claude Design](https://www.anthropic.com/news/claude-design-anthropic-labs) 的系统提示词。Claude Design 是 Anthropic 于 2026 年 4 月推出的视觉设计产品。其系统提示词（约 420 行）编码了一套精密的设计原则、反模式和工作流约束，使其输出保持稳定的高品质。 本项目将这些核心理念提取并精炼为一个可移植的 Skill，适用于任何 AI 编程代理——让你获得 Claude Design 级别的设计品位，同时摆脱产品锁定和用量限制。 相比 Claude Design 原始提示词的主要新增内容： - **设计系统宣告步骤** —— 强制 AI 在编码前用自然语言说明设计 token - **v0 草稿策略** —— 一套具体的方法论，确保尽早展示半成品 - **扩展的反俗套清单** —— 从真实 AI 输出中识别出的额外模式 - **占位符哲学** —— 一套完整的框架，专业地处理缺失素材 - **配色 × 字体配对表** —— 六套经过验证的视觉系统起点 - **设计方向顾问** —— 模糊需求场景的 6 学派差异化 3 选 1 推荐机制，且显式接入到 recipe 库做落地 - **25 套有 anchor 的风格配方库** —— 每套绑定一个真实品牌 / studio / 设计师，含可粘贴的具体值；用来抵御 AI 默认味 - **高级模式库** —— 常见 UI 模式的即用代码模板 --- ## 许可证 MIT