27 KiB
Web Design Engineer Skill
一个让 AI 生成网页从"能用"进阶到"惊艳"的 Agent 技能。
这是什么？
这是一个面向 AI 编程代理（如 Claude Code、Cursor 以及其他支持 SKILL.md 格式的工具）的可复用 Skill（结构化系统提示词），能显著提升 AI 生成的 HTML/CSS/JavaScript 产物的设计品质。
它将 Claude Design 系统提示词中的核心设计理念提炼为一个开放、可移植、可自定义的技能文件，可以直接放进任何项目中使用。
问题
现代大语言模型已经能根据简单的提示词生成功能完整的网页。但它们的输出总是趋向同一种审美：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。
当你的请求涉及可视化/交互式前端工作时，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/<anchor>.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/<recipe>.md 的 spec 文件。点击任意预览图打开完整分辨率的 2:1 大图。
所有截图都是来自
demo/web-design-engineer-demo这个 React + Vite 画廊的真实渲染 —— 字体、配色、签名手法都和 spec 文件里一致。每个 demo 位于src/recipes/<id>.tsx。
Editorial / 极简 · 5 套
留白、考究的排版、安静的奢华 —— 药剂师、博物馆图录、硬件产品页。
apple-hig
SF Pro Display、慷慨留白、柔和阴影 —— Apple Store 的语气 适合 · 硬件产品页 · 设备发布 · 高端消费电子 |
muji-kenya-hara
空作为画布、灰与纸、器物悬浮在空气中拍摄 适合 · 器物目录 · 家居品牌 · 慢生活店铺 |
aesop
暖驼黄、鼠尾草 & 琥珀，衬线正文像文学杂志 适合 · 药剂师产品页 · 美妆 & 健康 · 独立零售 |
dieter-rams-braun
十大设计原则、灰阶网格、技术正投影 —— 功能即形式 适合 · 工业设计档案 · 硬件 spec · 品牌原则页 |
monocle-magazine
世界主义简报、深海蓝与珊瑚色、脚注式好奇心 适合 · 杂志目录 · 城市 / 旅行简报 · 生活方式期刊 |
当 brief 里出现这些词 "考究" · "高端" · "安静" · "编辑感" · "少即是多" spec 文件在 style-recipes/ |
信息架构 · 5 套
理性、数据驱动、克制 —— 指示系统、交易终端、脚注长文、报纸头版的重量。
pentagram
一种大字体即艺术品、网格作骨架、仅墨色与底色 适合 · 标识样本 · 字体主导的作品集 · 画廊公告 |
vignelli-swiss-helvetica
全字号 Helvetica、六种主色、纽约地铁信号图 适合 · 公共指示 & 交通 · 公共信息海报 · 品牌系统样本 |
bloomberg-terminal
深海军蓝底上的琥珀色、全等宽、密度高于舒适 适合 · 交易仪表盘 · 运维控制台 · 高密度专业工具 |
tufte-dataink
段落内嵌微图、小型多重图、零图表杂质 适合 · 数据叙事 · 研究报告 · 学术长文 |
nyt-the-daily
Cheltenham 衬线压在 Imperial 之上、日期线居首、宽幅报纸的重量 适合 · 新闻特稿 · 播客中枢 · 长篇深度报道 |
当 brief 里出现这些词 "数据密集" · "指示系统" · "高密度" · "理性" · "权威感" spec 文件在 style-recipes/ |
现代工具 / Builder SaaS · 4 套
发丝级细节、暖色暗夜、单一点缀色 —— 2020 年代后期的开发者工具美学。
linear
暖色调暗夜、发丝边、紫色点缀、键盘快捷键芯片 适合 · 开发者工具落地页 · Issue / 项目 SaaS · API & 基础设施产品 |
vercel-mesh
纯黑、几何网格渐变、Geist Sans、命令行式清晰 适合 · 部署 / 运行时工具 · 框架发布 · 技术 hero 页 |
raycast
红光雾里的玻璃卡片、键盘优先、紧凑列表行 适合 · 命令面板 · launcher 应用 · 键盘驱动型工具 |
notion-pre-ai
米白页面、拖拽点、随性 emoji 标题、随处可见的提示条 适合 · 工作区文档 · 内部 Wiki · 友好的生产力应用 |
动态 / 实验 · 3 套
张扬、生成式、感官 —— brief 里写"电影感""WebGL""能拿 Awwwards"的时候。
field-io
粒子系统衬着编辑式字体、代码艺术美学、暗色工作室 适合 · 创意科技工作室 · 生成艺术案例 · WebGL 作品集 |
active-theory
WebGL 野心、全屏字、深黑底上的糖果色 适合 · 电影感产品发布 · 战役站 · 冲奖型微型站点 |
resn-storytelling
超现实、浓郁、每帧都是布景、标题压在噪点纹理上 适合 · 叙事滚动 · 娱乐 / IP 站 · 工作室作品集 |
当 brief 里出现这些词 "电影感" · "WebGL" · "沉浸式" · "Awwwards 级" spec 文件在 style-recipes/ |
粗野 / Brutalist · 3 套
反设计、诚实、未抛光 —— 系统默认的网页、小报封面、反奢侈的奢侈。
are-na
刻意的系统字体、浏览器默认蓝色链接、诚实的网页 适合 · 研究型频道 · 独立社区 · 反设计内容工具 |
bloomberg-businessweek-turley
警示黄 + 黑墨、字体作拼贴、手工剪切式标题 适合 · 编辑封面 · 评论文章 · 战役式海报 |
balenciaga-post-2017
全大写、破碎网格、白底冷面产品、反奢侈的奢侈 适合 · 时装系列 · drop 公告 · 逆向思考的奢侈品牌 |
当 brief 里出现这些词 "粗粝" · "诚实" · "反设计" · "小报感" · "不舒服" spec 文件在 style-recipes/ |
温暖人文 · 3 套
平易近人、有机、手工感 —— 小生意的拉拉队长、手工装帧的书、每日重置。
mailchimp-freddie
Cavendish 黄、手绘涂鸦、对话式文案 —— 小生意的拉拉队长 适合 · 引导流程 · 中小企业营销工具 · 友好的消费类应用 |
stripe-press
奶白纸、GT Super、手工装帧式奢华、思想作器物 适合 · 书籍详情页 · 长篇散文 · 出版社 / 出版品牌站 |
headspace-meditation
橙色太阳、圆润色团、手绘平静感、每日重置 适合 · 冥想 & 健康 · 习惯 / 情绪应用 · 温馨的消费类卡片 |
当 brief 里出现这些词 "友好" · "亲切" · "人情味" · "温馨" · "手工感" spec 文件在 style-recipes/ |
类型 / 流派 · 2 套
时代编码、十年编码、主题编码 —— 只能通过直接 anchor 名字唤起。
y2k-retrofuturism
铬合金倒角、磨砂玻璃、熔岩色块、随处可见的 MSN 蓝 适合 · Y2K 怀旧 · 早期网络门户 · Z 世代品牌大型整活 |
mid-century-modern
芥末黄、砖红、青蓝；剪纸式几何；1957 年的乐观主义 适合 · 海报致敬 · 文化活动 · 复古印刷品牌语调 |
自己跑画廊
cd demo/web-design-engineer-demo
npm install && npm run dev # http://localhost:5181/
Hash 路由 URL（#/linear、#/aesop、…）可深链到任意配方。按 H 切换配方 HUD，Esc 返回画廊。布局细节见 demo 自己的 README。
启用前后对比：Skill 开 / 关
仓库的 demo/web-design-demo/ 目录包含使用相同提示词、分别在有 Skill 和无 Skill 条件下生成的页面对比。打开 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。
背景
此 Skill 的灵感来自 Claude Design 的系统提示词。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