🏗️ siteforge

Interactive website builder for Claude Code

Ask questions → generate CLAUDE.md → let Claude Code build your site.

Not yet published to npm — build from source (see Development).

What is siteforge?

Siteforge is an interactive CLI that asks you detailed questions about the website you want to build — framework, design language, payment, auth, deployment — then generates a rich CLAUDE.md file that Claude Code reads to build your entire site, section by section.

Siteforge itself doesn't write your site code. It writes the brief that guides Claude Code.

npx siteforge init

Why use it?

When you start a project with Claude Code, you spend the first 20 minutes typing out what you want: "Next.js 15 with App Router, Tailwind, shadcn/ui, dark mode, three sections, use this color..." Siteforge turns those 20 minutes into a 2-minute interactive setup and produces a CLAUDE.md that is more thorough than what you'd type by hand.

Does it actually work?

Yes. Here's a real end-to-end test run in April 2026.

The input: a 2-minute siteforge init session

Type          : portfolio
Framework     : Next.js 15 (App Router)
Languages     : az, tr, en (Azerbaijani default)
Style         : neo-brutalist
Mood          : professional, technical, energetic
Typography    : classic-serif (Playfair Display + Inter)
Animation     : showcase (Awwwards-level: WebGL + scroll-driven)
Hero          : 3D canvas with React Three Fiber
Sections      : navigation, hero, features, pricing, faq, footer
SEO           : full (meta + sitemap + OG image + JSON-LD)
Legal         : privacy, terms, cookies + cookie banner
Deployment    : Vercel + GitHub Actions

Siteforge's coherence resolver auto-corrected two conflicts (the user picked soft shadow and animated background, which contradict neo-brutalism — overridden to hard shadow and solid background) and produced a 383-line CLAUDE.md with concrete Tailwind tokens for every design decision.

The output: 35 files, zero manual code

Feeding the generated CLAUDE.md to Claude Code with the single prompt "Read CLAUDE.md and build this site" produced a complete, TypeScript-clean, production-ready project:

| Layer | Files | |-------|-------| | Config | package.json, next.config.ts, tsconfig.json, postcss.config.mjs, .env.example | | i18n | i18n.ts, middleware.ts, messages/az.json, messages/tr.json, messages/en.json | | App | app/globals.css (Tailwind 4 @theme), app/[locale]/layout.tsx, app/[locale]/page.tsx | | Providers | ThemeProvider (next-themes), LenisProvider (smooth scroll) | | Sections | Navigation (sticky + mobile drawer + language switcher), Hero (R3F torus knot wireframe + floating icosahedra + particles), Features (6-card grid), Pricing (3 tiers + billing toggle), FAQ (accordion), Footer | | Legal | Privacy, Terms, Cookies pages across all 3 locales + shared LegalPage component | | SEO | sitemap.ts, robots.ts, opengraph-image.tsx (edge-rendered) | | Cookie banner | GDPR/KVKK-compliant, localStorage persistence | | CI/CD | .github/workflows/deploy.yml (lint + typecheck + build) |

Build status: ✓ Compiled successfully on the first try. All 5 locale-prefixed pages generated, TypeScript clean, zero hardcoded user-facing strings.

Key observations from the test:

• Claude Code respected every design token verbatim. The brutalist button used the exact shadow-[4px_4px_0_0_rgba(0,0,0,1)] offset shadow from the brief, not a generic shadow-md.
• The hero used React Three Fiber (not a random CSS animation) because the showcase animation level explicitly demanded WebGL.
• All three languages got realistic content — not lorem ipsum — because the brief's DO NOT list banned it.
• Claude Code chose Tailwind 4's modern @theme CSS-first config over the legacy tailwind.config.ts approach, because the brief specified "Tailwind CSS 4".

The whole pipeline — from clicking through setup to a running npm run dev — took under 15 minutes.

Quick start

Note: Siteforge is currently pre-release. npx siteforge init will be the canonical command once v0.1.0 ships to npm. Until then, clone and build from source:

git clone https://github.com/scuton-technology/siteforge.git
cd siteforge
pnpm install
pnpm build
node dist/cli.js init my-site

Once published to npm:

# Interactive mode
npx siteforge init

# Use a preset
npx siteforge init --preset saas-az
npx siteforge init --preset portfolio-minimal
npx siteforge init --preset blog-mdx

# Start from a brainstorm session
# (First run /siteforge-brainstorm in Claude Code to produce .siteforge/brainstorm.json)
npx siteforge init --brainstorm

The 14-phase setup

Siteforge walks you through every decision a professional site needs:

