What tech stack is used for the generated code?

The skill uses a fixed, modern stack: Next.js 16 (App Router), TypeScript, Tailwind CSS v4, Shadcn UI, and Lucide React icons.

Is the generated code mobile-friendly?

Absolutely. The skill follows mobile-first responsive design principles and uses Tailwind CSS utilities to ensure the output works across all screen sizes.

Does this skill require any external integrations?

Yes, this skill requires the Firecrawl MCP to be configured to handle the initial web scraping and data extraction phases.

How does this skill handle images during the cloning process?

The skill attempts to download original images from the target URL; if a download fails, it automatically applies context-aware Unsplash placeholders for hero sections, avatars, and features.

Can I clone only a specific part of a website?

Yes, you can request partial clones by specifying sections such as 'clone the hero section' or 'just the pricing table' to generate only the relevant components.

Website Clone & Replicate

Name: Website Clone & Replicate
Author: julianromli

byjulianromli

•

123

网络抓取与数据收集

Replicates existing websites into production-ready Next.js 16 and Tailwind CSS v4 codebases using Firecrawl MCP.

关于

This skill automates the process of migrating or recreating web designs into a modern development stack. By leveraging Firecrawl for precise scraping and mandatory structural analysis, it breaks down existing layouts into reusable Shadcn components, extracts design tokens, and generates clean, responsive Next.js 16 code. It is an essential tool for developers looking to prototype landing pages, migrate legacy sites, or quickly replicate specific UI patterns with pixel-perfect accuracy and modern coding standards.

主要功能

Flexible partial cloning for specific sections like hero units, pricing, or footers
Intelligent image extraction with automated Unsplash fallbacks
Automated website scraping and crawling via Firecrawl MCP integration
Pixel-perfect UI replication with mobile-first responsive design
Production-ready code generation using Next.js 16 and Tailwind CSS v4
123 GitHub stars

使用场景

Rebuilding existing web designs into clean, componentized, and type-safe codebases
Migrating legacy landing pages to a modern Next.js App Router framework
Replicating specific high-performing UI sections for rapid design prototyping

关于

主要功能

Flexible partial cloning for specific sections like hero units, pricing, or footers
Intelligent image extraction with automated Unsplash fallbacks
Automated website scraping and crawling via Firecrawl MCP integration
Pixel-perfect UI replication with mobile-first responsive design
Production-ready code generation using Next.js 16 and Tailwind CSS v4
123 GitHub stars

使用场景

Rebuilding existing web designs into clean, componentized, and type-safe codebases
Migrating legacy landing pages to a modern Next.js App Router framework
Replicating specific high-performing UI sections for rapid design prototyping