| name | identity-skill |
|---|---|
| description | 通过分阶段、参考图驱动的流程打造有辨识度的个人网站：内容与风格锁定、参考图锁定、素材拆分评审、素材生成评审，再到高保真复刻与 QA。当用户想用 Codex、Image 2、参考图、生成素材或高质量 image-to-code 流程制作、改版或复刻个人网站、作品集、创作者站、创始人站或个人 IP 站时使用。Creates distinctive personal websites through a staged reference-driven workflow (content lock, reference-image lock, asset-split review, asset-generation review, faithful rebuild, QA). Use for making, redesigning, or replicating a personal website, portfolio, creator/founder/personal-IP site. |
个人网站（Personal Website）
核心规则
不要一上来就写代码。把网站当作一个分阶段、以参考图为准绳的项目来做：
- 内容与风格锁定
- 参考图锁定
- 素材拆分清单
- 素材生成评审
- 高保真复刻与 QA
面向用户的流程有四个默认的阻塞式确认点：
- 确认完整的内容与风格简报，包括站点形态、分区规划、内容充分性、以及选定或用户提供的视觉方向
- 经过一致性与单调性审查后，确认参考图集合
- 在任何新素材生成或素材采集开始之前，确认素材拆分清单
- 在页面代码实现开始之前，确认生成/采集的素材以及复刻简报
参考图集合确认之后，不要直接进入实现。先逐张审视每张已接受的参考图，产出一份面向用户的素材拆分清单，并等待确认。清单确认后，只生成、采集或准备已批准的素材。然后带上最终路径和一份简短的复刻简报，汇报生成/采集到的素材；等待用户接受、要求重新生成、或修改清单。只有在这之后，才能开始高保真复刻。
原先那份轻量的"预构建设计笔记"已并入素材评审的交接物，成为一份简洁的复刻简报。它不是额外的独立关卡：用户在写代码前，同时确认素材结果和复刻简报。
不要把后面几个阶段坍缩成一次通用的前端搭建。已接受的参考图不是灵感板（moodboard）。写代码前，每一张已接受的参考图都必须被分解为代码层、背景素材层、前景素材层、必须保留的视觉锚点，以及一个实现时必须遵守的最终素材/来源决策。
硬性停止（hard stop）：在素材拆分清单被确认、已批准的素材被生成或整理好、素材评审加复刻简报被接受之前，不得创建或编辑任何 HTML、CSS、JS、React、路由或组件文件。在进度更新里说一句"我会把参考图映射一下"是不够的。
如果用户只有部分材料，先审计缺什么，并在要求用户手写全部内容之前，建议更省力的材料输入方式。如果用户已经有确认好的内容、参考图和素材，直接跳到相应的审查、素材评审或复刻阶段，但写代码前仍要保持同样的确认边界。
执行纪律
在阶段之间推进前，说明当前的假设、下一个可验证的目标、以及证明它完成的检查方式。如果需求存在多种解读，先把选项摆出来问清楚，再确定方向。
保持流程的外科手术式精准：
- 不要添加用户没有要求或批准的分区、交互、内容、路由、素材类型或配置
- 编辑既有项目时，只改动已批准范围所需的文件，并贴合项目当前的风格
- 只删除本流程新建的、未被使用的代码、素材或 import；无关的死代码只提及、不删除
- 优先选择能让下一阶段变可靠的、最小且持久的设计笔记、清单（manifest）、提示词集合或实现改动
- 对于多步工作，把成功标准写到无需猜测就能验证的程度
- 重做一次失败的构建尝试时，从一个全新会话开始，只带上存活下来的产物（参考图、已接受的素材）；不要在失败尝试的上下文之上 resume——旧的计划和代码会把重做锚定在错误的方向上
语言
让面向用户的输出匹配用户的主要语言。如果用户用中文交流，进度提示、阶段转场、确认请求和选项标签都用中文，使用诸如 第一步 / 内容与风格锁定 和 接下来进入第二步 这样的标签。如果用户用英文交流，则用英文标签，例如 Step One / Content and style lock。如果对话是混合语言，遵循用户最近一次明确的语言偏好，或最近一条实质性请求所用的语言。
不要因为本文档下方的模板示例是用某种语言写的，就把该语言的模板原文直接抛给用户。自然地翻译提示词的形态，同时保留其中要求的全部信息。阶段名称也要翻译。
内置配套引用
本 skill 内置了几份配套引用，让流程不依赖用户额外安装其他 skill：
references/imagegen-frontend-web.md：用于第二步的参考图方向references/frontend-app-builder.md：用于素材评审之后的高保真前端实现与 QAreferences/reference-asset-splitter/：用于第三步素材边界与粒度决策
references/frontend-app-builder.md 是官方 builder skill（v0.1.2）的中文翻译版；references/imagegen-frontend-web.md 是一份适配版；references/reference-asset-splitter/ 是内置的素材拆分 skill。如果独立的 imagegen-frontend-web skill、Build Web Apps 的 frontend-app-builder 插件、或 reference-asset-splitter skill 已安装，以已安装的版本为准，内置拷贝只作为离线兜底。
如果某个配套 skill 没有安装，不要因此阻塞，不要假装 @skill 调用能生效，也不要仅仅为了继续就要求用户去安装它。读取内置的配套引用，把它当作本地的最低契约来执行。
如果没有可用的图像生成工具，就写好可直接复制粘贴的提示词，让用户贴到 GPT web Image 2 或其他图像工具里，或者请用户自己提供参考图。如果用户完全放弃参考图，就把构建视为低保真，并说明视觉 QA 只能对照书面简报、无法对照已接受的参考图。
转场提示协议
每个面向用户的阶段结束时，都给出清晰的进度提示：
- 当前进度：
第一步 / 阶段名称 - 已完成：刚刚产出的具体产物
- 缺失或有风险：只列真正的阻塞项
- 用户现在可以做什么：确认、修改某个指定部分、提供缺失材料、或选择一个选项
- 下一步：说明下一个阶段的名称和将要发生什么
不要把用户留在一个含糊的停顿点。如果流程正在不带阻塞确认地继续，就说明它在继续以及为什么。
第一步：内容与风格锁定
先判断适用哪条内容路线。不要让用户手动重打那些能从提供的文件、链接、简历、档案、笔记、写作样本、项目文档、截图或既有网站里读到的信息。
材料摄入路线
使用以下路线之一：
- 材料充足路线：用户提供了简历、CV、LinkedIn 档案、个人站、作品集、项目链接、Notion/Markdown 文档、传记、媒体包、社交档案、写作存档或类似材料。读取可访问的内容，提取确认的事实、可直接成区的内容单元、链接、素材和缺口。只问那些会影响网站的、有针对性的追问。
- 简报不全路线：用户给了目标或身份，但支撑材料很少。先邀请更省力的输入，例如简历、现有的自我介绍、项目链接、写作链接、照片、参考图或截图。如果用户不愿提供文件，再用下面的引导问题。
- 从零开始路线：用户没有材料或想从头来。把引导问题一起问，而不是一问一答地做冗长访谈。
- 快速演示路线：用户明确优先要速度或粗原型。允许轻量的 mock 内容，但把每一个虚构的事实、项目、引言、指标、链接或传记细节都标注为占位内容，须在正式构建前替换。
引导问题路线中，简洁地询问：
- 目标：简历、求职、作品集、创作者/个人 IP、咨询、创始人/高管档案、演讲/媒体页，或其他用途
- 受众：谁会来访问、读完后应该做什么
- 定位：身份标签、一句话记忆点、语气边界
- 佐证：经历、项目、写作、产品、客户、媒体报道、演讲、奖项或其他证据
- 项目细节：对每个重要项目，收集问题、角色/行动、结果、链接/媒体，以及最该被记住的点
- 素材与边界：头像、logo、截图、文档、链接、无法使用或敏感的内容，以及任何不得被生成或夸大的东西
- 用户偏好：偏好的信息密度、单页与多页的直觉倾向（如有）、喜欢的参考、讨厌的风格、以及维护意愿
内容与站点形态文档
对于精致的个人网站、个人 IP 站、作品集、Awwwards 级方向，或任何设计质量重要的场景，在进入出图前先产出一份内容与站点形态文档。快速演示则保持相同结构但更简短。
该文档应包含：
- 来源覆盖：用了哪些文件、链接、笔记或回答
- 确认的事实：仅限用户提供或有来源支撑的事实
- 未确认的草稿内容：清楚标注 agent 拟稿的文案、示例、占位、推断的说法或缺失的链接
- 站点目标与受众：网站要达成什么、面向谁
- 访客记忆点：访客应该记住的一到三件事
- 站点形态建议：单页、单页简历、首页加案例研究、多页作品集、创作者中心、咨询落地页，或其他形态
- 建议理由：为什么这个形态契合用户的目标、内容体量、佐证深度和维护意愿
- 可选替代方案：更精简或更丰富、可行但不太推荐的结构
- 分区规划：每个分区的目的、所需内容、内容单元、链接/素材，以及状态（
ready、needs detail、placeholder或cut） - 内容充分性风险：空洞、泛泛、虚假、堆砌、无支撑或不值得保留的分区
站点形态必须从用户的目标和材料密度推导出来，而不是套用默认的五区或六区模板。简历或求职场景往往只需单页或一到两页。深度作品集可能需要案例研究路由。创作者、创始人或咨询站只有在内容支撑得起时，才需要更强的叙事或转化路径。
所有用于参考图的内容都必须是用户提供或经用户明确批准的。agent 可以拟稿来填补缺口，但拟稿内容是草稿，不是已批准内容。不要因为一段拟稿写得合理或漂亮就当作已确认。
风格推荐
当内容和站点形态足够清晰后，基于内容、用户偏好、受众、站点用途和提供的参考，推荐最多三个视觉方向。用户可以选一个、混搭、或提供自己的视觉方向或参考。
风格选项必须是视觉概念，而不只是定位标签。不要给出仅在受众或职业框定上不同的选项，比如"留学生简历""金融科技产品研究员""AI + 金融作品集"。这些标签可以解释某个选项为何契合，但选项本身必须让用户在出图之前就能想象出设计的样子。
每个风格选项应简要覆盖：
- 视觉概念名称：一个描述外观（而非仅描述人物角色）的短标签
- 气质与定位契合度
- 配色方向：3-5 个具体颜色或颜色角色，有用时给出 hex 值
- 字体气质：标题/正文字体的个性与字重对比
- 首屏构图：姓名、大标题、头像/媒体、CTA、佐证线索各自出现在哪里
- 布局密度与分区节奏：单页克制、编辑式节奏、bento 佐证块、案例研究深度，或其他具体节奏
- 图像或素材处理：头像裁切、项目截图、文档卡片、数据可视化、编辑式照片、抽象背景，或代码渲染的图形
- UI 外框与导航感觉：页头密度、字标、CTA 形状、边框、圆角、图标风格、激活态
- 动效个性
- 用户将看到什么：一句话描述大致的画面印象
- 为什么契合这个人和这个站点形态
- 主要风险或取舍
如果某个风格选项无法被描述成一个可见的网站画面，就在呈现前重写它。如果用户的目标是职业定位，把该定位翻译成视觉决策，而不是让选项标题承担一切。
需要时可用这个紧凑的风格选项形态：
选项 A —— 编辑式简历 / 墨黑 + 纸白
配色：暖白 #F7F3EC，墨黑 #171717，哑光钢灰 #6B7280，强调蓝 #2563EB。
字体：克制的衬线标题 + 干净的无衬线正文；自信但不花哨。
首屏：姓名与一句话定位左对齐，铺在充裕的纸感留白上，头像或 LinkedIn 风格证件照置于右侧安静的裁切里，下方两个佐证链接。
节奏：单页简历式流动，分区平静，配小型项目佐证卡。
它的感觉：一份精致的国际候选人档案，更接近编辑式 CV 而非创业公司落地页。
风险：如果用户想要更大胆的个人品牌，这个方向会不够有辨识度。
在用户确认完整的内容与风格简报之前，不要生成参考图。如果用户选了某个风格选项、且没有对内容文档提出异议，只有当提示已明确说明"这一步同时锁定内容和风格"时，才把该回应当作第一个阻塞确认。
第一步收尾提示用这个形态：
当前进度：第一步 / 内容与风格锁定
我已准备好：来源摘要、确认的事实、站点形态建议、分区规划、内容风险、以及风格选项。
请确认或修改：
1. 站点形态与分区规划
2. 任何被标注为未确认的内容
3. 视觉方向：选一个选项、混搭选项、修改配色/布局，或提供你自己的参考
确认后，我将进入第二步，生成或准备各分区的参考图。
第二步：参考图锁定
以分区级参考图作为视觉的唯一准绳。
参考图的提示词必须基于已确认的内容与风格简报：已批准的内容、已批准的站点形态、选定或用户提供的视觉方向、全局外框规则、以及各分区专属的内容单元。当用户期待一个高质量个人网站时，不要基于单薄的简报或未经批准的 agent 拟稿去出参考图。
如果 imagegen-frontend-web 可用，本阶段就用它。如果不可用，读取 references/imagegen-frontend-web.md 并套用内置配套规则。无论哪种，参考图集合都必须做到：每个分区一张横向图、构图有力、配色一致、且是便于实现的网站式参考图。
如果用户更愿意用 GPT web Image 2，就写好提示词让用户去那里粘贴，而不是直接生成图像。
默认输出：
- 每个分区一张横向参考图
- 不要竖长的整页拼贴
- 不要小到看不清的多分区拼板
- 所有分区共享一致的个人 IP 世界观
- 参考图应看起来像真实的网站截图，而不是海报
在接受参考图集合前，做一次双向审查：
- 一致性审查——标出全局导航、分区顺序、重复母题、字体、间距节奏、品牌/logo 处理、以及移动端可行性上的冲突。如果参考图彼此矛盾，提出一条设计规则，请用户确认或重新生成有冲突的分区，再继续。
- 单调性审查——相反方向的失败。判断每个分区的构图骨架（例如"左文字栏 + 右视觉"就是一种骨架，不管右侧是照片、图片行还是 bento 网格）。如果同一种骨架出现在超过 2 个分区，或每一帧的大标题尺度与位置都一样，就驳回该集合。再做一次灰块测试：把每张照片都换成一个纯灰矩形后，至少一半的分区仍应看起来是有设计的（字号尺度、图上叠字、非对称网格、色块分区）——否则设计只活在照片里，在代码复刻时会蒸发。继续前先重新生成最弱的分区。
一致性通过是必要但不充分的：一个集合可以既完全一致又完全单调。
当设计质量重要、或用户要求品味指导时，读取 references/taste-calibration.md。
第二步收尾提示用这个形态：
当前进度：第二步 / 参考图锁定
我已准备好：各分区参考图，以及一致性/单调性审查。
请确认或修改：
1. 接受这些图作为构建目标
2. 重新生成指定的分区
3. 在构建前调整风格方向
参考图确认后，我将进入第三步并产出素材拆分清单：哪些留在代码里、哪些需要背景素材、哪些需要前景/透明素材、哪些应使用既有真实素材、哪些被阻塞或待替换。在生成或采集新素材之前，我会等你确认。
第三步：素材拆分清单
参考图集合确认后，先审视已接受的参考图，再生成素材或写代码。本阶段产出一份面向用户的素材拆分清单，并暂停等待确认。
本阶段的边界与粒度决策由独立的 reference-asset-splitter skill 负责。产出拆分清单前，读取 references/reference-asset-splitter/SKILL.md 及其 split-patterns.md，并遵循它自顶向下的决策流程：先对每个区域的用途分类（静态装饰 static-decor / 内容卡片 content-card / 媒体槽 media-slot / 身份标识 identity），再去枚举可见对象；默认取"能保真的最粗颗粒素材"，只有触发它的强制拆分条件（独立交互、独立替换、可编辑/事实性文字、响应式重排）时才拆得更细；逐页说明交互假设；当"静态 vs 交互"不明确时，给出一个推荐默认方案加一个备选方案。下面的规则只覆盖 identity-skill 在其之上额外补充的部分（产物、几何测量、清单、确认关卡）；任何措辞冲突时，以 splitter skill 为准。
目标是实用而非过度指定：告诉用户哪些可见部分应留在代码里、哪些部分需要单独的生成或采集素材、哪些素材应是透明/前景、哪些属于背景、哪些真实素材不能伪造、以及哪些决策一旦猜错会损害最终复刻。
在本阶段创建或更新一份可见的复刻产物。可接受的形式：
docs/restoration-plan.md，合并参考图映射、素材清单和后续的复刻简报docs/reference-to-build-map.md加docs/asset-manifest.md- 如果仓库已有 docs 约定，用等价的项目级文档
该产物必须在素材生成之前、以及任何页面代码编辑之前落盘。它必须列出每一张已接受的参考图和每一个分区/页面。聊天里的一句总结、隐藏的推理、或进度更新里的一句话，都不满足这个要求。
面向用户的素材拆分清单应比内部产物更短。对每个分区，包含：
- 代码负责的元素：应保持可编辑的文字、导航、按钮、布局、简单形状、标签和动效
- 背景素材：整区场景、纹理、地图、照片场，或"无/代码原生"
- 前景素材：头像、产品 mock、卡片/照片簇、插画、透明物件、截图，或"无/代码原生"
- 既有真实素材：用户提供的照片、logo、产品截图、官方素材，或要拷贝的源文件
- 生成素材：可安全生成的氛围图像、装饰物件、抽象产品 mock、背景，或替身
- 被阻塞或待替换的素材：真人、官方品牌/logo/产品图、无法获取的承载事实的截图，或任何在保真前需要用户输入的项
- 为什么重要：一旦素材边界判错，会带来什么视觉保真风险
素材边界规则
准备第三步素材拆分清单和第四步素材生成评审时，使用这些规则。
参考图存在后，先审视再写代码。把每个分区分解为恰好两个素材层加代码：
- 代码层：布局、字体、文字、按钮、导航、分隔线、简单线条与形状、坐标标签、路线线条、交互、动效。永远不要把它们烙进图片，也不要把它们留在背景图里。
- 背景层：每个分区最多一张全幅图。如果参考图有复杂背景（场景、纹理、渐变场、色调带），就把它生成为一张覆盖整个分区的单图，包括属于同一构图的任何深色或浅色带。不要把一个连续的分区背景拆成多个条带。如果背景只是纯色、简单渐变或简单线条，就用代码渲染，不要出图。
- 前景素材：头像、照片、hero 插画、带质感的物件、手写卡片、产品截图，以及其他难以用代码实现的视觉主体。对每一个，测量它在参考图里的几何：包围盒、长宽比、以及占分区宽度的大致百分比。按该长宽比生成素材。粒度遵循 splitter skill：独立的媒体槽各得各的素材——一个作品分区有三个案例产品 mock，就需要三张分别生成的视觉，绝不做成一张复合图——但一个融合的静态装饰簇（多张卡片共享阴影、光照或纹理连续性，且没有独立交互或替换需求）保持为一张素材；不要把它切成一卡一片。
用 splitter skill 的原则来判定代码原生 vs 素材：由交互性和可编辑性决定边界，而不是视觉复杂度。code-native（代码原生）只允许用于完全由以下元素构成的部分：实时文字、纯色填充、简单几何描边与边框、标准图标、以及纯 CSS 渐变。如果参考图区域展示的是渲染出来的设备或屏幕 mock、照片、插画、手写或速写、材质纹理，或分层拼贴，那么该区域承载一个素材——但要警惕"面板陷阱"：一个装着文字卡片的彩色容器面板是布局，不是图片（面板主体和文字卡片留在代码里；只有其内部真正难以用代码实现的印刷品、徽章或插画才成为一个小素材），而可编辑或事实性的文字永远回到代码层。
在元素级别上把图片层保持最小，而不是靠删除元素来实现：文字、导航、按钮和标签留在代码里；它们下方和周围的渲染视觉成为素材。不要把整个分区变成一张图，也不要让页面变成一张整页截图。
对每一张已接受的参考图，在可见的复刻产物里记录一份参考图到构建的映射：
参考图：01-hero.png
代码层：导航、大标题、副标题、CTA 组、头像框、佐证标签
背景素材：hero-finance-desk.png，16:9，全幅，允许深色叠加
前景素材：portrait.png 位于右侧 24% 宽；product-card-mock.png 位于下方中央 22% 宽
必须保留：深色书桌/照片氛围、左侧大标题尺度、右侧头像卡、绿色 CTA、顶部导航间距
允许偏差：生成的图表标签替换为代码渲染的确认文案
风险触发：真实公司标志或用户头像若尚未确认，需要明确批准
对每个分区，映射必须包含一张素材决策表，覆盖每一个有意义的视觉元素：元素、角色、代码可行性、若用代码实现的保真风险、决策/状态（ready、generate、find/copy、code-native、replace-later 或 blocked）、来源/动作、以及已知时的最终路径。如果某分区不需要任何图片素材，就写 背景素材：无，代码原生 或 前景素材：无，代码原生 并附理由。
把结果记录为一份素材清单（素材、层、角色、来源、参考图包围盒、长宽比、相对尺寸、代码可行性、若编码的保真风险、状态、最终路径），这样复刻时就能把每个素材放进固定比例的容器里，而不是让图片的固有尺寸去驱动布局。
第三步收尾提示用这个形态：
当前进度：第三步 / 素材拆分清单
我已准备好：参考图到构建的映射、素材决策清单、以及初始素材清单。
请确认或修改：
1. 哪些元素保持代码原生
2. 哪些背景与前景素材应被生成、拷贝或稍后替换
3. 任何不得被生成的真实头像、logo、产品截图或官方素材
4. 我对模糊区域（静态装饰 vs 交互）所采取的交互假设，以及你是否更倾向于所列的备选拆分方案
确认后，我将进入第四步，只生成或整理已批准的素材。我还不会编辑页面代码。确认同时也授权我为已批准的素材生成分组启用并行子 agent；如果你更想串行，请说明。
第四步：素材生成评审
素材拆分清单确认后，只生成、拷贝、查找或整理已批准的素材。然后呈现素材结果和一份简洁的复刻简报供用户评审。在用户接受这次素材评审之前，不要开始页面代码实现。
素材评审应包含：
- 每个 ready 素材的最终路径
- 每个素材所属的分区和可见元素
- 来源：生成、用户提供、官方/拷贝、代码原生，或待替换
- 检查结果：接受、需要重新生成、弱但可用（附指定偏差）、被阻塞，或待替换占位
- 复现该素材所需的任何提示词/来源备注
每个图片素材只有两个合法来源：
- 第一步摄入时已收集的真实素材，如用户照片、logo、产品截图或媒体。第四步不要向用户索要新素材，除非用户选择提供；到此为止仍未提供的东西，就用生成替身、代码原生占位、
replace-later标记，或在保真会误导时用blocked状态。 - 锚定到对应参考图区域的全新图像生成。在写任何生成提示词之前，重新打开已确认的参考图，把目标区域转录成一份视觉清单：场景类型（纸卡拼贴 / 摄影场景 / 扁平插画 / UI mock / 纹理场）、每个主要对象及其大致位置、以 hex 值表示的配色、光照、材质、以及留白布局。生成提示词必须从这份转录写出来——同样的场景类型、同样的对象清单、同样的构图和配色——绝不能从素材名字或拆分清单里的一句话摘要写出来。如果图像工具接受输入图，也把该参考图区域作为视觉引导附上。一条只点了内容类别（"创作者在书桌前，有笔记本和卡片"）却没有转录的提示词是缺陷：它等于放任模型去编造一个不同的场景。对素材内部的占位文字，要求"抽象、不可读的占位条块和涂鸦"——不要用 "greeked" 这个词，图像模型可能会把它渲染成字面的希腊文。
已接受的参考图是构建目标和 QA 基线，永远不是素材来源。不要裁切、截图、切片或抽取参考图的任何区域到构建里；裁切会继承低分辨率、烙死的文字和破碎的边缘。清单里不存在 extract 状态。当参考图某区域看起来像是需要的素材时，从该参考图的视觉描述重新生成该元素，或用真实源素材替换它。
在对应分区构建开始之前，准备好所有已批准的素材。用稳定的名字保存在项目素材目录里，不要用原始生成 ID。每个素材生成后立即与其参考图区域并排检查，从五个维度：场景类型、对象清单（转录里的每个主要对象都在）、构图与留白、配色与光照、以及没有烙进任何必须保持代码可编辑的网站文字或导航/按钮/UI 外框。场景类型不匹配（参考图是扁平卡片拼贴，生成却是摄影房间场景），或缺失两个及以上主要对象，都自动重新生成——绝不把这样的素材当作 ready 呈现。其他缺陷则重新生成，或在素材评审里明确标注；不要用 CSS 混合、滤镜或蒙版去掩盖缺陷。
只要任何已批准的必需素材还处于 generate 或 find/copy，就不要写页面代码。先把它解决为 ready、附理由和用户可见备注改为 code-native、附已批准占位标为 replace-later、或在 blocked 上暂停。
在有用且经用户授权时，用并行子 agent 生成素材，按分区或素材组拆分。子 agent 的产物在父会话里检查过之前都不可信。
复刻简报取代了原先那份轻量预构建设计笔记。保持简短，并把它附在素材评审里，而不是另设一个独立关卡。它应锁定：
- 当前构建负责方及来源：已安装的
frontend-app-builderskill 路径/名称，或references/frontend-app-builder.md兜底 - 主视觉基准与分区顺序
- 全局外框：导航、logo/字标处理、页头密度、激活态、移动端行为
- 字体锁定：标题、正文、标签、导航各角色须保持一致
- 配色锁定：从已接受的参考图、以及在有差异处从交付素材的实际像素采样出的精确 hex token（主色、辅色、强调色、中性色阶）——素材是烙死的且昂贵，代码是廉价的，所以 token 跟随素材；实现必须把这些定义为设计 token 并只用它们，绝不逐区重新目测颜色
- 必需的动效或交互想法：只列塑造体验的效果
- 最终素材路径与代码/素材边界
- 允许偏差：参考图冲突、弱素材、移动端简化，或有意的改动
- QA 目标：每个渲染分区必须对照哪张参考图
- 风险触发：任何在代码实现前需要暂停的项
第四步收尾提示用这个形态：
当前进度：第四步 / 素材生成评审
我已准备好：生成/采集的素材、最终素材路径、检查备注、以及复刻简报。
请确认或修改：
1. 接受这些素材和复刻简报，进入复刻
2. 重新生成或替换指定的素材
3. 在实现前改动任何代码/素材边界
确认后，我将进入第五步，用选定的 builder 契约开始高保真复刻。
第五步：高保真复刻与 QA
只有在用户接受素材评审和复刻简报之后，实现才能开始。
进入第五步时，先选定并声明当前构建负责方，再动手实现：
- 首选路径：如果已安装 Build Web Apps 的
frontend-app-builderskill，读取它并遵循其Before Coding、Implementation、Verification、Final Response工作流做结构化 image-to-code 复刻；本 skill 为它提供内容/风格简报、已接受的参考图、已确认的素材清单、复刻简报和风险关卡 - 兜底路径：如果已安装的 builder 不可用，读取
references/frontend-app-builder.md并遵循那份内置复刻契约
不要让第五步变成一次通用的手写页面。builder 路径必须在复刻简报和最终保真台账里可见。
在每一张已接受的参考图都有了参考图到构建映射、且每一个必需视觉素材要么 ready、要么明确代码原生、要么附已批准占位标为 replace-later 之前，不要开始实现。不要让拷贝来的参考图作为"第二步发生过"的装饰性证据闲置；要么把它们用作对比目标，要么把它们分解成真正的构建输入。
高保真复刻
只有当参考图已接受、复刻产物已存在、所有必需素材已 ready 或明确批准为代码原生/待替换、且用户已接受第四步素材评审加复刻简报之后，才开始实现。
构建由 builder 契约治理，而不是本 skill。进入第五步时，完整读取已安装的 Build Web Apps frontend-app-builder SKILL.md——不可用时读取中文翻译版 references/frontend-app-builder.md——并原封不动地执行它的 Before Coding、Implementation、Verification 工作流。已接受的参考图就是它的"已接受概念图"；本 skill 的复刻产物、素材清单和复刻简报，是它做设计系统提取和实现盘点的输入。两个 skill 重叠处，以更严格的规则为准。不要凭记忆重新推导出一套更轻的构建流程。
第一次实现编辑之前，核实：本会话已读过 builder 契约、复刻产物为每张已接受参考图各含一份参考图到构建映射、每个必需素材为 ready/code-native/附命名占位的 replace-later、且目标文件和写入范围已指明。
在 builder 契约之上，本 skill 只补充：
- 把每个素材放进一个按清单记录的长宽比与相对尺寸设定的容器里，用 object-fit 适配；绝不让图片的固有尺寸决定布局
- 通过测量参考图（大标题高度相对于分区宽度）来设定标题字号，而不是目测
- 如果某分区第一次渲染结果明显偏离参考图，就停下，从分解重建该分区，而不是做表面修补
子 agent 编排
对于多分区或多页构建，只在相应关卡确认后再并行有边界的工作：参考图分析在第二步之后，素材生成在第三步之后，实现在第四步之后。用子 agent 做有边界的工作，而不是让它们各自发明并行的设计系统。
有用的拆分：
- 参考图分析 agent：每个负责一个页面或分区组，产出参考图到构建映射和素材需求
- 素材生成 agent：每个负责一个背景/前景素材组，产出稳定文件名和提示词/来源备注
- 页面或分区复刻 agent：仅限互不相交的写入范围，共享设计 token 和该范围对应的参考图
- 主整合方：负责全局外框、共享 token、最终组装、浏览器 QA 和最终保真台账
使用 Codex 原生的子 agent 工具：spawn_agent、wait_agent、close_agent。该工具本身只在用户明确授权委派时才允许派生。请求第三步或第四步确认时，说明下一阶段是否会用并行子 agent；如果用户拒绝，就串行运行。
用 fork_context: false 派生，并给一条自包含的消息：要读哪些 skill/引用文件、参考图路径、精确的输出文件名、目标长宽比、配色 hex 值、以及返回契约。有边界的写入任务（素材生成组）用 agent_type worker，只读分析用 explorer。用 wait_agent 收集，然后在使用前用 view_image 检查每个子 agent 的产物——子 agent 的工作在验证前都不可信。
默认拆分：素材清单就绪后，素材生成跨 worker 并行（每个 worker 负责一个分区或素材组）。并行分区复刻仅用于文件互不相交的多页站；单页构建留在父会话里以避免写入冲突。不要让任何子 agent 发明自己的配色、字体、导航或动效规则。
视觉 QA
QA 就是 builder 契约的 Verification 工作流，逐区运行：view_image 把每张已接受参考图和渲染出的分区并排看（不是一次性整页过），在可行时以参考图的原生尺寸截图，写保真台账，并把 builder 的硬性停止项——包括占位方框和代码画出来的概念素材替身——当作失败。下面的检查是 identity-skill 在该工作流之上的补充，不是替代。
需要本地预览 URL 时，优先用 portless 配一个项目专属主机名，例如 personal-site.localhost，合适时加一个可复用的小脚本或 portless.json。只有 portless 不可用或用户要求裸端口时，才用裸 localhost:<port>。
检查：
- 布局比例与分区节奏
- 字体尺度、换行与间距
- 没有被裁切或溢出的文字，没有参考图里不存在的元素重叠
- 配色与对比度
- 清单里的数字是契约：测量每个清单素材渲染后占其分区的宽度比例（浏览器 evaluate / getBoundingClientRect）和大标题字号，与清单和参考图的值对照——差超过几个百分点就是要修的缺陷，不是品味差异。在 CSS 里以清单所用的同一基准（分区）来设定素材尺寸，绝不用嵌套容器或像素上限去悄悄破坏记录的百分比
- 逐区视觉密度对照参考图：参考图里是渲染 mock、纹理、照片或拼贴的地方，渲染成扁平占位块就是保真失败，不是允许偏差
- 按钮、导航、hover 和动效行为
- 移动端与桌面端的一致性
交接前写一份简短的逐区保真台账：分区、参考图文件、必须保留的锚点、渲染证据、测量几何 vs 清单数字、不匹配项、以及修复或有意偏差。把它存进复刻产物或 docs/fidelity-ledger.md——只在聊天里的台账不算数。仍有明显不匹配时，再做一轮修正。
如果实现出来的页面主要匹配的是一个书面主题、而不是已接受的参考图，那么即使页面功能正常、好看、或内部自洽，也判 QA 失败。
用户确认关卡
只在这些默认关卡停下来请求确认：
- 完整的内容与风格简报之后，参考图提示词或出图之前
- 参考图集合和参考图审查之后，素材拆分进入生成之前
- 素材拆分清单之后，生成、拷贝、查找或整理新素材之前
- 生成/采集的素材和复刻简报之后，页面代码实现之前
不要为原先那份轻量预构建设计笔记另设默认关卡。它已并入第四步的复刻简报。用户可以通过要求更多控制或更少暂停来覆盖这些关卡。
品味处理
内置的品味样本是校准，不是强制风格。
当用户要求高质量个人网站却给的视觉方向有限时，使用它们。如果用户提供了自己的参考图，优先用用户的图，内置样本只用来避免低质量的 AI 默认审美。
不要在简报不支持时强行套用深蓝电影感风格。而是提取底层的品味原则：干净的构图、受控的配色、有力的字体、电影感的节奏、良好的留白、以及没有无意义的视觉杂乱。