firecrawl-website-design-clone

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Firecrawl Website Design Clone

Firecrawl 网站设计克隆

Use this when the user wants one URL turned into a practical design system file agents can use immediately.

Default outcome: extract any website's design system in one line and format it as

DESIGN.md

The skill should feel like a thin workflow around Firecrawl scrape: gather the page's visible content, structure, metadata, links, and available visual signals, then synthesize those findings into a clean design-system markdown file.

当用户希望将单个URL转换为Agent可立即使用的实用设计系统文件时，可使用此工具。

默认输出结果：一键提取任意网站的设计系统，并格式化为

DESIGN.md

文件。

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

Onboarding Interview

入职访谈

Infer the source URL, target stack, and whether implementation is requested from context. If the user gives a URL and asks for a design system, proceed immediately.

Ask at most 1-3 concise questions only if blocked, such as the website URL, whether to output only

DESIGN.md

or also implement, or a required target stack.

Use the host agent's normal prompt or modal UI. Do not name a harness-specific question function.

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

仅在遇到阻碍时最多提出1-3个简洁问题，例如网站URL、是否仅输出

DESIGN.md

还是同时进行实现，或者所需的目标技术栈。

使用宿主Agent的常规提示或模态UI。不要提及特定于工具的问题函数。

Firecrawl Collection Plan

Firecrawl 采集计划

Use Firecrawl through the CLI or equivalent tool surface. Always start with two parallel scrapes of the supplied URL:

The
```
branding
```
format for structured design tokens.
A full-page screenshot for visual context.

Example:

bash

firecrawl scrape "https://example.com" --format branding -o ".firecrawl/example-branding.json" --pretty &
firecrawl scrape "https://example.com" --full-page-screenshot -o ".firecrawl/example-screenshot.png" &
wait

If the screenshot scrape returns a remote image URL (e.g. signed storage link) instead of a local file, download it to the same

.firecrawl/

path so

DESIGN.md

can reference a stable local asset.

Use the structured

branding

output as the primary source for colors, typography, components, imagery, personality, and confidence notes. Use the screenshot as the primary visual reference for layout, hierarchy, and overall feel. Add supplemental formats only when these two are insufficient for the final artifact.

Collect:

branding data for colors, typography, spacing, buttons, logos, imagery, personality, and confidence
a full-page screenshot saved locally in
```
.firecrawl/
```
so it can be embedded in
```
DESIGN.md
```
page markdown for headings, copy hierarchy, CTAs, navigation, and section order when needed
metadata and links for brand, product, and page-purpose clues when needed
HTML only when the branding output and screenshot are insufficient to infer classes, font names, CSS variables, or component structure
related pages only when the user asks for a broader site system

Do not over-crawl by default. The first version should be useful from a single representative page.

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

采用
```
branding
```
格式获取结构化设计令牌。
抓取全页面截图以获取视觉上下文。

示例：

bash

firecrawl scrape "https://example.com" --format branding -o ".firecrawl/example-branding.json" --pretty &
firecrawl scrape "https://example.com" --full-page-screenshot -o ".firecrawl/example-screenshot.png" &
wait

如果截图抓取返回的是远程图片URL（例如签名存储链接）而非本地文件，请将其下载到同一

.firecrawl/

路径下，以便

DESIGN.md

可以引用稳定的本地资源。

将结构化的

branding

输出作为颜色、排版、组件、图像、风格特征和可信度说明的主要来源。将截图作为布局、层级结构和整体风格的主要视觉参考。仅当这两种来源不足以生成最终产物时，才补充其他格式。

采集内容包括：

品牌数据：颜色、排版、间距、按钮、标志、图像、风格特征和可信度
保存到本地
```
.firecrawl/
```
目录的全页面截图，以便嵌入到
```
DESIGN.md
```
中
页面Markdown：标题、文案层级、CTA、导航和章节顺序（必要时）
元数据和链接：品牌、产品和页面用途线索（必要时）
HTML：仅当品牌输出和截图不足以推断类名、字体名称、CSS变量或组件结构时
相关页面：仅当用户要求获取更广泛的站点系统时

默认情况下不要过度抓取。第一版应仅从单个代表性页面即可生成有用的结果。

What To Extract

提取内容

Infer and document the site's design language:

colors: primary, secondary, accents, backgrounds, borders, text, states
typography: font families if detectable, type scale, weights, line heights, heading/body treatment
spacing: container widths, section rhythm, grid gaps, padding scale, density
layout: page structure, hero patterns, cards, grids, nav, footer, responsive assumptions
components: buttons, inputs, cards, badges, nav items, pricing blocks, testimonials, feature rows, forms
imagery and icons: style, shape language, illustration/photo treatment, logo constraints
motion and interaction: hover states, transitions, animation style when observable or inferable
voice and content patterns: CTA wording, heading style, product copy rhythm

When a value cannot be measured exactly from scrape output, label it as inferred and give a practical approximation.

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

颜色：主色、辅助色、强调色、背景色、边框色、文本色、状态色
排版：可检测到的字体家族、字号层级、字重、行高、标题/正文处理方式
间距：容器宽度、章节节奏、网格间距、内边距层级、密度
布局：页面结构、Hero区域模式、卡片、网格、导航、页脚、响应式假设
组件：按钮、输入框、卡片、徽章、导航项、定价区块、客户评价、功能行、表单
图像与图标：风格、形状语言、插画/照片处理方式、标志约束
动效与交互：悬停状态、过渡效果、动画风格（可观察或推断时）
语气与内容模式：CTA措辞、标题风格、产品文案节奏

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

Parallel Work

并行工作

If appropriate, use sub-agents or equivalent parallel task runners. Natural splits include one page per researcher for multi-page sites, or one reviewer each for colors, typography, spacing, and components.

Each parallel researcher should return source URLs, extracted evidence, inferred design tokens, and confidence notes.

如有必要，使用子Agent或等效的并行任务运行器。自然的任务拆分包括：多页面网站时每个研究人员负责一个页面，或分别由不同的审核人员负责颜色、排版、间距和组件。

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

Final Deliverable

最终交付物

Create or return a

DESIGN.md

with this structure. Embed the full-page screenshot near the top so a coding agent gets visual context alongside the tokens.

markdown

undefined

创建或返回具有以下结构的

DESIGN.md

文件。将全页面截图嵌入到靠近顶部的位置，以便编码Agent在获取令牌的同时获得视觉上下文。

markdown

undefined

DESIGN.md: [Source Site]

DESIGN.md: [源站点]

Source

来源

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

URL: [源URL]
采集日期: [日期]
证据: [使用的抓取/截图/HTML/链接]

Reference Screenshot

参考截图

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]

[视觉语言的简短描述，以及Agent应重现的内容]

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.]

[按钮、卡片、导航、表单、Hero区域、功能区块、定价、页脚等]

Page Patterns

页面模式

[Section order, common layouts, responsive behavior]

[章节顺序、常见布局、响应式行为]

Content Style

内容风格

[Voice, CTA style, heading patterns, copy density]

[语气、CTA风格、标题模式、文案密度]

Agent Build Instructions

Agent构建说明

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

[AI编码Agent可遵循的具体说明，用于创建此风格的新站点]

Rerun Inputs

重运行输入

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


If the user asks to implement, first produce or update `DESIGN.md`, then use it as the source of truth for the build.

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


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

Quality Bar

质量标准

Do not imply the user has rights to third-party logos, images, trademarks, or copy.
Prefer reusable design tokens over one-off observations.
Distinguish observed facts from inferred approximations.
Keep the output compact enough that another agent can paste it into context and build from it.
Preserve source URLs and scrape artifacts for review.

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