Deliverables
Create at project root before coding:
plan.md — Strategy + design system (Steps 1–3)content.md — All copy: headlines, body, CTAs, microcopy
Reference both during implementation.
Step 1: Discovery
Ask before designing:
- Goal: Primary purpose of the site?
- Audience: Who uses it? What do they need?
- Action: What should visitors do?
Step 2: Content Strategy
Vision
"For [users] who [need], [product] offers [value] — [differentiator]."
Personas (2–4)
| Archetype |
Motivation |
Pain Points |
Site Behavior |
Voice
- Tone (friendly/authoritative/playful)
- Language rules (formal vs casual)
- Words to use/avoid
Content Model
Map sections — strategy only, not layout or visuals:
| Section |
Purpose |
Content Type |
Priority |
Principles: Write summaries (no truncation) · Content variants (S/M/L) · Max 5 nav items · Same content on all devices
Step 3: Design System
Tokens
- Colors: primary, secondary, accent, text, background
- Typography: heading/body fonts, sizes, line-heights
- Spacing: 4, 8, 16, 24, 32, 48, 64px
- Effects: shadows/elevation if needed
Aesthetic
- 3–4 pillars (e.g., "minimal, warm, playful")
- Icon/image style, recurring motifs
Principles
- Consistency across components
- Maximize signal, minimize chrome
- No dark patterns
- Content-based grids (not 12-column)
Step 4: Technical Setup
Stack: Bun + Nuxt + Tailwind
project/
├── plan.md
├── content.md
└── src/
├── nuxt.config.ts
├── app/pages/index.vue
├── components/
│ ├── base/ # Buttons, typography
│ ├── layout/ # Header, footer, grid
│ └── section/ # Hero, features
├── assets/css/
└── public/images/
Setup:
- Prefer
bun when installing dependencies.
- Use
bunx nuxi@latest init with --template minimal --no-modules --packageManager bun --gitInit --force for non-interactive setup
- Add modules separately with
bunx nuxi@latest module add
- Run commands from
src/
Auto-import: components/section/Hero.vue → <SectionHero />
Step 5: Implementation
Accessibility + SEO
- Semantic HTML (
nav, main, article)
- Alt text, keyboard nav, color contrast
- One
h1, logical heading hierarchy
- Meta descriptions, structured data
Progressive Enhancement
HTML (works alone) → CSS (style) → JS (enhance) → Feature detection
Anti-Patterns
Avoid: carousels · large background images · hover-only info · autoplay media · pagination over scroll · text as images · device detection · JS-dependent core content
1---2name: website3description: A content-first, mobile-first methodology for creating modern websites. Use this prompt when starting any new website project.4---56## Deliverables78Create at project root before coding:9101. **`plan.md`** — Strategy + design system (Steps 1–3)112. **`content.md`** — All copy: headlines, body, CTAs, microcopy1213Reference both during implementation.1415---1617## Step 1: Discovery1819Ask before designing:20211. **Goal**: Primary purpose of the site?222. **Audience**: Who uses it? What do they need?233. **Action**: What should visitors do?2425---2627## Step 2: Content Strategy2829### Vision3031_"For [users] who [need], [product] offers [value] — [differentiator]."_3233### Personas (2–4)3435| Archetype | Motivation | Pain Points | Site Behavior |36| --------- | ---------- | ----------- | ------------- |3738### Voice3940- Tone (friendly/authoritative/playful)41- Language rules (formal vs casual)42- Words to use/avoid4344### Content Model4546Map sections — strategy only, not layout or visuals:4748| Section | Purpose | Content Type | Priority |49| ------- | ------- | ------------ | -------- |5051**Principles**: Write summaries (no truncation) · Content variants (S/M/L) · Max 5 nav items · Same content on all devices5253---5455## Step 3: Design System5657### Tokens5859- **Colors**: primary, secondary, accent, text, background60- **Typography**: heading/body fonts, sizes, line-heights61- **Spacing**: 4, 8, 16, 24, 32, 48, 64px62- **Effects**: shadows/elevation if needed6364### Aesthetic6566- 3–4 pillars (e.g., "minimal, warm, playful")67- Icon/image style, recurring motifs6869### Principles7071- Consistency across components72- Maximize signal, minimize chrome73- No dark patterns74- Content-based grids (not 12-column)7576---7778## Step 4: Technical Setup7980**Stack**: Bun + Nuxt + Tailwind8182```83project/84├── plan.md85├── content.md86└── src/87 ├── nuxt.config.ts88 ├── app/pages/index.vue89 ├── components/90 │ ├── base/ # Buttons, typography91 │ ├── layout/ # Header, footer, grid92 │ └── section/ # Hero, features93 ├── assets/css/94 └── public/images/95```9697**Setup**:9899- Prefer `bun` when installing dependencies.100- Use `bunx nuxi@latest init` with `--template minimal --no-modules --packageManager bun --gitInit --force` for non-interactive setup101- Add modules separately with `bunx nuxi@latest module add`102- Run commands from `src/`103104**Auto-import**: `components/section/Hero.vue` → `<SectionHero />`105106---107108## Step 5: Implementation109110### Accessibility + SEO111112- Semantic HTML (`nav`, `main`, `article`)113- Alt text, keyboard nav, color contrast114- One `h1`, logical heading hierarchy115- Meta descriptions, structured data116117### Progressive Enhancement118119HTML (works alone) → CSS (style) → JS (enhance) → Feature detection120121---122123## Anti-Patterns124125Avoid: carousels · large background images · hover-only info · autoplay media · pagination over scroll · text as images · device detection · JS-dependent core content
razbakov