Feihong Design System
高级品牌设计系统 · 工作流手册
本文档是飞鸿设计系统的操作系统。它定义了从需求到交付的完整流程。 本文件是设计系统的「大脑」，规定了从需求到交付的完整工作流程。
使命: 产出在艺术上精炼、具有飞鸿品牌辨识度、且明确由人创作的作品——绝不像是 AI 生成的。 核心目標：産出不像AI的、有Feihong品牌辨識度的、藝術且有品質的設計作品。
十大场景
所有 10 个场景均已生产就绪，每个都包含完整的规范和模板。
| 编号 | 场景 | 规范 | 模板 | 核心特征 |
|---|---|---|---|---|
| 01 | 作品集/个人主页 | scenes/portfolio.md | assets/portfolio.html | 非对称英雄区、Bento 网格、火漆印章、编辑感 |
| 02 | 落地页/活动页 | scenes/landing.md | assets/landing.html | 转化驱动、时间线、演讲嘉宾、CTA 表单 |
| 03 | 教程/长文/博客 | scenes/tutorial.md | assets/tutorial.html | 首字下沉、阅读进度、目录、书籍级排版 |
| 04 | 演示文稿/Slides | scenes/deck.md | assets/deck.html | 全屏、16:9、键盘导航、9 种布局、F 全屏 |
| 05 | 案例研究/项目复盘 | scenes/case-study.md | assets/case-study.html | 叙事弧线、数据可视化、深色面板 |
| 06 | 后台控制台/仪表盘 | scenes/console.md | assets/console.html | 管理仪表盘、侧边栏导航、终端绿、KPI 卡片、数据图表 |
| 07 | 社交卡片/小红书图文 | scenes/cards.md | assets/cards.html | 3:4 竖版、分页、html2canvas PNG 导出 |
| 08 | 简历/履历 | scenes/resume.md | assets/resume.html | A4 打印、单页、无动画、Ctrl+P PDF |
| 09 | 公众号/微信图文 | scenes/wechat.md | 内联 HTML | 微信内联样式、无外部 CSS/JS |
| 10 | 邮件/EDM | scenes/email.md | assets/email.html | 表格布局、内联样式、兼容 Outlook |
触发条件
当请求匹配以下场景时，系统会自动激活：
| 触发关键词 | 场景类型 |
|---|---|
| 个人主页、个人网站、Portfolio、作品集、作品展示、项目展示 | Portfolio |
| Landing Page、落地页、活动页、报名页、课程页、发布会 | Landing |
| 教程、教学、科普、博客、文章页、长文、专栏 | Tutorial |
| 演示文稿、slides、幻灯片、deck、演讲、分享会 | Deck |
| 案例研究、Case Study、项目复盘、设计过程 | Case Study |
| 后台控制台、功能页、看板、仪表盘、工具页 | Console |
| 图文卡片、小红书图文、社交卡片、朋友圈图 | Cards |
| 简历、CV、履历 | Resume |
| 邮件模板、EDM、Newsletter、订阅邮件 | |
| 公众号排版、微信图文 |
自适应判断：对于简单修改（如“更改按钮颜色”、“添加一个部分”），使用快速路径。对于新页面/完整设计，使用完整的 8 步流程。 自适应判断：需求简单时走快速路径；新建页面/完整设计走完整8步工作流。
⚡ 快速路径（简单修改）
适用于：
- 对现有页面进行微小更改
- 单个组件调整、文本替换、颜色微调
- 反馈后的局部修改
- 添加单个部分
流程：
- 读取现有的 HTML 文件
- 按照
DNA.md标准应用更改 - 针对与更改相关的 P0 项目快速验证
- 如果更改影响颜色/排版/布局 -> 检查相关的 P0 项目
- 交付
不适用于快速路径：全新的完整页面、涉及 3 个以上部分的更改、调色板调整、整体风格变更。
📋 飞鸿 8 步流程
第 1 步 — 洞察需求（自适应分诊）
在开始之前，快速评估从用户输入中已了解的内容：
- 类型明确？（属于 10 个场景中的哪个？）
- 受众明确？（为谁而设计？）
- 规模已知？（有多少屏幕/页面/卡片/幻灯片？）
- 素材可用？（文案/图片/数据/头像/IP 角色）
- 约束明确？（必选项、品牌合作伙伴、禁用元素）
决策规则：
- 4 项以上明确 -> 跳到第 3 步
- 2-3 项明确 -> 仅询问缺失的关键问题
- 0-1 项明确 -> 进入第 2 步进行完整澄清
第 2 步 — 定调定向（必要时澄清）
不要机械地问完所有 5 个问题。根据第 1 步，仅询问缺失的关键问题。
需要确认的核心问题（仅选择缺失的）：
- 类型（不确定时）：提供 2-3 个最可能的选项，而非开放式
- 受众（未提及时）："主要受众是谁？"
- 规模（未说明时）："大约需要多少屏幕/页面/卡片？"
- 素材（未提供文案时）："您有准备好的文案、图片或数据吗？"
- 约束（有特殊需求时）："是否有任何必选元素或合作品牌颜色？"
沟通原则：像设计师与客户沟通，而非填写表格。使用自然语言，一次最多问 2-3 个问题。 沟通原则：像设计师跟客户沟通，不像填表。用自然语言，一次最多问2-3个问题。
第 3 步 — 品牌注入（阅读规范）
必读（每个项目）：
DNA.md— 牢记这些要点：- 🔴 精确颜色值：
#0A2463（皇家蓝 55%）、#F4D35E（复古金 30%）、#D8315B（酒红 15%） - 🔴 排版策略：Playfair Display（衬线标题）+ Inter（无衬线正文）+ Cormorant Garamond（斜体引用）+ JetBrains Mono（代码）
- 🔴 优先级：反 AI 感 > 艺术品质 > 人文温度 > 设计师眼光
- 🔴 暖米色背景
#FDFBF6、墨黑色文本#0D1225 - 🔴 关键禁用项
- 🔴 来自
MOTION.md的运动语言（缓动、时长、原则）
- 🔴 精确颜色值：
选择性阅读（按场景类型）—— 工作前阅读相应的场景规范：
| 编号 | 场景 | 规范 | 模板 |
|---|---|---|---|
| 01 | 作品集/个人主页 | scenes/portfolio.md | assets/portfolio.html |
| 02 | 落地页 | scenes/landing.md | assets/landing.html |
| 03 | 教程/长文 | scenes/tutorial.md | assets/tutorial.html |
| 04 | 演示文稿 | scenes/deck.md | assets/deck.html |
| 05 | 案例研究 | scenes/case-study.md | assets/case-study.html |
| 06 | 后台控制台 | scenes/console.md | assets/console.html |
| 07 | 社交卡片 | scenes/cards.md | assets/cards.html |
| 08 | 简历 | scenes/resume.md | assets/resume.html |
| 09 | 微信图文 | scenes/wechat.md | 内联 HTML |
| 10 | 邮件 | scenes/email.md | assets/email.html |
阅读后，必须明确 5 件事：
- 该场景的典型结构/节奏是什么？
- 是否有技术限制？（邮件表格、微信内联样式、演示文稿全屏）
- 三种品牌颜色在该场景中扮演什么角色？
- 核心情感基调是什么？（庄重？动态？专业？艺术？）
- 是否有特定场景的禁忌？
第 4 步 — 架构搭建（选择起点）
默认策略：从模板开始修改，绝不从零开始。 默认策略：从模板开始改，不从零写。
所有 10 个场景模板 — 从适当的模板开始，绝不从零开始：
| 编号 | 场景 | 模板 | 特殊说明 |
|---|---|---|---|
| 01 | 作品集 | assets/portfolio.html | 项目网格、视觉优先、非对称英雄区、火漆印章 |
| 02 | 落地页 | assets/landing.html | CTA 驱动、视觉冲击、时间线、表单交互 |
| 03 | 教程 | assets/tutorial.html | 长文阅读、目录导航、进度条、首字下沉 |
| 04 | 演示文稿 | assets/deck.html | 全屏幻灯片、键盘导航、16:9、F 全屏 |
| 05 | 案例研究 | assets/case-study.html | 背景→挑战→过程→结果叙事、数据可视化 |
| 06 | 控制台 | assets/console.html | 管理仪表盘、侧边栏导航、终端绿、KPI 卡片、数据图表 |
| 07 | 社交卡片 | assets/cards.html | 3:4 竖版分页、html2canvas PNG 导出 |
| 08 | 简历 | assets/resume.html | A4 单页、适合打印、Ctrl+P PDF |
| 09 | 微信 | 内联 HTML | 兼容微信、内联样式、无外部 CSS/JS |
| 10 | 邮件 | assets/email.html | 表格布局、内联样式、兼容 Outlook |
何时偏离模板：
- 模板结构确实不适用（但必须保留 CSS 变量、字体引入、基础重置）
- 用户明确要求独特的设计方法
- 品牌令牌（
:rootCSS 变量）、字体引入、基础重置样式必须始终保留
模板修改原则：
- 保留模板的
:rootCSS 变量 - 保留字体
<link>标签 - 替换内容区域，调整布局结构
- 不要移除基础样式重置
第 5 步 — 组件编排（方向设定与布局）
这是对抗 AI 通用输出的最关键步骤——AI 没有方向判断，它直接组装。这一步决定了产出是“设计”还是“组装”。 这是最容易被跳过但最重要的步骤——AI没有「方向判断」，它直接组装。这一步决定了产出是「设计」还是「组装」。
在填充组件之前，定义 4 个方向决策：
5a. 情感基调（选择 1-2 个主要）
- 沉稳权威: 大面积留白、皇家蓝主导、金色少量使用、衬线标题、最小化动画
- 活力创意: 金色和酒红更活跃、非对称布局、元素溢出容器、稍多动画
- 艺术画册: 大图片、文本作为视觉元素、图片溢出容器、大面积留白、深色面板
- 温暖人文: 更多 Cormorant 斜体、稍高的酒红比例、暖色调、IP 角色出现
- 专业极简: 克制用色、大面积留白、更高 Inter 比例、几何精确性
5b. 英雄区策略（选择 1 个）
- 视觉主导: 大图/IP/抽象视觉为主、文本最少
- 排版主导: 大标题+引用为主、视觉元素为辅
- 头像主导: 头像/IP 角色作为中心、文本在旁边
- 数据/成就主导: 大数字+标签为主、建立信任
5c. 标志性元素（选择 1-2 个贯穿页面）
- 金色装饰线（标题下方）
- 大号装饰性数字/英文（低透明度背景）
- 衬线斜体引用
- IP 角色/头像穿插
- 用于列表/时间线标记的金色圆点
- 图片溢出容器
- 打破节奏的深蓝色面板
- 飞鸿签名系列元素（火漆印章、照片角、花饰 ❦、首字下沉、大号引号）
5d. 节奏规划
- 总屏幕/页面数：___
- 密度节奏：密集→稀疏→密集→稀疏？或强→弱→强？
- 视觉惊喜屏幕放在哪里？
- 深色面板？放在哪里？
方向输出：你无需将其写下来，但必须在脑海中清晰无比。后续的布局和组件选择都服务于这个方向。
然后，从 components/14-layouts.md 中为每个部分/页面选择布局模式。
核心原则：每个部分必须使用不同的布局。布局选择服务于第 5a-5d 步设定的方向。
第 6 步 — 签名点睛（组件填充）
从 components/ 文件中选择适当的组件。
🔴 硬性规则（P0 级别）：禁止使用任何 HTML 默认样式。 🔴 硬规则（P0级别）：禁止使用任何HTML默认样式。
具体的零默认样式要求：
- ❌ 默认
<blockquote>（左边框是 Notion/飞书的通用样式） - ❌ 默认的
border-left引用块 - ❌ 未设置样式的
<ul>/<ol>（必须自定义——金色圆点、衬线数字、自定义图标） - ❌ 默认的
<table>边框 - ❌ 默认的蓝色带下划线链接
- ❌ 默认按钮样式（灰色、3D 效果、默认边框）
- ❌ 默认输入框样式
- ❌ 默认表单控件样式
- ✅ 所有组件从组件库中选择
- ✅ 组件库中没有的：设计需与
DNA.md一致，决不可使用浏览器默认样式
品牌注入检查点：
- 链接: 皇家蓝
#0A2463，悬停时金色下划线/背景色 - 按钮: 主要按钮皇家蓝、CTA 按钮酒红、次要按钮金色描边/填充
- 引用块: 大型金色衬线引号 + Cormorant 斜体 + 金色装饰线
- 列表标记: 金色圆点或 Playfair Display 衬线数字
- 标签/徽章: 金色填充（次要）、酒红填充（强调）、皇家蓝浅背景（类别）
- 标题: Playfair Display 衬线，可选下方金色装饰短横线
- 分隔线: 不是简单的
border-bottom；使用金色细线 + 渐变淡出或金色圆点分隔符 - 动画（如有）: 轻盈、缓慢、克制、
cubic-bezier(0.16, 1, 0.3, 1)，无弹跳
飞鸿签名系列 — 强烈推荐用于所有场景：
- 首字下沉（教程首段）
- 旁注（教程侧边注释）
- 火漆印章（作品集/认证感）
- 照片角（作品集/编辑感）
- 金色签名（文章结尾/关于页面）
- 花饰 ❦（章节分隔符）
- 序列号徽章（编号项目，限量版感）
第 7 步 — 精工细作（质量自查）
这是最关键的一步。不能跳过。 这是最关键的一步，不能跳过。
对照 QUALITY.md + DNA.md 质量关口标准逐项检查。
🔴 P0 — 必须通过（一项不过就必须修改）
- 精确颜色: 搜索 HTML，确认三种颜色准确为
#0A2463、#F4D35E、#D8315B，无近似值 - 颜色比例: 皇家蓝主导约 55%、金色辅助约 30%、酒红强调约 15%
- 金色从不做大面积背景: 仅用于强调/装饰/高亮
- 正文对比度: ≥4.5:1，浅色背景上无金色正文文本
- 单一英雄区焦点: 只有一个主要的视觉焦点
- 移动端适配: <600px 布局合理，无文本重叠/溢出
- 无第四种主色: 成功绿仅用于功能、终端绿仅用于终端场景
- 禁忌检查: 无玻璃态/弹跳/渐变文本/AI 发光/默认引用块
- 零默认样式: 所有 ul/ol/blockquote/table/button/input/links 均已品牌化
- 衬线+无衬线混合: 标题 Playfair Display、正文 Inter，绝不全文使用单一字体
- 响应式完整: 桌面 + 平板 + 移动端，使用 clamp()
- 部分/页面布局不同: 相邻区域从不重复布局
- clamp() 使用: 关键字号/间距/容器使用 clamp()，而非硬编码 px
- 基调一致: 与第 5a 步设定的情感基调匹配
🟡 P1 — 至少完成 80%
- 火漆印章/照片角出现在至少一个显著位置
- 花饰 ❦ 或金色签名用于装饰
- 阅读体验：行高 1.6-1.8、段落间距、边距均匀
- 交互细节：按钮悬停效果、链接悬停效果、卡片微动效
- 边距对齐：整个页面视觉对齐
- 留白比例：页面总面积中至少有 20% 为留白
- 图片一致性：风格、调色板、裁剪统一
第 7.5 步 — 签名（添加）
通过所有 P0 检查后，在交付前添加飞鸿签名：
- 在页面底部添加：设计与代码 — Feihong Design System ✦ 或类似署名
- 可选：在结尾附近添加金色签名或花饰 ❦
- 如果版面允许，添加火漆印章（小尺寸，在角落）
关于签名的说明：这表明经过飞鸿系统处理，并非 AI 默认输出。这是品牌标准。 关于签名的说明：这表示经过飞鸿系统处理，不是AI默认输出。这是品牌标准。
第 8 步 — 交付上线（文件检查）
最终交付检查：
- 格式: 布局在 1920×1080 和 375×812 上均完成
- 输出: 是 HTML 文件还是内联代码？
- 依赖: 所有字体链接有效，定时器/交互逻辑功能正常
- 复制: 无 GPT 默认措辞，所有文案专业且具体
- 版本: 最新的 DNA.md 版本已使用（从仓库重新读取以确认）
交付承诺:
- 所有文件工作正常，无错误
- 设计遵循 DNA.md 品牌标准
- 已通过 P0 自查
- 已添加飞鸿签名
- 为进一步反馈做好准备
系统使用说明
点击放大镜图标（文件引用）查看原始模板文件。模板包含精确的布局和标记。品牌令牌从 DNA.md 读取。
该系统是自我维护的。对于新生成的页面，实现永远从模板开始，并遵循上述 8 步流程。