seenry

Seenry

标准很简单：简洁、高级、没有 AI 垃圾内容，达到顶尖大型公司的产品设计和顶尖独立工作室的水准（Stripe、Linear、Apple、Attio、Figma、ARKET、kargul.studio）。以下所有内容都为此服务。开始构建前，请通读整个文件；决定品质的规则都在这里，而不在指南中。

使用项目现有的技术栈。如果项目已有设计令牌、组件或 DESIGN.md，请先阅读并在此基础上扩展。

只有通过检查，才算完成。 任何新页面、屏幕、仪表板或重新设计，都必须先在桌面端和手机端运行 node scripts/check.mjs <file or url> --brief <brief> --mode quick，清除所有阻塞项，并落实评审者提出的修复建议，之后才算完成。即使页面看起来已经完成，或需求只有一句话，也要运行检查；对于检查工具尚未审阅的页面，绝不能报告完成或提供预览链接。请如实报告分数和等级：通过（9 分）、领先水准（8 分），或低于领先水准（7 分及以下），并说明尚存差距。用户要求时，再进一步运行 Polish 和 showcase 模式。如果图片生成、构建或检查仍在后台运行，绝不要结束当前轮次：等待它们完成后再收尾，因为在单次调用和无头会话中，结束当前轮次就意味着工作终止。

先完整呈现，再去掉装饰痕迹

每个屏幕都从完整、常规的版本开始：顶尖产品会在这类屏幕上提供什么，以及人们会期待的交互方式（引导对话框中友好的标题、帮助用户识别选项的图标、定价页面上的计费切换和常见问题、个人资料中的身份信息行）。然后应用 Seenry 的反冗余规则，去除装饰元素：眉题、轨道、引导圆点、渐变色块、斜体强调和填充内容。但绝不能删减内容、交互方式或识别辅助信息。如果屏幕看起来整洁，却比同类领先产品的版本单薄，那它就还没完成。

构建任何屏幕前，先列出内容清单：顶尖产品会在这类屏幕上提供的 8 到 12 项内容。清单要涵盖每项内容显示的数据（列、事实、状态，包括缺货、待处理、逾期或失败等边缘状态）、每项内容可执行的操作（编辑、移除、更改角色、添加到列表）、整个屏幕可执行的操作（创建、邀请、导入、筛选、搜索、排序），以及各种状态（空、加载中、出错、单项、多项）。如果 Seenry MCP 已连接，就用它查看领先产品如何布局这类屏幕；否则依据你对它们的了解。实现所有无需新增后端的清单项目，并将操作连接到所有者可以接入的处理程序；验证时再逐项核对清单。无论屏幕多么整洁，只要缺少用户会期待的清单项目，就还没完成。

一套令牌，处处适用

工作室作品之所以显得经过深思熟虑，是因为它们使用的取值很少，而且每个取值都有明确用途：我们测量过的工作室网站使用了 5 到 11 种字号；Seenry 页面则使用了 15 到 26 种字号，十几种间距值不符合网格，还有十几种时长，每次都逐一手动输入。在进行任何布局、创建新页面或改动现有应用之前，项目都应有一个令牌文件，所有样式都使用其中的值：

• **字体：**六到九个级别（展示、标题、分标题、导语、正文、小号、标签）。展示级别可以使用流体字号，并在令牌中通过 clamp() 定义一次。组件中绝不手动输入字号。
• **间距：**4px 尺度（4、8、12、16、24、32、48、64、96、128，以及需要时使用 20、40、56、80）。组件内边距、间隔和区块间距都只能取自该尺度。
• **圆角：**最多三种，另加全圆角；嵌套圆角应同心。
• **动效：**状态变化使用 --dur-1/2/3（120、180、240ms），页面编排使用 --dur-scene-1/2/3（600、900、1200ms），另加 --stagger 和两到三种缓动函数。所有过渡和动画都使用这些值。

新建网站时，从起始令牌开始，再根据视觉风格修改取值；在现有项目中，使用项目已有的令牌或主题（Tailwind 的尺度、CSS 变量）。如果项目所有者要求清理样式，而字号、间距、圆角或时长都是手动输入的值（只有颜色变量不算令牌系统），切勿手动转换（测试中这花掉了整个会话时间，而且设计评分更低）：运行 node scripts/token_convert.mjs <styles folder>，查看它根据应用现有取值生成的尺度（合并相近字号、将间距对齐到 4px 尺度、将圆角合并为三种、使用动效令牌设置时长），然后添加 --apply，一次性写入令牌块并重写声明，把时间花在设计上。token_lint.mjs（由 check.mjs 和 existing_check.mjs 运行；修改现有代码库时使用 --changed）会在项目已有尺度的地方阻止手动输入值和 Tailwind 任意值（所有新网站、Tailwind 项目，或使用字号与间距变量的项目）；在没有尺度的旧样式表中则只会给出建议，是否转换由项目所有者决定。对于新网站，评审还会阻止渲染结果偏离规范：字号超过九种、内边距或间隔不符合 4px 尺度、时长超过七种，或圆角超过四种。

在现有项目中

如果请求是在已有界面和样式的应用中添加或修改内容（“修复设置页面”“添加定价页面”“添加空状态”“让这个模态框更好看”），请使用此路径，而不是下面的流程。项目所有者想要的是一个可以合并的拉取请求，而不是重新打造品牌。改动即使看起来很棒，但不像他们的应用，也算失败。

1. 先阅读应用。 找出它的样式实现方式（Tailwind 工具类、CSS 模块、带设计令牌的纯 CSS、styled-components）、组件库（shadcn、Radix、自有组件库）、设计令牌，以及两三个相邻页面。渲染其中一个。新成果必须看起来像出自同一个团队：沿用相同的字体、颜色、圆角、间距、信息密度和组件样式。在这套系统内体现 Seenry 的精致度（层级、对齐、间距节奏、易读的字号、状态、文案）；不要把 Seenry 的默认样式、套件、字体或配色覆盖进来。如果应用自身的取值已出现偏差（例如同时有多个近似字号、在 8 和 16 像素内边距旁边又出现 9 和 14 像素），就让你修改的页面统一到它的尺度，或者统一到 token_convert.mjs 根据现有取值生成的令牌文件（见 统一使用一套令牌）；让应用变得更一致，绝不要引入第二套系统。
2. 保留原有行为，把呈现彻底做好。 每个现有操作、字段、设置和信息架构都必须继续按原样工作：不要引入新的保存模式，不要添加应用原本没有的持久化，不要把实际上只是锚点的东西做成标签页，不要重命名操作（“Upgrade” 仍然是 “Upgrade”）。呈现方式由你彻底优化；小修小补也算失败：用应用自有组件（输入框、下拉框、按钮；开关类偏好设置使用切换开关）替换原生控件；为每组内容采用应用其他页面使用的容器和标签布局；将危险操作放入冷静且明确分隔的区域，并使用常规大小写的描边按钮或危险按钮；修正过于张扬的文案（将 “DELETE WORKSPACE” 改为 “Delete workspace”）；设置含义不清时添加简短的辅助说明。目标是让修改后的页面成为应用中设计最出色的页面。文案也是呈现的一部分：将长段落精简为一两句话；让首次使用时的操作清楚说明其用途（使用“创建你的第一个项目”，而不是“新建项目”）；用户需要做出选择时，将指引或示例融入现有句子，不要另加一行。引导或欢迎对话框应以居中的欢迎内容开场：在对话框表面或非常浅的底色上放置品牌标志或一幅小插图（绝不要使用浓重、饱和的色块），并配上友好的标题和一句话。任何屏幕宽度下，背景都应清晰变暗（约为墨色的 40% 到 50%），避免后方内容造成干扰。复选框和单选框应采用品牌样式（圆角、选中时填充强调色、绘制勾号），绝不使用浏览器默认样式。在手机上，简短的问题与步骤指示器应并排显示在同一行。选项应采用卡片样式，配有来自应用图标集的小图标、清晰的选中状态（色调加勾号）；多选问题必须使用真正的多选控件；数字应使用步进控件。页脚应将主要操作与次要操作并列为真正的按钮，而不是颜色浅淡的链接。对话框要保留清晰可见的关闭按钮；焦点环只应在键盘聚焦时显示（:focus-visible），绝不要在对话框刚打开时就显示在控件上。产品和套餐名称必须严格沿用所有者写法。添加这类界面通常包含的区块，但不要添加无关的装饰内容。 屏幕专项规则（重新设计的个人资料、合集、设置列表、空状态、定价及其他新界面）见 surfaces；请阅读与你正在修改的屏幕相关的部分。
3. 遵循项目的惯用写法。 Tailwind 和 shadcn 项目应使用工具类和现有组件，绝不要在全局样式表中添加页面专属规则。纯 CSS 项目应在组件旁边使用现有令牌编写样式。使用令牌和现有变量，绝不要硬编码新的十六进制颜色值。
4. 屏幕结构改变时先做调研。 新界面（定价页面、引导流程、空状态），或要求修复整个页面外观的请求（“设置页面很难看”“优化仪表盘”），都应在编辑前快速调用一次 Seenry 调研：使用请求内容、websites 或 apps 类别，以及一个指明屏幕的 asset_query（settings、pricing、team members），再附上两三个结构性查询，调用 research_design_brief；随后对保留的参考进行一次 compare_measurements。将优秀页面在该类屏幕上的内容及其测量出的间距和字号融入修改，并使用项目自身的组件。修复 Bug、单个控件或单一状态时，跳过调研。除非所有者要求重新设计，否则不要进行创意生成、多方案探索、标志性组件设计、设计稿整理或评审循环。
5. 默认添加动效，并使用设计令牌。 除非所有者明确要求不要动效，否则你修改的屏幕上，每个状态变化都应使用动效令牌添加过渡：悬停和按下（--dur-1）、切换开关、带滑动指示器的标签页和分段控件（--dur-2）、对话框、侧边抽屉、菜单、提示消息和列表变化（--dur-3，进入时使用 --ease-out，退出更快）；加载时使用骨架屏，并以交叉淡化过渡到内容；数字变化时应原位更新。应用有动效库时（Framer Motion、组件库的过渡效果），就使用该库；否则使用 CSS。还要提供减少动态效果的版本。只做界面动效：应用中不要添加滚动场景或页面编排动画。
6. 按评审者的方式验证。 构建项目。在 1440 和 390 宽度下渲染修改后的屏幕，检查你改动的每种状态，并渲染一个未修改的屏幕，确认其他地方没有变化。运行 node scripts/existing_check.mjs <url of the changed screen> --project .（大约一分钟）：它会运行评审面板、检查你修改文件的令牌、扫描动效，并在 100% 缩放和手机视口下对屏幕进行产品设计评审。解决此次改动涉及或引入的阻塞问题；在具有令牌尺度的项目中，还要解决你修改文件中所有有类型的取值（在没有令牌尺度的旧式样式表中，沿用其已有取值；除非所有者要求，否则不要转换）；然后按显眼程度从高到低应用一次评审修复（测试中，这些建议正是优秀团队的页面与 Linear 级别页面之间的差距：元信息文本至少 13px、对比度至少为 4.5:1；控件高度统一；保存模式清晰；手机上没有无效空白）。再运行一次检查，然后停止。
7. 保持代码库整洁。 截图、笔记和临时文件应放在项目目录之外（例如 $TMPDIR/seenry-<project>/），绝不要放入 .seenry/ 或工作区。除非项目原本已有 DESIGN.md 或所有者提出要求，否则不要创建该文件。差异中只能包含产品改动。 用三到四句话报告：发生了哪些变化、哪些内容是有意保持不变的，以及有哪些事项需要所有者决定。

