What Is the Output Format of the Cloned Website? Complete Next.js 16 Structure Explained

The /clone-website skill generates a complete Next.js 16 application organized into three main sections: source code (src/), static assets (public/), and machine-generated research documentation (docs/research/) that mirrors the target website.

The JCodesMore/ai-website-cloner-template repository produces a sophisticated output format when cloning websites. Understanding this structure helps developers quickly navigate and customize the generated codebase. The output follows modern React conventions using TypeScript strict mode and the App Router architecture.

The Three Main Output Sections

When the cloning pipeline finishes, the repository contains a fully functional Next.js application divided into three distinct areas.

Source Code (src/)

The generated source code represents a production-ready Next.js 16 application using React 19 and TypeScript strict mode. The architecture follows the App Router pattern with the following key directories:

• src/app/ – Contains page routes, root layout definitions, and global CSS configurations. The src/app/layout.tsx file injects Google fonts and global styles, while src/app/page.tsx serves as the default home route.
• src/components/ui/ – Houses shadcn/ui primitives extracted from the target site, such as button.tsx and other interactive elements.
• src/components/icons.tsx – Stores all SVG icons extracted during the cloning process.
• src/lib/utils.ts – Provides the essential cn() utility function for Tailwind CSS class composition and merging.

Static Assets (public/)

All media files downloaded from the target site populate the public/ directory, organized by asset type:

• public/images/ – Raster and vector graphics including icons, banners, and backgrounds.
• public/videos/ – Any video media detected and downloaded from the original site.
• public/seo/ – Favicons, webmanifest files, and Open Graph images required for proper SEO and social sharing.

Research Documentation (docs/research/)

The template generates comprehensive markdown documentation serving as a single source of truth for developers. These files capture the design system and behavior of the cloned site:

• DESIGN_TOKENS.md – Complete color palette, typography scales, spacing values, and border radii.
• COMPONENT_INVENTORY.md – Structured catalog of every UI component with markup, variants, and states.
• LAYOUT_ARCHITECTURE.md – Grid systems, responsive breakpoints, and sticky element specifications.
• INTERACTION_PATTERNS.md – Detailed hover, focus, animation, and transition behaviors.
• TECH_STACK_ANALYSIS.md – Detected frameworks, CSS methodologies, and API patterns used by the original site.

Technical Stack and Conventions

The cloned website output adheres to shadcn/ui + Tailwind v4 conventions, ensuring developers can extend the codebase without rewriting foundational styles. The generated application uses strict TypeScript configuration and modern React patterns compatible with Next.js 16's App Router.

Generating and Running the Cloned Website

To produce this output format, execute the cloning skill within your local copy of the template repository:

# Install dependencies first

npm install

# Start your AI agent (Claude Code recommended)

claude --chrome

# Run the cloning skill

/clone-website https://example.com

Once generation completes, launch the development server immediately:

npm run dev

This starts the application at http://localhost:3000, serving pages from src/app/ with assets loaded from public/ and styling generated through Tailwind CSS.

Inspecting Generated Design Documentation

The research documentation provides machine-readable specifications for post-processing. To review the extracted design system:

# Open the design tokens file

cat docs/research/DESIGN_TOKENS.md

This file contains exact CSS values, color hex codes, and typography scales that the cloning agent detected from the target website.

Summary

• The output format is a complete Next.js 16 application with App Router architecture.
• Source code resides in src/ using TypeScript strict mode, React 19, and shadcn/ui components.
• Static assets populate public/ with organized subdirectories for images, videos, and SEO files.
• Documentation in docs/research/ provides comprehensive design tokens, component inventories, and interaction patterns.
• Immediate execution is possible via npm run dev without additional configuration.

Frequently Asked Questions

What framework does the cloned website output use?

The output generates a Next.js 16 application using the App Router, React 19, and TypeScript in strict mode. This stack ensures type safety and modern React features like server components where appropriate.

Where are the design tokens and style specifications stored?

All extracted design data lives in docs/research/DESIGN_TOKENS.md, including colors, typography, spacing, and border radius values. The COMPONENT_INVENTORY.md and INTERACTION_PATTERNS.md files provide additional UI specifications and animation details.

Can I run the cloned website immediately after generation?

Yes. The output format includes a fully configured package.json with standard Next.js scripts. Running npm run dev starts the development server instantly, while npm run build produces an optimized production bundle.

What UI component library is included in the cloned output?

The template utilizes shadcn/ui components stored in src/components/ui/ alongside the cn() utility in src/lib/utils.ts for Tailwind class management. This approach allows unlimited customization while maintaining consistent styling patterns extracted from the original site.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}