Firecrawl 网站设计克隆
当用户希望将一个 URL 转换成可立即供代理使用的实用设计系统文件时，使用此技能。
默认输出：一行命令提取任何网站的设计系统，并格式化为 DESIGN.md。
该技能表现为围绕 Firecrawl 抓取的轻量工作流：收集页面的可见内容、结构、元数据、链接以及可用的视觉信号，然后将这些发现综合成一个清晰的设计系统 Markdown 文件。
入门访谈
根据上下文推断来源 URL、目标技术栈以及是否请求实现。如果用户提供 URL 并要求设计系统，立即执行。
仅在遇到障碍时提出至多 1-3 个简洁问题，例如网站 URL、是否仅输出 DESIGN.md 或同时实现，或者所需目标技术栈。
使用宿主代理的正常提示或模态界面。不要调用特定于 harness 的提问函数。
Firecrawl 收集计划
通过 CLI 或等效工具界面使用 Firecrawl。始终从对所提供 URL 进行两个并行抓取开始：
- 同时使用
branding和images格式，以获取结构化的设计 token 和页面图片全集。 - 一个全页截图，用于视觉上下文。
示例：
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
在单个调用中组合 branding 和 images 仍然只消耗一个积分，并且是必需的：branding 块仅暴露精选的品牌资产（logo、favicon、ogImage、logoHref），因此如果没有 images，代理将错过页面的实际内容图像（英雄图、产品图、轮播幻灯片、功能视觉、插图、配件照片、页尾艺术作品等）。在产品页面（如 tesla.com/cybertruck）上，branding 块没有英雄图——只有 images 返回主要的 Cybertruck 英雄图（例如 Cybertruck-Hero-Desktop-NA-SA-APAC.png）和页面其余部分摄影。
如果截图抓取返回远程图像 URL（例如带签名的存储链接），请将其下载到同一个 .firecrawl/ 路径下，以便 DESIGN.md 可以引用稳定的本地资源。
使用结构化的 branding 输出作为颜色、排版、组件、品牌资产（logo、favicon、ogImage）、个性和置信度注释的主要来源。使用 images 列表作为页面内容图像——英雄摄影、产品图、轮播、功能视觉、插图和装饰图形的真实来源。使用截图作为布局、层次结构和整体感觉的主要视觉参考。仅当这些不足以生成最终产物时才添加补充格式。
收集：
branding数据，用于颜色、排版、间距、按钮、logo、品牌图像、个性和置信度- 完整的
images列表，用于英雄图、产品图、功能图和区域图像，超出精选品牌资产的范围 - 一个保存在
.firecrawl/中的全页截图，以便嵌入到DESIGN.md中 - 页面 Markdown，用于标题、文案层次、CTA、导航和区域顺序（需要时）
- 元数据和链接，用于品牌、产品和页面目的线索（需要时）
- 仅在
branding输出、图片列表和截图不足以推断类名、字体名称、CSS 变量或组件结构时，才使用 HTML - 仅当用户要求更广泛的站点系统时，才抓取相关页面
默认情况下不要过度抓取。第一个版本应能从单个代表性页面中变得有用。
提取内容
推断并记录网站的设计语言：
- 颜色：主色、辅色、强调色、背景色、边框色、文本色、状态色
- 排版：可检测的字体族、字号等级、字重、行高、标题/正文处理方式
- 间距：容器宽度、区域节奏、网格间距、内边距等级、密度
- 布局：页面结构、英雄模式、卡片、网格、导航、页脚、响应式假设
- 组件：按钮、输入框、卡片、徽章、导航项、定价块、推荐、功能行、表单
- 图像和图标：风格、形状语言、插图/照片处理方式、logo 约束；从完整的
images列表中提取代表性的英雄图、产品图、功能图和区域图像，而不是依赖branding.images（后者仅包含logo、favicon、ogImage和logoHref） - 运动和交互：悬停状态、过渡、动画风格（可观察或可推断时）
- 语气和内容模式：CTA 用语、标题风格、产品文案节奏
当无法从抓取输出中精确测量某个值时，将其标记为推断值并给出实用的近似值。
并行工作
如果合适，使用子代理或等效的并行任务运行器。自然的拆分包括：多页网站每页一个研究人员，或颜色、排版、间距和组件各一个评审人员。
每个并行研究人员应返回来源 URL、提取的证据、推断的设计 token 和置信度注释。
最终交付物
创建或返回一个具有以下结构的 DESIGN.md。将全页截图嵌入顶部附近，以便编码代理在获取 token 的同时获得视觉上下文。
# DESIGN.md：[源站点]
## 来源
- URL：[来源 URL]
- 捕获日期：[日期]
- 证据：[使用的抓取/截图/HTML/链接]
## 参考截图
！[源站点的全页截图](./.firecrawl/[source]-screenshot.png)
使用此截图作为布局、层次结构、密度和感觉的视觉真实来源。下面的 token 以机器可读形式描述同一页面。
## 设计摘要
[视觉语言的简短描述以及代理应重现的内容]
## 设计 Token
### 颜色
[命名的颜色角色及其十六进制值（已知时）；清晰标记推断值]
### 排版
[字体、后备建议、字号等级、字重、标题/正文规则]
### 间距和布局
[间距等级、容器、网格、圆角、阴影、边框]
## 组件
[按钮、卡片、导航、表单、英雄图、功能区域、定价、页脚等]
## 页面模式
[区域顺序、常见布局、响应式行为]
## 内容风格
[语气、CTA 风格、标题模式、文案密度]
## 代理构建说明
[AI 编码代理可遵循的具体说明，以在此风格中创建新站点]
## 重新运行输入
workflow: firecrawl-website-design-clone
source_url：[url]
target_stack：[stack]
output：DESIGN.md
如果用户要求实现，首先生成或更新 DESIGN.md，然后将其用作构建的真实来源。
质量标准
- 不要暗示用户对第三方 logo、图像、商标或副本拥有权利。
- 优先使用可复用的设计 token，而非一次性的观察结果。
- 区分观察事实和推断近似值。
- 保持输出紧凑，以便另一个代理可以将其粘贴到上下文中并从中构建。
- 保留来源 URL 和抓取产物以供审查。