为新网站提出一句话请求

当整份需求只有一行（“给我的习惯追踪器做一个着陆页”“我是婚礼摄影师，需要一个作品集网站”）时，对方期待的是一套今天就能发布的完整网站，而不是一份克制的草图，并且正等着你交付。除非对方要求更多，否则请快速运行以下流程；目标是在 10 到 15 分钟左右完成，速度要和任何设计技能一样快，因为质量来自研究、创意和规则，而不是反复审核（测试中，首次构建的评分已达到领先水平，而漫长的审核循环只增加了 0–1 分）。迭代时在开发服务器上预览，并在最后运行一次生产构建；当 check.mjs 列出阻断项时，一次性全部修复后再运行，而不是每轮只修一项：调用一次 research_design_brief，再调用一次 borrow_references，并且只查看最强的两项结果的像素；为 pick.mjs 构建三个身份板（第 4 步；选择结果决定页面的身份，因此绝不能跳过）；选定后立即在后台批量启动所有图像生成，并在其运行时开始构建；然后运行 check.mjs --mode quick：它会清除自动阻断项、调用一次盲评审核，并让你一次性应用审核提出的修改，然后带着分数和等级交付（及格：9 分；领先水平：8 分；低于领先水平：7 分或更低）。如果对方要求润色或可用于生产的页面，则使用 --mode polish（最多进行四轮审核，达到领先水平后停止）；只有在对方要求展示作品、作品集项目或尽可能好的成果时，才使用 --mode showcase（完整验收流程，需要第二个方向，耗时一小时或更久）。快速模式下，如果分数低于领先水平，就如实报告，并列出审核提出的主要差距，绝不能说已经完成。上述一次调用的研究预算仅适用于快速模式：在润色和展示模式下，要完成第 2 步的所有工作，也就是至少点名找出三位类别领军者（缺少的就用 bar.mjs 实时抓取），至少三位构图类别领军者（软件领域包括 Linear、Brex、Midday、Retool、Intercom、Metronome 等），并获取它们的完整页面，而不只是首屏。交付结果时，请遵守以下要求：

• 包含这类网站必备的内容。 应用着陆页：第一句话说明产品是什么、面向谁；以大尺寸、真实地展示产品；展示而非罗列三到五项功能；提供证明；如果产品收费或导航中提到价格，就展示定价；结尾处设置行动号召；包含页脚。作品集：首先展示个人姓名和最出色的作品；包含作品集或案例研究；设置带肖像的关于部分；介绍流程或服务套餐；展示客户好评；提供咨询表单。仪表盘：填入可信的数据；筛选器可用；每个数值都清晰可读。
• 每个导航链接都必须指向页面或构建结果中实际存在的内容。
• 克制不等于稀疏。 层次和间距营造平静感，绝不能靠删减内容。每个版块都要以实际尺寸呈现具体内容；如果一个版块几乎全是空白色块，或只在大面积留白中放一个小模型，那就还没完成。
• 以站点所有者的口吻撰写。 文案要符合对方的语气，并使用可信、方便替换的占位信息；图库图片用来代替对方的作品，因此不能显示创作者署名（这些署名应放在致谢页面或页脚链接中），页面也绝不能将其他人写成作者。
• 主张要具体，并放在首要位置。 标题要以名词、事实或机制说明这款产品独有的具体承诺（将其作为文字排版呈现，不要单独放一个巨大的数字）。例如，发票工具可以写“2 天内到账，而非 30 天”，自行车维修店可以写“爆胎维修，等候期间即可完成”；绝不能写任何竞争对手都能用的情绪化表达（“一点温暖，随处可享”）。绝不要重复使用本文档中的示例；请根据这份需求撰写主张。最能彰显产品特色的创意应出现在首屏，而不是靠下方的横幅。
• 设计中间部分，不要只罗列内容。 每个版块都应有一个大尺寸的主视觉元素（产品正在完成一件事、一张照片、一个数字或一句引言），并搭配明显较小的辅助内容。除非内容确实属于平级项目，否则绝不要放置三四张同等分量的卡片；应突出一个项目，让其余内容作为辅助。相邻版块应改变构图方式（左右分栏、满幅图片、产品主视觉、密集数据、单句引言、日程安排）：连续两次采用相同的标题、段落和卡片节奏，会显得像模板。
• 证明内容要能证明标题中的主张。 每个功能视觉都要展示具体主张实际如何运作（错过一天后的补救界面、显示真实剩余名额的日程表、改进前后的对比），而不是通用仪表盘或氛围照片。
• 设置一个令人难忘的设计亮点。 单靠克制会显得像一套合格的模板。品牌身份中的图形元素和字体风格就是亮点，要从首屏延续到页脚，并以实际尺寸呈现。其他内容都应保持低调，让人记住这一亮点。
• 打造专属身份。 点缀色和字体要源自产品创意；不要使用默认的 SaaS 靛蓝、紫色或蓝色，也不要套用常见的奶油色背景、陶土色点缀和斜体衬线字体强调词的模板。字体应参考领军者的选择，并根据保留的参考素材进行衡量（参见 字体）：通常选用一款精致的新无衬线字体，并稍微收紧字距；未经调整的 700 字重 Inter 是明显的模板痕迹，但 Inter 本身不是问题。
• 身份要鲜明，不论高调还是低调。 成功的页面看起来都有明确的设计决策，且会根据品牌语气（或对方提供的参考素材）选择两种风格之一。高调风格： 用一种饱和或深邃的品牌色，以高饱和度应用在一两个大面积区域，搭配近黑色文字和中性色表面，并至少设置一个深色或全彩版块。低调高端风格（平静的品牌、金融、健康养生、强调信任的软件；Stripe、Linear 和大多数精致 SaaS 所采用的风格）：暖白色与墨色，不使用品牌色大面积铺色，仅通过摄影或产品呈现色彩；标题尺寸适中，第二行使用次级文字颜色；留白充足，容器质感柔和；定价、常见问题解答和页脚都要像首屏一样平静而精致。这两种风格都要确保 14px 及以上的文字清晰可读。对方附上或链接了参考素材时，应遵循其风格；身份设计步骤应在这一风格框架内进行。
• 把页面写成对方的真实网站。 使用可信的姓名、价格、营业时间和文案；绝不要在页面上注明内容是示例、占位信息或待对方替换的内容（check.mjs 会将其作为阻断项）。改用摘要和 DESIGN.md 告知所有者哪些内容需要替换。
• 面向消费者的产品需要温度。 习惯、健康、食品、理财、家庭和兴趣类应用，既靠功能，也靠情感打动用户。要以实际尺寸呈现一个情感锚点：展示产品服务的生活场景照片、整条品牌色背景横幅，或展示手持设备上的产品或真实使用场景。改变版块背景（白色、浅色调横幅、一条深色或摄影横幅），不要用细分隔线把所有内容隔开。
• 产品视觉应是呈现在真实设备上的精心设计界面。 绝不要用 div 拼出手机或笔记本电脑，也不要在其中放表格或电子表格。将应用屏幕设计成符合应用标准的独立页面，使用 scripts/mockup_screen.mjs 渲染，使用设备模型制作外框，并结合图像进行构图（在设备周围排列艺术作品或照片的瓷砖，设备置于照片中，倾斜摆放一对设备，或在绘画风格的背景上叠加 UI 卡片）。
• 首先考虑图像，即使没有生成器也一样。 构建前先检查图像生成渠道是否可用（用一条测试提示词运行 image.mjs，或使用带 API 密钥的 seenry-assets generate）。如果都不可用，要在报告中说明，并改用 The Met 的作品进行艺术指导，而不是只用文字的页面：python3 ../seenry-assets/scripts/assets.py art-set --style <family> --subject "<two or three subject words>" --count 8 --out img。根据品牌语气为整个页面选定一种风格：impressionist（平静、温暖、有人情味：金融、健康养生、酒店服务、消费类应用）、dutch（食品、工艺、物品、室内设计）、japanese（精准、图形化：软件、工具、旅行）、drawings（宁静、编辑风、建筑）、american（开阔的风景和光线）、photographs（黑白纪实）。该工具会裁切博物馆作品的画框，并剔除光线或色彩不符合整体风格的作品；将整组图片放在一起检查，剔除任何仍不协调的作品。借鉴简约工具包的用法：将画作紧密裁切，作为真实产品卡片和设备背后的色块，每块区域一幅画，绝不要使用带画框的博物馆画作，并在页脚注明出处。其余部分使用 Openverse 照片（assets.py images）和设备模型中的产品界面。所有者认为这种做法胜过每一组生成图。
• 展示产品，不要重复展示。 在首屏放一个大型产品主视觉，最多再放两个，每次展示不同内容（日常打卡、每周视图、提醒）。多个版块中反复出现相同列表或日历，会显得是在凑内容。着陆页除注册或候补名单外，不应有其他可用表单；试用演示应以视觉内容呈现，不要做成与行动号召竞争的第二个表单。
• 着陆页字体要比应用界面大。 正文为 18，辅助文案为 16；在 1440 宽度下，所有访客需要阅读的内容都不得小于 15，包括产品模型内的标签。

