clone-website

Original：🇺🇸 English

Translated

Clone/replicate websites into production-ready Next.js 16 code using Firecrawl MCP. Use when user asks to: clone website, vibe clone, replicate landing page, copy website design, rebuild this site, recreate this page, clone specific sections (hero, pricing, footer, etc). Triggers: "clone this website", "vibe clone [url]", "replicate this landing page", "rebuild this site in Next.js", "clone the hero section from [url]", "copy this design".

2installs

Sourcejulianromli/ai-skills

Added on2026-02-04

NPX Install

npx skill4agent add julianromli/ai-skills clone-website

SKILL.md Content

View Translation Comparison →

Clone Website Skill

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

Workflow

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

Phase 1: Scrape

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
```

Phase 2: Analysis (MANDATORY)

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.

Phase 3: Code Generation

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.

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

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

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

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