design-web

用途

design-web 用于构建或修改营销/落地/活动页面，使用前提是 design-system tokens 已存在且 design-method 的 Gate 0 已将注册（register）锁定为 brand（单一主导、富有表现力的信息）。若页面是仪表盘、应用或工具界面，应改用 design-webapp；例外是位于应用壳内的营销性质页面（如应用内定价页）仍使用本技能处理该单页。

主要能力

结构选择

页面结构来自注册与两个结构选择，而非模板复制：首屏处理（hero treatment）从 macrostructure-bank 中选，正文序列（body sequence）从 body-sequence-bank 中选，二者均需通过 register/brand.md 中的 POV 过滤。仅命名其一视为计划不完整。正文序列需在计划中以指定格式声明，并说明其原则在本主题下如何体现。偏离所选序列是允许的，但需在生成动作报告中说明哪个区段移动及原因。

首屏纪律

标题少于 10 个词，副标题少于 20 个词，仅 1 个主 CTA，使用真实产品/品牌视觉而非抽象素材图。整个页面 CTA 不超过 3 个触点，次要 CTA 在视觉上从属于主 CTA。每个视口恰好一个视觉上独特的焦点元素（Von Restorff 效应），Focal-Block Floor 在本注册下为强制要求。

打破网格与内边距一致性

优先使用非对称列分割（2/1、1/2、span-2、bento）而非在多个不相关区段重复统一三列网格。区段内边距应变化以形成节奏：区段内紧密分组，区段间宽松分隔，避免所有区段使用同一内边距值。layout-discipline.md 仍负责数值上限（eyebrow 限制、zigzag 上限、bento N=N、区段重复禁令）。

反套路机械标志

可检查渲染后的标记：默认使用规范区段顺序（8 区段骨架逐字使用且计划中未命名正文序列）、统一三列网格（同一 grid-cols-3 在 ≥3 个不相关区段重复）、统一区段内边距（每个区段相同 py-20/py-24）、每个 H1 上方都有 eyebrow、签名式入场动效（opacity:0 + translateY(20px) + ease-in-out 滚动显现）、反射式配色+字体+形状组合（Tailwind 蓝/靛色 hue 200–290° + Inter + rounded-2xl 同时作为默认使用）。每项均有对应解药，部分规则在 layout-discipline.md 中已有治理，此处不重复。

组件选择

根据简报选择组件，不按默认。从 cards-guide.md、buttons-guide.md、component-composition-ref.md 以及 premium-patterns/PATTERNS.md 中 2-3 个匹配条目拉取组件模式；每个模式的 AI 生成提示词需服从 register/brand.md 的 POV，不得未经编辑直接使用。没有组件因常见而获得位置，每个组件需映射到真实内容需求。

交付方式

直接交付 HTML/CSS（默认路径，与 Anthropic 的 frontend-design 技能方法相同：坚持观点，用工具而非感觉验证）。Gemini Design MCP、Magic（21st.dev）、shadcn MCP 为可选后备工具，非必需。

声明元素（Je reproduis 行）

交付前需将以下行逐字写入交付物报告和 design-system.md：

Je reproduis: {el1} [corpus: {reference}/{tokens section}], {el2} [corpus: {reference}/{tokens section}], {el3} [sector: {url} — register]

恰好三个元素，每个均可在渲染页面中命名（判定为二元存在/不存在，"精炼的氛围"不算元素，"横跨每个区段边界的双竖线"算）。两个来自语料库（corpus）：一个可测量的程序，引用其读取的 tokens-*.md 区段，且必须来自你打开并滚动过的页面，而非区段索引。一个来自行业（sector）：注册信号（词汇、正式程度、该垂直领域展示的内容），绝非工艺借用。若行业步骤未产生可用内容，写 [sector: none — register from brief] 并仍声明三个元素。

使用方式

确认 design-system tokens 存在且 Gate 0 已锁定 brand 注册。
读取 design-method 的路由表，确认目标不是应用界面（否则转 design-webapp）。
准备输入：design-system.md（OKLCH 调色板、字体配对、间距密度、3 个旋钮）、register/brand.md（页面 POV 句和逐区段 Competitor Lift Test）、generate move 报告（若任务从 Gate 0 开始，步骤 1-4 为输入，此处不重复）。
选择首屏处理（来自 macrostructure-bank，仅首屏）和正文序列（来自 body-sequence-bank），并通过 POV 过滤。
应用首屏纪律、非对称网格和区段内边距变化。
检查反套路机械标志表。
根据简报选择组件，从指定参考文件拉取模式。
交付 HTML/CSS。
写入 Je reproduis 行。
运行输出门——相似度测试（Lookalike Test），定义在 references/design-inspiration.md 中。失败是结构性的，应返回步骤 1-2（首屏处理 + 正文序列），而非步骤 4。

适用场景

营销页面、落地页、活动页的构建或修改，且 brand 注册已锁定。不适用于应用界面、仪表盘或工具界面（应使用 design-webapp），除非是应用壳内的营销性质单页。

限制

需在 design-system tokens 存在且 Gate 0 锁定 brand 注册后使用。
不适用于应用界面（design-webapp 负责）。
若 Gemini Design MCP 不可用，回退到直接生成并在报告中注明。
若未找到可用的行业注册网站，基于语料库、两个结构选择和简报自身注册继续，并在生成动作报告和 Je reproduis 行中标记缺失的行业信号；不得因灵感来源而阻塞生成，也不得替换为模板平台。
若相似度测试在同一对选择上失败两次，应更改正文序列（仅更换首屏处理不能解决失败模式），不要第三次尝试同一骨架。
输出需包含：页面/组件的 HTML/CSS、首屏处理 + 正文序列（并为本主题重述序列原则）、非对称网格、首屏在字数/元素上限内、反套路表已检查、Je reproduis 行已写入、相似度测试通过。

技能介绍

用途