品味

品味是训练出来的，而非凭空创造：它来自认真审视优秀作品，并追问它们为何恰到好处。Seenry 为你提供了相关素材库；每次都用它。

• 不易察觉的细节会累积成效。 单独来看，没人会注意到 1px 的细线、同心圆角、等宽数字或 140ms 的悬停效果。但这些细节共同决定了成品是“整洁”还是“高级”。每一项都要做到。
• 先删减，再添加。 每个元素都必须帮助用户阅读、选择或行动。页面显得平淡时，解决办法几乎总是优化素材、比例或间距，而不是增加装饰。
• 每个视图只传达一个理念，并贯彻到底。 一个主导元素，一个精心打磨的细节，一个标志性的动态瞬间。其他一切都应保持克制，让它们成为焦点。
• 真实胜过拟像。 真实的产品 UI、真实的摄影、真实的数据和具体的文案，都胜过对它们的任何描绘。
• 动态是设计的一部分，不是收尾工作。 无论静态画面看起来多么出色，如果页面没有响应，就会显得尚未完成。

流程

1. 简述（2 分钟）。 受众、页面唯一要完成的任务、真实内容、固定不变的内容。一句话说明意图。
2. 使用当前的 Seenry MCP 进行调研。 优先使用已连接的工具：加载 get_library_guide，然后使用实际简述、明确的参考类别和最多三个聚焦查询调用 research_design_brief。检查实际返回的像素，并阅读覆盖范围、缺口、限制以及有来源依据的决策准则。如需脚本访问，运行 node scripts/research.mjs --brief BRIEF.md --type <landing|product|dashboard|studio|pricing|app> --family <websites|sections|apps|branding|decks|motion> --terms "<up to three comma-separated queries>"。它会使用环境中已配置的 SEENRY_PRO_KEY；绝不要在聊天中索要密钥。这个有界脚本最多调用三次工具，计划最多消耗 11 个积分，并将结果保存在 .seenry/research/ 中。遇到身份验证、配额或工具错误时，立即停止运行。没有脚本密钥时，它会生成一份明确标注未经调研的人工交接材料；应使用已连接的 MCP 或获准的网络调研，不要捏造资料包。
   • 先构思，再查看参考。 第一次调用调研工具之前，先在 .seenry/idea.md 中写下第 3 步的主张、证据和五个备选构想（只写构想：不要写配色、字体或布局）。根据产品、受众和页面要完成的任务来写简述和查询（例如“为放弃连续打卡应用的人设计的习惯追踪应用”，查询“habit tracker”“fitness app”“streak”），绝不要根据你已经设想好的视觉风格来写。调研会告诉你这个类别通常怎么做，但不会替你选择颜色、字体或构图。
   • 先研究调研结果，再做选择。调研结果会附带一张包含最多八个候选项的联系表，每个产品一个，并附有缩略图。逐一查看，并在 .seenry/refs/kept.md 的开头写下两份清单：惯例，即大多数参考为了帮助用户使用页面而采用的做法（导航、信息顺序、操作的位置、定价结构），注明你会遵循哪些；以及陈词滥调，即大多数参考为了塑造品牌形象而采用的做法（相同的色相范围、主视觉布局、样机角度、字体风格），你最多只采用其中一项。保留两三个屏幕作为工艺标杆，并说明每个屏幕在哪方面树立了标准（间距、字体细节、图像质感、信息密度）。查询中使用类别词语（“analytics hero”“payments pricing”“meal kit onboarding”）；资料库会按各网站所属行业匹配。如果调研后该类别仍然资料不足（类别内候选项少于五个），还应对两三个该类别领军品牌的实时网站运行 scripts/bar.mjs，并将它们作为工艺标杆；资料库仅用于参考结构。调研质量较弱（来自该产品类别的候选项少于五个，或你不愿展示给客户）意味着需要改进查询，而不是将就：尝试该类别的其他称呼和邻近类别（habit tracker，然后是 fitness app、journaling app、streak）。
   • 然后只在有价值的地方深入研究：两份深度阅读资料提供经过测量的证据；需要查看调研候选项的完整尺寸像素时，使用其 inspect 调用。
   • 将保留的参考整理成标杆，制成决策卡。将每份保留参考的屏幕放入 .seenry/refs/（通过其 inspect 调用以完整尺寸打开并保存图像；调研脚本已将调研缩略图保存在 .seenry/research/img/），并在 .seenry/refs/kept.md 中为每个文件写一张卡：该屏幕要完成的任务；它做出的决策（信息顺序、如何证明主张、信息密度、节奏、视线首先落在哪里）；测量数据（标题和正文大小、圆角、控件内边距和品牌色，数据来自调研结果的 measured 区块、compare_measurements 或 get_tokens）；你将遵循或超越的工艺标准；以及你会刻意避免的一项做法，因为它是该类别的陈词滥调。工作室要通过研究做出判断，而不是描摹。
   • 也要研究页面中段，而不只是主视觉。完成调研后，针对页面最重要的主体区块（功能与证据、定价、日程、作品、菜单）再使用 search_sections 或 sections 类别的 research_design_brief 搜索一次，保留其中构图最好的一个或两个，并为每个区块制作决策卡：它如何突出一个重点，如何与前一个区块形成变化，以及它的视觉如何证明主张。
   • 从类别之外借鉴参考。 调用 borrow_references，传入主导构想必须完成的任务，以及要排除的类别（一个构想为“会宽容中断的连续记录”的习惯追踪应用，或许会找到记分牌、年鉴或学习应用的连续打卡图表）。保留一个参考，检查它并为其制作决策卡。可独占的创意来自这里以及构想本身，而不是类别调研。
   • 在标杆中保留一个工作室级参考。 除了类别领军品牌，还要将一个工作室网站或品牌重塑影片中的一帧保存到 .seenry/refs/，并在 kept.md 中为其制作卡片，这样评审者就会将页面与工作室作品而不仅是类别惯例进行比较。
   • 为不同参考分配不同任务。 类别参考用于设定惯例和工艺标杆；类别外参考则为构想提供灵感。主视觉构图、色彩世界和展示字体应来自所选构想，不得与该类别最常见的布局相同；任何区块都不得复刻单一参考的布局、图像处理方式或标志性元素。check.mjs 会将保留的屏幕展示给盲评审者：页面达到同等工艺水平（参考匹配度 7 分或以上）且不复制任何参考时，才算通过。
   • 指出类别中的最佳品牌，并以同等水准进行构图。 至少写下该具体类别中三个优秀品牌的名称（独立制表：Laurent Ferrier、Akrivia、NOMOS；发票：两三个领军品牌，而不是仅仅与搜索词匹配的品牌），并通过名称搜索它们（list_sites {q: "<brand>"}、search_designs {q: "<brand>"} 或指定品牌名称的 research_design_brief 查询），而不是搜索类别词。资料库并不收录所有品牌：如果缺少某个领军品牌，运行 node scripts/bar.mjs --type <landing|product> --sites <domain>,<domain> 抓取其实时网站（会跳过机器人检查，但绝不会绕过检查），并将这些屏幕保存在 .seenry/research/bar/，作为标杆。绝不要因为领军品牌未被收录，就将就采用任意一个与类别词匹配的结果。在 kept.md 中记录这些品牌共同采用的构图类型：产品主体占据画面（奢侈品、硬件、食品、酒店餐饮）、真实比例的产品使用瞬间（软件）、编辑式或以字体为主的页面（媒体、工作室、文化）、信息密集的工作界面（数据工具）。主视觉应以该类型为基础，并融入自身构想；领军品牌设定类型，普通网站的布局则是应当避免的。软件常见的分栏布局（左侧标题、右侧圆角卡片中的产品界面，周围环绕选项卡或提示）绝不适用于实体产品或奢侈品。评审者会专门按 category_fit 进行评分。
   • 阅读 pack.md 和 evidence.json，以完整尺寸检查一两个与任务相关的来源，并将检查过的工艺参考保存到 .seenry/refs/ 以供比较。相邻类别的移动端参考不能证明其适用于桌面产品。apps 类别包含采集的移动应用；除非有意借鉴移动端，否则网页界面应选择 websites/sections。
   • 在 DESIGN.md 中列出保留和弃用的参考，说明每个保留来源证明了什么、你借鉴了什么，以及哪些关系尚未验证。设计必须是原创的：借鉴模式，不要复制页面。最终摘要要注明保留参考的名称。查询匹配结果和评审者的数字评分都不能证明审美品位。
   • 设置字体、圆角和间距前，先进行测量。对你选择的 2 到 4 个参考调用 compare_measurements（5 个积分），获取它们共同的标题和正文字号、圆角及控件内边距；或者对一个页面调用 get_tokens 获取其颜色和字体系列。在 DESIGN.md 中记录这些数据，并仅将其作为阅读体验和控件工艺的上下限参考（正文字号和行高、控件高度和内边距、圆角比例、区块间距；调研结果中的 measured.floors）。展示字号、标题比例、配色和构图绝不能取平均值：它们由品牌形象决定；如有需要，超出测得的标题字号范围也理所当然。没有 MCP 时，使用基准。
   • 关于完整流程、分屏截图、经测量的设计背景、动效和 PDF 规则，请遵循当前的 MCP 调研。仅在需要相关动效证据时研究录制内容。
