finesse-ui

finesse — 技术惊艳 · 灵魂鲜明 · 绝不廉价

finesse 构建两类界面，并按设计语境 (§0) 进行路由：

• brand — 设计本身就是产品：落地页、品牌网站、发布页、作品集、主视觉页面。优化目标是 视觉震撼 + 灵魂 + 第一印象 — 真正的视觉引擎，以及鲜明的个性。
• product — 设计服务于产品：仪表盘、管理面板、分析页面、数据表、应用外壳、设置页面。优化目标是 清晰 + 信息密度 + 易用性 — 同时绝不廉价。

贯穿始终的原则相同：精工细作，杜绝 AI 糊弄感。 两者都适用的是通用工艺底线（带色调的中性色、不用 #fff/#000、半透明/细线边框、带色调的阴影、对比度底线）、廉价感黑名单 (§6) 和上线前检查 (§8)。分支不同的是这条底线之上的基础设计和中间层：brand 搭建 §3 品牌基础 (design-dna.md — 颗粒、暗角、展示字体)，并使用主视觉引擎 (§4)；product 则搭建自己的基础 (product-ui.md §0 — 表面、卡片、KPI 磁贴、信息密度)，并使用组件系统 + 数据可视化。仪表盘是一种不同的设计语言，不是带图表的品牌页面 — 它不会继承颗粒 / 暗角 / 巨型主视觉字体 / 深色默认主题 / 主视觉引擎。

还有两种设计语境与它们并列，且彼此的运作方式也不同。 commerce（PDP/PLP/购物车/结账）是混合型 — 根据具体页面的用途，将其路由到 brand 或 product。h5（仅限手机的屏幕：应用 UI、活动页、移动端 PDP、报告 H5）是一种容器：它固定画面框架、安全区域、拇指操作层级和 OS 界面元素，然后在内容语法层面包裹另外三种语境之一。移动端 PDP 是 h5 + commerce；应用仪表盘屏幕是 h5 + product。h5 不能替代内容语境 — 它只负责包裹其中一种。

以下每条规则都取决于具体情境。没有任何规则会自动触发。阅读需求说明，确定设计语境，然后只选用合适的内容。无论面对什么需求，技能都生成同一个页面，那就说明它失败了。

---

Apple 设计语言（可选）

若要采用 Apple 风格 / 苹果风，请在选择基础设计或设计个性之前阅读 references/apple-design.md。保留现有设计语境，添加 design-language=apple，并选择 apple-mode=editorial|app|spatial。其中适用范围明确的覆盖规则优先于下方相冲突的美学默认规则，包括纯黑/白禁令、强制颗粒/暗角、极端行距，以及强制轮换设计个性/引擎。功能性与无障碍要求仍然适用。组件请求仍保留组件范围。编辑风格方案和七个可运行示例收录于 references/apple-patterns.md。

如何使用此技能

0. 先检查范围。 如果需求描述的是一个单独的元素——按钮、输入框、卡片、模态框、Toast——请转到 references/component-scope.md 并遵循其中的说明；下面的步骤 1–6 针对页面整体，不适用于单个组件。如何判断以及如何处理模糊情况，也在该文件中说明。
1. 运行 §0 品牌研读——先阅读 .finesse/log.json（轮换记录，见 divergence.md §4），然后推断语气（品牌还是产品）和灵魂，再动手写代码。输出设计研读：坐标行、一行纯文本 You'll see:，让用户可以实际否决、Images: 行，列出每个需要图片的槽位及图片来源、最可能出现的两个异议，以及用一句话说明轮换情况（§0.B）。写 Images: 行之前，检查本次会话实际可用的工具列表——图像生成工具、MCP 图像工具、网络获取工具，或没有——因为这决定了你能诚实提供什么（asset-sourcing.md §1）；而且在写出工具名称前，先证明它确实能在这里运行（§1.1——列在列表里不代表可用；没有凭据的生成器不属于路径 A）。提出方案后等待；绝不可凭自己的推断生成或下载。
2. 设置 §1 三个旋钮（SOUL · SPECTACLE · DENSITY）。产品语气下，SPECTACLE 固定为低，DENSITY 固定为高。
3. 铺设基底——根据语气选择正确的基底。 所有页面都必须达到通用工艺底线（染色中性色、不用 #fff/#000、半透明／发丝线边框、带色调的阴影、对比度底线——references/design-dna.md §1）。在此基础上，基底分为两类：
   • 品牌 → 使用**§3 品牌基底**（references/design-dna.md）：颗粒、暗角、clamp() 展示字体、默认深色、分层的 Hero 景深。
   • 产品 → 使用产品基底（references/product-ui.md §0）：高级表面／卡片、KPI 磁贴、浮动面板、固定字号阶梯、仅用于反馈的动效。绝不可将颗粒／暗角／超大 Hero 字体／默认深色／Hero 引擎放进仪表盘——这些属于品牌设计语法，不属于产品设计语法。
   • h5 → 先搭建框架（references/h5-mobile.md §1）：视口契约、锁定的 body 和可滚动的 #app、宽度为 560px 的桌面手机框架，然后进行安全区计算（§2）。框架搭好后，再铺设其包裹的语气所对应的基底。
4. 接下来，路径进一步分叉：
   • 品牌 → 选择一个**§2 灵魂**（references/style-personas.md），并构建一个**§4 Hero 引擎**（references/hero-engines.md）。
   • 产品 → 先从 references/product-palettes.md 中选择配色（中性色阶占像素的 80%；跳过这一步，就会导致每个仪表盘都变成蓝色）。然后根据页面用途细分：
     • 供人阅读的页面——仪表盘、分析、监控 → references/product-ui.md（密度、表格、图表、交互状态）。编写前，先打开 examples/ 中最接近的仪表盘（索引：examples/EXAMPLES.md），查看 product-ui.md §0 在已交付代码中的应用——借鉴模式，不要整份复制文件。
     • 供人操作的页面——发布／创建向导、商家和管理控制台、配置、设置、审核队列 → 在 product-ui.md 基础上应用 references/workflow-ui.md（工作流框架、编号分区、单选卡片选项、实时预览、提交前检查、派生总计、草稿／提交）。examples/ 中没有表单工作流页面——请依据参考文档构建，不要把仪表盘示例硬套到表单上。
     • 供人委派任务的页面——AI 工作台、Agent 控制台、Copilot UI，以及任何由用户以外的主体持续执行工作的页面 → 在 product-ui.md 基础上应用 references/ai-console.md（同屏呈现三种时态、运行流、九种运行状态、常驻停止控件、流内审批卡片、作为收据呈现的费用）。打开 examples/relay-agent-console.html。仪表盘的问题是难以阅读，控制台的问题是无法完成任务；这类页面的问题是不值得信任，而且仪表盘的任何部分都解决不了这个问题。
   • h5 → 选择六种页面形态之一（h5-mobile.md §4：应用框架 · 分页卡组 · 吸附式叙事 · 电商堆栈 · 长文网站 · 沉浸式屏幕），然后载入其包裹的内容语气，并遵循上面对应的说明。按照 h5-mobile.md §5 构建原生界面控件，不要自行发明——TabBar 是一种约定，不是设计发挥的空间。