| Phase | What it asks | |-------|--------------| | 0 | Brainstorm — optional Claude Code slash command that talks through your idea and analyzes competitors | | 1 | Project name & product type (SaaS, portfolio, blog, e-commerce, dashboard) | | 2 | Framework (Next.js, Astro, Vite+React, static HTML) | | 3 | Design Language — the most critical phase: style, mood, density, radius, shadows, background, typography, components, buttons, icons, hero layout | | 4 | Sections (Hero, Features, Pricing, FAQ, Footer…) | | 5 | Region, currency, languages, i18n library | | 6 | Payment provider & model (Paddle, Stripe, Iyzico, Lemon Squeezy, PayTR…) | | 7 | Auth & database | | 8 | CMS (MDX, Sanity, Notion, Strapi…) | | 9 | Email service & templates (Mailcow, Resend, React Email) | | 10 | SEO package & legal pages (Privacy, Terms, Cookies, KVKK, GDPR) | | 11 | Deployment target & CI/CD | | 12 | Stack details (TypeScript, CSS, analytics, error tracking, testing) | | 13 | Review & confirm |

Smart regional defaults

Siteforge detects your region from system timezone and pre-fills sensible defaults:

| Region | Payment | Currency | Languages | Email | Deploy | |--------|---------|----------|-----------|-------|--------| | 🇦🇿 Azerbaijan | Paddle | AZN | az, tr, en | Mailcow | Self-host VPS | | 🇹🇷 Turkey | Iyzico | TRY | tr, en | Mailcow | Self-host VPS | | 🇺🇸 United States | Stripe | USD | en | Resend | Vercel | | 🇪🇺 European Union | Stripe | EUR | en | Resend | Vercel | | 🌍 Global | Paddle | USD | en | Resend | Vercel |

You can override any default during setup.

Brainstorm mode

For fuzzy ideas, use the Claude Code slash command first:

/siteforge-brainstorm

It interviews you about your idea, fetches competitor sites with web_fetch, analyzes their design and tone, suggests differentiation strategies, and writes .siteforge/brainstorm.json. When you then run npx siteforge init, every question comes pre-filled with brainstorm-driven defaults.

What siteforge generates

my-site/
├── CLAUDE.md                # Rich brief with design tokens + build instructions
├── .siteforge.json          # Your configuration, for future `siteforge upgrade`
├── .siteforge/
│   ├── brainstorm.md        # (if brainstorm was used)
│   └── brainstorm.json
├── package.json             # Dependencies for the chosen framework
├── tsconfig.json
├── tailwind.config.ts
├── next.config.ts
├── app/
│   ├── layout.tsx           # Font + theme provider
│   ├── page.tsx             # Section imports (stubs)
│   └── globals.css          # CSS variables (your color tokens)
├── components/
│   ├── sections/            # Hero.tsx, Features.tsx... (empty, Claude Code fills)
│   └── ui/                  # shadcn/ui primitives if chosen
└── messages/                # i18n files (if chosen)
    ├── en.json
    └── ...

After setup, you run claude in the project directory and Claude Code reads CLAUDE.md to build each section.

Development

git clone [email protected]:scuton-technology/siteforge.git
cd siteforge
pnpm install
pnpm dev           # watch mode
pnpm build         # production build
node dist/cli.js init   # test locally

Status & Roadmap

Current: v0.1.0-alpha — pre-release, build from source. The CLAUDE.md generator is production-tested (see Does it actually work?) and produces rich briefs that Claude Code can turn into complete Next.js 15 projects.

v0.1.0 — MVP (in progress)

• [x] 14-phase interactive setup flow
• [x] Design Language phase with 17 sub-questions (style, mood, density, radius, shadow, background, typography, components, buttons, icons, hero layout, animation)
• [x] Coherence resolver — auto-corrects conflicting design choices
• [x] Smart regional defaults (timezone detection → Azerbaijan/Turkey/US/EU presets)
• [x] CLAUDE.md generator with concrete Tailwind tokens
• [x] JSON Schema for brainstorm.json
• [x] /siteforge-brainstorm Claude Code slash command
• [x] End-to-end test: 35-file Next.js project generated from brief
• [ ] Expand 11 stub question modules to full interactive flow
• [ ] Minimal Next.js scaffold generator (optional — CLAUDE.md already sufficient)
• [ ] npm publish

v0.2.0 — Framework expansion

• [ ] Astro generator
• [ ] Vite + React generator
• [ ] Static HTML generator
• [ ] siteforge upgrade command

v0.3.0 — Ecosystem

• [ ] Theme marketplace
• [ ] Plugin system for custom question packs
• [ ] Community presets

Contributing

This is early — issues, PRs, and discussion very welcome. Good first contributions:

• Expand one of the stub question modules in src/questions/_stubs.ts
• Add a new preset in src/utils/presets.ts
• Improve a design style's coherence rules in src/generators/coherence.ts

License

MIT © Scuton Technology