3. 找到这个品牌的构想。 按照设计思考执行：写下产品的主张、证据、时刻和材质；至少提出五个采用不同设计手法的构想（将主张具象化、让用户立即体验、将证据融入表达、呈现前后对比、展现物理现实、用细节证明用心、删去某些元素、改变计量单位）；根据真实性、清晰度、独特性、克制感和可实现性打分；选出一个，并将其贯穿主视觉、标志性时刻、图像、文案和一个细节。将其保存为 .seenry/idea.md。套件和参考都是实现构想的手段，而不是构想本身；不同简述绝不能最终呈现相同的标志性设计。然后将构想转化为形式：遵循 Identity first，编写 .seenry/identity.md 并制作其视觉方案板。构想就是主张；品牌形象决定外观。即便主张不同，若使用默认布局，依然只是模板。
4. 探索三种品牌形象，然后盲选。 品牌形象方案板就是探索过程：无需单独进行首屏草图阶段。快速制作三张品牌形象方案板（总计约十分钟；它们是用来确定方向的草图，绘制层和动效评分简要写在方案板上，并在页面中完整实现），分别基于 .seenry/idea.md 中评分最高的三个构想（.seenry/explore/a.html、b.html、c.html），每张都遵循 Identity first，使用各自的字体风格、色彩世界、视觉元素和图像处理方式，每张都适配一个 1440×900 屏幕，并展示两张视觉海报（主视觉和最难处理的普通区块）。使用 Seenry MCP 时，最多一张方案板遵循类别惯例，作为稳妥对照；最多一张以类别外参考为基础。对于风格不张扬的应用或软件产品，页面应采用静谧高端套件（所有者设定的参考标准；盲选偏好更大胆的方案板，而所有者给这些方案板打了 7/10），因此三张方案板应在图像、应用界面的构想和文案上有所不同，而不是在布局或表现风格上不同。如果用户附上或链接了参考，应贴近其表现风格和层次，但绝不要照搬其布局：改变主视觉构图和至少两个区块（套件中列出了替代方案）；所有者曾拒绝过一个看起来不错的精确复制品。三张方案板必须在访客首先看到的内容上有所不同（实际运行的产品瞬间、具象化的主张、单张照片、纯文字），而不仅仅是布局不同；也不得重复 ~/.config/seenry/history.json 中的品牌形象。运行 node scripts/pick.mjs .seenry/explore/a.html .seenry/explore/b.html .seenry/explore/c.html --brief <brief> --refs .seenry/refs/<a>,<b>，将胜出的方案复制到 .seenry/identity.html，根据它编写 .seenry/identity.md 并立即运行 node scripts/history.mjs 记录下来（这样同时运行的其他构建就能避开它），吸收评选结果中建议借鉴其他方案的内容，并在 idea.md 中记录选定的构想。胜出方案板中的主视觉海报将成为首屏。工作室不会直接交付第一个构图；Seenry 也一样。
5. 设计方向。 确定 .seenry/identity.md 中胜出方案的品牌形象（如果评选改变了方向，就重写）：字体风格、色彩世界、视觉元素、图像处理方式、品牌语句和动效行为，以及圆角体系和构图模式。先选择明显的高端方案，再考虑巧妙的方案。新增或更改品牌形象时，还要遵循 seenry-branding（其 skill）及其项目指南。
6. 动效规范。 现在阅读 seenry-motion。如需参考动效，获取并播放所选录制内容（签名链接会过期），使用 python3 ../seenry-motion/scripts/video_frames.py 提取运动最明显时段附近的画面，并编写 .seenry/motion.md：对每个动态元素，说明触发条件、运动内容、时长、缓动或弹簧、错开顺序、中断方式、减少动态效果时的行为，以及其参考来源。包含标志性时刻和所有原位变化（数字、筛选器、加入购物袋）。
7. 素材，后台并行准备。 选定方案后立即开始生成图像，并在生成过程中继续构建：根据品牌形象的图像处理方式编写任务文件，然后运行 node scripts/image.mjs --batch jobs.json --variants 3 --brand "<brand>" --background；命令会立即返回，并在你构建时继续生成图像。使用最终文件名构建页面；check.mjs 会在评审前等待图像生成完毕（手动等待可用 image.mjs --wait）。如果页面必须等照片准备好才开始，会浪费 5 到 12 分钟。摄影和图像素材通过 seenry-assets 获取，进行艺术指导，并通过 photo_check.mjs 检查（参见规范中的“图像素材”）。插画和环境视觉效果遵循下文的工艺要求。
8. 以基础套件为起点。 新应用界面可以从产品套件开始；已有产品应保留其组件和动效体系。使用该体系实现 .seenry/motion.md，或者在简单页面需要起点时使用 motion.css 和 motion.js。不要仅为满足此步骤而加载第二个运行时；应使用兼容的组件和下文描述的、有明确目的的标志性时刻。根据第 3 步设置字体、中性色和强调色。
9. 先像工作室一样编辑，再打磨工艺，然后检查。 进入验收环节前，像工作室创意总监一样编辑页面，因为内容过密如今是 Seenry 与工作室作品之间最常见的差距。将文案缩减约三分之一：每个区块只讲一件事，用一两个简短段落表达；无法证明其必要性的区块就删掉。首屏只传递一条信息：标题、一行补充说明和一个操作按钮；导航之外最多约 45 个词。事实、说明文字、徽章和次要链接都移到首屏之后。说明文字应为一行短句（不超过 18 个词），且只有在能补充图像无法表达的信息时才保留。次要文本应留有空间：在 1440 宽度下字号至少为 15px，行高至少为 1.5，组与组之间的间距应明显大于组内间距。如有疑问，就删减：内容更少、元素更大的平静页面更像工作室作品；什么都想塞进去的丰富页面更像代理商作品。review_board 会标记首屏拥挤、页面超过约 700 个词以及说明文字过长的问题。 先以完整尺寸打磨工艺，再检查。 工作室会按 100% 缩放逐区块评审；评审者看到的页面只有一半大小。进入验收环节前，以 1440 宽度渲染每个区块（node scripts/review_board.mjs <url> --out $TMPDIR/seenry-craft 会输出完整尺寸的首屏；其余部分使用 Playwright 截取完整尺寸截图），并修复只有近看才会发现的问题：文字与图像、线条的光学校准；区块之间以及区块内部保持一致的间距级差；标题断行和参差边缘；裁切图像时避免切掉主体；以及控件保持统一的高度和圆角。check.mjs 还会运行细节评审器（scripts/detail_critic.mjs），由一个新的模型以完整 1440 尺寸逐区块评审工艺，并返回具体到元素、以 px 为单位的修改意见；将这些意见与主要评审者的修改意见一并应用，但会缩小品牌形象的规模、削弱其色彩范围或移除其视觉元素的修改意见除外：整洁度永远不能凌驾于品牌形象。在 polish 和 showcase 模式下，工艺评分低于 8 的页面无法通过；在 quick 模式下，修改意见仅供参考。然后默认运行 node scripts/check.mjs <file or url> --brief <brief file> --mode quick（仅一轮评审；如果用户要求更多轮次，例如在那一行中指定 --mode polish 或 --mode showcase）。本步骤其余部分介绍完整的 showcase 验收流程。它会验证调研资料包、参考、动效规范和 DESIGN.md 是否存在；检查粗劣设计、可读性、圆角和交互证据；通过照片检查工具检查照片；然后要求一位盲评审者（一个只看到截图、简述和参考屏幕的新模型）为页面打分，并运行动效评审器。动效评审器会抽取符合条件的控件，记录其状态变化，测量时长、缓动、动画属性、布局偏移和减少动态效果时的行为，并根据目的性、时机、空间逻辑、流畅度和一致性打分。应用它打印的所有设计和动效修改意见，并反复运行，直到达到 PASS（评审评分 9+，所有声明的网页动效标准及已评审交互行均达到 9+，标签捕获覆盖完整且没有报告的动效违规）。评分是启发式评审信号，不代表优于竞品。此要求仅适用于实际捕获的交互；未测试的组件仍属未经验证，旧版原生视频评审结果也不能证明达到网页逐项标准。最终结果必须是经过检查的版本：如果你在最后一轮后编辑，check.mjs 会再运行一轮验证。在 LAST ROUND 时，只进行它要求的一项根级修改；在 --mode showcase 中，如果目标分数以下出现 STOP 或 STOPPED，问题在于概念，而非润色（这项要求不可跳过：绝不要因为评审者对构想评价不错就忽略，也绝不要停下来询问是否要这么做；在单轮和无头会话中无人能够回答，所以直接完成）：返回第 4 步，基于 idea.md 中的另一个构想构建页面（改变访客首先看到的内容，而不是重新排版），并运行一次 check.mjs --new-direction，它会归档第一版方向的各轮结果，并为新方向提供全新的预算。只有在第二版方向也停止时，才返回两者中较好的版本，并标明尚未解决的状态及仍未通过或未经验证的标准。当前最佳结果不代表通过；不可用的评审或耗尽的修复预算绝不能视为验收通过。绝不要以自己对页面的评价作为最终结论：测试中，自我评审打了 9 分，而盲评只给了 6–7 分。原生应用（SwiftUI、UIKit、React Native、Flutter）应对模拟器输出执行同样的验收：node scripts/check.mjs --screens home.png,detail.png,sheet.png --video rec.mov --brief <brief>，按流程顺序提供屏幕截图，并提供交互录屏（xcrun simctl io booted recordVideo rec.mov 或 adb shell screenrecord）；评审者会根据标杆为屏幕打分，motion_video.mjs 则会评审录屏。
10. 评审并交付。 如需对交互状态和无障碍体验进行二次评审，请使用 seenry-review。编写 DESIGN.md 的“品牌指南”部分，并按下方要求提交报告。设计说明页可选，最后再做（说明页）。 对于现有应用中的更改，请遵循在现有项目中，而不是采用此流程。

