用 Firecrawl 抓取任意网站并生成可复用的…

当需要从某个网站提取颜色、字体、间距、组件、布局等设计规范，供 AI 代理据此仿制或构建新页面时使用。

适用场景

解决思路

1. 从上下文推断源 URL、目标技术栈以及是否需要实现；若用户已给出 URL 并要求设计系统，直接开始，不要多问。
2. 仅在受阻时最多问 1-3 个简洁问题，例如网站 URL、是否只输出 DESIGN.md 还是也要实现、所需目标技术栈；使用宿主代理自带的提问或弹窗 UI，不要指定某个框架特有的提问函数。
3. 通过 CLI 或等价工具调用 Firecrawl，始终先对给定 URL 并行发起两次抓取：一次同时使用 branding 和 images 格式获取结构化设计 token 与全部页面图片，一次获取整页截图作为视觉上下文。
4. 示例命令：firecrawl scrape "https://example.com" --format branding,images -o ".firecrawl/example-branding.json" --pretty & 与 firecrawl scrape "https://example.com" --full-page-screenshot -o ".firecrawl/example-screenshot.png" & 然后 wait。
5. 必须把 branding 和 images 合并在一次调用中（仍只消耗一个 credit）：branding 块只暴露精选品牌资产（logo、favicon、ogImage、logoHref），缺少 images 会漏掉页面实际内容图（hero、产品图、轮播图、功能视觉、插画、配件照片、页尾图等）。
6. 若截图抓取返回的是远程图片 URL（如签名存储链接）而非本地文件，将其下载到同一 .firecrawl/ 路径，以便 DESIGN.md 引用稳定的本地资源。
7. 以结构化 branding 输出作为颜色、排版、组件、品牌资产（logo、favicon、ogImage）、个性与置信度说明的主要来源。
8. 以 images 列表作为页面内容图（hero 摄影、产品图、轮播、功能视觉、插画、装饰图形）的事实来源。
9. 以整页截图作为布局、层级与整体感觉的主要视觉参考。
10. 仅当上述内容不足以产出最终产物时，才补充其他格式。
11. 收集 branding 数据：颜色、排版、间距、按钮、logo、品牌图像、个性与置信度。
12. 收集完整 images 列表：hero、产品、功能与各区块图像，而非仅精选品牌资产。
13. 将整页截图保存到本地 .firecrawl/，以便嵌入 DESIGN.md。
14. 需要时收集页面 markdown：标题、文案层级、CTA、导航与区块顺序。
15. 需要时收集 metadata 与 links：品牌、产品与页面用途线索。
16. 仅当 branding 输出、images 列表与截图不足以推断 class、字体名、CSS 变量或组件结构时，才收集 HTML。
17. 仅当用户要求更广泛的站点系统时，才抓取相关页面。
18. 默认不要过度抓取，第一版应能从单个代表性页面产出有用结果。
19. 推断并记录设计语言：颜色（主色、辅色、强调色、背景、边框、文字、状态）。
20. 推断并记录排版：可检测的字体族、字号比例、字重、行高、标题/正文处理。
21. 推断并记录间距：容器宽度、区块节奏、网格间距、内边距比例、密度。
22. 推断并记录布局：页面结构、hero 模式、卡片、网格、导航、页脚、响应式假设。
23. 推断并记录组件：按钮、输入框、卡片、徽章、导航项、定价块、评价、功能行、表单。
24. 推断并记录图像与图标：风格、形状语言、插画/照片处理、logo 约束；从完整 images 列表而非仅含 logo、favicon、ogImage、logoHref 的 branding.images 中提取代表性 hero、产品、功能与区块图像。
25. 推断并记录动效与交互：可观察或可推断的悬停状态、过渡、动画风格。
26. 推断并记录语气与内容模式：CTA 措辞、标题风格、产品文案节奏。
27. 当某值无法从抓取输出精确测量时，标注为推断并给出实用的近似值。
28. 如合适，使用子代理或等价并行任务执行器；自然拆分方式包括多页站点每页一名研究者，或颜色、排版、间距、组件各一名审查者。
29. 每个并行研究者应返回来源 URL、提取证据、推断的设计 token 与置信度说明。
30. 创建或返回 DESIGN.md，结构包含：标题、Source（URL、抓取日期、所用证据）、Reference Screenshot（在顶部附近嵌入整页截图）、Design Summary、Design Tokens（Colors、Typography、Spacing And Layout）、Components、Page Patterns、Content Style、Agent Build Instructions、Rerun Inputs（workflow、source_url、target_stack、output）。
31. 若用户要求实现，先产出或更新 DESIGN.md，再以其作为构建的事实来源。
32. 质量要求：不得暗示用户拥有第三方 logo、图像、商标或文案的权利。
33. 质量要求：优先使用可复用设计 token，而非一次性观察。
34. 质量要求：区分观察到的事实与推断的近似值。
35. 质量要求：输出保持紧凑，便于其他代理粘贴进上下文并据此构建。
36. 质量要求：保留来源 URL 与抓取产物以供审查。

适用边界 · 注意事项

• 需要 Firecrawl API key（FIRECRAWL_API_KEY）才能通过 CLI 或 API 运行托管请求，无此账号或密钥时无法使用。
• 默认只适合从单个代表性页面产出第一版，若需要完整站点系统需用户明确要求更广范围。
• 不适用于需要精确测量数值的场景，无法测量的值只能标注为推断近似值。