企业官网建设流程全解析

StyleSeed 参考编译器（Reference Compiler）可以把你的截图、URL 和 Figma 导出，转化为一套可复用的项目设计语法（output grammar）。它不是视觉克隆工具，而是恢复参考背后那些可重复的设计决策，让 AI Agent 在新页面上持续一致地应用。本教程带你从零走通完整的 9 步编译流程。

🎯 参考编译器是什么：不是克隆，是提炼语法

很多人拿到设计参考后，会让 AI "照着这个页面画"——结果新页面东拼西凑，颜色、圆角、密度互相打架。

StyleSeed 的参考编译器换个思路：目标不是复刻某个界面，而是恢复参考背后可重复的设计决策，让 Agent 把它一致地应用到你项目里的新屏幕上。

它支持的输入形式包括：

• 📸 截图（单张或多张）
• 🌐 URL（可渲染的页面会先被捕获）
• 📐 Figma 导出
• 🖼️ 情绪板（moodboard）
• 📱 一个已存在的真实产品

详细契约见 engine/REFERENCE-COMPILER.md，执行流程定义在 skills/styleseed/workflows/ss-reference/WORKFLOW.md。

📋 编译前准备：选对参考再开工

输入质量直接决定语法质量，开始前先做四件事：

1. 选 3–8 张同一产品语言的参考。能代表同一套意图最好；只给 1 张也能跑，但编译器会把所有推断出的轴都标记为低置信度。
2. 记录元信息：来源、日期、surface adapter（输出面）、画布/视口、你希望保留什么。
3. 分清场景：产品 UI 要和营销页、编辑内容、品牌视觉分开处理——除非你明确要求把两种语言打通，否则不要把营销首页和应用后台混在一起。
4. 说清用户目标：冲突解决时，你声明的目标优先级最高。

⚙️ 九步编译流水线：从参考到设计语法

参考编译器固定执行 9 个阶段，每一步都有明确产出：

流水线有一条贯穿始终的硬规则：可见证据先于形容词。"安静"不是规则；造就安静的间距、字体、颜色、层级和动效决策，才是规则。

🧩 十二轴设计语法：每条规则都有证据链

编译器产出的语法必须填满 engine/RULESETS.md 中定义的 12 个轴：

1. 用户任务与首要决策
2. 注意力模型与焦点
3. 信息架构与构图
4. 密度与间距节奏
5. 字体角色与行长
6. 颜色角色与语义例外
7. 表面、圆角、边框与层级语言
8. 图像/数据可视化角色
9. 导航与动作层级
10. 状态、反馈与动效行为
11. 响应式变换
12. 必须要求的特征 tells 与必须拒绝的反模式

每个轴都要记录同一份证据契约：决策 · 证据 ID · 置信度（高/中/低）· 允许范围 · 反例。这意味着任何一条规则你都可以追问"为什么"，而不是"AI 觉得好看"。

🧱 内置回退语法：找不到依据时靠什么兜底

编译到第 8 步时，编译器会为你选择最近的内置语法作为 fallback。StyleSeed 内置 8 种输出语法，覆盖不同产品任务：

语法选择按"结果的任务"来，而不是按你提到的品牌名。参考语法可以调节有界轴，但不能豁免核心不变量。

📦 编译产物：.styleseed/rulesets/ 下的 6 个文件

编译完成后，语法以项目本地形式落盘在.styleseed/rulesets/<slug>/：

随后项目配置（registry 项目写入 artifact 配置，遗留项目更新STYLESEED.md）会登记：

- Output grammar: reference:<slug> - Grammar path: .styleseed/rulesets/<slug>/RULESET.md - Grammar fallback: <最近的内置语法> - Reference confidence: <high|medium|low>

✅ 验证可迁移性：画一张参考里没有的屏幕

这是整个流程的"毕业考试"：用编译出的语法，构建一张参考集中不存在的代表性屏幕，跑/ss-score评分，可渲染时再跑/ss-verify视觉验证，直到通过（每个关卡最多三轮修正）。

如果一张语法只能复刻参考原图、画不出新屏幕——说明抽象失败了。

🚧 安全与质量边界：能做什么、不能做什么

编译器内置了几条不可逾越的红线：

• ❌ 不得声称观察不到的"精确测量"，只能用范围 + 置信度
• ❌ 不得复制 logo、版权插画、文案或受商标保护的组件排布
• ❌ 不得凭单个流行细节就定义身份，规则必须有重复证据支撑
• ✅ 无障碍与平台惯例优先于参考中的缺陷
• ✅ 生成的语法默认只留在项目本地，晋升为内置语法是维护者的决定

🚀 快速上手：一行命令启动参考编译器

在你的 Claude Code / Codex / Cursor 项目里安装 StyleSeed：

git clone https://gitcode.com/gh_mirrors/st/styleseed

安装后，把参考文件路径或 URL 直接丢给/ss-reference：

/ss-reference ./refs/homepage.png ./refs/settings.png https://example.com/product --name acme

参数提示：[reference paths or URLs] [--name slug]，完整路由表见 skills/styleseed/SKILL.md，产品原则基线见 engine/PRODUCT-PRINCIPLES.md。

编译结束后，编译器会向你汇报四件事：学到了什么、哪些轴仍低置信、产物在哪里、验证结果如何——低置信项是诚实输出，不是功能缺失。

📝 小结

StyleSeed 参考编译器把"看参考"升级成了"编译参考"：

1. 输入：截图、URL、Figma 导出，3–8 张同语言参考最佳
2. 过程：9 步固定流水线，每条规则带证据 ID 和置信度
3. 输出：十二轴设计语法 + 6 个项目本地产物文件
4. 验收：用参考里没有的新屏幕验证可迁移性

从此你的 AI 不再是"照着画"，而是真正理解了你想要的产品语言，并在每个新界面上持续执行它。