先确立品牌识别：工作室方法

工作室不会先排版页面，再挑选颜色。它们会设计一套品牌识别，由少数几个元素组成，并坚定地贯穿使用；网站只是这套识别的一种应用。看看 Seenry 中的任何一次品牌重塑（Sommerro、Wise、Murray's Cheese、Transavia、Toca Boca）：一个关于品牌的真相、一种放大的字体风格、一种铺满整个版面的颜色、一个源自品牌真相的图形元素、一种图像处理方式，以及一句体现品牌语气的话。每个触点都由这些元素构建，因此即使遮住 Logo，品牌依然清晰可辨。此前的 AI 页面，包括 Seenry 的页面，恰恰相反：套用配色方案的正确布局。整洁且正确只能得 6 分；而精心设计的品牌识别才能让它达到 9 分。 在进行任何布局之前，先编写 .seenry/identity.md，并将其渲染为 .seenry/identity.html，内容控制在一屏内，像品牌重塑影片的开场画面：

1. 真实依据。 品牌真实代表或源自的唯一事实（它所在的建筑、能证明某人何时说了什么的时间戳、面包店的营业时间），必须取自项目简报，绝不能编造历史。
2. 视觉构想。 说明如何将真实依据转化为形式，而非文案：一种字体手法（被线条切开的字母、堆叠或拆分的字标、连字）、一种网格（账簿、时刻表、接触印样）、一种裁切语言（始终紧凑，始终被画框裁切）、一种材质（纸张、胶片颗粒、玻璃、珐琅），或一种行为（事物按照实际发生的顺序出现）。描述要具体到设计师即使看不到网站，也能据此设计海报。
3. 字体语调与变化范围。 字体家族（通常只选一种），从保留参考资料中实测的字体，以及 art direction 中的层级选择；并按照他们的调校方式进行调校；正文文本字体保持低调。先在方案板上列出三个候选项，再选定一个。然后像编辑设计师那样赋予它变化范围：设置五到六个明显不同的层级（展示字体、章节展示字体、导语或引文、正文、说明文字，以及小型大写字母、等宽数字或用于数据的等宽字体等注释样式），并说明每个层级允许采用的手法（一句正文放大排印、悬挂式说明文字、索引或页边注、段首标题、数字采用适当字号并将单位设为小号）。同一种排版处理贯穿整页，即使效果出色，也会显得单调。
4. 语调与色彩世界。 在 identity.md 开头写上 Register: quiet premium 或 Register: loud；评审团队会要求低调页面遵循以下规则（首屏由照片或绘画主导，至少出现三处图像，不使用高饱和品牌色块，同一视觉内容不得重复出现）。一种主打色加上墨色与纸色，并说明颜色的来源。大胆的品牌会将其用作整片底色；沉静、高端的品牌（Aesop、Apple、窑炉工作室）则可以克制地使用，让摄影、字体与构图承载品牌识别。鲜明的品牌识别不必张扬：坚定地保持克制，同样是一种品牌识别。
5. 一种图形元素，从视觉构想中提取，并在页面各处重复出现：标记、图案、线条系统、画框、切口或印章。切勿使用星号、闪光、星星或花朵。每次出现都必须传达信息（日期、测量值、标签、路径）；将元素重复用作分隔符或填充物，会显得像装饰。
6. 图像概念与处理。 说明图像要传达的内容，并提供一个出人意料的角度，避开该品类最常见的画面（采用意想不到的比例、裁切、物件或布景；例如，窑炉工作室展示一只侧对镜头的盘子特写，而不是又一排碗架）。然后为所有图像制定统一的视觉风格（裁切、光线、色调、颗粒与构图），并通过代码和提示词应用：使用 CSS 或 canvas 处理（双色调、调色、颗粒叠加、抠图），让每张图都经过相同处理，使整组图像看起来像同一次拍摄。至少有一张图要与字体或图形元素结合（叠加、遮罩、抠出），不能只是放在画框中。工作室也会使用生成图像；其图像之所以看起来像经过导演构思，是因为概念与处理，而非生成器。每张生成图像的提示词都必须包含这一视觉风格。黄金时刻的暖光和朦胧的雾气是生成器的默认效果，如今评审已经在每个 AI 页面上都看过这些效果；应根据品牌的真实依据选择光线（阴天漫射光、正午强烈阳光、机顶闪光灯、纯净的无缝摄影棚背景、钠灯下的夜景、档案扫描件），并说明原因。
7. 品牌语句。 用品牌语调写一句简短的话，可以单独放在海报上。
8. 动态设计脚本。 页面应像影片一样编排，而不是逐个组件添加动画。评审工作室的评委对每个区块都整齐地使用 0.5s 淡入动画的页面，在动态表现上只打 3–5 分（满分 10 分），而其他方面都能达到 8.5–9 分：这就是优秀代理商与顶尖工作室之间的差距。页面编排遵循独立于界面动效（悬停、标签页、对话框保持在 140–280ms）的自身节奏：入场与揭示耗时 600–1400ms，使用同一种 expo-out 缓动曲线，场景随滚动推进。将脚本写在 identity.md 的 ## Motion 标题下，并完整实现：
   • 入场（1.2s 内按顺序完成）。 主体首先出现，并带有缩放变化：照片或产品通过遮罩显现（clip-path 从 inset 展开至 0，耗时约 1s），同时从 scale(1.06) 过渡到 1；然后标题逐行出现（每行在溢出遮罩内上升 24–40px，间隔 80–120ms）；接着出现辅助文案和操作按钮；最后出现导航。标题须在 0.8s 前完全可读，任何点明产品的信息都不得晚于 1.2s 出现（评审会扣除刻意拖延信息呈现的分数）。切勿让所有内容同时出现。
   • 两到三个停留场景。 设置一个高 160–250vh 的区段，使用 position: sticky 舞台（或 GSAP ScrollTrigger 的 pin + scrub），在此停留期间，让能够证明构想的元素发生清晰可见的变化：图层分离、图像构图从整体切换为细节、绘图逐步显现，光带或数据穿过其中，图表或数字逐渐成形。将场景映射到 0–1 的进度，并在结束前留出阅读停顿（滚动编排）。只有滤镜或不透明度变化不算场景。
   • 图形元素贯穿页面。 每个区段进入视野时，品牌图形元素或绘图都要自行绘制出来（使用 stroke-dashoffset，或在 animation-timeline: view() 上使用遮罩），并连接它所穿过的各个区段。
   • 图像出现，文字保持可读。 大图进入视野时，通过遮罩或构图变化显现；正文和行内容始终保持完全不透明（不要让淡化文字延迟出现）。
   • 最多一个空闲循环，且仅用于展示产品本身的行为。 最稳妥快捷的方式是使用内置的 scene（scene.css + scene.js，无需库）：将这两个文件复制到项目中，把高区段标记为 data-scene，并添加 data-scene-stage，然后基于其 --p 进度用 CSS 编写动态编排；其中的配方（从整体到细节、图层分离、绘图逐步显现、行内容移动、数字成形）和 data-enter 入场效果适用于大多数页面，并已包含减少动态效果的版本。否则，可使用 CSS 滚动驱动动画（animation-timeline: view()/scroll() 搭配 animation-range）和 View Transitions API，或 GSAP ScrollTrigger（https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js 和 .../dist/ScrollTrigger.min.js，可免费用于所有用途）；务必提供完整的减少动态效果版本：将静止 CSS 写成最终状态，并让动画从起始状态开始运行（这样绘图或图像就不会一直处于隐藏状态）；在 prefers-reduced-motion: reduce 下，移除固定效果和场景额外增加的滚动高度，让每个区段收缩至其自然高度。评审会在此版本中截取整页静态图，因此空白的滚动区段或未绘制的图层会显示为空白，并且 CPU 占用率不得超过 10%。check.mjs 会录制入场动画和滚动过程，并由动态编排评审工具评分；同一轮中完成它提出的修改。
