Initialize Repository
Initialize this repo with your own branding, content, and site structure. This command will wipe boilerplate content and ask you a series of questions to customize the site.
Initial context captured to inform smart suggestions
Ask directly (no options):
In 1-2 sentences, describe what you want to build. What is the product/service and who is it for?
Example answers:
- "A task management app for remote teams that need better async collaboration"
- "A design agency portfolio showcasing luxury branding work for fashion brands"
- "An AI-powered code review tool for enterprise development teams"
Store the response as: projectVision
IMPORTANT: This answer will be used to generate contextual, intelligent suggestions for all following questions. Analyze the vision to understand:
- Industry/domain (SaaS, agency, docs, etc.)
- Target audience (developers, designers, enterprises, etc.)
- Tone/personality (professional, playful, technical, etc.)
- Likely color preferences based on industry norms
The repo is cleaned of all AgentStatic branding and ready for customization
-
Delete boilerplate pages (AgentStatic landing, about, docs):
pages/index.html → DELETEDpages/about.html → DELETEDpages/docs.html → DELETED
-
Reset brand.json to minimal structure:
{
"name": "",
"tagline": "",
"colors": {
"primary": ""
}
}
Status: Boilerplate wiped. Ready to gather information.
Use AskUserQuestion to ask these 4 questions in a single batch.
IMPORTANT: For each question, generate 5 contextually intelligent suggestions based on the projectVision from Stage 0. Analyze the vision to infer appropriate options.
-
Brand Name
- Question: "What should we call your product/company/project?"
- Type: Single select with 5 options + "Other" (auto-provided)
- Required: Yes
- Store as:
brandName
- Generate 5 smart suggestions based on projectVision:
- Extract keywords from vision (e.g., "task management" → TaskFlow, TeamSync, AsyncHub)
- Consider industry conventions (SaaS = short/techy, Agency = creative/abstract)
- Mix styles: descriptive, abstract, portmanteau, made-up words
- Example for "task management for remote teams":
- "TeamSync"
- "AsyncHub"
- "TaskFlow"
- "RemoteBase"
- "FlowState"
-
Tagline
- Question: "What's your tagline or value proposition?"
- Type: Single select with 5 options + "Other" (auto-provided)
- Required: Yes
- Store as:
tagline
- Generate 5 smart suggestions based on projectVision:
- Extract core benefit from vision
- Use formulas: "X for Y", "The Z way to X", "X made Y"
- Keep under 10 words
- Example for "task management for remote teams":
- "Task management built for remote teams"
- "Async collaboration that actually works"
- "Keep your team in sync, anywhere"
- "The modern way to manage work"
- "Remote work, made simple"
-
Primary Color
- Question: "What's your primary brand color?"
- Type: Single select with 5 options + "Other" (auto-provided)
- Required: Yes
- Store as:
primaryColor
- Generate 5 smart suggestions based on projectVision and industry:
- Consider industry norms (tech = blue/purple, creative = bold colors, finance = navy/green)
- Consider target audience (enterprise = conservative, startup = vibrant)
- Provide hex codes with descriptive labels
- Example for "SaaS task management":
- "Modern Blue (#3b82f6)"
- "Professional Purple (#8b5cf6)"
- "Trust Navy (#1e40af)"
- "Energy Teal (#14b8a6)"
- "Focus Indigo (#6366f1)"
- If user selects "Other": Accept hex codes OR color descriptions, then map:
- Parse hex if starts with #
- Map natural descriptions: "warm blue" → #3b82f6, "forest green" → #059669, etc.
-
Site Purpose
- Question: "What type of site is this?"
- Type: Single select with 5 options + "Other" (auto-provided)
- Required: Yes
- Store as:
sitePurpose
- Generate 5 smart suggestions based on projectVision:
- Analyze vision to determine most likely site type
- Order options by relevance (most likely first)
- Example for "AI code review tool":
- "SaaS Product (Recommended)"
- "Documentation"
- "Developer Tool"
- "Marketing Site"
- "Technical Product"
- Common options pool:
- "SaaS Product"
- "Agency/Portfolio"
- "Documentation"
- "Blog/Content"
- "Marketing Site"
- "Developer Tool"
- "E-commerce"
Core brand identity defined (name, tagline, color, purpose)
Use AskUserQuestion to ask these 4 questions in a single batch.
IMPORTANT: Generate 5 contextually intelligent suggestions based on projectVision and answers from Stage 2.
-
Target Audience
- Question: "Who is your primary target audience?"
- Type: Single select with 5 options + "Other" (auto-provided)
- Required: Yes
- Store as:
audience
- Generate 5 smart suggestions based on projectVision:
- Extract or infer audience from vision
- Consider industry-specific audiences
- Order by relevance (most likely first)
- Example for "AI code review tool for enterprises":
- "Enterprise development teams (Recommended)"
- "Software engineers"
- "DevOps teams"
- "Engineering managers"
- "CTO/Tech leaders"
- Common audiences: developers, designers, startups, enterprises, small businesses, creators, students, professionals
-
Key Features/Benefits
- Question: "What are your top 3-4 key features or benefits?"
- Type: Multi-select (allow 3-4 selections) with 5-7 options + "Other" (auto-provided)
- Required: Yes (must select 3-4)
- Store as:
features (array)
- Generate 5-7 smart suggestions based on projectVision and sitePurpose:
- Extract benefits/features mentioned in vision
- Add complementary features common to the industry
- Use benefit-oriented language
- Example for "task management for remote teams":
- "Async collaboration tools"
- "Real-time team visibility"
- "Automated workflows"
- "Time zone friendly scheduling"
- "Integration with Slack/Teams"
- "Mobile-first design"
- "Secure & compliant"
-
Call to Action
- Question: "What's the primary action you want visitors to take?"
- Type: Single select with 5 options + "Other" (auto-provided)
- Required: Yes
- Store as:
cta
- Generate 5 smart suggestions based on projectVision and sitePurpose:
- Match CTA to business model (SaaS = sign up, Agency = contact, Docs = get started)
- Use action-oriented language
- Example for "SaaS Product":
- "Start free trial (Recommended)"
- "Get started"
- "Request demo"
- "Sign up free"
- "Book a call"
- Common CTAs by type:
- SaaS: "Start free trial", "Get started", "Sign up"
- Agency: "Contact us", "Get a quote", "See our work"
- Docs: "Get started", "Read docs", "View examples"
- Blog: "Subscribe", "Read more", "Join newsletter"
-
Brand Tone
- Question: "What's your brand tone/personality?"
- Type: Single select with 5 options + "Other" (auto-provided)
- Required: Yes
- Store as:
tone
- Generate 5 smart suggestions based on projectVision and audience:
- Infer tone from vision language and target audience
- Consider industry norms
- Order by relevance
- Example for "enterprise SaaS":
- "Professional (Recommended)"
- "Technical"
- "Trustworthy"
- "Modern & clean"
- "Friendly but professional"
- Common tones: Professional, Friendly, Technical, Playful, Minimal, Bold, Elegant, Casual, Authoritative
Content strategy defined (audience, features, CTA, tone)
Use AskUserQuestion to ask these 2 questions in a single batch.
IMPORTANT: Generate contextually intelligent suggestions based on all previous answers.
-
Typography Style
- Question: "What typography style matches your brand?"
- Type: Single select with 5 options + "Other" (auto-provided)
- Required: Yes
- Store as:
typographyStyle
- Generate 5 smart suggestions based on tone and sitePurpose:
- Match font personality to brand tone
- Consider industry norms
- Provide clear descriptions with font families
- Example for "Professional SaaS":
- "Modern Sans-Serif - Inter (Recommended)"
- "Clean & Minimal - DM Sans"
- "Corporate - IBM Plex Sans"
- "Technical - Space Grotesk"
- "Friendly - Plus Jakarta Sans"
- Font mapping:
- Modern/Clean: Inter, DM Sans, Plus Jakarta Sans
- Technical: JetBrains Mono, Space Grotesk, IBM Plex Mono
- Classic/Elegant: Playfair Display, Merriweather, Crimson Text
- Bold/Impactful: Outfit, Sora, Urbanist
- Friendly: Nunito, Quicksand, Comfortaa
-
Additional Pages
- Question: "Which additional pages should we create?"
- Type: Multi-select with 5-6 options + "Other" (auto-provided)
- Required: No (can skip all to only create index.html)
- Store as:
additionalPages (array)
- Generate 5-6 smart suggestions based on sitePurpose:
- Order by relevance to site type
- Mark recommended pages
- Example for "SaaS Product":
- "Pricing (Recommended)"
- "About"
- "Contact"
- "Blog"
- "Documentation"
- "Changelog"
- Common pages by type:
- SaaS: Pricing, About, Contact, Blog, Docs, Changelog, Customers
- Agency: About, Portfolio, Services, Contact, Team, Case Studies
- Docs: Getting Started, API Reference, Guides, Examples, FAQ
- Blog: About, Archive, Categories, Authors, Newsletter
Advanced preferences captured (typography, additional pages)
User understands where to place images; images are detected and analyzed
Inform user first:
Images help bring your site to life. Recommended:
- Logo (square, any size)
- Hero image (wide, for the homepage header)
- Supporting images (for features, about, etc.)
If you have images ready, add them to the `assets/` folder now.
Use AskUserQuestion to ask this single question:
- Image Assets
- Question: "Do you have images ready to add?"
- Type: Single select with 3 options (no "Other" needed)
- Options:
- "Yes, I'll add them now (I'll wait 30 seconds)"
- "No, I'll add them later"
- "No, use color-based placeholders"
- Required: Yes
- Store as:
hasImages
Action based on response:
- "Yes, I'll add them now": Tell user "Add your image files to the
assets/ folder. I'll wait 30 seconds..." → Wait 30 seconds → Continue to image analysis
- "No, I'll add them later": Set
detectedImages = [] → Continue (site will work without images, user can add later)
- "No, use color-based placeholders": Set
detectedImages = [] and usePlaceholders = true → Create colorful gradient/shape placeholders in markup
Images are detected, analyzed for type/purpose, and ready to be integrated
Examine assets/ folder for image files (png, jpg, jpeg, svg, webp, gif):
For each image found, analyze:
-
File properties:
- Filename (hint about purpose: logo, hero, feature, icon, etc.)
- File type/extension
- File size
-
Image dimensions:
- Width × Height
- Aspect ratio (square ≈1:1, landscape >1:1, portrait <1:1)
- Estimated purpose based on size:
- Small (< 200px wide) → Logo or icon
- Medium (200-600px wide) → Feature image or avatar
- Large (> 600px wide) → Hero/banner image
-
Image purpose classification:
- Logo: Filename contains "logo", square aspect ratio, small size → Use as navbar logo
- Hero/Banner: Filename contains "hero" or "banner", landscape ratio, large width → Use in hero section
- Feature: Other images with medium-large size → Use in features section
- Icon/Small: Filename suggests it, very small → Store for future use
-
Store detected images:
detectedImages = [
{
filename: "logo.png",
path: "assets/logo.png",
width: 200,
height: 200,
type: "logo",
aspectRatio: "square"
},
{
filename: "hero.jpg",
path: "assets/hero.jpg",
width: 1200,
height: 600,
type: "hero",
aspectRatio: "landscape"
},
// ... etc
]
-
Report findings to user:
Found {count} images:
- {logoImage.filename} → Logo
- {heroImage.filename} → Hero background
- {otherImages} → Feature images
I'll integrate these into your homepage.
If no images found, set detectedImages = [] and continue with default placeholders.
Update brand.json with collected answers:
{
"name": "{brandName}",
"tagline": "{tagline}",
"colors": {
"primary": "{primaryColor}"
},
"typography": {
"fonts": {
"sans": "{mappedSansFont}",
"mono": "JetBrains Mono"
}
}
}
Where {mappedSansFont} is based on typographyStyle:
- "Modern" → "Inter"
- "Classic" → "Playfair Display" (and add serif to fonts)
- "Technical" → "JetBrains Mono" (and set as primary)
- "Use defaults" → "Inter"
brand.json is now fully configured with user's brand identity
Create pages/index.html with minimal structure, incorporating detected images:
<!DOCTYPE html>
<html lang="en">
<include-head
title="{brandName}"
description="{tagline}"
/>
<body>
<include-nav logo="{logoFromDetected || logoPath || '/assets/logo.svg'}" />
<site-hero variant="{toneVariant}" {heroImageStyle}>
{heroImageHTML}
<h1>{brandName}</h1>
<p>{tagline}</p>
<site-hero-actions>
<a href="#" class="btn btn-primary">{cta}</a>
</site-hero-actions>
</site-hero>
<site-features>
{featureCardsWithImagesHTML}
</site-features>
<site-cta variant="{toneVariant}">
<h2>Ready to get started?</h2>
<a href="#" class="btn btn-primary">{cta}</a>
</site-cta>
<include-footer siteName="{brandName}" />
</body>
</html>
Image Integration Logic:
-
Logo: If detectedImages contains logo type:
- Use
detectedImages[logo].path in <include-nav logo="...">
- Otherwise fall back to
logoPath or default
-
Hero Image: If detectedImages contains hero type:
- Use
detectedImages[hero].path as background image
- Set style:
style="background-image: url('{heroPath}')"
- Adjust hero variant based on image dimensions
-
Feature Images: If detectedImages contains feature/medium images:
- Create feature cards with embedded images:
<site-feature-card>
<img src="{featureImage.path}" alt="{featureName}" />
<h3>{feature}</h3>
<p>Feature description</p>
</site-feature-card>
- Otherwise create text-only cards with placeholders
-
Fallback: If no images detected, create text-only structure with color-based visual interest
Where {toneVariant} maps tone to visual style:
- "Professional" → "centered"
- "Friendly" → "colorful"
- "Technical" → "minimal"
- "Playful" → "bold"
- "Minimal" → "minimal"
pages/index.html created with branded homepage template
For each page in {additionalPages} array, create minimal template:
If "About" selected:
- Create
pages/about.html with: hero + content sections + site footer
If "Pricing" selected:
- Create
pages/pricing.html with: pricing table placeholder + features + CTA
If "Contact" selected:
- Create
pages/contact.html with: contact form placeholder + info sections
If "Blog" selected:
- Create
pages/blog.html with: blog post list placeholder + featured posts
If "Docs" selected:
- Create
pages/docs.html with: documentation structure (quick start, guides, reference)
All additional pages use:
- Same
<include-head>, <include-nav>, <include-footer>
- Brand name and colors from brand.json
- Minimal placeholder content ready to customize
All selected additional pages created with minimal templates
-
Run: npm run build
- Generates tokens from brand.json
- Compiles CSS (tokens + utilities + elements)
- Processes HTML includes and injects Google Fonts
- Outputs to
dist/
-
Verify build succeeded:
- Check for
dist/index.html (and any additional pages)
- Check for
dist/styles.css
- Report build status to user
Site successfully built and ready to preview
User has a customized, buildable site ready to develop
Output success message:
✅ Repository initialized successfully!
Your new site:
• Brand: {brandName}
• Tagline: {tagline}
• Primary color: {primaryColor}
• Pages: index.html {+ additionalPages.join(", ")}
Next steps:
1. Preview: npm run serve
2. Customize: Edit pages/index.html
3. Explore components: /recommend {sitePurpose}
4. Add content: Read CLAUDE.md for workflow
5. Need help? Check .claude/commands/ for available commands
Happy building! 🚀