5. 组装骨架——同样要根据语气选择正确的骨架。 品牌 → 根据页面需要完成的任务，从四种**§5 品牌骨架**（落地页 · 作品集 · 产品画册 · 工作室）中选择。产品 → 骨架是 product-ui.md §1 中的外壳形态（侧边栏 · 浮动面板 · Bento · 三联面板等），不是 §5。h5 → 骨架由框架（§1）和选定的页面形态（§4）组成；品牌骨架和 product-ui.md §1 中的桌面外壳都不适用于 390px 宽的界面。以上三类都只能采用有明确动效目的的设计。
6. 交付前，运行 §6 廉价感黑名单（references/anti-cheap.md）、移动端底线（references/mobile-floor.md）和 §8 交付前检查（references/preflight.md）。h5 构建应运行 h5-mobile.md §9–§10，而不是移动端底线——这些检查针对刘海／框架／滚动／触控方面的门槛，与“桌面页面适配手机”导致的问题不同。然后记录构建——追加到 .finesse/log.json，并在 CSS 中写入标记（divergence.md §4.3）。未记录的构建会与下一次运行发生冲突。 references/*.md 文件包含深入资料。根据当前阶段加载所需文件，不要将它们全部内嵌。 | 参考资料 | 加载时机 | |-----------|-------------| | apple-design.md | 明确提出 Apple / 苹果风格的需求：模式路由、范围限定的覆盖、排版、表面与材质 | | apple-patterns.md | Apple 风格的编辑卡片、Bento、对比度、间距、圆角和图库；七个可运行的示例 | | component-scope.md | 在品牌解读之前，当需求只涉及一个元素，而不是一个页面时——按钮、输入框、卡片、模态框。引导至组件流程：保留风格基调、工艺底线和现有令牌，跳过骨架／主视觉引擎／轮播，并执行判断组件是否制作精良的唯一关卡——交付全部八种状态，另附预览文件，让这些状态可见，而非仅口头声称 | | divergence.md | 在 §0、设计解读之前——反趋同层。 当输出不断趋同、用户说“感觉很普通／和其他 AI 网站没区别”，或在做出任何灵魂决策之前加载：五轴构成法（构成一个灵魂，而不是从列表中选择一个）、反默认的双高度检查、打破模型 argmax 的掷骰，以及先断言再确认的方向提议。§4 是记忆机制——.finesse/log.json + CSS 标记，并定义了读取步骤（§0）和写入步骤（§8）；没有它，“不要重复”就只是一条没有依据的规则。先阅读 §0 的风格边界——差异化是品牌的目标，也是产品的有限策略（绝不偏离仪表板导航惯例） | | design-dna.md | 构建品牌基底（纹理、暗角、展示字体、颜色令牌、调色板系列）。产品／仪表板只继承其通用工艺底线（§1：带色调的中性色、半透明边框、对比度底线）——仪表板的表面／卡片／字体／动效来自 product-ui.md §0，而非此处 | | theming.md | 需求要求明暗切换或多个可切换的命名主题——运行时调色板切换中的令牌角色与硬编码颜色陷阱（而非默认的单一锁定调色板） | | motion.md | 任何提到动效的需求——动效 · 炫酷 · "make it move" · "有动画"——以及每个 brand 构建。 引擎之上的动效层：两个无人区分的轴（效果：看到什么；路径：如何实现）、六种路径及其权重、静止形式和失效模式（CSS · 原生滚动驱动 · View Transitions/WAAPI · GSAP · Canvas/WebGL · 零依赖 CSS 3D 空间）、包含约 80 种变体的十类效果目录及各类的粗糙形式、避免模型为四行工作调用 60KB 代码的效果 → 路径查找表，以及用四种不同类别的四个节拍取代“一个主视觉引擎 + 通用淡入上移”的节拍表。请在 hero-engines.md 之前加载：该文件回答用哪个引擎，此文件回答是否根本需要引擎 | | interaction-motion.md | 构建内容中有任何可拖动元素，或界面需要响应手指操作时——底部面板、抽屉、滑动行、选择器、下拉刷新、滑动返回、带卡点的面板、展开成页面的卡片、需要给出反馈的确认按钮。动效的另一半：motion.md 涵盖观看者观看的内容（时间线由你掌控），此文件涵盖观看者触发的内容（由用户掌控）。包含评判面板的测试——是否在处理输入本身的不确定性：速度 · 方向 · 阈值 · 丢帧——四阶段跟手链路（1：1 跟踪 → 越界阻尼 → 提交 → 回弹）、窗口化速度（两个显而易见的公式都不对）、双条件关闭、卡点排序、面板的五项决策（起点 · 层级 · 控制器 · 卡点 · 目标位置）、FLIP 中起关键作用的双重 rAF，以及反例表。也适用于超过 390px 的屏幕——可折叠的控制台侧边栏也是同一套机制。运行示例：examples/h5-sheet-lab.html | | hero-engines.md | 构建主视觉引擎（品牌风格）；还涵盖用于页面其他非主视觉时刻的辅助动效词汇（逐字符分裂揭示、磁吸按钮、帷幕擦除、扫描线、卡片逐张飞入）——即决策层（选择哪个引擎）。范围说明：这是 motion.md 六种路径中最重的两种（R4 GSAP · R5 Canvas/WebGL）——只有该文件的查找表引导你使用重型路径后，才来这里 | | page-crafting.md | 品牌实现层——相当于 dataviz.md 之于 chart-crafting.md。当你不再选择方案、开始编写时加载：动效关卡（REDUCE/FINE 探测 + 终止状态——通用要求，产品也适用）、Canvas DPR + 循环调色板 + 振幅包络、mask-image 照片渐隐、摄影主视觉遮罩叠层、容器查询面板、交替分区上的导航滚动定位、零依赖水平粘滞固定、爆炸视图拖动、色彩方案固定 + 吸附、clip-path 擦除、手写 FLIP 灯箱、生成式（断头台切分）布局、纯 CSS 几何拼贴、整页引擎 + 分区遮罩，以及 Fibonacci→KNN→遍历的 3D 配方 | | h5-mobile.md | 页面只在手机上呈现时——H5 / 移动端页面 / 活动页 / 小程序页 / app UI 原型 / 移动端 PDP / 报告 H5。第四种风格基调，也是一种容器：它固定画布，并包裹另一种风格基调来承载内容。包含视口约定、与其他所有风格基调相反的锁定 body／滚动 #app 架构、560px 桌面手机框、安全区计算、拇指操作区域反转（主要操作位于底部）、桌面端没有对应规则的触控要求（passive、pointercancel、点击高亮、44px）、六种手机形态，以及原生界面元素方案——状态栏、TabBar、底部面板、FAB、推入式转场和手写 FLIP 转场。不要与 mobile-floor.md 混淆：后者防止桌面页面在手机上出现问题；此文件用于完全没有桌面形态的页面 | | mobile-floor.md | 任何会在手机上展示的构建——也就是说，几乎所有构建。手机布局损坏的六个机械原因及其对应修复：overflow-x: clip 与 hidden（以及为何 hidden 会破坏粘滞导航）、带图片的网格轨道使用 minmax(0,1fr)、任何宽度下都不会换行的可点击文本、展示标题使用 overflow-wrap: anywhere、只用一个 top:0 粘滞元素，以及覆盖 §3 中大写展示字体 .86–.95 设置的全大写 line-height 底线。preflight.md 会问页面是否会出问题；此文件说明问题为何会发生 | | 3d-effects.md | 添加 3D 效果——CSS 倾斜／翻转／封面流／深度视差，或 Three.js 模型／位移 | | style-personas.md | 选择一个灵魂（品牌风格基调） | | inspiration-catalog.md | 已选定设计角色，但想了解更多适合该风格的成熟技巧，或需求无法很好地匹配 10 种设计角色中的任何一种 | | plain-words.md | 任何需要编写用户会阅读的文本时——§0.B 设计解读、audit 发现、记忆锁定通知。finesse 的整套词汇（register、SPECTACLE、grain、scrim、eyebrow、hairline）在内部至关重要，对外却晦涩难懂；它们恰好会在用户需要做出决策的时刻泄露出来。提供单分句、可观察的解释，以及不得泄露给用户的内部术语列表（五轴坐标、轴字母、参考文件名） | | anti-cheap.md | 交付前——廉价感检查 | | product-ui.md | 仪表板／管理后台／数据应用——供人阅读的页面（产品风格基调） | | workflow-ui.md | 供人操作的页面（产品风格基调）：发布／创建向导、商家与管理控制台、配置、设置、审核队列——工作流外壳、带编号的分区卡片、单选卡片、实时预览侧栏、提交前检查、衍生预算面板、草稿／提交 | | ai-console.md | 工作由用户以外的对象执行，而页面的职责是让这一过程值得信赖时——AI 工作台 / Agent 控制台 / 智能体控制台 / copilot UI / 值守台。这是能力层，不是页面类型：先判断后台还是工作台（§1 的判定器），选定主体，再叠加此层——它的失败表现是不可信，而非不可读或无法完成；任何一种页面都可能出现这种失败。包含必须持续回答的四个问题、同一屏幕上的三种时态（队列 · 实时运行 · 历史）、取代图表成为核心的运行流、product-ui.md §5 的八种组件状态未覆盖的九种运行状态（包括 partial 和 stopped）、作为常驻主要控件的停止按钮、带关联证据的流内审批卡片、一等重要的成本／上下文、产物区域、桌面端三列外壳以及手机上的变化（§9）。还包含此类别成败攸关的调色板规则：AI 紫色默认值，以及 --auto 与 --needs 语义配对 | | product-palettes.md | 任何产品风格基调的页面——design-dna.md §6 未覆盖的颜色层：5 组带色调的中性色阶、16 种强调色（含明暗模式 + 强调色上的文本对比度）、12 组可直接粘贴使用的配色方案、知名 SaaS 调色板（Linear/Stripe/Supabase/Grafana…）。请在选择颜色之前加载，否则你会直接使用蓝色 | | examples/EXAMPLES.md | 正向参考案例库——22 个真实交付页面（9 个品牌 + 8 个仪表板 + 1 个 AI 控制台 + 4 个 H5），每个文件都附有“学习要点”表。开始构建前先打开最接近的案例，尤其是仪表板和手机外壳（借鉴模式，而非整个文件） | | dataviz.md | 超出入门表格范围的图表密集型产品 UI——完整的 25 种类型选择矩阵、无障碍等级 + 必需的备用方案、库的选择（决策层） | | chart-crafting.md | 单个自包含文件中的任何手工构建仪表板图表（条形图必读——避免陷入条形码图表陷阱）——无库实现层：数值→高度规则、div height:value/max% 条形图方案、SVG 坐标归一化、折线／面积图绘制、圆环图／仪表盘增长、堆叠条形图、迷你图、三种动画 × 减少动态效果设置的配合方式、滑块驱动的实时更新 | | commerce-ui.md | 商品详情页（PDP）、商品列表／分类页（PLP）、购物车、结账——电商风格基调 | | asset-sourcing.md | 在 §0.B，只要页面上有任何位置需要图片承载内容就加载——主视觉、图库、H5 封面或场景、PDP 图片，甚至仪表板空状态或头像行。这不是类别清单，也不是交付时检查：只有在编写布局前触发，素材路径（生成 · 真实图库 · 生成式占位图）和所有路径都必须先询问的关卡才会生效。包含用于判断可诚实提供哪些路径的会话能力检查，以及说明图片命名只是让用户回答的提议——绝不代表可以生成或下载的规则 | | preflight.md | 宣布“完成”前的最终检查清单 | | design-model.md | 多页面项目——令牌一致性 | | redesign-mode.md | 升级现有页面——先审查后修改协议 | | audit.md | 只读诊断——廉价感 + 视觉效果 + 预检扫描 | | init.md | 新项目——编写 PRODUCT.md（持久化需求说明） | | document.md | 现有代码库——从真实代码提取 design-model.yaml |

---

命令

默认情况下，finesse 会运行完整构建，但也支持动词命令，用于针对现有页面进行迭代——这样，针对单个问题时就不必重新运行完整的 Brand Read。每条命令都会加载一份参考资料，并完成一项任务。

命令	类别	功能	参考资料
craft [brief]	构建	完整流程：Brand Read → Dials → substrate → engine → assemble（默认）	全部
init	设置	新建项目：编写 PRODUCT.md（register、soul、locked dials、anti-references）——后续每项任务都会读取的 brief	init.md
document	设置	现有代码库：将已构建的设计系统提取到 design-model.yaml；报告偏差	document.md
audit [target]	评估	只读诊断：运行 cheapness blacklist + spectacle-shown + pre-flight，输出问题清单。不会更改任何内容。	audit.md
bolder [target]	优化	将 SPECTACLE 提高 +2，升级引擎（例如 Canvas → Three.js）	hero-engines.md
quieter [target]	优化	将 SPECTACLE 降低 −2，改用 GSAP / 纯 CSS；让过载的页面平静下来	hero-engines.md
soul [target]	优化	当当前页面的氛围不对时，重新选择 persona / soul	style-personas.md
diverge [target]	优化	**每个页面看起来都一样。**系统性修复，而非逐页修复：根据五个正交维度重新组合 soul，执行双层级 anti-default 检查，根据模型的 argmax 进行反向选择，并检查已使用清单。当用户说“感觉很普通 / 像其他所有 AI 网站 / 每次都差不多”时使用	divergence.md
animate [target]	增强	重新剪辑页面的节拍表——只调整动效，不改动 soul 和 substrate。不只是 hero：选择动效家族（§2），为每个家族选择成本最低的方案（§3），遵守预算（一个重型节拍，总计四个，同一家族不超过一个），并为每个静态画面编排动效。替换 hero 引擎只是其中一种情况，并非这条命令的全部。首先判断：这是观众观看的节拍，还是观众触发的节拍？「抽屉能不能拖」「手势不跟手」「弹窗感觉很假」属于第二种，应使用 interaction-motion.md——其预算规则不适用于此处，因为可拖动面板不是可以剪辑的节拍	motion.md → hero-engines.md ·（由指针驱动 → interaction-motion.md）
depth [target]	增强	添加一个 3D 效果——CSS 伪 3D（倾斜 · 翻转 · coverflow · 深度视差）或 Three.js（模型查看器 · 图像位移）	3d-effects.md
densify [target]	增强	调整 DENSITY ±——添加 / 删除内容，调整每个视口的信息量	product-ui.md
redesign [target]	迭代	改进现有页面，先进行审查；针对单个问题时绝不完整重建	redesign-mode.md

路由规则

1. 首个词与某个命令匹配 → 加载该命令的参考资料并遵循。命令名称后面的所有内容都是目标。搭建 §3 基础结构，并运行相关的 §6/§8 检查；但跳过 §0–§5 中不适用于该单一操作的部分（例如，quieter 不会重新选择灵魂）。
2. 首个词不匹配，但意图明显对应一个命令（“太朴素 / 无聊” → bolder；“太花哨” → quieter；“这页的氛围不对” → soul；“感觉很普通 / 每页看起来都一样 / 每次都差不多” → diverge；“让它更出彩” → animate；“动效 / 炫酷 / 加点动画 / 让它动起来 / 太静了” → animate（先加载 motion.md——这些词本身不会选择任何内容，因此 §4 的节奏表会将其转化为用户可以否决的决策）；“增加纵深感 / 做成立体效果 / 倾斜 / 视差” → depth；“太稀疏 / 太密集” → densify；“改进 / 修复这个页面” → redesign）→ 路由到该命令，并按用户已调用该命令继续。如果有两个命令都适用，只询问一次该选哪一个。
3. 完全没有参数（单独输入 /finesse）→ 用户是在问“这里我该做什么？”。不要直接贴出静态菜单。读取一些成本低的信号，优先推荐最有价值的 2–3 个命令，每个附上一行理由，然后再提供完整表格作为备选。绝不自动运行——先给出建议，由用户确认。信号 → 选择：
   • 没有 PRODUCT.md，但已有实际代码 / 页面 → 优先推荐 document（记录已构建的内容）和 / 或 init（编写简报）。全新的空项目 → 先 init，再 craft。
   • 存在 PRODUCT.md，已有构建完成的页面，且从未审核过 → 优先推荐 audit <surface>（只读健康检查）。
   • git 工作树指向单个页面 / 文件 → 将 audit 或 redesign 限定在这些文件上，并明确列出文件名。
   • 最近的 audit 发现 P0/P1 问题 → 优先推荐 redesign（修复待处理问题），或根据发现的问题选择具体的优化命令（gradient-text / eyebrows → quieter / soul；动效平淡 → animate）。
   • 尚未构建任何内容，但简报明确 → craft。 只给出 2–3 个明确建议，并附上可以直接输入的准确命令。菜单是备选，不是开场内容。
4. 指定了目标但没有命令，且要构建新内容 → 先检查范围，再检查表面。 如果简报指定了单个元素（按钮、输入框、卡片、模态框），则路由到 references/component-scope.md——页面流程的骨架、引擎和轮换规则都不适用于单个组件，而且决定其质量的关键因素（交付全部八种状态）不会在页面流程中的任何位置进行检查。如果简报指定的是仅适用于手机的页面（H5 / 移动端页面 / 活动页 / 小程序页 / app 原型），则先加载 references/h5-mobile.md，并在开始其他工作前搭建页面框架——先按桌面端组装页面、再挤压到 406px 的做法，正是该文件旨在防止的失败模式。其他情况则运行完整的 craft 流程（§0 → §8）——这是“帮我做一个落地页 / 仪表盘”的默认流程。
5. audit 为只读操作。 它只报告发现的问题，不会修改代码。其他所有命令都可以修改目标。

自动触发机制不变：finesse 仍会通过其 description 从自然语言触发。命令是新增的精确入口（/finesse quieter page.html），而非替代方案——两种方式都会进入相同的参考资料。

修改页面的任何命令执行完毕后，在宣布完成前运行相关的 §8 发布前检查。

---

0. 品牌解读（从第一步开始）

大多数 AI 设计输出都很糟糕，因为模型没有解读简报，就直接套用默认审美。不要这样做。

0.A 确定风格基调（后续所有决策都由此分支决定）

先问一个表面问题：这个页面是否有桌面端形式？ 如果没有——它是从聊天消息或二维码打开、在手机模型中查看的 H5 / 移动端页面 / 活动页 / 小程序页 / app 原型——那么它的类别就是 h5，并且它是一个容器：前往 references/h5-mobile.md，搭建框架，然后回到这里选择它下面的内容类别。h5 包裹以下三种类别之一，绝不会取代其中任何一种。如果需求只写了“手机端的页面”，用这个问题来判定：请见 h5-mobile.md §0：“这个页面只在手机上打开，还是电脑上也要好看？”——如果答案是“两者都要”，那它就是应用了 mobile-floor.md 的品牌／产品页面，为它搭建手机框架就是错误的。

对「工作台」也先问同一个问题，而且要在做任何其他判断之前先问。 「工作台」和「后台」是两种不同的产品，把前者默认当成后者，是这项技能中最容易导致错误构建的情况。问清楚它围绕什么展开——一批业务对象 → 后台；他自己反复在做的一件事 → 工作台——绝不要问有多少人使用。只有在这之后才考虑屏幕，而且只用来选择工作台的主体（桌面端外壳，还是 h5-mobile.md 变体 A.1）；负责执行工作的 Agent 属于其上的能力层（ai-console.md），而不是第三种类型。完整判定方法见 §1 的拨盘表。

• brand — 设计本身就是产品：落地页、品牌网站、发布页、作品集、营销活动、主视觉页。大胆、有主见、惊艳夺目。采用灵魂 + 主视觉引擎路线（§2、§4）。
• product — 设计服务于产品：仪表盘、管理后台、分析、数据表、应用外壳、设置、工具。优先保证清晰、信息密度和易用性。采用组件系统路线（references/product-ui.md）。但绝不廉价——它沿用通用工艺底线（§3 最后三条）和廉价感黑名单（§6），并以产品底层基底（product-ui.md §0）为基础，而非品牌底层基底的纹理／暗角／主视觉字体／默认深色模式。
  • 再细分一次——但第一次划分是后台 vs 工作台，而不是按页面任务列举。 问问它围绕什么展开：一批业务对象 → 后台；一个人反复执行的一件事 → 工作台（完整判定方式见 §1 的调节项表——这是此技能中影响最大、也最容易判断错的分叉）。
    • 后台按任务分为读取和操作。供人读取的仪表盘，如果不可读，就算失败——使用 product-ui.md，不作改动。主要操作是影响重大的提交（发布／上线／提交／保存配置——商家发布营销活动、管理员配置规则）的页面，则是供人操作的页面；如果无法完成操作，就算失败：在此基础上加载 references/workflow-ui.md。登录表单和搜索筛选不算；product-ui.md §4 已涵盖这些内容。
    • 工作台按使用设备而非任务细分——桌面端保留 product-ui.md 的外壳，密度和灵魂保持在 A.1 水平；手机端使用 h5-mobile.md 变体 A.1。无论哪种设备，都属于同一种类型。
    • 然后，与以上所有划分正交地考虑：是否有用户以外的主体会在一段时间内执行工作？ Agent 执行多步骤任务、输出持续流入、运行可能中途失败、存在队列 → 在你已选的方案上叠加 references/ai-console.md（其 §8 是桌面端外壳，§9 是手机版式）。如果不可信，就算失败——你无法判断它在做什么、为什么这么做、花费多少，或如何停止；而读取／操作方案都没有涵盖这些问题。**这是一项能力，而非一个类别：**没有 Agent 的工作台不需要它；加入 Agent 的后台也不会因此变成工作台。没有工具、队列和产物的聊天机器人也不属于这一类；关于模型开销的仪表盘仍然只是仪表盘。
  • 这里颜色不是可选项。 编写 CSS 前，先从 references/product-palettes.md 中选择。 “仪表盘”只能预测出蓝色；决定颜色的是产品。
• commerce — 第三种混合情况：产品详情页（PDP）、分类／列表页（PLP）、购物车、结账。它无法明确归入上述任一类，因此不要强行归类——根据具体页面承担的任务来决定路线：
  • 主推单款商品的 PDP（单个 SKU、新品发布、旗舰产品）偏向 brand：选择一种灵魂（§2），但规格／评价／信任信号仍须保持高信息密度——PDP 骨架见 references/commerce-ui.md。
  • SKU 众多的 PLP／商城（筛选、排序、包含众多商品的网格）偏向 product：保持高信息密度、低视觉冲击力，与仪表盘相同——网格／筛选模式见 references/product-ui.md；电商专属规则（价格／CTA 位置、购物车、结账、禁止使用暗黑模式设计）见 references/commerce-ui.md。
  • 不确定时，问问自己：“这个页面是要营造某款产品的氛围，还是帮助用户比较／筛选多款产品？”

先阅读项目记忆——全部三个文件，它们回答的是不同问题。

文件	回答的问题	编写者
PRODUCT.md	什么必须保持不变？——语域、用户、品牌个性、锁定的调节项、反面参考。以此为准，覆盖你的猜测。	init
design-model.yaml	已经构建了什么？——锁定的配色／字体／底层基底，确保此页面与同系列页面一致。	document
.finesse/log.json	什么必须改变？——最近 20 次构建的五轴坐标。用于轮换的记忆。	每次构建完成后（§8）
前两个锁定了一致性，第三个则强制要求差异化。它们的目标相反，因此有意放在不同的文件中——见 divergence.md §4。如果 .finesse/log.json 不存在，请在代码库中搜索 /* finesse · CSS 印记，并据此推断一条记录；如果两者都不存在，说明这是首次运行，没有轮换限制。

• 没有 PRODUCT.md，且是多页或重复项目、需求简略 → 提议先运行 init（用一个 PRODUCT.md 确保后续每个页面保持一致）。不要强迫用户在一次性页面中采用它。
• 已有代码库，但没有 design-model.yaml → 提议运行 document，先记录现有内容，再在此基础上添加。
• 如果已有记忆，但新请求与之矛盾，请指出冲突——不要悄悄覆盖锁定内容。

0.B 生成前先输出一段“设计解读”——明确提出一个方向，不要让用户先做选择

先说明要舍弃的默认方案（§0.D），再说明方向——然后用用户能想象的语言描述页面会是什么样子，并给出两种具体的反对方式：

Lazy default (rejected): {the obvious aesthetic for this category}
Design Read: {industry} · {soul in 2-3 words} · register={brand|product} · SPECTACLE={n} ·
             layout={dominant layout family} · engine={type}
You'll see: {what appears on screen, in plain observable terms — color, motion, type size, structure}
Motion: {the beat sheet — one plain-language line per beat, plus the still. Omit only if
        the page genuinely doesn't move. Route names never appear here — motion.md §4}
Images: {how many, of what, and where they'd come from — or "none, and here's why"}
Not right? Most likely one of these: ① {the most probable objection} ② {the second}
Rotation: {plain sentence — which recent direction this deliberately avoids}

示例：

Lazy default (rejected): dark page, violet glow, floating 3D render, three feature cards.
Design Read: deep-space astronomy · cinematic + reverent · register=brand · SPECTACLE=8 ·
             layout=full-page engine + scrimmed sections · engine=Three.js particle galaxy
You'll see: a near-black page with slow-drifting star dust behind everything, a very large
            headline sitting on top of it, and the galaxy rotating as you scroll.
Motion: 首屏  星尘在背后慢慢漂，标题压在上面
        滚动  往下滚星系跟着转，越滚越深
        交互  切换观测目标时，参数自己重排，不是整块刷新
        收尾  底部那行坐标逐字浮起
        静止版 星系定格在一帧构图最好的，其余全停
Images: 3 — a wide nebula plate behind the hero, 2 square instrument details in the spec band.
        I can generate them here (they'd share one cold-blue grade); say the word and I'll
        list the shots before spending anything. Or the page ships engine-only, no photography.
Not right? Most likely one of these: ① you don't want a moving background
            ② near-black is too heavy and you want this light.
Rotation: deliberately steering clear of the last three builds (machined metal / paper press /
          phosphor terminal) — this one is water and drift.

You'll see: 是用户真正会回答的那一行。 Design Read: 这一行是给你的坐标——SPECTACLE=8、scrimmed sections 和 Three.js particle galaxy，这三样都是非设计师无法想象、无法排序、也就无法否决的内容。只需回答一个问题就能通过的关卡，不是真正的关卡。描述实际呈现出来的内容：颜色、是否有动态效果、字体大小、结构。不要用行话——如果术语不可避免，请查阅 references/plain-words.md。

这里要写 Motion:，因为“炫酷”和“好看”无法选出任何具体方案。 这些词会让所有模型都给出同一个答案——WebGL 粒子首屏加上向上淡入的各个区块——因此，包含这些词的需求并没有决定动态效果，只是留了空白。不要要求他再具体一些；他不懂这些术语，而且这样问只会多浪费一轮，换来一句“就是要好看那种”。 用画面描述来明确列出节奏安排，每个节奏点一行，并让两个 Not right? 选项在结构上代表不同的节奏点——“你想要能拖着转的，不是自己往前走的”只需一个词就能回答。要覆盖整个页面，而不只是首屏：一个惊艳的节奏点加上三个普通的向上淡入效果，正是这一行要打破的模式。路线名称是内部信息（R6、animation-timeline、View Transitions）——他看画面描述，你保留坐标（plain-words.md）。静态状态也要写在这里：这是用户可以否决的一个节奏点，而不是最后再补上的备用方案。完整方法见 references/motion.md §4。

这里要写 Images:，因为用户无法要求自己不知道你能做到的事。 每种类型的页面都有能靠图片呈现的部分——品牌首屏、PDP 图库、H5 封面或氛围场景，甚至仪表盘的空状态或头像行——默认的失败方式却是悄无声息的：页面本该放照片的地方用了渐变，而且从头到尾都没人提过“图片”。所以无论页面类型和类别是什么，都要在任何代码生成之前，于设计解读中指出图片位置。 统计数量，说明每张图片描绘什么，并说明本次会话中图片的来源——这意味着要先检查你实际可用的工具列表（有图像生成工具 → 可以提议生成；只有网络获取能力 → 使用真实图库图片；两者都没有 → 如实说明），并在列出来源之前确认其可用（asset-sourcing.md §1.1）。references/asset-sourcing.md 规定了这三种路径的流程，授权规则仍然适用——这一行的作用是让流程尽早启动，此时用户答应还不需要付出太多代价。如果后来发现列出的来源不可用，§1.2 要求改用下一级方案并说明原因——绝不能从生成图片直接退到手绘占位图。

列出可选项是在提供选择，绝不是放行。先询问，再等待——不要生成，也不要下载。 这句话是为了让用户知道有这个选项；这并不代表你可以因为推断他会想要，就擅自消耗他的生成额度或从开放网络获取素材。这两种操作都会产生实际成本和来源追溯方面的后果，只有用户回答“是”才能授权其中任何一种。这要防止的失败，正是静默渐变的反面：模型认定设计简报暗示了需要图片，于是页面上出现了四张未经询问、却已计费的图片。说明数量和来源，然后停下，让他回答——这与 asset-sourcing.md §2/§3 对两种路径设置的关卡相同，只不过现在把关卡移到了仍然不产生费用的阶段。

如果页面确实不需要摄影素材（例如磷光终端风格的页面或纯排版的粗野主义页面），就写 none，并用一个短句说明原因；用户也可以否决这个决定，而且必须说明。

不合适？ 必须列出实际的分歧点，而不是泛泛地邀请反馈。 “欢迎告诉我你的想法”得不到任何反馈。列出两个具体、可能出现且彼此不同的异议，让用户有明确的内容可以指出；而且每一项都必须是你确实会据此采取不同设计的方面——通常是主题和动效，因为整个页面都取决于这两个决定。

旋转说明不是可选项，也不是装饰。 你在脑中进行的旋转，对你和用户来说，事后都无法与仅仅口头描述的旋转区分。趁代码尚不存在时把它写下来，才能让糟糕的旋转在仍可免费修正时被发现。把它写成句子，不要只写轴字母： differs on E + C + A (3/5 ✓) 对用户来说无法证伪——他们不知道 E 是什么，自然也无法提出自己其实想要机加工金属风格。五轴坐标仍会记录在 .finesse/log.json 和 CSS 标记（§8.0）中，审计时会从那里读取。阈值和格式见 divergence.md §4.4。仅在项目的首次构建时（没有日志，也没有标记）才省略这句话——并说明省略的原因。

完成 Design Read 后就停止。此时不要生成任何代码。 等待用户确认或要求调整方向。

直接断言，不要投票。 说明你将采用的设计方向，并邀请用户否决。不要让用户从三个形容词选项中挑选——没人能仅凭看不见的词语选出设计，所以他们只会选第一个，而你什么也没弄清楚。答案已经明确时，提供选项只是做戏。注意，你将看到： + 不合适？ 不是菜单：它断言一个方向，并预先指出两个最可能出现的问题，这样用户才能真正行使否决权，而不是走个形式。

当用户完全无法评估这项断言时，就属于 Mode 2。 如果设计简报没有提供任何方向性信息——只有“好看”“高级”“有质感”“premium”“clean”等无方向的赞美词，或明确表示“我不太说得清”——那么无论 你将看到： 写得多清楚，用户都会不加思考地认可，因为他们没有比较依据。这时应构建三个真正不同的变体（divergence.md §7 Mode 2 + 眯眼测试）。无方向的形容词与真正模棱两可的设计简报一样，都是需要做出分支判断的信号。

例外情况——设计简报确实存在分歧时（一个“premium”品牌可能走简约的北欧风，也可能走繁复的巴洛克风；一个个人网站可能做成作品集，也可能做成宣言）：不要描述选项，直接构建它们。构建三个低保真但真实且可截图的页面，每个页面在不同的轴上变化，然后让用户查看。参见 references/divergence.md §7——其中包括防止三个变体最终趋同的眯眼测试。

如果不同项目的输出总是千篇一律，解决办法不是给这一行换个更好的形容词，而是看 references/divergence.md（用五个维度来构建风格，而不是从列表里挑选；掷骰子打破模型的默认倾向；维护一份已用清单，让“不重复”规则真正生效）。

0.C 如果需求模糊，只问一个问题——不要盲目猜测

问一个尖锐的问题，胜过反复五轮采用错误的默认值。问最能改变输出的问题：“这应该给人克制的编辑风格，还是极致的视觉冲击？” / “访客离开 10 秒后，应该记住什么？” 然后就此定案。等待对方回答后再继续。

0.C.1 用用户能采取行动的语言表达

finesse 的词汇是内部用语。register、SPECTACLE、grain、scrim、eyebrow、hairline、layout family 都适合用于推理，但读到这些词的人一个也回答不了。它们只会出现在三个地方，而这三处都需要用户作出决定：

位置	不加解释会出现的问题
§0.B Design Read	确认环节——用户只能说“继续”
audit 发现项	用户不知道该先修复哪一项
记忆锁定通知（init.md）	用户不知道锁定了什么，也不知道如何解锁

规则：术语首次出现在面向用户的文本中时，后面要用一个分句解释其可观察到的含义；此后直接使用术语。 解释用语表，以及绝不能出现在用户面前的内部术语：references/plain-words.md。此规则只适用于输出——推理时随你使用任何词汇。

0.D 抵制默认倾向

指出这份需求中最敷衍的默认做法，然后打破它。“咖啡品牌 → 默认方案是暖米色 + 黄铜衬线字体。我决定改用 {x}。” 最常见、最容易识别的 AI 痕迹，就是选择该类别显而易见的美学风格。（反射式拒绝清单见 references/anti-cheap.md。）

0.E Quick-Start Dial Mapping

If the brief contains these cues, use these presets as a starting point before refining in §1:

User says	SOUL	SPECTACLE	DENSITY
"premium", "luxury", "high-end"	8	5	3
"minimal", "clean", "understated"	6	3	3
"bold", "striking", "impactful"	7	7	4
"editorial", "magazine", "publication"	8	4	6
"tech", "AI", "SaaS" marketing	6	7	5
"corporate", "B2B", "enterprise"	4	3	6
"playful", "vibrant", "creative"	7	6	5
"data-heavy", "dashboard", "analytics"	4	2	9
"商家后台", "管理后台", "admin console", "back-office"	5	2	7
"工作台" 裸词，没有别的线索	—	—	— ← 不套用任何一行，先问它围着什么转（下方解析器）
工作台 · 电脑上开 — "工作台", "值守台", "控制台", "专属工作台"	6	2	6–7
工作台 · 手机上开 — "每日工作台", "打卡页", "记录页", "daily desk" (h5 · morph A.1)	6	2	4–5
↳ 叠加项：有 agent 替他跑活 — "AI 工作台", "agent console", "智能体控制台", "copilot UI"	—	—	+1 ← 不换行，在上面两行之上加 ai-console.md 的机械层
"发布/创建流程", "wizard", "publish flow", "配置", "settings"	4	1	7
"landing page" (no other cues)	7	6	4
"portfolio"	8	6	3
"product page", "PDP", "product detail"	6	4	6
"商品列表", "PLP", "category page", "marketplace"	3	2	8
"app 原型", "app screen", "移动端 app UI" (h5 · morph A)	6	3	6–8
"活动页", "H5 营销页", "campaign H5" (h5 · morph B)	8	6	3–4
"报告 H5", "年度报告", "data report H5" (h5 · morph C)	8	6	5
"移动端商详", "mobile PDP" (h5 · morph D)	6	3	8
"手机官网", "mobile site" (h5 · morph E)	7	5	6
"天气/海报类单屏", "ambient screen" (h5 · morph F)	9	7–8	2–3

Override these immediately if the brief provides stronger or contradicting signals. The h5 rows set the dials for the morphology (h5-mobile.md §0); the wrapped content register may adjust them.

后台 vs 工作台 — one fork, then two modifiers

「工作台」 and 「后台」 are the two things, and they are not the same product. Everything else people say — 个人工作台 · AI 工作台 · 每日工作台 · 值守台 · 控制台 — is one of these two wearing a modifier. Resolve it in three steps, in order:

① 围着什么转 — this is the fork, and the only one:

	后台 back-office	工作台 workbench
围着什么转	一批业务对象 — N 个客户 · 订单 · 设备 · 工单 · 学员	他自己反复在做的一件事 — 记账 · 训练 · 带娃 · 写作 · 值守 · 处理异常单
为什么打开	有活要处理：来单了、告警了、该出报表了	到点了，回来看一眼 · 记一笔 · 收个尾
数据谁写	系统、对接、别人	他自己，几秒钟，成本必须接近零
性格	中性是义务 — 它活在别人的品牌里，旁边还有十一个工具	必须有 — 这是他的台子，中性的没有第二次打开的理由
建法	product-ui.md（+ workflow-ui.md 如果主动作是提交/发布）	下面第 ② 步选载体

② 在哪开 — 这只决定载体，不换物种。 工作台是一个东西、两副身体：

载体	壳	例子
电脑上开	product-ui.md 的 shell，但带 A.1 的性格和克制的密度 —— 不是一个塞满图表的 dashboard	examples/relay-agent-console.html
手机上开	h5-mobile.md morph A.1，锁定手机框 + TabBar，DENSITY 4–5	examples/h5-fern-meal-desk.html · h5-peach-daily-desk.html

③ 有没有东西替他干活 — 这是能力层，跟①②正交。 如果有 agent 在跑、输出是流式的、跑一半会失败、有队列 —— 叠加 ai-console.md 的机械层（运行流 · 九个运行状态 · 常驻停止 · 流内审批卡 · 成本回执）。它不是第三个物种，是工作台可以带的一种能力，桌面和手机两副身体都能带（ai-console.md §8 是桌面壳，§9 是手机形态）。一个没有 agent 的工作台不用加这层；一个后台接了 agent 也不会因此变成工作台。

两个不是判据的东西，别拿它们当判据。 人数：一家人共用的记账台、一个小组共用的值守台，都是工作台；一个人独用的进销存，仍然是后台。屏幕：它只在第 ② 步决定长什么样，从来不决定这是什么。

When the brief is just 「工作台」 with nothing else, that word has no dials row — ask, don't guess. One question resolves ①, and ②③ usually fall out of his answer:

这个台子主要围着什么转？
一批客户/订单/设备这类东西 · 你自己反复在做的一件事（记账、值守、带娃…）

Defaulting 「工作台」 to a back-office is the single most likely mis-build in this skill, and it is invisible when it happens — the page comes out competent, dense, neutral and correct, and it is the wrong product. That's why the row above is blank rather than helpful: a dials preset for a word this overloaded would be a guess wearing a table's clothes.

---

1. 三个拨盘

根据设计解读明确设定这些值。后续所有工作都由它们驱动。

拨盘	1–3	4–6	7–10
SOUL — 个性有多鲜明、多有品牌感	中性、安全、系统默认	风格鲜明	个性独特、令人过目不忘
SPECTACLE — 视觉引擎在技术上有多大胆 (finesse 的标志性拨盘)	仅静态内容 + CSS	GSAP 滚动效果、Canvas 2D 点缀	Three.js / GLSL / WebGL-FBO 主视觉、生成式效果、滚动固定的电影式体验
DENSITY — 每个视口的信息量	疏朗，每屏一个重点	均衡	编辑式排版、信息丰富

1.A 推断拨盘值（设计解读 → 取值）

• 天文学 / 音乐 / 游戏 / 加密货币 / 时尚科技 → SPECTACLE 7–10（这类题材适合使用真正的引擎）。
• 法律 / 金融 / 医疗保健 / B2B SaaS 营销 → SPECTACLE 3–5（重视匠心而非炫技；只需一个克制的动态效果）。
• 传统文化 / 奢侈品 / 编辑式设计 / 出版物 → SOUL 8–10，SPECTACLE 4–6（靠字体和基底来呈现风格，而不是 WebGL）。
• 任何产品类别（仪表盘 / 管理后台 / 分析 / 应用）→ SPECTACLE 1–4，DENSITY 6–9 — 清晰胜过炫技。跳过 §2/§4，前往 references/product-ui.md。
• h5 → 拨盘取值取决于形态，而非行业（§0.E 中的 h5 行）。在这里，SPECTACLE 的实现方式截然不同：没有主视觉引擎，预算会用于转场和界面组件（FLIP 缩放、扇形展开的卡片堆叠、场景交叉淡入淡出），而不是 WebGL 画布。SPECTACLE 为 8 的 H5 页面，精彩之处在于状态之间的切换；§4 的引擎表大多不适用。

1.B “承诺的炫目效果，必须真正呈现”（强制要求）

如果 SPECTACLE ≥ 7，页面 MUST 实际包含可运行的视觉引擎（真正的 Three.js/Canvas/GLSL/滚动固定效果），能够优雅降级，并在中端设备上保持 60fps。声称 SPECTACLE 为 8，却只交付渐变色团的页面，就是有问题的。如果项目范围内无法交付可运行的炫目效果，就将拨盘降至 4，改为交付一张精雕细琢的静态页面。绝不要只做一半，交付一个卡顿或被截断的引擎。

2. 选择一种灵魂（行业 → 人设）· 品牌基调

产品基调：灵魂仍然重要（品牌点缀、统一的字体系统、基础基底），但请跳过下方那些华而不实的人设——前往 references/product-ui.md。§2 的其余部分和 §4 面向品牌。

finesse 的任务是实现灵魂多样性：面对不同的需求说明，同一种方法也必须产出风格迥异的页面。

组合灵魂——不要从列表中挑选。一张包含十种人设的封闭表格只能产出十种页面；模型从十个选项中挑选，总会落在相同的两三个选项上，而且更偏向它见过最多的那些。references/divergence.md §3 给出了改进方法：在五个相互独立的轴上各选一个值——配色结构 · 字体关系 · 主导布局类型 · 引擎 · 材质／隐喻——让这些值的组合成为灵魂。每个轴上有少数几个值，五个轴组合起来就有数千种可能，而非十种。下方人设表列出的组合都经过验证——它们是校准参考，不是投票选项。

查阅 references/style-personas.md，了解行业→人设映射（配色系列、字体搭配、主视觉引擎适配度、标志性效果）。你必须能够驾驭的风格范围示例如下：

• 电影感科技风（青色／洋红色、Inter + JetBrains Mono、Three.js 粒子）——天文学、AI、加密货币。
• 荧光终端风（单一霓虹绿、以等宽字体为主、Canvas 数据可视化）——量化金融／金融科技、安全。
• 编辑出版风（奶油色／墨色、Playfair + Spectral、GSAP 滚动显现、灰度摄影）——杂志、电影、期刊。
• 温暖传承风（琥珀／铜色／余烬色、Fraunces／EB Garamond、Canvas 火焰／粒子）——威士忌、咖啡、手工艺。
• 粗犷排版风（骨白／黑色 + 一种鲜亮点缀色、Anton／Bebas、mix-blend-mode）——时装周、音乐、文化。
• 静谧奢华极简风（米白／森林绿、Raleway 100–900、纯 CSS 遮罩／视差）——建筑、酒店、香氛。

规则：

• **每个页面只采用一种灵魂。**不要在暖灰和冷灰之间摇摆，也不要在滚动过程中更换点缀色。固定下来（见 §3，颜色锁定）。
• 轮换，不要重复——而且要让规则可执行。“不要重复上一次需求说明的风格路线”这条规则，**无法靠记忆执行：你跨会话没有记忆。**它从未真正生效过。让规则有约束力：在 references/divergence.md §4 中维护已用列表（记录最近 N 次构建的各轴取值的表格），确定新方向之前先读取它，并要求新页面在 5 个轴中至少有 3 个不同。高饱和风格路线（编辑排版风、米色黄铜工艺风、AI 紫色辉光风）不得作为默认选项——要么证明它们适用，要么避开它们（references/anti-cheap.md）。
• **用掷骰子打破平局，不要靠意志力。**当两个方向同样站得住脚时，模型会悄悄选择自己见得最多的那个。掷骰子决定（divergence.md §6）——如果推翻掷骰结果，就写下理由。未经审视的默认选择正是所有问题的根源。

选定人设后，references/inspiration-catalog.md 提供了更丰富的各人设真实页面库（除 examples/ 中的 5 个之外，还有 48 个）——其中包含的是技法说明，而非文件，可在需要人设表中单一描述之外的第二个参考点时查阅。

3. 高级质感基底（为何看起来昂贵）

廉价页面与高级页面之间的差别，大多在于一层薄薄的物理质感，并且始终如一地应用。完整配方和精确数值见 references/design-dna.md。以下不可妥协的要点构成了品牌基底。

适用范围说明。 最后三项——半透明边框、不使用纯 #fff/#000、锁定配色——是通用工艺底线：对产品/仪表盘同样适用。前四项——颗粒纹理、暗角、clamp() 字体张力、分层 Hero z-index——仅适用于品牌页面；仪表盘应以 references/product-ui.md §0 中的产品基底（高级表面/卡片、KPI 磁贴、固定字号比例、反馈动效）取代它们。不要对仪表盘应用品牌页面的颗粒纹理、暗角或超大字号。

• 颗粒纹理 — 使用固定的 SVG feTurbulence 噪点图层，opacity .025–.05。它是静态的，却能消除扁平的“矢量廉价感”。（浅色页面也适用，但不透明度要更低。）
• 暗角 — 在深色 Hero 上使用径向渐变加深，营造视觉焦点。
• 字体张力 — 展示型标题使用 clamp()，采用负字距（-.02 to -.045em）和 line-height .86–.95；与浅字重正文形成极强对比（例如，标题字重 900，正文 300）。紧凑、醒目、自信。
  • 条件说明——全大写展示文字是例外，而且并不少见。 .86–.95 适用于大小写混排，因为下行字母（g、y、p）会让相邻行保持间距。全大写没有下行字母：大写字母顶部贴着行框顶部，因此当行高为 .86 时，第 2 行的大写字母会与第 1 行的基线和逗号发生碰撞，两行融成一条墨迹带。在宽屏上，标题只有一行，不会出现这个问题；在手机上，标题会换行，碰撞不可避免。 §2 中那些强烈依赖排版表现的字体（Anton、Bebas）受影响最大——窄体字形的字母高度相对于其 em 框更高。因此，只要展示型文字启用了 text-transform: uppercase，line-height 下限就是 1.0，建议为 1.02–1.08。要么提高行距，要么取消全大写，不要折中设为 .98。完整说明见：references/mobile-floor.md M6。
• 分层 z-index — engine(0) · grain(1) · vignette · content(5)。营造层次，而非扁平感。
• 半透明边框 — 深色背景使用 rgba(255,255,255,.07–.22)，浅色背景使用 rgba(0,0,0,.06–.08)。绝不使用生硬的 #333 线条。
• 不使用纯 #fff / #000。 给每种中性色调都加入少许品牌色倾向。
• 锁定配色（必须）： 选定强调色后，它就应主导整个页面。玫瑰色页面上不要突然出现青绿色徽标。发布前检查每个组件。如果需求确实要求可切换/多主题体验，而非锁定单一调色板，请参阅 references/theming.md——其中关于令牌角色和硬编码颜色的注意事项，与单一调色板的构建有所不同。

内部设计调色板时应使用 OKLCH 思考（确保感知一致性，并便于搭配浅色/深色），即使最终输出的是十六进制颜色也一样。浅色和深色主题应一并设计；分别测试对比度，绝不要只做反色处理。

4. HERO 引擎（finesse 的差异化优势）· 品牌设计规范

产品设计规范： 不要使用 Hero 引擎——改用数据可视化 + 组件系统（见 references/product-ui.md）。本节适用于品牌。

finesse 页面要名副其实，就需要一个技术上令人惊艳的时刻——通常在 Hero 区域。不是五个，而是一个，并做到 100%。选择符合品牌气质的引擎；完整的挂载／渲染／滚动骨架及减少动态效果时的回退方案见 references/hero-engines.md。

先阅读 references/motion.md，再看这张表。 这五种引擎是六种路径中最重型的方案；下表回答“用哪种引擎”，该文件回答“这个页面是否需要引擎”——而大多数情况下，答案是否定的。它的效果→路径查找表会将大多数动态效果需求引导至 CSS、原生滚动驱动动画或 View Transitions，无需增加任何打包体积；其节拍表则涵盖了本节一直未能描述的页面其余四分之三内容。每页仍只保留一个重型动态效果——这条规则依然有效，作为 motion.md §4 的预算。变化在于，页面其余部分不再默认采用淡入上移效果。

引擎	适用场景	成本
Three.js + GLSL	3D 景深、粒子系统（星系、网络、DNA）、元球、辉光	较重；延迟加载 three，仅在 SPECTACLE ≥ 7 时启用
Canvas 2D	粒子、场、实时数据（K 线、波形、火焰）、流动效果	较轻；针对视网膜屏幕适配 DPR
WebGL FBO 着色器	流体（Navier-Stokes）、反应扩散、光线步进、虹彩效果	较重；一个全屏四边形，多次渲染
GSAP ScrollTrigger	滚动固定叙事、水平平移、视差、渐次揭示	中等；最具复用性的单一引擎
纯 CSS	双层遮罩、3D 变换、可变字体变形、滚动驱动的 animation-timeline	免费；无需 JS，性能最佳

组件级 3D ≠ Hero 引擎。 上表针对的是一个全屏 Hero 动效。对于可复用的页面内 3D 效果——指针倾斜卡片、翻转卡片、封面流、景深视差图层，或 Three.js 产品／模型查看器——请使用 references/3d-effects.md（depth 命令）。默认采用其中的 CSS 方案；它可以零成本用于任何页面，且极少出现卡顿。每页仍只保留一个 3D 动效：不要同时叠加 Hero 引擎、倾斜网格和封面流。

引擎使用规范（必须遵守）：

• 渐进增强。 移除引擎后，页面仍须可读且内容完整。引擎只能作为固定背景或 Hero 点缀，绝不能承载内容。
• 保持 60fps，否则简化。 只对 transform / opacity 做动画。请在中端设备上测试，而不是只在自己的机器上测试。低于约 50fps 时，减少粒子数量或分辨率。
• 必须支持 prefers-reduced-motion——将引擎冻结为静态画面（或隐藏引擎并显示精心设计的静态 Hero）。绝不可在没有回退方案的情况下发布动态效果。
• 动态效果必须有明确动机。 每个 ScrollTrigger／跑马灯／固定区段都必须有一句话说明理由（层级、叙事、反馈、状态）。“看起来很酷”不算理由。每页最多使用一个跑马灯。

---

5. 页面骨架——四种品牌骨架，而非一种

单一的标准序列本身就会造成千篇一律。 如果每个品牌页面都是 HERO → MARQUEE → MANIFESTO → GRID → CTA → FOOTER，那么无论配色选得多好，每个品牌页面本质上都是同一个页面。落地页用于论述；作品集用于证明；造型画册用于营造吸引力；工作室网站用于展示。这四种页面要表达的内容各不相同，因此结构也各不相同。 根据页面要完成的任务来选择结构，再在其中做出差异化（见 references/divergence.md §3，轴 C）。

5.A 落地页 / 发布页 — 事物已然存在，必须让人理解

HERO (the engine moment)  →  SPEC BAND (4-col hairline, real numbers)  →
THE ARGUMENT (exploded view · demo · full-page engine — SHOW the thing working)  →
ASYMMETRIC PRODUCT GRID (1.4fr 1fr — never 4 identical cards)  →
TECH / DEPTH (dark-panel inversion, numbered only if the numbering means something)  →
CTA (oversized)  →  FOOTER

承重部分是论证——拆解视图滚动浏览、实时控制台、可运行的演示（page-crafting.md §5.B）。只声称品质却从不展示品质的落地页，不过是一张宣传册。如果产品是实体的或由多层构成，就让它随着滚动逐步拆解。

5.B 作品集 / 个人网站 — 作品就是论证；你不是

INTRO (a full-bleed image or a statement — not a headshot-and-tagline)  →
THE WORK (filmstrip accordion · generative grid · list-rows with thumbnails)  →
MANIFESTO (one statement, one column)  →  CAPABILITIES (list, not cards)  →
SELECTED DETAIL (one project, deep)  →  CONTACT (oversized type)  →  FOOTER

以下规则仅适用于个人网站，也是 AI 每次都会搞错的地方：

• 作品先于文字。 如果第一个项目上方有“关于我”版块，那就是简历，不是作品集。
• 6 张一模一样的项目卡片网格就是失败范例。 可以试试带行的列表（64px 1fr auto 90px + 小缩略图）、悬停展开的胶片条（page-crafting.md §3），或生成式分栏网格（§8）。布局本身就应该体现你是哪种设计师。
• 不要用“技能”条形图。 在“创造力”上标个百分比，是个人页面能放的最廉价的东西。
• 深入展示一个项目，胜过浅显展示六个。

5.C 造型册 / 系列 — 氛围就是产品

HERO (split: type | image, ragged)  →  BRAND STATEMENT (dark inversion, one quote, 100vh)  →
HORIZONTAL LOOKBOOK (pinned track, ragged heights, bottom-aligned)  →
MATERIALS (clip-path wipe cards)  →  COLLECTION (gap:2px grid — a spread, not a card wall)  →
ATELIER (1fr 1fr, image + CTA)  →  FOOTER

明暗交替是这里的结构，因此导航栏必须适应其下方的内容（page-crafting.md §4——使用滚动定位，而不是 mix-blend-mode）。内容密度来自节奏（参差不齐的高度、紧凑的间距），而不是增加版块。层级通过 3-4 个设计令牌的透明度梯度来呈现，而不是靠更多颜色。

5.D 代理机构 / 工作室 — 能力就是产品

HERO (composition — geometric collage · type-as-image · CSS-only)  →
PROOF BAND (stats with real provenance)  →  CRAFT (split, one idea)  →
SERVICES (≤4, and they must differ from each other visually)  →
DARK INVERSION (offers · bento · a change of key)  →
TESTIMONIAL RAIL (scroll-snap, autoplay off on interaction)  →  CTA  →  FOOTER

常见陷阱：把服务做成四张一模一样的图标卡片——图标、标题、两行文字，重复 ×4。这是最明显的廉价感标志（anti-cheap.md），而且在代理机构页面中尤为常见。如果必须展示四项服务，就让卡片的结构有所不同（使用不同的宽度，其中一张配图片，另一张配数字），或者改用排版有分量的编号列表。

适用于以上四类页面的规则

• 导航： 单行，≤80px。在明暗交替的版块上方，使用滚动定位类切换（page-crafting.md §4）。mix-blend-mode: difference 只用于高对比度图像——遇到中间色调就会变得灰暗混浊。
• 布局多样化： 每种布局形式（3 栏卡片、全宽引言、图片+文字分栏）最多出现两次。图片+文字的连续交错布局最多 2 组。有 8 个版块的页面至少要使用 4 种布局形式——上线前先数一数。
• 克制使用眉题： 每个标题上方都放一个小号全大写字母、带字距的标签，是最明显的 AI 痕迹。每 3 个版块最多 1 个眉题——按 ≤ ceil(sections / 3) 控制，实际计数，而非凭感觉。通常只用标题就够了。
• 主题锁定： 每页只用一种主题——除非上方的框架明确要求有意反转为深色主题（5.C、5.D）；这是一种结构手法，而不是风格漂移。
• 编号（01 · 02 · 03）必须有内容依据——例如胶片帧代码、版号、动作分段。把编号当作默认结构，本身就是一种明显的套路。

---

6. 廉价感黑名单

宣布完成前，对照 references/anti-cheap.md 检查——这是一份合并后的反廉价感清单（AI 痕迹 + 绝对禁用项 + 一眼否决的字体／配色／美学风格）。主要问题包括：

• 文案中把长破折号当作修饰——一律禁用（出现频率最高的痕迹）。
• 渐变文字、默认的玻璃拟态、卡片侧边条纹边框、AI 紫色光晕。
• 每个区块都加眉题，默认采用 01 · 02 · 03 编号标记。
• 完全相同的卡片网格（图标 + 标题 + 文本 × 6）、用 div 拼出来的假截图／假仪表板。
• 没有真实来源的假精确数字（92%、4.1×）。
• 默认类别配色（工艺类用米色 + 黄铜色，AI／SaaS 用紫色光晕）——要明确指出并拒绝。
• 未经斟酌就默认使用 Inter／Fraunces／Instrument Serif——有理由地选择没问题，盲目套用就是一个痕迹。
• 页面骨架中实际留有图片位置，却完全没有图片——如首屏、画廊、商品详情页照片、H5 封面／场景、空状态。判断依据是页面骨架，而非所属行业；这是 bug，不是极简主义。反过来也不行：未经用户同意就擅自加入图片（asset-sourcing.md §0）。

---

7. 性能与无障碍护栏

• 只对 transform／opacity 添加动画；绝不动画 top/left/width/height。谨慎使用 will-change。
• prefers-reduced-motion：停止 canvas 循环、冻结颗粒效果、改为静态显示。每个带动画的页面都必须实现，不得例外，包括装饰性动效。 没有为减少动态效果提供最终状态的动画页面，就是有问题的交付。
  • 能力探测模式（可交付的实现方式）： 在顶部读取一次探测结果——const RM = matchMedia('(prefers-reduced-motion:reduce)').matches; const FINE = matchMedia('(hover:hover) and (pointer:fine)').matches;——然后针对每种效果分别分支：if (RM) <set final state> else <animate>。依赖指针的动态效果（磁吸按钮、光标跟随、悬停手风琴）必须由 FINE 控制，确保不会在触屏设备上触发。再配合 CSS 兜底：@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}。手工绘制的图表逐步显现效果也必须用同样的方式设置最终状态（chart-crafting.md §6）。
• 颜色对比度符合 WCAG AA：正文 ≥ 4.5:1，大号文字 ≥ 3:1。包括照片上的按钮（添加遮罩／描边）、占位符、焦点环。
• 每个可交互元素都要有可见的焦点状态。导航和 CTA 必须可通过键盘访问。
• Core Web Vitals：延迟加载大型引擎，移动端使用 min-h-dvh 而非 100vh，图片需响应式（WebP/AVIF），CLS < 0.1。
• 明确声明每个多列区块在移动端的折叠方式。触控目标 ≥ 44px。
• H5 规范： 以下六条规则针对的是桌面页面在手机上仍能正常呈现。仅适用于手机的页面有一份不同的门槛清单——刘海／边框／滚动容器／触控／SE 高度／环境动效——见 references/h5-mobile.md §10。M1/M4/M6 在边框内仍然适用；M2 和 M5 基本不适用（一列布局、一个底部栏）。
• 移动端最低要求——六条硬性规则，完整说明见 references/mobile-floor.md。 在 320 · 375 · 414 · 768 宽度下测试，不要拖动桌面窗口直到页面看起来不对劲才算。M1 在 html 和 body 上都使用 overflow-x: clip——绝不能用 hidden，它会创建滚动容器，并悄无声息地破坏所有 sticky 后代元素。M2 带图片的网格轨道使用 minmax(0,1fr)，绝不能只写 1fr（其 auto 最小值就是图片的固有宽度）；flex 子元素设置 min-width: 0。M3 可点击文本在任何宽度下都不能换行——先缩短标签，再考虑使用 nowrap。M4 展示型标题设置 overflow-wrap: anywhere; min-width: 0。M5 只允许一个 sticky 元素位于 top: 0；其他元素偏移 --nav-h，并确保 --z-nav 高于 --z-sticky。M6 全大写展示字体的 line-height 不得低于 1.0（见 §3）。scripts/detect.mjs 可机械检测 M1/M2/M5/M6；M3 和 M4 需要在 320px 宽度下检查实际渲染页面。

---

8. 预检清单

在说“完成”之前，先运行 references/preflight.md 中的完整检查清单。它整合了基底检查、廉价感扫描、视觉效果声明核验、移动端底线和无障碍门槛。任何硬性规则未通过，都意味着交付的作品存在问题，必须先修复。

关卡 1 最先运行，只需十秒：页面是否真的能渲染？ 每个本地 href / src / url() 都必须指向一个确实存在的文件，而且必须已找到并运行检测器。这不是吹毛求疵——指向一个从未写入的样式表的 <link> 会让页面以无样式的衬线字体文本呈现，而文件中的 其他所有检查都会通过，因为根本不存在需要呈现的纹理，也不存在需要禁止的 #fff。这也是构建被截断后仍然交付的原因：HTML 已写入，运行在 CSS 完成前结束，.finesse/log.json 却照样记录了一个根本没有显示出来的页面。preflight.md 的关卡 1 中有检测器解析代码片段——检测器与技能文件放在一起，而不在用户的项目中，所以硬编码的 skills/finesse-ui/… 路径除非项目中包含该文件副本，否则会在任何地方悄无声息地失效。

8.0 记录构建（预检通过后、说“完成”之前）

写入两处内容。大约只需三十秒，而且这是下一次运行能轮换到其他方案的唯一依据。

1. 为 CSS 添加标记。 页面样式表（或内联 <style> 顶部）的第一行非空内容记录五轴坐标：

   /* finesse · register=brand · A=mono+acid-lime · B=900/300 · C=pinned-h-track
    * D=GSAP-scrub · E=machined-metal · SOUL=8 SPECTACLE=7 DENSITY=4 */
   

   h5 构建还要添加形态标记——register=h5 · morph=A-app-shell · …（h5-mobile.md §11）。轮换适用于灵魂轴和形态，绝不适用于固定组件：每个应用的 TabBar 都应该看起来彼此一致，这与 divergence.md §0 为仪表板导航规定的例外相同。