9. 绘制层。 从图形元素衍生出一套插画系统，以统一线条粗细和风格手绘 SVG（侧面轮廓图、示意图、标记、地图），至少用于两个区段，并在滚动时绘制出来。这是页面获得专属质感的关键；参见 Craft: illustration and ambient visuals。 展示板应呈现字标、各级字号的实际用法（一段短文，同时展示展示文字、导语、正文、说明文字和注释）、按真实比例呈现的色彩体系、图形装置、一张经过处理的图片、一幅来自绘制层的插画、一段简短分镜形式的动态脚本，以及两张仅由这些元素构成的海报：一张主视觉海报，另一张展示页面中最棘手的常规版块（价格、常见问题、安全或团队），并采用同一套系统设计。因为盲测评审发现，每个页面都在主视觉中体现了自己的理念，到了下方却退回了千篇一律的现成版块。如果这张海报也能属于竞争对手，那么这套品牌识别就还没做好。先在 Seenry 中研究至少两套品牌识别展示（search_designs {family: "branding"}；品牌重塑影片展示了一套系统在标识、印刷品、包装和网页上的应用：下载视频，再用 python3 ../seenry-motion/scripts/video_frames.py 提取帧），再研究一个工作室网站（list_sites {q: "studio"}），了解出色的品牌识别会用到多么精简的元素。打造你自己的设计；绝不要借用其他品牌的标志、形象或图形装置。**也不要重复自己。**先运行 node scripts/history.mjs --list：它会列出这台机器上最近打造的品牌识别所用的展示字体、主视觉颜色和图形装置。契合度优先：选择最适合这个品牌的识别设计，然后确保它不是近期设计的翻版，也不要再次搭配相同色系与类型的图形装置；字体在合适时可以重复使用（两款金融应用可以共用精致的无衬线字体），因此如果风格接近，就改颜色或图形装置，绝不要降低字体品质。Seenry 上的两个页面不应看起来像一对，但多样性永远不能凌驾于契合度之上。本文档和参考资料中的示例是为了说明原则，绝不可照搬。 然后，页面就是品牌识别的一种应用：

• 普通组件也要经过设计，而非沿用默认样式。 给首屏和各个区块打 9 分的评审，扣分的都是每个网站都有的部分：产品卡片和定价卡片、表单、表格、页脚。按照品牌识别设计每个组件：从设备和网格中为其构思独特的布局（比如像品牌标签一样排布价格，像票据或订单单据一样排列表单）；字段标签、表格单元格、时间表和元数据的字号至少为 15px，并使用对比度充足的墨色（每位评审都指出了“实用信息文字太小”）；使用统一的控件高度和圆角体系；明确展示悬停、聚焦和错误状态；页脚应是品牌体系中的收尾海报，而不是四列链接。如果某个组件可以原封不动地放进任何 SaaS 模板，就重新设计它。
• 手机上要保留核心主张和浏览路径。 手机首屏应将主体裁切到能识别它的部分（标签、人脸、建筑），并展示标题和操作按钮；导航则应通过菜单按钮保持易于访问。
• 借鉴结构，而不是外观。 从你考察过的工作室网站或行业领先网站中，选一种构图模式，并根据其完整页面（而非仅首屏）将结构写入 .seenry/idea.md：网格（列数、栏距、页边距）、字号阶梯（展示、区块和正文的字号及其比例）、区块在尺度和密度上的交替方式，以及图片的裁切方式。按照这些尺寸来构建页面。借鉴参考网站的结构，再填入这一品牌识别，是设计师学习的方式；照搬它的内容、图片或设备则不是。
• 主体优先。 如果品牌有真实的地点、物件或产品，首屏就应大幅展示它，让画面铺满或几乎铺满整个屏幕，并将文字置于其上或其旁；色块和文字应衬托主体，而不是取而代之。只有没有可展示内容的品牌才适合纯文字或色块首屏。
• 品牌应用稿中的海报就是首屏。 将 identity.html 中的海报放大至全屏，作为首屏：使用同样的文字，并保持同样的自信，呈现色块、图片裁切方式和设备，再加上导航和一个操作按钮。测试中，品牌应用稿达到了工作室级水准，页面却退回普通网页首屏，未能展现其精髓；因此，评审现在看到品牌应用稿后，如果页面弱于它，就会给品牌识别打 6 分。只呈现一个主张、一个视觉元素：以十足的自信展示展示字体和一张图片、一个物件或一个产品瞬间；让视觉元素铺满整个屏幕或占据大部分屏幕，或者让文字本身成为图像。辅助文案只写一行，操作按钮只留一个。表单、数据行、说明文字和次要佐证都放在首屏下方（预订或搜索字段只有在本身就是产品时才留在首屏，例如旅游网站）。
• 避免使用 Seenry 自带的默认样式。 以下设计已经成了容易辨认的生成式套路：左侧文字栏、右半边铺满照片；把巨大数字（数量、时间、日期）当作首屏视觉元素，除非数字就是品牌的真实核心；在居中的标题下方放一个带边框的产品卡片；处处使用未经调整的同一款字体（默认字距、粗体标题）。只有品牌识别确有依据时才使用这些设计，并在 DESIGN.md 中说明原因。
• 品牌体系要贯穿到页脚。 定价、常见问题、安全性、用户评价和收尾横幅，都要像首屏一样充分运用品牌识别中的字体风格、色块和视觉元素（例如，使用品牌视觉元素的网格排制定价表、按照品牌的方式为常见问题编排索引、将收尾横幅设计成品牌应用稿中的第二张海报）。如果页面后半部分可以属于任何网站，那它就还没完成。
• 中间部分也要有字体变化。 首屏之后的每个区块，都要在同一构图中至少使用两个字号层级；相邻区块的主导手法也要有所不同：先用大号正文引用句引领，再用密集且附有说明文字的网格引领，然后用一个带注释的精确数据引领，接着用带页边注的编辑式双栏段落引领。在一个区块内大幅改变字号（例如让 64px 的文字与 15px 的说明文字并置），而不是让所有内容都逐级缩小一级。展示字体只用于它原本选定的主张；通过正文所用的字体、字重、字号和注释语气来体现变化。不要使用斜体强调词和眉题；变化应来自尺度、节奏和排布。
• 用同一套系统把区块构成海报。 每个区块都应以品牌识别中的元素构成一个鲜明自信的画面（将展示字体作为图像排布、使用色块、运用视觉元素、对处理过的图片进行大幅裁切），就像品牌重塑时的应用设计，而不是标题、段落和模块的组合。网页惯例只保留给控件使用：导航、按钮、表单、产品卡片和定价。如果一个区块换上别的颜色也能放在任何网站上，那它就还没完成。

标准

顶尖团队之所以显得出众，根本原因只有一个：他们对任务进行了排序，然后去掉了所有无关内容。沉静是显而易见的结果。每条规则背后的原因见premium。 切勿采用以下做法（check.mjs 会拦截其中大多数）：

