XingfenD/teamai-test

Fork 0

Files

T

XingfenD 65c04def51 [teamai] Push 87 resource(s) from XingfenD

2026-09-10 16:10:45 +08:00

27 KiB

Raw Permalink Blame History

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 假图
五旋钮 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

27 KiB Raw Permalink Blame History Unescape Escape