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

> Explore the output format of the AI website cloner. Understand the Next.js 16 structure, including src, public, and docs directories, to perfectly replicate your target website.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: api-reference
- Published: 2026-06-27

---

**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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx) file injects Google fonts and global styles, while [`src/app/page.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/button.tsx) and other interactive elements.
- **[`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx)** – Stores all SVG icons extracted during the cloning process.
- **[`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/DESIGN_TOKENS.md)** – Complete color palette, typography scales, spacing values, and border radii.
- **[`COMPONENT_INVENTORY.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/COMPONENT_INVENTORY.md)** – Structured catalog of every UI component with markup, variants, and states.
- **[`LAYOUT_ARCHITECTURE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/LAYOUT_ARCHITECTURE.md)** – Grid systems, responsive breakpoints, and sticky element specifications.
- **[`INTERACTION_PATTERNS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/INTERACTION_PATTERNS.md)** – Detailed hover, focus, animation, and transition behaviors.
- **[`TECH_STACK_ANALYSIS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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:

```bash

# 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:

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

```bash

# 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/DESIGN_TOKENS.md), including colors, typography, spacing, and border radius values. The [`COMPONENT_INVENTORY.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/COMPONENT_INVENTORY.md) and [`INTERACTION_PATTERNS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts) for Tailwind class management. This approach allows unlimited customization while maintaining consistent styling patterns extracted from the original site.