• 条件反射式眉题：标题上方的短小文字，无论内容是什么（例如 h1 上方的 “Good to know” 或 “Your neighborhood yoga studio”）。删掉它；标题已经说明了内容，时长或级别等卡片信息应放在标题下方。任何地方都不要用大写字母加宽字距的标签。
• 编号标签：“01 /”、“(001)”、“No. 03”、“Step 01”。只有顺序确实重要时才使用数字，并以普通数字形式呈现。
• 例外情况是：标签或标记系统本身就是品牌标识的一部分，就像某间工作室会采用的做法一样：每个版块都使用同一种标记或索引，源自品牌理念，采用句首字母大写格式，并与标题一样精心设计。为其元素添加 data-seenry-device="<name>"；review_board 随后会将其视为一个系统，并在出现次数少于三次时发出标记。不要使用大写字母加宽字距的标签。
• UI 中字重达到 700 或以上，或页面上使用超过三种字重。
• 标题中的斜体衬线强调词；用来营造风格的流行默认字体（Instrument Serif、Fraunces、Playfair、Space Grotesk、Clash Display）。
• AI 默认配色：奶油色搭配赤陶色或橙色、李子色搭配桃色、海军蓝搭配荧光绿、森林绿搭配奶油色的伪装式配色、紫色渐变。
• 剪贴画风格的图像：日落圆形、黑胶唱片、扁平 SVG 产品替代图、带贴纸徽章的倾斜悬浮卡片、渐变色块、光晕。
• 带圆环或条纹的彩色 KPI 主视觉卡片、每张卡片都放一个装饰性图标方块（帮助人们识别选项或版块的图标可以使用）、每行一张卡片、纵向排列的高饱和度药丸徽章。
• 泛泛的口号（“X 一起更好”、“为 Y 而打造”）、虚构数据、占位文本。
• 必须阅读的文字小于 13px，或使用对比度不达标的浅灰色。
• 模板化装饰：示例标签行、四列图标功能网格、九个或更多标志组成的墙、沿版块重复排列的描边迷你卡片。展示一个清晰示例、三个有力要点，或人们认识的六个标志。
• 将框架默认颜色用作品牌色：Tailwind blue-600/indigo-500、violet-600、emerald-500、近黑背景上的 orange-500。应从品牌或其材质中提取强调色，并用 OKLCH 校正（见下文）。
• 用单侧边框作装饰：卡片、引言或提示框左侧的强调色边条（border-left: 3px solid），或在带圆角的元素上用 border-bottom 标记选中的选项卡、筛选器或链接，使线条两端弯曲。用表面色调和间距区分卡片；将选项卡指示线画成独立的直线（check.mjs 会拦截这两种做法）。
• 用文本符号代替图标或标志：按钮和链接中以字符形式输入的星号、闪光、星星或表情符号作为品牌标记，Unicode 箭头（↗ → ←）、勾号或项目符号。无论是直接输入还是绘制成 SVG，星号、闪光、星星、爆裂形或花朵都是默认 AI 标志，装饰性 ✳ ✦ ✧ 散布在页面上也一样；一律不要使用。标志应是用品牌字体排版的字标，或源自产品自身理念的图形标记；图标应来自同一套真实图标集的 SVG（Lucide、Phosphor 或 Tabler），并保持尺寸和线条粗细一致（check.mjs 会拦截直接输入的符号）。
• 标签前的短横线或破折号（“— A notebook that thinks with you”，眉题前的一条 20px 线）。标签应独立呈现，采用句首字母大写格式，否则就删掉。
• 文本前的彩色圆点（“● Active”、“● Paid”、带前置圆点的状态药丸）。只有当圆点本身就是完整信息时才使用：直播或录音指示、头像上的在线状态、列表中的未读标记；为这些情况添加 data-seenry-dot="live|presence|unread"（check.mjs 会拦截任何其他出现在文本前的圆点）。
• 用云状或墙状的细小标签、域名、标志或圆点来表现“很多”（这会让说法沦为装饰），以及页面正文中的制作备注（“这些标记是虚构的”、“演示数据”、“占位内容”）；页脚中可以用一行文字说明。
• 占位插图：模糊的渐变色块、CSS 渐变或用代码绘制的形状，用来代替专辑封面、产品照片或头像。 详细规范见标准；构建前请阅读并完整遵循。简而言之：
• 颜色。 中性色角色（画布、表面、分隔线、三级文本）采用同一色温；一种操作色；品牌标识的主视觉色以最高饱和度用于一两个字段，绝不用浅色调作为区块底色。使用 scripts/palette.py 以 OKLCH 构建调色板。
• 字体。 品牌标识的展示字体用于海报级字号，正文使用低调的字体；使用 2–3 种字重，在 1440px 画布上，任何可读文字都不得小于 15px（段落 16px，短标签 14px）。
• 圆角和层级。 采用一套源自品牌的圆角体系；控件圆角最多为其高度的 25%，或使用完整胶囊形；嵌套圆角保持同心；通过间距和色调区分层级，仅在浮层上使用阴影。
• 尺度。 用足整个 1440px 画布；控件高 44–48px；首屏中必须能看到主要操作。
• 真实尺度的展示。 产品 UI 和图表按真实尺寸呈现，绝不缩小；展示文字至少 15px。
• 构图。 每个区块都应有一个按真实尺寸呈现的大型视觉元素，且各区块的构图各不相同；共设置五到七个区块，间距为 120–160px；每个演示只设一个焦点；移除内容时，用更有力的素材替代。
• 图像。 按品牌标识的风格进行艺术指导；从三个方案中选最佳；运费低于 7 时不得发货。软件应展示产品置于舞台上的效果；人物摄影最多出现一次。
• 文案。 平实、具体、简短，符合所有者的口吻。
• 动效。 动效应有明确目的；UI 动效时长为 120–240ms，移动效果使用弹簧动画；允许中断，并尊重减少动态效果的设置；在标志性时刻呈现品牌标识的动效行为。
• 手机。 手机首屏应在标题和一个操作旁展示主视觉（产品、照片或展示字体作为图片）；公告栏和次要按钮放在其下方（若手机首屏没有视觉内容，review_board 会拦截）。重新编排内容，不要挤压；文字不得覆盖人脸；内容不得被裁切。

组件

不要手工重造常见组件。将核心套件（seenry-ui.css + seenry-ui.js：按钮、字段、选择框、复选框、单选框、开关、分段控件、标签页、菜单、工具提示、对话框、抽屉、Toast、折叠面板、徽标和状态、头像、卡片、可排序和可筛选表格、分页、空状态、统计条、面包屑、kbd、骨架屏、命令菜单）复制到项目中，根据设计方向设置其设计令牌，并且只通过令牌调整样式。打开其中的 gallery.html，查看浅色和深色模式下的所有状态。在 React、Vue 或 Svelte 项目中，使用 README 中的代码片段或项目自带的组件库（Radix、Base UI、shadcn），并应用相同的设计令牌；切勿同时引入两套组件系统。

套件中没有的任何交互组件（按住确认、滑动确认、状态岛、变形按钮、可重新排序列表、拖动条、仪表盘，以及任何带状态和动效的组件）：编写代码前，先根据交互设计指南填写组件简述（用途、单一创意、状态图、几何形态、动效评分及理由、中断规则、输入契约、无障碍结果、减少动态效果、运行时预算、演示、禁止事项），并将其保存为 .seenry/components/<name>.md；按此实现，然后使用该指南的检查清单审查结果。

过渡（根据交互选择）

使用现有动效系统，让状态变化清晰易懂。对于兼容的普通页面，Seenry Transitions（seenry-transitions.css + .js）是一种可选实现：可通过属性（data-st="modal"、data-st="number" 等）或小型 JS API 应用。其令牌来自生产级动效，逐帧测量真实产品所得：曲线 E 进入 cubic-bezier(.16,1,.3,1)，M 移动 (.4,0,.2,1)，F 淡入淡出 (.2,0,.2,1)，X 离开 (.4,0,1,1)；时长为 0 / 80 / 120 / 160 / 180 / 240 / 280ms，根据距离 × 尺寸 × 频率选择，而不是所有情况都用同一时长。任何由手指移动或经常重新设定目标的元素（指示器、底部面板、开关、对话框）都使用工具包的弹簧（--st-spring-snappy、-smooth、-gentle、-bouncy、-thumb：将 SwiftUI 风格的响应和回弹内置于 CSS linear() 中），因此会从当前位置反向运动；精确数值和文本绝不会超调。针对每种方案采用上述频率、键盘和减少动态效果的决策；合适的即时状态无需装饰性动效。确实需要动效时，根据具体场景选择：

• 模态框、底部面板、菜单和弹出层使用适合其用途的动效和关闭方式。菜单和弹出层应与其触发元素保持关联；直接展开的卡片可以保留返回来源位置的控件；确认对话框应保留安全的“取消”操作和适当的 Escape 行为。不要仅仅因为一个界面是对话框，就添加“关闭”或 X 按钮。底部面板可以跟随手指，并根据移动距离或快速滑动关闭；搜索按钮可展开为命令面板；卡片可展开为详情，同时让封面和标题一同移动。
• 每组标签页和分段控件：使用可移动的共享指示器；通过键盘选择时立即切换。
• 对适合用动画呈现的数值变化：仅让变化的数字沿数值变化方向移动，并保持数字对齐稳定。频繁更新或由键盘驱动的更新可以即时切换；模糊效果可选，并应遵循减少动态效果设置。
• 对于动画内容切换（标签页面板、分段视图、筛选器或前后对比），应保留已接受的状态，以及完成或平滑反向切换所需的任何离场画面。保持图层挂载是一种做法，但不是语义要求。非活动内容不得继续接受焦点，也不得作为活动面板暴露；应在保留所选过渡效果的生命周期边界应用 hidden、禁用交互或移除内容，并防止过期的完成事件生效。避免空白帧、重复绘制和暴露重复内容。动效技能中的“From 8 to 9”列出了评审者会检查的内容。
• 每个异步操作：控件应在预留的固定区域内原位变形（切换标签、显示旋转指示器、绘制成功勾选标记），先确认，再添加装饰；复制到剪贴板后显示“已复制”，随后恢复。
• 每个表单错误：对字段边框施加幅度受限的 3px 抖动，并显示持续存在的消息。
• 每次列表变化：保留的行应重新定位，被移除的行先淡出再收起，以最新状态为准。
• 每种加载状态：在预留几何区域显示骨架屏，准备就绪后交叉淡化为内容；AI 思考和流式输出状态使用工具包提供的效果，绝不使用点状动画。
• 页面和视图导航：沿移动方向并排切换，或使用 View Transition。 更丰富的交互组件（滑动确认、长按删除、状态岛、组合框、日期范围、可重新排序列表、波形播放器等）来自交互工具包，并重新应用项目令牌进行样式调整；工具包中没有的内容则遵循交互设计中的组件说明。

标志性时刻（始终由 Seenry 主动决定）

Seenry 构建的每个新页面或重新设计的页面，都会加入一个精心设计、富有创意的组件，让产品的行为或品牌理念变得可见（而不是在现有应用内部进行编辑）。不要询问是否要添加；选择它本身就是设计的一部分。标志性时刻源自第 3 步中选定的理念，而不是来自菜单。当页面提出一个重大主张时，一个有力的设计动作往往就是让主张变得可见：用产品自身的单位，以便于阅读的尺寸，直观地呈现主张；任何持续循环超过 5 秒的内容都要配备暂停控件。“很多”绝不是一团细小的标签、域名、徽标或点：展示 3 到 5 个清晰可读的实例，以及它们最终汇成的一个结果；如果访客无法读懂，那就只是装饰。若理念适用，可使用声明组件，在大型编辑式声明中内嵌品牌的证明元素（徽标、标记、代表承诺的图标、一个操作按钮）。否则，请从标志性时刻工具包及其“选择标志性时刻”指南入手：产品演示播放器（光标在真实 UI 中点击和输入）、线条插画绘制动画、氛围场景、滚动叙事（随着每一步变化并由滚动控制的固定视觉元素）、实时数字、徽标滚动条、对比滑块、悬停时显示预览的案例卡片。根据品牌进行调整（内容、颜色、绘制方式、.seenry/motion.md 中的时序），让每个页面都独一无二；如果需求说明中有更好的点子，也可以原创一个。每页只放一个，并置于最能解释内容的位置（通常是首屏或产品版块），在其根元素上添加 data-seenry-signature="<name>"（check.mjs 会检查这一属性）；必须有完整的静态状态，且不能妨碍阅读。