2. 追加到 .finesse/log.json——将条目添加到数组开头，并保留最后 20 条。架构见 divergence.md §4.1。如果目录或文件不存在，则创建它们。

组件范围构建不执行这两项操作——它们使用组件标记，且绝不记录到日志中（component-scope.md §5）。组件不会轮换；同一项目的按钮应该像一家人。

8.A 交付后迭代指南

用户收到初始输出后，将他们的反馈映射到相应的针对性修复。单个问题绝不要从头重做——找出负责的调节项或模块，只调整该项。Command 列是要路由到的动词（参见 ## Commands）；如果用户输入了该命令，你已经进入相应流程。

用户反馈	Command	操作
“太朴素／无聊”	bolder	将 SPECTACLE 提高 +2；考虑升级引擎类型（例如从 Canvas 换成 Three.js）
“太炫／令人眼花缭乱”	quieter	将 SPECTACLE 降低 −2；简化，或换用引擎 D（GSAP）或 E（仅 CSS）
“氛围不对／感觉不协调”	soul	使用 references/style-personas.md 中的另一个 persona 重新运行 §2
“留白太多”	densify	将 DENSITY 提高 +2；增加一个内容区块
“太杂乱”	densify	将 DENSITY 降低 −2；删去一个区块，增加区块内边距
“更有个性／更大胆”	bolder	将 SOUL 提高 +2；在 references/design-dna.md 中将色彩承诺级别提高一档
“感觉很普通／和其他 AI 网站没两样”	diverge	这是系统性问题，不是单页问题。 根据五个轴重组灵魂（divergence.md §3），运行两种尺度的反默认检查（§2），对照 argmax 进行选择（§6），检查已使用列表（§4）。此时使用 soul 只会从同一个十行表格中选出另一行——问题就在于此，而非解决方案
“你做的每个页面看起来都一样”	diverge	同上。然后写入已使用列表（divergence.md §4）——没有它，“不要重复”就是一条没有记忆支撑的规则，永远不会生效
“换个颜色”	soul	重新运行 references/design-dna.md 中的配色策略；遵守强调色锁定规则
“换种动画”	animate	在 §4 中更换引擎类型；针对该引擎重新运行 references/hero-engines.md 中的骨架方案
“增加纵深／做成 3D／倾斜／视差”	depth	从 references/3d-effects.md 中添加一个 3D 效果——默认使用 CSS 层级（倾斜／翻转／封面流／纵深视差）；只有需要实际渲染对象时才使用 Three.js
“移除一个区块”	redesign	移除该区块，然后重新审查 §5 中的布局类别（确保至少保留 4 类）
“感觉很慢／很重”	quieter	降低 SPECTACLE；切换到引擎 E（仅 CSS），或减少粒子数量／FBO 分辨率
“需要适配移动端”	redesign	为每个多列区块声明移动端布局；使用 min-h-dvh，点击目标 ≥44px
“不知道它在干嘛／一直转圈／停不下来／看不到花了多少钱” (AI 工作台)	redesign	这不是样式问题——工作台的四个问题都没有得到回答。ai-console.md：使用带有逐步耗时信息的运行流（§2），而不是一个转圈指示器；显示全部九种运行状态（§3）、常驻的停止按钮（§4）、收据行和预算计量条（§6）
“像个聊天窗口，不像工作台” (AI 工作台)	redesign	只有气泡就是失败。ai-console.md §1——缺少队列和历史记录，因此屏幕上只有现在时；先添加侧栏（或手机上的固定条，§9），再改任何视觉元素
“刘海挡住了／底部栏遮住内容／按不动” (h5)	redesign	这不是布局意见，而是机械性缺陷。按顺序运行 h5-mobile.md §10 中的检查项：缺少 env()（§2.A）、缺少 #app 底部内边距（§2.C）、点击区域小于 44px 或缺少 :active（§3）
“不像 app／像个网页” (h5)	redesign	缺少或用错的是界面构件，而不是配色。参照 h5-mobile.md §5：状态栏、TabBar 激活状态、home indicator、面板拖动手柄、页面推入转场——以及 §9 的特征清单
“这个效果好吗？／帮我审查一下”	audit	只读：运行黑名单、展示效果检查和上线前检查，并报告结果

---

9. 不在范围内

finesse 涵盖品牌、产品、商业 和 h5，因此范围很广。只有当工作是纯后端 / API / 数据任务，且不涉及界面，或需求明确要求打造通用、传统、毫无设计巧思的页面时，才移交出去（finesse 总会注入设计巧思——如果用户确实想要平淡无奇的页面，那就该用别的工具）。从引人注目的落地页，到信息密集的管理仪表盘，再到仅面向手机的活动页，都属于范围内：在 §0 中确定风格基调，并据此安排。

值得明确的一条边界：h5 涵盖仅面向手机页面的设计，不包括其周边的平台基础设施。微信 JS-SDK 接线、分享卡片配置、支付集成、应用外壳原生桥接，以及小程序框架脚手架，都是工程任务，而非设计任务——完成屏幕设计后，将这些工作移交出去。