Communitygithub.com

bishoe01/blueprint-extractor

斜杠命令式 URL 到 DESIGN.md 的提取工具。当用户输入 /extract、要求从公开 HTTPS 网站 URL 提取 DESIGN.md,或请求设计系统、设计蓝图、品牌令牌、视觉风格、UI 灵感或面向代理的设计规范时使用。

blueprint-extractor 是什么?

这是一款面向 AI 编码代理(如 Claude Code、Cursor、Codex)的技能,能够从公开网站 URL 提取具体的设计系统输出,生成一份结构化的 `DESIGN.md` 设计规范文档。该技能通过捕获 HTML 元数据、CSS 令牌、计算样式以及桌面/移动端截图来收集可观察的设计证据,然后按照标准化模板合成包含 9 个部分的文档。它避免了猜测性的视觉断言,优先从 CSS 和计算样式中提取精确的令牌(如颜色、字体、断点),并在只有截图可用时使用定性语言。该技能还包括一个自检步骤,用于验证提取的证据,并确保生成的文档可直接用于实现,同时防止不安全的 URL 操作,并明确阻止克隆功能代码或绕过授权内容。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add bishoe01/blueprint-extractor

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Extract

从公开网站创建有依据的 DESIGN.md。提取可观察的设计模式;不要克隆该网站作为可运行代码,或声称拥有官方品牌指南。

命令行为

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

如果用户仅输入 /extract,则要求提供公开的 HTTPS 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. 视觉主题与氛围
  2. 2. 调色板与角色
  3. 3. 排版规则
  4. 4. 组件样式
  5. 5. 布局原则
  6. 6. 深度与层次
  7. 7. 注意事项
  8. 8. 响应式行为
  9. 9. 代理提示指南

不要在 DESIGN.md 中添加来源、置信度或附录部分。将置信度警告放在最终助手响应或证据包中。

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

不要使最终文档成为枯燥的令牌转储。将证据转化为可重用的设计指导:

  • 仅在从捕获的页面可见时才命名网站原型,例如“仪表板外壳”、“编辑落地页”、“商业目录”、“媒体播放器”或“文档站点”。
  • 谨慎对待知名品牌:除非捕获的页面、CSS 或计算样本支持,否则不要导入众所周知的产品模式、品牌传说或官方系统声明。
  • 保留目标应用的领域模型、信息结构和用户工作流。源网站提供视觉语言,而不是允许将目标项目转换为源站点的产品类别。
  • 将可转移的设计特征与不可转移的源领域对象分开。转移颜色、排版、间距、密度、形状、表面分层和交互感觉;不要转移领域对象,如曲目、播放列表、购物车、文档页面、仪表板或结账流程,除非用户明确要求该产品结构。
  • 当源组件有用时,将其表述为领域中性的模式:使用“集合/导航侧边栏”代替“播放列表侧边栏”,使用“重复内容项”代替“曲目行”,使用“视觉缩略图或强调块”代替“专辑封面”。
  • 在文案中保留观察到的令牌、截图推断的布局行为和实现指导之间的区别。
  • 将观察到的重复组件转化为简洁的配方:用途、表面、排版、间距、圆角、边框/阴影、交互。
  • 优先选择能够跨页面推广的模式,而不是一次性装饰值。
  • 区分提取的断点与实现便利性的断点。
  • 使用 7. 注意事项 来表示可能防止误解的简洁约束,包括过度使用强调色、添加不支持的组件、引入源网站的领域模型或更改目标项目的产品类别。
  • 使 9. 代理提示指南 实用:快速颜色参考、示例组件提示以及在证据支持时的迭代指导。
  • 保持指导灵感来自... 并且可实现,而不指示代理克隆目标网站。

验证

在完成之前:

  • 确认 DESIGN.md 存在于预期的输出路径。
  • 确认 H2 部分名称和顺序与 references/DESIGN_TEMPLATE.md 匹配。
  • 确认每个十六进制颜色、字体族、断点、圆角、阴影和间距值出现在 blueprint.json 中,或明确标记为推断/定性。
  • 当创建示例或发布候选时,确认输出满足 references/QUALITY_CHECKLIST.md。
  • 如果验证失败,修复证据或降级无支持的值,然后再呈现结果。

相关技能