**闲置循环可以逐步展示产品如何完成它唯一的任务，**顺序必须符合实际发生的流程；每页最多一个，周期为 4–6 秒，悬停时暂停，并在减少动态效果的模式下关闭。围绕该产品自身的行为进行设计；绝不可重复使用其他页面或参考资料中的循环。

插画与氛围视觉

独立工作室通过手绘视觉语言展现差异，每个新网站都应有一套（品牌识别中的手绘层），并从自身的特点出发来构建：

• 一套系统，而非素材。 选定一种语言并贯穿使用：单线等距或正投影线稿（在表面颜色上使用 text-2 色的 1–1.5px 描边，最多一种强调色），或由真实 UI 部件构成的精准产品示意图。用 SVG 手工或代码绘制，遵循 8px 网格，角度（30° 等距）和描边粗细保持一致；绝不混用扁平图标、3D 黏土风和线稿。
• 用于说明，而非装饰。 每幅插画都应展示其旁边内容所表达的事物：服务的结构、产品的流程、数据的形态。抽象色块、渐变和通用的“科技感”旋涡都是低质内容。
• 氛围画布。 首屏或收尾部分背后的缓慢场景、网格或线条动画可以承载品牌动感：从 seenry-motion 的信号场、边界描摹和图像显现开始并加以调整；CPU 占用保持在 10% 以下，用 IntersectionObserver 在移出视口时暂停，减少动态效果时停止，并且绝不在移动的像素上放置文字。
• Bento 和功能卡片。 每张卡片配一幅展示其功能的插画，全部使用统一的纤细等距语言。当 hairline（MIT，npm i @lucasmarkes/hairline，适用于 React 或原生 DOM）中的图形与功能匹配时，使用它：应用分层时用 exploded 或 phone，开发者工具用 terminal 或 branches，数据用 plot 或 phosphor，基础设施用 cabinet、router 或 patch，安全用 vault 或 padlock，规模用 elevator，物品堆叠用 riffle，对应事物用 keyboard、laptop 和 drawer。通过其 CSS 变量将图形主题调整为适配页面（--hairline-plate 设为卡片背景色，使用 --hairline-hi、--hairline-edge、--hairline-mid、--hairline-lo），每张卡片只放一个图形，说明文字放在图形之外。如果没有合适的图形，就用同一种语言自行绘制（如果已安装 hairline-create skill，则可使用它）：圆角实体以轮廓加一道暗色内折线绘制，绝不画出十二条盒子边；描边是唯一的高光（一条亮边指出视觉焦点，不加填充、辉光或阴影）；姿态自然、略有不对称，静止时也应成立；图形内不出现文字、数字或图标；动态效果使用弹簧曲线，在移出视口时休眠，减少动态效果时立即停止。
• 描画显现，而非飞入。 线条插画在首次进入视口时通过描边（stroke-dashoffset）或遮罩扫过的方式，在 600–900ms 内显现，仅播放一次。
• 肖像与人物： 使用真实照片，或为整套内容统一采用一种插画风格（线条粗细、裁切方式和背景都相同）；绝不混用。

网格与对齐

4px 基准，8px 布局值，间距为 4 8 12 16 24 32 48 64 96 128。对齐墨迹，而非盒子：标题的大写字母高度与媒体内容的顶边齐平，图标与文本基线对齐；边缘要精确对齐，或至少相隔 8px（对齐、视觉校正）。组件最多采用 3 种尺寸和 3 种字重（组件）；页面共用一个外壳（页面）。

指南

需求	阅读
了解领先团队如何选择颜色、圆角、字重和密度；高级、简洁、优雅的规则	premium
概念、设计方向、字体风格、调色板来源、标志性组件、生成页面的默认设置	art direction
设计令牌、网格、间距、圆角、层级、起步 CSS	system
在固定画框内探索构图、工作室评审	exploration
构建组件、编写规格、组件结构	components
页面外壳、区块原型、页面模板	pages
根据产品类型选择字体、字号比例、字距、数字样式	typography
调色板角色、深色模式、对比度	color
基准线、墨色层级对齐、视觉内缩、比例	alignment
视觉居中、尺寸补偿、侧边距、图标微调	optical
视觉修正、图标、点击区域、状态	craft
标题、标签、错误信息、空状态	writing
选择合适的库，而不是手动实现组件	libraries
手机浏览器特性：视口单位、点击、缩放、安全区域	mobile web
键盘、语义、缩放、减少动态效果	accessibility
选择素材；获取与生成素材	imagery 和 seenry-assets
Seenry MCP 配方和离线调研	research
设计说明：理由、调研、结构、指南	sheet
来自领先产品网站的实测证据	benchmarks
按设计目标选择库和框架	stack
AI 特征及其修正方法	anti-slop
忠实复现给定设计	replication

使用 seenry-assets 处理图像、图标和字体，使用 seenry-motion 处理过渡和交互，使用 seenry-apps 开发原生移动应用，使用 seenry-branding 构建设计识别系统，使用 seenry-review 进行审查、差异比较和压力测试。

工具

• 核心组件、过渡效果、交互组件、签名组件和声明：可复制、由令牌驱动、无障碍，支持浅色和深色模式，且各自都附带图库。
• 研究包：有额度限制的脚本化研究（信用余额、资料库指南、一个 research_design_brief，最多 11 个额度），连同图片和证据保存到 .seenry/research/。
• Bar：无需 Seenry MCP，即可捕获同类领先产品的实时首屏（桌面端；应用则为手机端），作为评审基准，并启动一个需手动完成的研究包。
• Screens和视频动效：用于原生应用以及任何通过拍摄而非点击来展示的内容的评审板和动效评审器；check.mjs --screens … --video … 可同时运行两者。
• Pick：在桌面端和手机端并排渲染多个首屏构图，并让一个全新的模型在不知情的情况下对照参考图选出一个。
• Check：最终检查关卡。运行评审板，遇到粗制滥造的问题时阻止通过，然后让盲评审员对照参考屏幕进行评审；输出 PASS 或待修复的问题。
• 图像生成：通过 Codex CLI 的图像模型从任意主机生成照片；支持单张或批量生成。
• 动效评审器：抽样符合条件的控件，记录其过渡效果和快速双击，测量动画（属性、时长、缓动）、布局偏移、长帧和减少动态效果设置，阻止严重违规，并盲评动效。
• 照片检查：盲评艺术指导根据参考图对每张图片在其对应位置的效果打分，并为低于 8 分的图片编写更好的提示词。
• 盲评审员：启动一个全新的 Codex 或 Claude 进程，以高端标准对照参考图评审页面并返回按优先级排序的修复建议。
• 评审板：以评审比例展示页面并与参考图并排对照，还会检查网格审计无法发现的工艺问题（缩放后的易读性、眉线、编号、字重、字体加载、图示间距、手机端裁切、固定叠层、动效覆盖范围）。每轮评审都要运行。
• 产品套件和动效基线：应用屏幕和交互的起始质量基线。
• 页面审计：适用于任意项目（URL 或 HTML 文件）的一条命令，可在多个宽度下运行系统审计和光学审计，并输出可修复的问题。需要 Playwright。
• 光学审计：将图标栅格化以测量墨迹；报告偏离中心的图标按钮（包括不对称形状）、图标未与对应标签的大写字母高度中心对齐、控件内标签未居中、图标侧边内边距不平衡和标题侧边字面间距问题，并为每项提供 CSS 微调建议。
• 动效扫描：读取项目的 CSS、HTML、脚本和 Tailwind 类，检查每个时长、延迟、缓动和动画属性是否符合动效令牌，还会检查 transition: all、布局属性过渡、交错步长和缺失的减少动态效果分支；耗时远低于一秒，且无需浏览器。check.mjs 每轮都会运行；任何动效变更后也请自行运行。
• 系统审计：统计渲染后的字号、字重、字体系列、圆角、阴影和颜色；列出不符合网格的内边距、间距和外边距；标记非同心圆角、换行的控件标签，以及尺寸或字重超过 3 种的组件；并逐个组件测量墨迹级对齐（大写字母顶部、基线、字形绘制边界、媒体边缘）：微小边缘偏差、媒体锚点和光学内缩。每次截图检查都要运行。
• 设计页和结构捕获：任务结束时的交付物，采用 seenry.design 的样式。
• 探索页：以真实宽度并排渲染不同版本的文件，供评审使用。
• 网格叠层：仅供开发使用的列、槽间距和 8px 检查。
• 调色板：根据一种品牌颜色生成 OKLCH 色阶，为浅色和深色模式生成两层令牌，并使用 WCAG + APCA 测量所有颜色对；使用 --check FG BG 检查单个颜色对。
• 入门令牌和 DESIGN.md 模板。
• 文本碰撞、控件几何、视觉清单、令牌对比度、对比度检查。

报告

先提供一份用户无需打开任何内容即可阅读的品牌指南摘要，然后列出路径：

Idea:      <the chosen idea in one sentence, the claim and proof it comes from, and where it shows on the page>
Bar:       <the 3 reference screens and the five lines on why they look premium>
Direction: <intent in one sentence>
Type:      <family and weights by role; why>
Palette:   <name hex role> · … ; temperature and why
Radius:    <family by role>; elevation rule
Imagery:   <what the images are and how they were made>
Owned detail: <the one detail this brand owns>
Rules:     3–5 testable do/don't lines for future work
Critic:    <round-by-round blind scores from check.mjs, e.g. 6 → 7 → 8 → 9> and what moved it
Motion:    <motion judge score, durations and curves used, the signature moment>
Verified:  <widths, interactions, contrast>; not verified: <…>

将相同的指南写入 DESIGN.md 中的“品牌指南”部分。注明评论者的最终评分，切勿自行评分。