# Initial Setup Required Before Parallel Component Building in the AI Website Cloner Template
> Complete the six-step Foundation First phase before parallel component building. Verify base build, extract design tokens, define interfaces, and more in the AI website cloner template.
- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: how-to-guide
- Published: 2026-07-22
---
**Before dispatching parallel builder agents, you must complete a six-step "Foundation First" phase: verify the base build, extract design tokens into [`globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/globals.css) and [`layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/layout.tsx), define TypeScript interfaces, extract SVG icons to [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx), download all global assets to `public/`, and run a final build check.**
The **JCodesMore/ai-website-cloner-template** orchestrates multiple AI agents to recreate websites by dividing work across parallel component builders. Before these agents can operate independently, the repository requires a mandatory sequential initialization that establishes shared resources and build integrity.
## The Foundation First Phase
According to the workflow definition in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md), the system enforces a strict linear setup that must execute **exactly once per clone**. These steps create the invariant foundation that parallel builders assume exists when they begin isolated work.
### Verify the Scaffold Builds
First, run the build command to confirm the Next.js 16 + shadcn/ui + Tailwind v4 base compiles without errors.
```bash
npm run build
```
This pre-flight check, referenced in the clone-website workflow at lines 28-31, ensures the toolchain is functional before adding any custom code. The build must pass before proceeding to extraction steps.
### Create the Global Design Token Layer
Extract the target site's **fonts**, **colors**, **spacing**, and global UI patterns. These values are written into two critical files:
- **[`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx)** – Configures fonts via `next/font/google` or `next/font/local`
- **[`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css)** – Defines CSS custom properties for colors, spacing, and keyframes
These tokens provide the visual vocabulary that all subsequent components will reference.
### Define TypeScript Interfaces
Create type definitions in `src/types/` that describe the content structures observed on the target page. These interfaces provide builders with strongly-typed contracts for component props and data shapes, ensuring type safety across independently developed sections.
### Extract Reusable SVG Icons
Scrape SVG icons from the live site and convert them into React components stored in [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx). This centralized icon library creates a single source of truth that prevents duplication and inconsistency across components built in parallel.
### Download Global Assets
Execute a Node script such as `scripts/download-assets.mjs` that enumerates images, videos, favicons, and OG images via a browser MCP script. Assets are saved under `public/` while preserving the original directory structure.
### Final Build Verification
Run `npm run build` again to confirm the project still compiles after incorporating fonts, CSS, types, icons, and assets. Only after this successful verification can parallel builder agents be safely launched into separate git worktrees.
## Code Examples
### Updating Global CSS with Extracted Color Tokens
The following pattern updates [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) with design tokens extracted from the target site:
```css
/* src/app/globals.css */
:root {
/* Extracted palette – replace with actual values */
--color-primary: 210 50% 48%; /* e.g., hsl(210, 50%, 48%) */
--color-muted: 210 10% 95%;
--color-background: 0 0% 100%;
}
/* Map to shadcn tokens */
.bg-primary { background-color: oklch(var(--color-primary)); }
.text-muted { color: oklch(var(--color-muted)); }
```
### Configuring Fonts in the Layout File
Update [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx) to match the target site's typography:
```tsx
/* src/app/layout.tsx */
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'], weight: ['400', '700'] });
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
### Defining TypeScript Interfaces for Content Structures
Create contracts in `src/types/` that describe section-specific data:
```ts
/* src/types/hero.ts */
export interface HeroProps {
title: string;
subtitle: string;
backgroundImage: string; // path under public/images/
ctaLabel: string;
ctaHref: string;
}
```
### Centralizing SVG Icons
Extract icons into [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx) for shared access:
```tsx
/* src/components/icons.tsx */
export const SearchIcon = () => (
);
export const ArrowRightIcon = () => (
);
```
### Parallel Asset Download Script
Use a batched approach in `scripts/download-assets.mjs` to fetch global assets efficiently:
```javascript
// scripts/download-assets.mjs
import fs from 'fs';
import https from 'https';
import { pipeline } from 'stream';
import { promisify } from 'util';
const pipelineAsync = promisify(pipeline);
const assets = await fetch('/assets.json').then(r => r.json());
const concurrency = 4;
let index = 0;
async function worker() {
while (index < assets.length) {
const { url, path } = assets[index++];
const dest = `public/${path}`;
fs.mkdirSync(dest.substring(0, dest.lastIndexOf('/')), { recursive: true });
await pipelineAsync(
https.get(url, res => res),
fs.createWriteStream(dest)
);
}
}
await Promise.all(Array(concurrency).fill(null).map(worker));
```
## Why This Sequence Matters
Builder agents operate in **isolation** without access to the live target site. If the global CSS in [`globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/globals.css), type definitions in `src/types/`, or assets in `public/` are missing or inaccurate, every component produced will be incomplete or broken, forcing costly rework. The foundation phase eliminates this risk by making all shared resources auditable and version-controlled before any parallel work begins.
## Summary
- **Verify base build** – Run `npm run build` to confirm the Next.js 16 stack compiles
- **Extract design tokens** – Update [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) and [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx) with colors, spacing, and fonts
- **Define TypeScript interfaces** – Create type contracts in `src/types/` for content structures
- **Centralize icons** – Extract SVGs to [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx)
- **Download assets** – Execute `scripts/download-assets.mjs` to populate `public/`
- **Final verification** – Run `npm run build` again before launching parallel builders
## Frequently Asked Questions
### What happens if I skip the foundation phase and start parallel builders immediately?
If you skip the initial setup, parallel builder agents will generate components referencing CSS variables, fonts, types, and assets that do not exist in the repository. This results in TypeScript compilation errors, missing styles, and broken image links that require manual correction of every component, negating the efficiency benefits of parallelization.
### Where are design tokens stored in the AI Website Cloner Template?
Design tokens are stored in two locations: **typography** configurations reside in [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx) using `next/font` imports, while **color, spacing, and animation** tokens are defined as CSS custom properties in [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css). These files serve as the single source of truth for the visual design system.
### Why must TypeScript interfaces be defined before component building?
TypeScript interfaces in `src/types/` establish contracts for data shapes and component props. Defining these first ensures that every parallel builder generates code that is type-compatible with the content structure, preventing interface mismatches that would break the build when components are integrated.
### How does the asset download script handle large numbers of files?
The script uses a **batched concurrency pattern** (typically 4 parallel workers) to download assets enumerated by the browser MCP script. This approach prevents resource exhaustion while efficiently populating the `public/` directory with the preserved folder structure required by the application.