🌿 核心思想 —— 三正交
完整规范由三个相互独立的维度组成,缺一不可、互不耦合:
公共兜底
reset、基础元素、可访问性底线,所有皮肤与平台共享同一份。
视觉皮肤
配色、字体、圆角、阴影等视觉令牌,决定"长什么样"。
平台约束
单位、框架、CSS 方案等技术字段,决定"跑在哪里"。
正交解耦的意义:皮肤与平台互不依赖,可以自由组合。 4 种皮肤 × 3 个平台 = 12 种组合,但只需维护 7 个文件 (1 个 base + 4 个 skin + 2 个平台特有项,其余由通用 platform 描述覆盖)。 新增一种皮肤不会触碰任何平台逻辑,新增一个平台也不必重写任何视觉。
🧱 8 层规范框架
一套完整规范从抽象到落地,逐层定义、逐层收敛。每一层各司其职:
元数据 metadata
模板的身份标识:场景、受众约束、性格标签,是选型与合规判断的入口。
设计令牌 tokens
配色、字体、间距、形状、动效、图标的全部数值,以 CSS 变量形式落盘。
视觉语言 visual_language
调性、材质、配图风格、装饰规则,定义"氛围感"而非具体像素。
组件规范 components
每个组件的变体 × 尺寸 × 状态 × 结构,确保跨页面一致。
版式 layout
模块顺序、Hero 模式、滚动行为,决定页面的叙事节奏。
文案与语调 copy
语调、句长、emoji 用量、CTA 写法、禁用词表,让文字也服从调性。
交互体验 interaction
热区尺寸、反馈时机、手势、可访问性,保证"好用"而非仅"好看"。
技术实现 platform
单位、框架、CSS 方案与硬性约束,是落地的最后一道闸门。
🎯 令牌驱动原理
为什么换肤只需要改 tokens.css?因为所有的视觉数值都抽离成了 CSS 自定义属性,
组件层只通过 var() 引用它们,从不写死任何颜色或尺寸。
下面是 healing-pastoral 皮肤的 tokens.css 节选:
:root {
--color-primary: #4A6B47; /* 自然绿 */
--radius-md: 18px; /* 圆角阶梯 */
--shadow-md: 0 8px 32px rgba(74,107,71,0.12); /* 带绿调柔散阴影 */
}而组件层永远是抽象引用,与具体数值无关:
.btn--primary {
background: var(--color-primary); /* 引用,不写死 */
border-radius: var(--radius-full);
box-shadow: var(--shadow-sm);
}这是整个体系的核心。
换肤时不动组件代码,只替换 tokens.css 一个文件,整站的配色、圆角、阴影、间距会同步改变。 4 种皮肤的落地页共享同一份 base.css 和 components.css,差异仅在 tokens——这正是"4 张皮,1 套骨"的由来。
🧭 大模型调用 4 步法
面向大模型的标准化调用流程,保证每次生成都能命中正确的皮肤、平台与约束。
确定皮肤与平台
根据需求从 skins/ 选 1 个皮肤、从 platforms/ 选 1 个平台。
判断依据是 metadata.category(场景类别)、personality(性格)、target_age(目标年龄)。
加载三份文件
加载 base + skin + platform 三份规范并合并: skin 在 base 之上覆盖视觉字段,platform 的技术字段(单位、约束)独立保留。
按规范生成代码
视觉一律引用 tokens;组件遵循 components 的变体与状态;文案遵循 copy 语调;
技术实现按 platform 的单位与约束落地。
自检清单
生成完成后,逐条核对下列清单,全部通过方可交付:
📋 可直接复制的 Prompt 模板
把下面这段模板原样复制,填入你的皮肤、平台与业务内容,即可喂给大模型:
用 design-system 生成一个前端工程。
皮肤:[skin 文件路径或名称]
平台:[platform 文件路径或名称]
内容:[页面主题/业务]
要求:
1. 严格遵守 skin 的配色/圆角/文案语调,所有视觉值引用 tokens
2. 单位按 platform 的 units.primary(小程序 rpx / H5 vw / PC px)
3. CSS 用令牌驱动:tokens 写进 :root,组件用 var()
4. 文案遵循 copy.tone,禁用 copy.forbidden_words
5. 模块顺序按 layout.module_sequence
6. 逐条满足 platform.constraints
用法提示:方括号 [...] 处替换为实际值即可。
填入后,大模型会按皮肤令牌生成视觉、按平台约束生成单位、按 layout 顺序组织模块,
并在产出后可对照上一节的 6 项清单自检。
🎨 四种皮肤快速参数表
一表掌握四种皮肤的主色、调性、适用场景与受众约束,便于快速选型。
| 皮肤名 | 主色 | 调性关键词 | 适用场景 | 受众约束要点 |
|---|---|---|---|---|
| 治愈田园 healing-pastoral |
#4A6B47 自然绿 | 治愈 · 温润 · 留白 | 品牌 / 内容 / 教育温和向 | 适合温和向,避免过度娱乐化 |
| 科技极简 tech-minimal |
#2563EB 科技蓝 | 专业 · 克制 · 冷峻 | 工具 / SaaS / 教辅能力向 | 家长认可的能力向,无娱乐倾向 |
| 活泼趣味 lively-young |
#FF6B6B 暖珊瑚 | 活泼 · 亲和 · 游戏化 | K12 / 儿童 | ⚠️ 外层活泼内层须有知识内核,禁低幼用语和网络黑话,无诱导游戏化 |
| 国风杂志 editorial-magazine |
#8B2E2E 朱砂红 | 典雅 · 人文 · 考究 | 阅读 / 文化 / 人文 | 家长认可度高,内容须通俗 |
📐 三个平台的单位速查
同一套视觉规范落到不同平台,主要差异在于长度单位与硬性约束。
微信小程序
换算 px × 2 = rpx;无 DOM,主包 ≤ 2MB。
H5 移动端
换算 px ÷ 375 × 100 = vw;三层 CSS 架构。
PC 桌面
响应式断点;内容 max-width 限制。