12 行业
12 套设计语言
用真实的行业语汇，做真实的网页演示稿。
3 分钟，从想法到上线。
v3 用一套暗金风皮所有行业，翻车。v4 反向工程 12 行业的顶级真实作品，每个行业一套独立设计语言。
先反向工程该行业 Top 5 真实作品（Apple Event / 麦肯锡 / Linear）再动手，避免「AI 味泛设计」
12 行业各有色板、字体、栅格、辅助元素，互相 ≥ 3 维度差异。看一眼就知道是哪个行业
≥ 80% 中文。正文桌面 ≥ 20px / 移动 ≥ 17px。为中文阅读节奏优化，禁用 14px 小字
v3 早期版本翻车清单。这些「设计模式」永久除名，v4 绝不再犯：
每个行业模板的诞生流程：
收集 5-10 个该行业顶级作品（Apple Event / NEJM 论文 / 中金研报）
定稿色板、字体、栅格、辅助元素 5 个维度
基于 v3 基线改造，注入行业专属视觉语汇
D1 视觉 / D2 UI/UX / D3 行业 FDE 三人评审
现场演讲 · 屏幕大字 · 节奏强 · 动效多
适合：产品发布、内部 town hall、路演
典型模板：launch / changelog / automotive
自助阅读 · 密度高 · 可下载 · 可索引
适合：研报、复盘、政策解读、数据分析
典型模板：research / finance / healthcare / data
| 元素 | xs <480 | sm 768 | md 1280 | lg ≥1280 |
|---|---|---|---|---|
| Hero H1 | 56px | 80px | 120px | 160px |
| 章节 H2 | 32 | 40 | 56 | 72 |
| 小标题 H3 | 22 | 24 | 28 | 32 |
| 正文 body | 17 | 18 | 20 | 22 |
| 注脚 / meta | 13 | 13 | 14 | 14 |
| 等宽数据 num | 28 | 36 | 48 | 64 |
护栏：正文绝对不可 < 17px / H1 与 body 字号差距 ≥ 4 倍 / 同一页面字号层级 ≤ 4 级
中文：思源黑体 / Noto Sans SC > 苹方 > 系统
英文按行业语言选：Inter / IBM Plex / Bebas Neue / Geist Mono
中英文之间留 0.125em 空隙
中文用全角（。， ：「」）
英文用半角（. , : " "）
数字用等宽（tabular-nums）
DeepSeek 在 2026 年 5 月发布 V4 模型，参数规模 600B。
对比 GPT-5 的 1.5T，训练成本仅为其 1/10。
任何两个行业必须在以下 5 个维度中至少 3 个不同：
黑 / 白 / 米白 / 海军蓝 / 浅灰 / 深绿
Inter / IBM Plex / Bebas / Geist / 思源黑体
荧光黄 / 品牌红 / 学术蓝 / 投行金 / Porsche 红
12 列 / 8 列 / 单栏 / 双栏 / 不对称
dot grid / 衬线 bullet / 等宽时间戳 / 数据徽章
两个行业的封面截图并排，能否一眼可分？
用屏幕大字与暗场制造仪式感。Apple Event 风。
#0A0A0A / #E07856 / #FAFAFA
Inter Heavy + 思源黑体
黑底 + 暖橙 + Apple 蓝
Apple Event 风
等宽 timestamp 与 tag 体系。Linear shipped 风。
#08090A / #E4F222 / #E6E6E6
Inter + Geist Mono
纯黑 + 柠檬荧光黄 + 灰
Linear shipped 风
渐变光斑与玻璃质感卡片。Notion / Linear 营销风。
#0a0a0a / #A78BFA / #FAFAFA
Inter + Geist Mono
黑底 + 紫蓝粉光斑
Notion / Linear 营销风
严谨栅格 + 圆点 bullet + 金色强调。麦肯锡式研报。
#051C2C / #B59A3F / #E8E5DA
IBM Plex Sans
深蓝 + 投行金
麦肯锡式研报
状态 dot 与项目表格。Notion 内部 QBR。
#F7F6F3 / #0EA968 / #1A1A1A
Inter + JetBrains Mono
米白 + 4 色状态
Notion 内部 QBR
等宽数字 + 高对比图表。FT Visual / Bloomberg。
#FFFFFF / #E63946 / #0F1B2D
Inter + JetBrains Mono
白底 + 多色谱
FT Visual / Bloomberg
衬线 + 涨跌信号 + 数据矩阵。中金 / Goldman 研报。
#FAFAF7 / #B58A30 / #1A1A1A
IBM Plex Sans Condensed
米色 + 投行金 + 涨绿跌红
中金 / Goldman 研报
严谨 KM 曲线 + 试验流程图。NEJM / Nature Medicine。
#FFFFFF / #BF2026 / #1A2236
IBM Plex Sans + Quadraat
学术白 + NEJM 蓝红
NEJM / Nature Medicine
巨型粗黑标题 + 红金对比。十五五规划 / 新华社。
#FAFAF7 / #B91C1C / #1A1A1A
思源黑体 Heavy
米白 + 政府红金
十五五规划 / 新华社
工业感栅格 + 进度条。BNEF / 宁德发布。
#0A1628 / #FFD56B / #E8ECF3
Inter + Noto Sans SC
深海蓝 + 能源绿 + 琥珀
BNEF / 宁德发布
粗大写字母 + 切角卡片 + 跑车红。Porsche / 小米 SU7。
#000000 / #D5001C / #F2F2F2
Bebas Neue + JBM
全黑 + Porsche 红
Porsche / 小米 SU7
代码字 + 网点背景 + 开发者气质。DeepSeek / Vercel keynote。
#08090A / #4285F4 / #E6E6E6
Geist Sans + Geist Mono
黑 + 信号蓝 + dot grid
DeepSeek / Vercel keynote
每个行业自带 hero 图、icon、illustration、SVG 图表元件。无需自己找素材。
每页 ≥ 1 个动效，单页 ≤ 3 个。禁用旋转 360° / 闪烁 / 自动播放音效。
600ms / cubic-bezier(0.22,1,0.36,1)
标题、卡片、数据块进入视区时触发
1200ms / easeOutQuart
关键数据从 0 滚到目标值（本页已演示）
800ms / linear
Bar chart / 完成度
200ms / ease-out
卡片交互反馈，translateY(-6px)
测试矩阵：每个模板必须在 360 / 768 / 1440 三档实测通过
"色板差异化做到了，但需要更克制 — 单页元素 ≤ 5 个，去掉装饰性边框。" 评分 8.4/10
"中文版式终于不像 Demo 了。建议：增加快捷键 J/K 翻页、键盘可达性。" 评分 8.7/10
"医学/金融/政府三个最严肃的行业过了，剩下都好办。" 平均评分 8.2/10
完整 D1 / D2 / D3 评审报告见 docs/reports/ 目录
把 v4 的 12 行业设计语言带回家。打包 zip 含完整 SKILL.md 文档、12 行业设计参考、动效库。
完整 skill 包 · 含 SKILL.md / DESIGN_PRINCIPLES.md / 12 design-language / references
v4.1 集成 claude-skill CLI · ETA 2026 Q3
/web-presentation浏览器内拖拽编辑，所见即所得。3D 元素、视频背景接入。新增 4 行业模板：legal / consulting / education / sports。
从 skill 升级为 standalone 产品。浏览器即编辑器、协作、模板市场。中文优先 + 全球可用。
远期：2027 Q1 · 开放第三方设计师上传模板，做「全球第一个中文 PPT 制作平台」
v4 是开始，不是终点。
每一个行业模板都来自对真实顶级作品的反向工程。
欢迎提交你的下一个行业模板灵感。