firecrawl-website-design-clone

Firecrawl 网站设计克隆

当用户希望将一个URL转化为一份实用的设计系统文件，供代理立即使用时，使用此技能。

默认结果：一行命令提取任意网站的设计系统，并格式化为DESIGN.md。

该技能应像一个围绕Firecrawl抓取的轻量工作流：收集页面的可见内容、结构、元数据、链接和可用视觉信号，然后将这些发现综合成一份清晰的设计系统Markdown文件。

入职访谈

根据上下文推断源URL、目标技术栈以及是否要求实现。如果用户提供了URL并要求设计系统，则立即执行。

仅在受阻时提出最多1-3个简洁问题，例如网站URL、是否仅输出DESIGN.md还是同时实现，或所需的目标技术栈。

使用宿主代理的正常提示或模态UI。不要命名特定于框架的问题函数。

Firecrawl 收集计划

通过CLI或等效工具界面使用Firecrawl。始终从对提供的URL进行两个并行抓取开始：

1. 同时使用branding和images格式，获取结构化设计令牌和页面完整图像集。
2. 全页面截图以获取视觉上下文。

示例：

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、导航和区域顺序（需要时）
• 元数据和链接：用于品牌、产品和页面目的线索（需要时）
• HTML：仅当branding输出、images列表和截图不足以推断类名、字体名称、CSS变量或组件结构时
• 相关页面：仅当用户要求更广泛的站点系统时

默认不要过度抓取。第一个版本应能从单个代表性页面提供有用信息。

提取内容

推断并记录网站的设计语言：

• 颜色：主色、辅色、强调色、背景色、边框色、文字色、状态色
• 排版：可检测的字体族、字号比例、字重、行高、标题/正文处理
• 间距：容器宽度、区域节奏、网格间距、内边距比例、密度
• 布局：页面结构、主视觉模式、卡片、网格、导航、页脚、响应式假设
• 组件：按钮、输入框、卡片、徽章、导航项、定价块、推荐语、功能行、表单
• 图像和图标：风格、形状语言、插图/照片处理、logo约束；从完整的images列表中提取代表性的主视觉、产品、功能和区域图像，而不是依赖branding.images（后者仅包含logo、favicon、ogImage和logoHref）
• 动效和交互：悬停状态、过渡、动画风格（可观察或可推断时）
• 语调和内容模式：CTA措辞、标题风格、产品文案节奏

当无法从抓取输出中精确测量某个值时，将其标记为推断值，并给出实用的近似值。

并行工作

如果合适，使用子代理或等效的并行任务运行器。自然的分工包括每个研究员负责一个页面（多页面站点），或每个审阅者分别负责颜色、排版、间距和组件。

每个并行研究员应返回源URL、提取的证据、推断的设计令牌和置信度注释。

最终交付物

创建或返回一个具有以下结构的DESIGN.md。将全页面截图嵌入顶部附近，以便编码代理在获取令牌的同时获得视觉上下文。

# DESIGN.md: [源站点]

## 来源
- URL: [源URL]
- 捕获日期: [日期]
- 证据: [使用的抓取/截图/HTML/链接]

## 参考截图
![全页面截图 - [源站点]](./.firecrawl/[源]-screenshot.png)

使用此截图作为布局、层次结构、密度和整体感觉的视觉真实来源。下面的令牌以机器可读形式描述同一页面。

## 设计摘要
[视觉语言的简短描述，以及代理应重建的内容]

## 设计令牌

### 颜色
[命名颜色角色及其十六进制值（已知时）；明确标记推断值]

### 排版
[字体、后备推荐、字号比例、字重、标题/正文规则]

### 间距与布局
[间距比例、容器、网格、圆角、阴影、边框]

## 组件
[按钮、卡片、导航、表单、主视觉、功能区域、定价、页脚等]

## 页面模式
[区域顺序、常见布局、响应式行为]

## 内容风格
[语调、CTA风格、标题模式、文案密度]

## 代理构建说明
[AI编码代理可遵循的具体说明，以创建此风格的新站点]

## 重新运行输入
workflow: firecrawl-website-design-clone
source_url: [url]
target_stack: [stack]
output: DESIGN.md

如果用户要求实现，首先生成或更新DESIGN.md，然后将其作为构建的真实来源。

质量标准

• 不要暗示用户拥有第三方logo、图像、商标或文案的权利。
• 优先使用可复用的设计令牌，而非一次性观察。
• 区分观察到的事实与推断的近似值。
• 保持输出简洁，以便另一个代理可以将其粘贴到上下文中并据此构建。
• 保留源URL和抓取产物以供审查。