# Auto Website Builder

> Auto Website Builder

- Skill: `aviskaar/auto-website-builder` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add aviskaar/auto-website-builder`
- Raw SKILL.md: https://api.skillmd.com/api/skills/aviskaar/auto-website-builder/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: aviskaar (https://skillmd.com/u/aviskaar)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/aviskaar/auto-website-builder

---


# Auto Website Builder

Produce a complete, investor-grade, high-converting website and brand identity for any product or company — end to end, no agency required.

---

## Phase 1 — Intake & Intelligence

### 1.1 Gather Core Context

Ask the user for the following. If answers are missing, infer from context and state assumptions explicitly.

| Question | Why It Matters |
|---|---|
| What does the product/solution do? (1–3 sentences) | Foundation for all messaging |
| Who is the primary buyer and end user? | ICP definition |
| What is the biggest pain it eliminates? | Hero headline |
| What are 3 direct or indirect competitors? | Differentiation matrix |
| What industry vertical? (SaaS, DevTools, HealthTech, FinTech, etc.) | Color palette, tone |
| Is this B2B, B2C, or developer-facing? | Copy register and CTA strategy |
| What stage? (Idea, MVP, Series A, Growth) | Social proof level needed |
| Any existing name, logo, or brand assets? | Preserve or replace |
| Primary goal of the site? (Leads, signups, downloads, hires, investors) | CTA hierarchy |

### 1.2 Competitor Intelligence

For each competitor identified:
- Identify their hero message, primary CTA, and positioning statement
- Note what they do well (do not copy — benchmark to exceed)
- Identify messaging gaps, underserved audiences, and visual weaknesses
- Produce a **Differentiation Matrix**: a table with rows = key value dimensions, columns = you vs. each competitor, cells = ✅ / ❌ / ⚠️

### 1.3 Define Three Audiences

For every website, write explicit profiles for:
1. **Buyer/Customer** — the person who signs the contract or credit card
2. **Investor** — what they need to see to believe in the TAM and team
3. **Talent** — what makes an engineer or designer want to work here

All three audiences will land on this site. Every section must serve at least one of them.

---

## Phase 2 — Brand Identity

### 2.1 Product & Company Naming

If no name exists, generate 5 name candidates using these criteria:

- **Memorable**: One or two syllables preferred; survives "say it in a loud room" test
- **Meaningful**: Evokes the product's core value or feeling — not the feature
- **Ownable**: .com available or acquirable; no trademark conflicts in the target vertical
- **Scalable**: Works as a company name if this becomes a platform, not just a product
- **Pronounceable globally**: No sounds that break in Mandarin, Hindi, Spanish, or Portuguese

For each name candidate produce:
- Rationale (2 sentences)
- Domain status check note (advise user to verify)
- Logo wordmark style suggestion (all-caps, lowercase, camelCase, stylized letter)

Recommend one name and justify the choice.

### 2.2 Logo Design Brief

Generate a complete logo design brief that a designer or AI image tool can execute:

```
LOGO BRIEF
Company: [Name]
Style: [Wordmark | Lettermark | Icon + Wordmark | Abstract mark]
Concept: [2-sentence description of the visual metaphor]
Primary mark: [Describe the icon/shape/symbol in precise geometric terms]
Wordmark font class: [Geometric sans | Humanist sans | Slab serif | Modern serif]
Font weight: [Light / Regular / Medium / Bold]
Color mode: Full color | Single color (white on dark, dark on white)
Clearspace: Minimum 1x height of the wordmark on all sides
Minimum size: 24px height for digital; 0.5 inch for print
Favicon: [Describe the simplified mark for 16×16 and 32×32]
Dark background variant: [Describe]
```

Also generate the actual SVG code for a clean, professional wordmark logo using:
- A geometric SVG path or shape as the icon mark
- The company name in a clean sans-serif font path or `<text>` element
- Primary brand color fill
- Proper viewBox and namespace

### 2.3 Color System

Select a color palette using industry standards (see `references/brand-system.md` for per-industry palettes).

Output the full design token set:

```css
:root {
  /* Primary — main brand color */
  --color-primary-900: #[hex];
  --color-primary-700: #[hex];
  --color-primary-500: #[hex];   /* default primary */
  --color-primary-300: #[hex];
  --color-primary-100: #[hex];

  /* Neutral */
  --color-gray-950: #[hex];      /* headings, body text on light */
  --color-gray-700: #[hex];
  --color-gray-400: #[hex];
  --color-gray-100: #[hex];
  --color-gray-50:  #[hex];      /* page background */

  /* Accent — for CTAs, highlights */
  --color-accent:   #[hex];

  /* Semantic */
  --color-success:  #[hex];
  --color-warning:  #[hex];
  --color-error:    #[hex];
}
```

Verify WCAG AA contrast (4.5:1) for all text/background combinations. State the contrast ratios.

### 2.4 Typography System

```
HEADINGS: [Font name] — Bold/700 — tracking: -0.02em
SUBHEADINGS: [Font name] — SemiBold/600
BODY: [Font name] — Regular/400 — line-height: 1.6
MONO/CODE: [Font name] — for technical products
SCALE: 12 / 14 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80px
```

---

## Phase 3 — Messaging & Positioning

### 3.1 Positioning Statement

Use the Geoffrey Moore framework:
> For [target customer] who [has this pain], [Product Name] is a [category] that [key benefit]. Unlike [primary competitor], we [key differentiator].

### 3.2 Tagline Options

Generate 5 taglines. Each must:
- Be ≤ 8 words
- Communicate the transformation, not the feature
- Work as a billboard headline with zero context

Select one primary tagline and two alternates for A/B testing.

### 3.3 Hero Copy Formula

```
HEADLINE:    [Outcome the customer gets — active verb, concrete noun]
SUBHEADLINE: [How it works + who it's for + why now — 1 sentence, ≤ 20 words]
CTA PRIMARY: [Action verb + value object] — e.g., "Start free", "See it live", "Get early access"
CTA SECONDARY: [Lower-commitment option] — e.g., "Watch 2-min demo", "Read the docs"
SOCIAL PROOF HOOK: [Number] [teams/companies/users] [verb] with [Product] — or logos strip
```

### 3.4 Metrics & Numbers

Extract or estimate credible numbers to display. Categories:
- **Performance metrics**: speed, accuracy, uptime, throughput
- **Customer metrics**: NPS, retention, expansion revenue, time-to-value
- **Scale metrics**: users, requests/day, data processed, countries
- **Efficiency metrics**: cost reduction %, time saved per user, FTE equivalent

If the product is pre-launch, use beta program numbers or benchmark-based claims (clearly labeled).

### 3.5 Feature → Benefit Translation

For each key feature, produce the benefit translation:
| Feature (what it does) | Benefit (what the user gets) | Proof point |
|---|---|---|

Never lead with features on the homepage. Lead with benefits. Features belong on the product page.

---

## Phase 4 — Site Architecture

### 4.1 Full Sitemap

Generate a complete sitemap:

```
/ (Home / Landing)
/product          → Features deep-dive + architecture diagram
/pricing          → Full tier breakdown, ROI calculator, add-ons
/implementation   → Step-by-step onboarding and setup guide
/architecture     → System architecture, data flow, security model
/customers        → Case studies & logos
/about            → Mission, team, investors
/blog             → Thought leadership
  /blog/[slug]
/resources        → Whitepapers, research, guides
  /resources/[slug]  (gated downloads)
/events           → Webinars, conferences, community
/careers          → Open roles, culture, values
/docs             → Technical documentation (link or embed)
/github           → OSS projects, contribution guide
/contact          → Sales, partnerships, press
/privacy          → Privacy policy
/terms            → Terms of service
/security         → Security posture (for B2B)
/status           → System status (link to status page)
/sitemap.xml      → Auto-generated
/robots.txt
```

### 4.2 Navigation Structure

```
PRIMARY NAV (top):
  [Logo]  Product  Customers  Pricing  Resources  Blog  [Login]  [Get Started →]

FOOTER (4-column):
  Col 1: Product links
  Col 2: Company links
  Col 3: Resources links
  Col 4: Legal + Social icons
```

---

## Phase 5 — Page-by-Page Content Generation

For each page below, generate complete content. See `references/page-blueprints.md` for detailed section specs.

### 5.1 Homepage — Generate All Sections In Order

1. **Navigation bar** — logo, nav links, CTA button
2. **Hero** — headline, subheadline, dual CTA, hero visual (describe or generate SVG/illustration spec), social proof strip (5–8 customer logos)
3. **Explainer video embed** — 60–90 second video (or animated demo) placed directly below the hero fold; include play-button overlay on a branded thumbnail; link to `/watch` or use inline YouTube/Vimeo embed. Generate the full video script using Phase 5.14.
4. **Problem section** — 3 pain points as headlines with 1-line elaborations; use icons
5. **Solution overview** — product screenshot or diagram + 3 key differentiators
6. **How it works / Implementation steps** — 3–4 step visual flow (numbered, icon-forward); link to full `/implementation` page
7. **Feature highlights** — 3–6 feature blocks (icon + headline + 2-line benefit copy)
8. **Product architecture preview** — simplified architecture diagram (SVG) showing major system components; "See full architecture →" links to `/architecture`
9. **Metrics bar** — 3–4 impressive numbers with labels (animate on scroll)
10. **Case study teaser** — 1 featured customer story with logo, quote, and outcome metric
11. **Architecture / Trust section** — SOC 2, GDPR, enterprise logos, security badge
12. **Pricing preview** — 3-tier card strip (truncated); primary tier highlighted; link to `/pricing` for full detail
13. **Testimonials** — 3–6 quotes with name, title, company, photo placeholder
14. **Integration logos** — ecosystem/compatibility strip (tools they already use)
15. **Investor logos** — if applicable; "Backed by" strip
16. **Final CTA banner** — bold headline + primary CTA + optional secondary CTA
17. **Footer** — full 4-column footer with all links and social icons

### 5.2 Product / Features Page

- Feature grid or tabbed layout
- For each feature: hero image/screenshot, headline, 2-para description, benefit callout, link to docs
- Comparison table vs. competitors (feature-by-feature)
- **Architecture section**: embed the simplified system diagram from Phase 5.15; "See full architecture →" link to `/architecture`
- CTA to `/implementation` — "Ready to see how it fits your stack?"

### 5.3 Pricing Page

Generate a complete, conversion-optimized pricing page. See `references/page-blueprints.md` § Pricing Page Deep-Dive for full specs.

- **Pricing model selection**: choose the right model for the product type (per-seat, usage-based, flat-rate, tiered usage, or hybrid) and justify the choice
- **3-tier card layout**: Starter / Pro / Enterprise (or equivalent) with annual/monthly toggle; default to annual to anchor on savings
- **Per-tier feature matrix**: full breakdown of what each tier includes — limits, capabilities, support level, SLA, integrations
- **Add-ons and overages**: explicitly spec what happens at limit boundaries and what optional add-ons exist
- **ROI calculator section**: interactive calculator showing "If you save X hours per week at $Y/hr, payback in Z weeks"
- **Upgrade path narrative**: make it obvious why customers move from Starter → Pro → Enterprise
- **Feature comparison table**: exhaustive row-by-row across all tiers
- **FAQ section** (8–10 questions)
- **Enterprise CTA strip**: custom quote, procurement support, security review, SLA negotiation
- **Trust signals**: money-back guarantee, no credit card required, cancel anytime, SOC 2 badge

### 5.4 Customers / Case Studies Page

- Logos grid (hero section)
- 3 featured case studies: problem → solution → result (with metrics)
- Testimonial carousel
- Industry filter tabs

### 5.5 About Page

- Mission statement (1 compelling paragraph, present tense)
- Founding story (3–5 paragraphs: origin, problem, why us, what's next)
- Team grid (name, title, 2-line bio, photo placeholder, LinkedIn icon)
- Investor/backer logos
- Press mentions strip

### 5.6 Blog Page

- Featured article hero
- Category filters
- Article card grid (thumbnail + category tag + title + 2-line excerpt + author + date + read time)
- Newsletter CTA sidebar/banner

### 5.7 Resources / Downloads Page

- Gated content cards (whitepaper, research report, guide)
- Each card: cover image placeholder, title, description, "Download" button → lead capture form
- Ungated resources: docs links, video tutorials, API reference

### 5.8 Events Page

- Upcoming events (webinar, conference, community meetup): date, title, description, registration CTA
- Past events with recordings/slides download

### 5.9 Careers Page

- Culture statement + values (3–5 values, each with icon + headline + 2-line description)
- Benefits grid (compensation, equity, remote policy, health, learning budget)
- Open roles list with department filter
- "Don't see your role?" invite CTA

### 5.10 Contact Page

- Split layout: form left, contact info right
- Form fields: Name, Work Email, Company, Role, Message, Intent (Sales / Press / Partnership / Support)
- Sales email, support email, address, social links
- Map embed placeholder

### 5.11 Privacy Policy

Generate a complete, GDPR + CCPA compliant privacy policy covering:
- Data collected (explicit list: name, email, usage data, cookies, IP)
- How data is used (service delivery, analytics, marketing — separately)
- Third-party processors (list: Stripe, Intercom, Segment, AWS, etc.)
- Data retention periods
- User rights (access, correction, deletion, portability, opt-out)
- Cookie policy inline
- Contact for DPO/privacy requests
- Last updated date field

### 5.12 Terms of Service

Generate complete ToS covering:
- Acceptance of terms
- License grant (SaaS subscription, non-exclusive, non-transferable)
- Acceptable use policy (explicit prohibitions)
- Payment terms and refund policy
- IP ownership (customer data stays customer's; product IP stays company's)
- Warranty disclaimer
- Limitation of liability (cap at 12 months of fees paid)
- Governing law and dispute resolution
- Termination conditions
- Changes to terms

### 5.13 Implementation Steps Page (`/implementation`)

A dedicated page showing exactly how to go from zero to value. See `references/page-blueprints.md` § Implementation Steps Page Blueprint for full specs.

Structure:
1. **Page hero** — "Up and running in [timeframe]" headline; estimated time to first value
2. **Prerequisites checklist** — what the user needs before starting (accounts, API keys, dependencies)
3. **Step-by-step guide** — numbered implementation phases with code snippets, screenshots, and expected outputs at each step
4. **Integration recipes** — for the top 5 integrations: copy-paste setup instructions
5. **Validation checkpoints** — "You know it's working when you see..." — clear success signals at each phase
6. **Troubleshooting section** — top 5 setup errors and their solutions
7. **Next steps** — links to docs, community, office hours

Generate all code snippets for the actual product. Include copy-to-clipboard UI for each snippet.

### 5.14 Explainer Video Script & Spec

Generate a complete production-ready video package. See `references/page-blueprints.md` § Explainer Video Blueprint for full specs.

Produce:
1. **60–90 second voiceover script** — structured as: Hook (0–5s) → Problem (5–20s) → Solution (20–50s) → How it works (50–75s) → CTA (75–90s)
2. **Scene-by-scene storyboard** — for each scene: screen content, voiceover line, motion direction, duration
3. **Thumbnail design spec** — branded still frame for the video preview card (1280×720px)
4. **Embed component code** — Next.js component with lazy-loading, branded play button overlay, and thumbnail
5. **Video CTA overlay** — end-card design: product URL, primary CTA button, secondary link

Place the video:
- Homepage: below the hero, above the problem section
- Product page: as the hero element replacing a static screenshot
- Resources page: as a featured item in the ungated section

### 5.15 Product Architecture Page (`/architecture`)

A dedicated technical deep-dive for engineers, architects, and security reviewers. See `references/page-blueprints.md` § Product Architecture Page Blueprint for full specs.

Produce:
1. **System architecture diagram** — SVG flowchart covering all major components, data flows, and external integrations
2. **Component inventory** — table of every service/module: name, responsibility, tech stack, scalability notes
3. **Data flow walkthrough** — step-by-step numbered narrative of a request through the system
4. **Deployment architecture** — how it deploys (cloud-native, self-hosted, hybrid); regions and availability zones
5. **Security architecture section** — auth model, encryption at rest and in transit, network isolation, secrets management
6. **Scalability and SLA** — how the system scales under load; what the limits are; failover behavior
7. **Integration architecture** — how external systems connect (webhooks, APIs, SDKs, event streams)

---

## Phase 6 — Code Generation

### 6.1 Tech Stack Selection

Default stack (production-ready, fast):
- **Framework**: Next.js 14+ (App Router) with TypeScript
- **Styling**: Tailwind CSS v3+ with the generated design tokens
- **Animations**: Framer Motion for scroll reveals and hero entrance
- **Icons**: Lucide React
- **Fonts**: Google Fonts (specify exact names from Phase 2.4)
- **Forms**: React Hook Form + Zod validation
- **Analytics**: Plausible or Vercel Analytics (privacy-first default)

If user prefers plain HTML/CSS/JS, generate vanilla files with no build step required.

### 6.2 File Structure

```
[company-name]/
├── app/
│   ├── layout.tsx                ← root layout, fonts, meta
│   ├── page.tsx                  ← homepage
│   ├── product/page.tsx
│   ├── pricing/page.tsx
│   ├── implementation/page.tsx   ← step-by-step onboarding
│   ├── architecture/page.tsx     ← system architecture deep-dive
│   ├── customers/page.tsx
│   ├── about/page.tsx
│   ├── blog/page.tsx
│   ├── blog/[slug]/page.tsx
│   ├── resources/page.tsx
│   ├── events/page.tsx
│   ├── careers/page.tsx
│   ├── contact/page.tsx
│   ├── privacy/page.tsx
│   └── terms/page.tsx
├── components/
│   ├── ui/                       ← Button, Card, Badge, Input, etc.
│   ├── layout/                   ← Navbar, Footer
│   ├── sections/                 ← Hero, Features, Metrics, Testimonials, etc.
│   ├── ExplainerVideo.tsx        ← lazy video embed with branded overlay
│   ├── ArchitectureDiagram.tsx   ← SVG system diagram component
│   ├── PricingTiers.tsx          ← tier cards + toggle + ROI calculator
│   ├── ImplementationSteps.tsx   ← numbered steps with code snippets
│   └── Logo.tsx                  ← SVG logo component
├── lib/
│   └── tokens.ts                 ← Design tokens as JS constants
├── public/
│   ├── favicon.ico
│   ├── og-image.png              ← Open Graph image spec
│   └── video-thumbnail.png       ← Explainer video thumbnail (1280×720)
├── tailwind.config.ts            ← Extend with brand tokens
└── next.config.ts
```

Generate each file with complete, working code — no placeholders, no TODOs.

### 6.3 SEO & Meta

For every page generate:
```tsx
export const metadata: Metadata = {
  title: '[Page Title] | [Company Name]',
  description: '[150-char meta description with primary keyword]',
  openGraph: { title, description, image: '/og-image.png', type: 'website' },
  twitter: { card: 'summary_large_image', ... },
  alternates: { canonical: 'https://[domain]/[path]' },
}
```

Also generate:
- `public/robots.txt`
- `app/sitemap.ts` (dynamic sitemap generator)
- Schema.org JSON-LD for Organization, Product, and FAQPage

### 6.4 Performance Requirements

All pages must score ≥ 90 on Lighthouse. Enforce:
- Images: `next/image` with explicit width/height and `loading="lazy"`
- Fonts: `next/font` with `display: swap`
- No render-blocking scripts
- CSS: only Tailwind purged classes, no unused styles

---

## Phase 7 — Launch Checklist

Produce a launch-ready checklist:

**Brand**
- [ ] Logo SVG exported in all variants (full color, white, black, favicon)
- [ ] Design tokens documented in Figma or CSS file
- [ ] Brand guidelines PDF generated

**Content**
- [ ] All pages reviewed for benefit-first copy (no feature-only sections)
- [ ] All numbers verified or clearly labeled as estimates
- [ ] Legal pages reviewed by user (not legal advice; advise user to consult counsel)
- [ ] Blog seeded with 3+ articles before launch
- [ ] Explainer video produced, uploaded to YouTube/Vimeo, and embedded on homepage + product page
- [ ] Implementation steps page tested end-to-end (all code snippets verified)
- [ ] Architecture diagrams reviewed by an engineer for technical accuracy

**Technical**
- [ ] Domain purchased and DNS configured
- [ ] SSL/TLS certificate active
- [ ] Analytics installed and verified
- [ ] Forms tested end-to-end (submissions reach inbox)
- [ ] 404 page created
- [ ] Sitemap submitted to Google Search Console
- [ ] Social meta tags validated with opengraph.xyz

**Conversion**
- [ ] Heatmap tool installed (Hotjar or Microsoft Clarity)
- [ ] A/B test configured for hero headline (2 variants minimum)
- [ ] Email capture connected to CRM or mailing list
- [ ] Exit-intent popup configured (optional)

---

## Output Format

Deliver all phases in sequence. Use this order:

1. **Discovery Summary** — ICP, competitor matrix, audience profiles
2. **Brand Book** — name recommendation, logo brief, SVG logo code, color tokens, typography
3. **Messaging Document** — positioning statement, tagline, hero copy, metrics, benefit table
4. **Sitemap** — full URL tree with page descriptions
5. **Content Document** — all page copy, section by section (including implementation steps, architecture narrative, pricing tiers, explainer video script)
6. **Codebase** — complete Next.js project files, one file per code block (including `ExplainerVideo.tsx`, `ArchitectureDiagram.tsx`, `PricingTiers.tsx`, `ImplementationSteps.tsx`)
7. **Launch Checklist** — ready-to-action markdown checklist

If the output is very long, deliver phases as separate responses and ask the user which phase to expand first.