clone-website

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Clone Website Skill

网站克隆Skill

Transform any website into production-ready Next.js 16 code using Firecrawl MCP.

使用Firecrawl MCP将任意网站转换为可投入生产的Next.js 16代码。

Workflow

工作流

Execute these 3 phases in order. Never skip Phase 2.

按顺序执行以下3个阶段。切勿跳过阶段2。

Phase 1: Scrape

阶段1：爬取

Extract URL from user request
Identify section filter if specified (e.g., "hero only", "just the pricing")
Scrape using Firecrawl:

firecrawl-mcp___firecrawl_scrape:
  url: [TARGET_URL]
  formats: ["markdown", "html"]
  onlyMainContent: true

If scrape fails, fallback to
```
firecrawl-mcp___firecrawl_crawl
```

从用户请求中提取URL
识别是否指定了板块筛选条件（例如：“仅首页横幅Hero”、“仅定价板块”）
使用Firecrawl进行爬取：

firecrawl-mcp___firecrawl_scrape:
  url: [TARGET_URL]
  formats: ["markdown", "html"]
  onlyMainContent: true

如果爬取失败，回退使用
```
firecrawl-mcp___firecrawl_crawl
```

Phase 2: Analysis (MANDATORY)

阶段2：分析（必填）

STOP. Present analysis to user before ANY code generation.

Read references/analysis-template.md and fill out the template with:

Detected sections and component breakdown
Extracted design tokens (colors, typography, spacing)
Image inventory with download/fallback status
Proposed file structure

Ask user: "Ready to proceed? (y/n or request modifications)"

Do not generate code until user confirms.

注意：在生成任何代码之前，务必先向用户展示分析结果。

阅读references/analysis-template.md并填写模板，内容包括：

检测到的板块和组件拆分
提取的设计令牌（颜色、排版、间距）
图片清单及下载/备用状态
建议的文件结构

询问用户：“是否准备继续？(y/n 或提出修改需求)”

在用户确认前，请勿生成代码。

Phase 3: Code Generation

阶段3：代码生成

After user confirmation, generate files in this order:

```
app/globals.css
```
- Design tokens as CSS variables
```
app/layout.tsx
```
- Root layout with SEO metadata
```
components/landing/[Section].tsx
```
- Each component
```
app/page.tsx
```
- Main page composing components
Download images to
```
public/images/
```

Reference references/tech-stack.md for Next.js 16 conventions. Reference references/component-patterns.md for component structure.

用户确认后，按以下顺序生成文件：

```
app/globals.css
```
- 设计令牌以CSS变量形式定义
```
app/layout.tsx
```
- 包含SEO元数据的根布局
```
components/landing/[Section].tsx
```
- 各个独立组件
```
app/page.tsx
```
- 组合所有组件的主页面
将图片下载至
```
public/images/
```
目录

参考references/tech-stack.md遵循Next.js 16规范。参考references/component-patterns.md构建组件结构。

Tech Stack (Fixed)

技术栈（固定）

Layer	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript (strict)
Styling	Tailwind CSS v4
Components	Shadcn UI
Icons	Lucide React
Font	Geist Sans (default) or extracted

层级	技术
框架	Next.js 16 (App Router)
语言	TypeScript (strict)
样式	Tailwind CSS v4
组件库	Shadcn UI
图标	Lucide React
字体	Geist Sans（默认）或提取自原网站

Image Handling

图片处理

Extract all image URLs from scraped content
Attempt download via fetch

On failure, use Unsplash fallback:

Hero:

https://images.unsplash.com/photo-[id]?w=1920&h=1080

Avatars:

https://images.unsplash.com/photo-[id]?w=100&h=100

Features: Prefer Lucide icons over images

Save to
```
public/images/
```
with descriptive kebab-case names

从爬取内容中提取所有图片URL
尝试通过fetch下载图片
下载失败时，使用Unsplash备用图：
- 首页横幅Hero：
```
https://images.unsplash.com/photo-[id]?w=1920&h=1080
```
- 头像：
```
https://images.unsplash.com/photo-[id]?w=100&h=100
```
- 功能图标：优先使用Lucide图标而非图片
将图片保存至
```
public/images/
```
目录，使用描述性短横线命名法（kebab-case）

Partial Cloning

部分克隆

Parse user request for section filters:

Request	Action
"clone the hero from X"	Generate only Hero.tsx
"clone pricing and footer"	Generate Pricing.tsx + Footer.tsx
"clone X" (no filter)	Full page clone

解析用户请求中的板块筛选条件：

请求内容	操作
“clone the hero from X”	仅生成Hero.tsx
“clone pricing and footer”	生成Pricing.tsx + Footer.tsx
“clone X”（无筛选条件）	整页克隆

Code Standards

代码规范

Mobile-first responsive design
Use Tailwind arbitrary values for pixel-perfection:
```
w-[347px]
```
Extract repeated colors to CSS variables
Use
```
cn()
```
utility for conditional classes
Add brief comments only for non-obvious patterns
Prefer
```
gap-*
```
over margins for flex/grid spacing
Use
```
size-*
```
over
```
w-* h-*
```
when values match

采用移动端优先的响应式设计
使用Tailwind任意值实现像素级精准：
```
w-[347px]
```
将重复使用的颜色提取为CSS变量
使用
```
cn()
```
工具函数处理条件类
仅对非直观的代码模式添加简短注释
对于Flex/Grid布局，优先使用
```
gap-*
```
而非外边距
当宽高值相同时，优先使用
```
size-*
```
而非
```
w-* h-*
```