web-design-skill/README.zh-CN.md

Web Design Engineer Skill

一个让 AI 生成网页从"能用"进阶到"惊艳"的 Agent 技能。

English

---

这是什么？

这是一个面向 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 假图
• 结构化工作流 —— 从需求理解 → 上下文获取 → 设计系统宣告 → v0 草稿 → 完整构建 → 验证的六步流程

---

快速上手

用于 Claude Code / Cursor / AI Agent

将技能目录复制到你的项目中：

your-project/
├── .agents/skills/web-design-engineer/
│   ├── SKILL.md                          # 主技能文件（约 400 行）
│   └── references/
│       └── advanced-patterns.md          # 代码模板库（约 520 行）
└── ...

当你的请求涉及可视化/交互式前端工作时，Agent 会自动启用此技能。

注意：部分工具使用 .claude/skills/ 目录。将文件放在你的工具所需的目录中即可，内容完全相同。

覆盖范围

输出类型	示例
网页 & 落地页	营销页面、产品页、作品集
交互式原型	带设备框架的可点击 App 模型
幻灯片	HTML 演示文稿（1920×1080，键盘导航）
数据可视化	基于 Chart.js 或 D3.js 的仪表盘
动画	CSS/JS 动效设计，时间线驱动的演示
设计系统	Token 探索、组件变体

---

工作原理

六步工作流

1. 理解需求          →  信息充足就干活，信息不足才提问
2. 获取设计上下文    →  代码 > 截图；不要从空气中开始
3. 宣告设计系统      →  配色、字体、间距、动效 —— 用 Markdown 说明，写代码之前
4. 尽早展示 v0       →  占位符 + 布局 + token；让用户提前纠偏
5. 完整构建          →  组件、状态、动效；在关键决策点暂停确认
6. 验证              →  交付前清单；无控制台错误，无私自新增色相

核心设计原则

反 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	餐饮、教育

---

示例

demo/ 目录包含使用相同提示词、分别在有 Skill 和无 Skill 条件下生成的页面对比。

Demo 1：太空探索博物馆

提示词： "帮我做一个'太空探索博物馆'的线上展览首页——全屏 Hero、4 个核心展览介绍、一个至少 6 个节点的时间线、参观预约 CTA、页脚。整体风格要沉浸感强、有宇宙的深邃感。"

	无 Skill	有 Skill
文件	demo/demo1.html	demo/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/demo2-with-skill.html
角色塑造	虚构了北欧摄影师 "Mira Høst"，设计了一整套视觉身份
配色	暖纸色浅底（#f2efe8）+ 墨色深文（#161513）—— 极度克制的双色调
字体	Instrument Serif（展示标题）+ Space Grotesk（界面）, 大量使用斜体
布局	杂志编排式结构，编号分节、不对称网格、侧边竖排文字
动效	Hero 图片的慢速 Ken Burns 动画（24秒周期），胶片噪点纹理叠加
导航	mix-blend-mode: difference 顶栏 —— 在深浅背景间无缝过渡

---

文件结构

.
├── README.md                                    # 英文文档
├── README.zh-CN.md                              # 本文件（中文）
├── .agents/skills/web-design-engineer/
│   ├── SKILL.md                                 # 主技能定义
│   └── references/
│       └── advanced-patterns.md                 # 代码模板与模式
├── demo/
│   ├── demo1.html                               # 太空博物馆 — 无 Skill
│   ├── demo1-with-skill.html                    # 太空博物馆 — 有 Skill
│   └── demo2-with-skill.html                    # 摄影师作品集 — 有 Skill
└── prompt/
    └── system.md                                # Claude Design 系统提示词（参考）

---

背景

此 Skill 的灵感来自 Claude Design 的系统提示词。Claude Design 是 Anthropic 于 2026 年 4 月推出的视觉设计产品。其系统提示词（约 420 行）编码了一套精密的设计原则、反模式和工作流约束，使其输出保持稳定的高品质。

本项目将这些核心理念提取并精炼为一个可移植的 Skill，适用于任何 AI 编程代理——让你获得 Claude Design 级别的设计品位，同时摆脱产品锁定和用量限制。

相比 Claude Design 原始提示词的主要新增内容：

• 设计系统宣告步骤 —— 强制 AI 在编码前用自然语言说明设计 token
• v0 草稿策略 —— 一套具体的方法论，确保尽早展示半成品
• 扩展的反俗套清单 —— 从真实 AI 输出中识别出的额外模式
• 占位符哲学 —— 一套完整的框架，专业地处理缺失素材
• 配色 × 字体配对表 —— 六套经过验证的视觉系统起点
• 高级模式库 —— 常见 UI 模式的即用代码模板

---

许可证

MIT