extract

提取

从公开网站创建有依据的 DESIGN.md。提取可观察到的设计模式；不要将网站克隆成可运行代码，也不要声称这是官方品牌指南。

命令行为

当用户输入 /extract <url> 时，立即将其视为运行此工作流的请求。

如果用户只输入 /extract，请索要公开的 HTTPS URL；在用户提供 URL 之前，不要开始提取。

默认输出：

• 证据包：.blueprint-extractor/<slug>/
• 最终文档：用户当前项目中的 DESIGN.md，除非用户要求使用其他路径

工作流

1. 验证目标 URL。
2. 在用户的项目中创建证据文件夹 .blueprint-extractor/<slug>/。
3. 收集公开页面数据中的证据：
   • HTML 标题和元数据
   • 外部链接和内联 CSS
   • 代表性元素的计算样式
   • 浏览器工具可用时，截取 1440x900 的桌面屏幕截图
   • 浏览器工具可用时，截取 390x844 的移动屏幕截图
4. 仅从已获取的 CSS、计算样式或留存的屏幕截图中提取具体设计令牌。
5. 在撰写最终文案前，先编写 blueprint.json 和 sources.json。
6. 使用 references/DESIGN_TEMPLATE.md 中精确的 9 个章节结构编写 DESIGN.md。
7. 定稿前执行自我审查：
   • 通过已观察到的组件方案提升实现的实用性；
   • 在屏幕截图能够支持的情况下，改进主题的定性描述；
   • 区分提取出的证据、从屏幕截图推断的行为和实现指导；
   • 删除无法从页面上看到或无法在提取的 CSS 中找到依据的宽泛产品声明；
   • 保留目标项目的领域、信息架构和核心工作流；只迁移视觉风格；
   • 在复用前对来源领域的组件进行抽象，例如将“播放列表”改为“集合列表”，或将“专辑封面”改为“视觉缩略图”；
   • 除非明确标注为定性观察或推断，否则不要在 DESIGN.md 中加入缺乏依据的示例。
8. 根据模板和证据验证最终 Markdown。
9. 在最终回复中报告输出路径和任何置信度警告。

URL 安全性

遇到以下不安全或超出范围的 URL 时，用简短说明拒绝请求：

• 不是 https:// 开头
• localhost、环回地址、私有 IP、链路本地地址或私有主机名
• 需要身份验证或付费才能访问的内容
• 非 HTML 响应
• 无法访问、内容为空或重定向次数过多
• 要求绕过登录、抓取私人仪表板、提取 Figma 设计，或克隆可运行代码

不要提交表单、执行登录流程、结账流程、破坏性操作或访问用户专属页面。

提取

如果 scripts/extract-blueprint.mjs 存在且依赖项可用，请先运行该脚本，并以其生成的产物为准。如果该脚本不可用，请使用可用的浏览器、HTTP 和文件系统工具手动收集同等证据。

优先使用确定性证据，而非视觉猜测：

• 颜色必须来自 CSS、计算样式、SVG 属性或采样的屏幕截图。
• 字体系列必须来自 CSS、计算样式或 @font-face。
• 断点必须来自媒体查询，或明确标注为根据屏幕截图推断。
• 间距、圆角、阴影、边框和动效必须引用 CSS 或计算样式。
• 如果只能获取屏幕截图，请仅作定性观察，不要编造数值令牌。

在创建或编辑 blueprint.json 和 sources.json 前，阅读 references/EXTRACTION_SCHEMA.md。 如果提取过程不完整或受阻，请阅读 references/FAILURE_MODES.md。 在将生成的 DESIGN.md 视为优质示例或可发布质量的输出前，请阅读 references/QUALITY_CHECKLIST.md。

综合规则

使用用户要求的语言。如果未指定语言，则用英文编写 DESIGN.md。

最终的 DESIGN.md 必须恰好包含以下 H2 章节，并按此顺序排列：

1. 1. Visual Theme & Atmosphere
2. 2. Color Palette & Roles
3. 3. Typography Rules
4. 4. Component Stylings
5. 5. Layout Principles
6. 6. Depth & Elevation
7. 7. Do's and Don'ts
8. 8. Responsive Behavior
9. 9. Agent Prompt Guide

不要在 DESIGN.md 中添加 Sources、Confidence 或 Appendix 章节。将置信度警告放在最终的助手回复或证据包中。

DESIGN.md 中的每个具体设计令牌都必须可追溯至 blueprint.json。将不确定的发现标记为定性观察，而非精确值。

不要把最终文档写成枯燥的令牌罗列。应将证据转化为可复用的设计指导：

• 仅当捕获的页面中能看出网站原型时，才为其命名，例如“仪表板外壳”“编辑式落地页”“电商目录”“媒体播放器”或“文档网站”。
• 谨慎对待知名品牌：除非捕获的页面、CSS 或计算样本提供支持，否则不要套用广为人知的产品模式、品牌背景或官方系统声明。
• 保留目标应用的领域模型、信息结构和用户工作流。源网站提供的是视觉语言，而不是将目标项目改造成源网站所属产品类别的许可。
• 区分可迁移的设计特征与不可迁移的源领域对象。迁移颜色、字体、间距、密度、形状、表面层级和交互感受；除非用户明确要求采用相应的产品结构，否则不要迁移曲目、播放列表、购物车、文档页面、仪表板或结账流程等领域对象。
• 有用的源组件应表述为与领域无关的模式，例如“集合／导航侧边栏”，而非“播放列表侧边栏”；“重复内容项”，而非“曲目行”；“视觉缩略图或强调色块”，而非“专辑封面”。
• 在文案中区分观测到的令牌、根据截图推断的布局行为，以及实现指导。
• 将反复出现的组件归纳为简明方案：用途、表面、字体、间距、圆角、边框／阴影、交互。
• 优先采用适用于整页的通用模式，而非仅适用于单个元素的装饰值。
• 区分提取出的断点与为实现方便而设置的断点。
• 使用 7. Do's and Don'ts 列出简明约束，避免常见误读，包括过度使用强调色、添加缺乏依据的组件、套用源网站的领域模型，或改变目标项目的产品类别。
• 让 9. Agent Prompt Guide 具备实用性：在有证据支持时，提供快速颜色参考、组件提示词示例和迭代指导。
• 提供受启发且可直接用于实现的指导，但不要指示 Agent 克隆目标网站。

验证

完成前：

• 确认 DESIGN.md 已存在于预期输出路径。
• 确认 H2 章节名称及顺序与 references/DESIGN_TEMPLATE.md 一致。
• 确认每个十六进制颜色值、字体系列、断点、圆角、阴影和间距值都出现在 blueprint.json 中，或已明确标记为推断／定性值。
• 创建示例或候选发布版本时，确认输出符合 references/QUALITY_CHECKLIST.md。
• 如果验证未通过，请修正证据，或将缺乏支持的值降级后再提交结果。