firecrawl-website-design-clone

Firecrawl 网站设计克隆

当用户想把一个 URL 转换成一份实用的设计系统文件，供 Agent 立即使用时，使用此技能。

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

此技能应像 Firecrawl 抓取流程的轻量封装：收集页面的可见内容、结构、元数据、链接和可用的视觉信号，然后将这些信息综合整理为一份简洁的设计系统 Markdown 文件。

入门访谈

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

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

使用宿主 Agent 常规的提示或模态 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 仍只消耗 1 个点数，而且这是必需的：branding 区块只会提供经过整理的品牌资源（logo、favicon、ogImage、logoHref），因此若不使用 images，Agent 就会漏掉页面实际的内容图片（主视觉图、产品图、轮播幻灯片、功能视觉图、插图、配件照片、页面末尾的插画等）。以 tesla.com/cybertruck 这样的产品页为例，branding 区块不包含主视觉图——只有 images 才会返回 Cybertruck 主视觉图（例如 Cybertruck-Hero-Desktop-NA-SA-APAC.png）及页面其余摄影图片。

如果截图抓取返回的是远程图片 URL（例如签名存储链接）而非本地文件，请将其下载到相同的 .firecrawl/ 路径，以便 DESIGN.md 引用稳定的本地资源。

使用结构化的 branding 输出，作为颜色、排版、组件、品牌资源（logo、favicon、ogImage）、个性特征和置信度说明的主要来源。使用 images 列表，作为页面内容图片的真实来源，包括主视觉摄影图、产品图、轮播图、功能视觉图、插图和装饰图形。使用截图，作为布局、层级和整体观感的主要视觉参考。只有在这些信息不足以完成最终产物时，才添加补充格式。

收集：

• 用于颜色、排版、间距、按钮、logo、品牌图像、个性特征和置信度的品牌数据
• 完整的 images 列表，包含经过整理的品牌资源之外的主视觉图、产品图、功能图和版块图片
• 保存到本地 .firecrawl/ 中的整页截图，以便嵌入 DESIGN.md
• 在需要时收集页面 Markdown，以获取标题、文案层级、CTA、导航和版块顺序
• 在需要时收集元数据和链接，以获取品牌、产品和页面用途线索
• 仅当 branding 输出、images 列表和截图不足以推断类名、字体名称、CSS 变量或组件结构时，才使用 HTML
• 仅当用户要求更广泛的网站系统时，才收集相关页面

默认情况下不要过度抓取。初版应能从一个有代表性的页面中提炼出实用结果。

要提取的内容

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

• 色彩：主色、次色、强调色、背景、边框、文本、状态色
• 排版：可识别的字体系列、字号比例、字重、行高、标题和正文的样式
• 间距：容器宽度、区块节奏、网格间距、内边距比例、密度
• 布局：页面结构、Hero 模式、卡片、网格、导航、页脚、响应式假设
• 组件：按钮、输入框、卡片、徽章、导航项、定价区块、用户评价、功能行、表单
• 图像和图标：样式、形状语言、插图／照片处理方式、Logo 限制；从完整的 images 列表中提取具有代表性的 Hero、产品、功能和区块图片，不要依赖仅包含 logo、favicon、ogImage 和 logoHref 的 branding.images
• 动效和交互：可观察到或可推断的悬停状态、过渡效果、动画风格
• 语气和内容模式：CTA 措辞、标题风格、产品文案节奏

如果无法从抓取结果中精确测量某个值，请标明为推断值，并给出实用的近似值。

并行工作

如适用，请使用子 Agent 或同等的并行任务执行器。对于多页网站，可按页面分配研究任务；也可分别安排研究人员分析颜色、排版、间距和组件。

每位并行研究人员都应返回来源 URL、提取的证据、推断出的设计令牌以及置信度说明。

最终交付物

按以下结构创建或返回 DESIGN.md。在靠近文档顶部的位置嵌入整页截图，以便编码 Agent 能结合视觉背景查看设计令牌。

# DESIGN.md: [Source Site]

## Source
- URL: [source URL]
- Capture date: [date]
- Evidence: [scrape/screenshot/html/links used]

## Reference Screenshot
![Full-page screenshot of [Source Site]](./.firecrawl/[source]-screenshot.png)

Use this screenshot as the visual source of truth for layout, hierarchy, density, and feel. Tokens below describe the same page in machine-readable form.

## Design Summary
[Short description of the visual language and what an agent should recreate]

## Design Tokens

### Colors
[Named color roles with hex values when known; mark inferred values clearly]

### Typography
[Fonts, fallback recommendations, scale, weights, heading/body rules]

### Spacing And Layout
[Spacing scale, containers, grids, radius, shadows, borders]

## Components
[Buttons, cards, nav, forms, hero, feature sections, pricing, footer, etc.]

## Page Patterns
[Section order, common layouts, responsive behavior]

## Content Style
[Voice, CTA style, heading patterns, copy density]

## Agent Build Instructions
[Concrete instructions an AI coding agent can follow to create a new site in this style]

## Rerun Inputs
workflow: firecrawl-website-design-clone
source_url: [url]
target_stack: [stack]
output: DESIGN.md

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

质量标准

• 不要暗示用户拥有第三方 Logo、图片、商标或文案的使用权。
• 优先使用可复用的设计令牌，而非一次性的观察结果。
• 区分观察到的事实和推断出的近似值。
• 输出应足够精简，便于其他 Agent 粘贴到上下文中并据此构建。
• 保留来源 URL 和抓取结果，以供审核。