Extract
从公开网站创建有依据的 DESIGN.md。提取可观察的设计模式;不要克隆该网站作为可运行代码,或声称拥有官方品牌指南。
命令行为
当用户输入 /extract <url> 时,视为立即运行此工作流的请求。
如果用户仅输入 /extract,则要求提供公开的 HTTPS URL,并且在用户提供之前不要开始提取。
默认输出:
- 证据包:
.blueprint-extractor/<slug>/ - 最终文档:用户当前项目中的
DESIGN.md,除非用户要求其他路径
工作流
- 验证目标 URL。
- 在用户的项目中创建证据文件夹
.blueprint-extractor/<slug>/。 - 从公共页面数据收集证据:
- HTML 标题和元数据
- 链接和内联 CSS
- 代表性元素的计算样式
- 桌面截图(
1440x900,当浏览器工具可用时) - 移动截图(
390x844,当浏览器工具可用时)
- 仅从获取的 CSS、计算样式或记录的截图中提取具体令牌。
- 在编写最终文案之前先写入
blueprint.json和sources.json。 - 使用
references/DESIGN_TEMPLATE.md中确切的 9 部分合同来综合生成DESIGN.md。 - 在最终确定之前进行自我审查:
- 使用观察到的组件配方提高实现实用性;
- 当有截图支持时,改进定性主题语言;
- 将提取的证据与截图推断的行为和实现指导分开;
- 删除未在提取的 CSS 中出现或呈现的广泛产品声明;
- 保留目标项目的领域、信息架构和核心工作流;仅传输视觉语言;
- 在重用前抽象源领域组件,例如将“播放列表”改为“集合列表”,将“专辑封面”改为“视觉缩略图”;
- 除非标记为定性或推断,否则不要将无支持的示例放入
DESIGN.md。
- 根据模板和证据验证最终的 Markdown。
- 在最终响应中报告输出路径和任何置信度警告。
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. 视觉主题与氛围2. 调色板与角色3. 排版规则4. 组件样式5. 布局原则6. 深度与层次7. 注意事项8. 响应式行为9. 代理提示指南
不要在 DESIGN.md 中添加来源、置信度或附录部分。将置信度警告放在最终助手响应或证据包中。
DESIGN.md 中的每个具体令牌必须可追溯到 blueprint.json。将不确定的发现标记为定性观察而非精确值。
不要使最终文档成为枯燥的令牌转储。将证据转化为可重用的设计指导:
- 仅在从捕获的页面可见时才命名网站原型,例如“仪表板外壳”、“编辑落地页”、“商业目录”、“媒体播放器”或“文档站点”。
- 谨慎对待知名品牌:除非捕获的页面、CSS 或计算样本支持,否则不要导入众所周知的产品模式、品牌传说或官方系统声明。
- 保留目标应用的领域模型、信息结构和用户工作流。源网站提供视觉语言,而不是允许将目标项目转换为源站点的产品类别。
- 将可转移的设计特征与不可转移的源领域对象分开。转移颜色、排版、间距、密度、形状、表面分层和交互感觉;不要转移领域对象,如曲目、播放列表、购物车、文档页面、仪表板或结账流程,除非用户明确要求该产品结构。
- 当源组件有用时,将其表述为领域中性的模式:使用“集合/导航侧边栏”代替“播放列表侧边栏”,使用“重复内容项”代替“曲目行”,使用“视觉缩略图或强调块”代替“专辑封面”。
- 在文案中保留观察到的令牌、截图推断的布局行为和实现指导之间的区别。
- 将观察到的重复组件转化为简洁的配方:用途、表面、排版、间距、圆角、边框/阴影、交互。
- 优先选择能够跨页面推广的模式,而不是一次性装饰值。
- 区分提取的断点与实现便利性的断点。
- 使用
7. 注意事项来表示可能防止误解的简洁约束,包括过度使用强调色、添加不支持的组件、引入源网站的领域模型或更改目标项目的产品类别。 - 使
9. 代理提示指南实用:快速颜色参考、示例组件提示以及在证据支持时的迭代指导。 - 保持指导灵感来自... 并且可实现,而不指示代理克隆目标网站。
验证
在完成之前:
- 确认
DESIGN.md存在于预期的输出路径。 - 确认 H2 部分名称和顺序与
references/DESIGN_TEMPLATE.md匹配。 - 确认每个十六进制颜色、字体族、断点、圆角、阴影和间距值出现在
blueprint.json中,或明确标记为推断/定性。 - 当创建示例或发布候选时,确认输出满足
references/QUALITY_CHECKLIST.md。 - 如果验证失败,修复证据或降级无支持的值,然后再呈现结果。