create-website

Files (2)

• SKILL.md
• artifact-templates.md · references/

SKILL.md (first lines)

# Create a Website

A blank page becomes a live, high-converting website through ten phases run in one dependency-respecting order: message, then design, then conversion, then a brutal review. This journey is interactive — the agent asks before every decision and never designs before the message is settled — and resumable, because every decision and artifact lives in the project's `docs/` folder. You drive the phases; the constituent skills carry the method.

## Core Principle

**Message before design, design before conversion — in that order; looks-fine is the floor, not the goal.** A visitor decides in five seconds whether to stay, and that decision rides on whether they instantly understand what you do and why it matters to *them* — so clarity comes first and design serves it. This skill sequences the phases, asks the questions, and records the decisions; the constituent skills carry the frameworks. Invoke them rather than improvising their method.

## Journey Map

| Phase | Skill | Question it answers | Artifact |
|---|---|---|---|
| 1 | one-page-marketing | Who is this for, and what is the site's one job? | Creates docs/MARKETING.md; extends docs/CUSTOMER.md |
| 2 | storybrand-messaging | What do we say, with the customer as hero? | Creates docs/POSITIONING.md, docs/WEBSITE.md |
| 3 | made-to-stick | How do we make the message memorable? | Extends docs/POSITIONING.md, docs/WEBSITE.md |
| 4 | top-design | What makes this page unforgettable to look at? | Creates docs/DESIGN.md |
| 5 | web-typography | Is the type readable as well as dramatic? | Extends docs/DESIGN.md |
| 6 | refactoring-ui | Is the design consistent and systematic? | Extends docs/DESIGN.md |
| 7 | ux-heuristics | Can anyone use it without thinking? | Extends docs/DESIGN.md |
| 8 | cro-methodology | Why don't visitors convert, and what answers them? | Extends docs/WEBSITE.md, docs/EXPERIMENTS.md |
| 9 | scorecard-marketing | How do we capture the not-ready-to-buy majority? | Extends docs/WEBSITE.md, docs/MARKETING.md |
| 10 | steve-jobs-design-review | Is it insanely great, or not done? | Extends docs/WEBSITE.md — GATE |

## Operating Rules

1. **Resume first.** Before anything else, read `docs/CREATE-WEBSITE-PLAN.md` and every artifact in the Journey Map. If the tracker exists, summarize the journey state in 3-5 lines and ask which phase to enter. Done when the user has confirmed an entry point. A journey with a tracker is resumed, never restarted.
2. **Intake on first run only.** No tracker: run the Intake below, then create `docs/CREATE-WEBSITE-PLAN.md` with every phase statused `pending | in-progress | awaiting-evidence | done | deferred: reason | skipped: reason`. Done when the tracker exists and the user has confirmed the phase plan.
3. **Phase entry.** Announce: what the phase does, the decision it forces, the artifact it produces, rough effort. Offer proceed / skip / defer — phases marked GATE may be deferred, never skipped. Mark the phase `in-progress` on proceed. Done when the user chose.
4. **Skill invocation and fallback.** Load the phase's skill and use it: each phase's Invoke line names the skill by slug — use that skill to run the phase. If it is not available, offer: `npx skills add wondelai/skills/<slug> --global`. If the user declines, run the phase from its Brief — the minimum viable method. State which mode you are in.
5. **In-phase decisions.** Ask every question under "Decide with the user" — with concrete options and your recommendation. Record the choice in the tracker's Key Decisions. A decision made silently is a defect.
6. **Phase exit.** Present the draft artifact content for sign-off before writing. On approval: write or extend the docs/ files, update the tracker (status, Key Decisions, Next Actions). Done when the files are written and the phase row shows `done`.
7. **Artifact discipline.** Read before writing; create a file only if missing, otherwise extend — add or update your sections, preserve everyone else's. Files are UPPERCASE in `docs/`. Every recommendation lands as a checkbox or a table row with owner and priority. See [references/artifact-templates.md](references/artifact-templates.md) when creating a docs/ file for the first time — create it from the full skeleton (all section headings), then fill the sections your phase names.
8. **Every scarcity claim, testimonial, and guarantee on the site must be true.** When a persuasion tactic needs inventing evidence, replace it with a tactic that uses evidence you have.

## Intake

Ask these before creating the tracker:

1. What is the product or service, and who is it for? (Gates Phase 1's niche and avatar, and every word of the message.)
2. Do `docs/POSITIONING.md` or `docs/CUSTOMER.md` already exist from a create-business run? (If yes, lighten Phases 1-2 and reuse them; if positioning is thin, add the obviously-awesome optional phase.)
3. What is the single primary conversion goal — start a trial, book a demo, purchase, or take a quiz? (Gates every CTA decision in Phases 1, 8, 9.)
4. Full multi-page site or a single landing page? (Gates sitemap scope and whether Phases 8-9 apply.)
5. What is the tech stack and where does the code live? (So design and copy land in real files, not a hand-off doc.)
6. What proof assets exist today — testimonials, results, logos, guarantees? (Gates the Phase 8 persuasion audit and Rule 8.)
7. How much does craft matter — competing on design, or a functional site? (Gates whether Phases 4-5 run fully or lightly.)

Skip heuristics: skip Phase 1 when a prior run already fixed the niche, avatar, and USP; run Phases 4-5 lightly for an internal or throwaway page where craft does not sell (never skip refactoring-ui); skip Phase 9 when one direct CTA suffices and there is no nurture motion; skip Phase 3 only under a brutal timeline — and warn that clear-but-forgettable copy evaporates. Then create the tracker from the template and confirm the plan.

Done when `docs/CREATE-WEBSITE-PLAN.md` exists with every phase statused and the user has confirmed the plan.

## Phases

### Phase 1 — Frame the strategy and pick one niche (one-page-marketing)

**Purpose:** Decide who the site is for, the USP, and the single primary conversion goal before any page exists.

**Brief (fallback):** PVP Index — score candidate niches on Personal fulfillment, Value to the market, and Profitability, then pick *one*. "Speak to everyone, speak to no one." Write a USP that passes the swap test: if a competitor's name fits your tagline, it is too generic. Map the Before and During squares to concrete pages, each with one job.

**Invoke:** Use the `one-page-marketing` skill with the product and target from intake. Ask for (a) PVP scores for 2-3 niches, (b) a one-paragraph avatar, (c) a swap-test USP, (d) the Before/During squares mapped to homepage, landing, and lead-capture pages.

**Decide with the user:** Which niche to dominate (recommend the highest PVP score)? What is the single primary conversion goal — trial, demo, purchase, or quiz lead?

**Artifact:** Create docs/MARKETING.md with `## Target Market & Avatar` (niche, avatar, USP, primary goal) and `## Before / During / After Grid`. Extend docs/CUSTOMER.md with `## Segments & Best-Fit Customer`. Update the tracker.

**Done when:** MARKETING.md names one niche, a swap-test USP, and one primary goal; CUSTOMER.md records the best-fit segment; the user confirmed the niche and goal.

### Phase 2 — Write the message with StoryBrand (storybrand-messaging)

**Purpose:** Write the words the visitor judges in five seconds — customer as hero, you as guide.

**Brief (fallback):** SB7 — a Character who wants something, a Problem (external/internal/philosophical), a Guide with empathy and authority, a Plan, a call to Action, the stakes of Failure, a vivid Success. Name the internal problem (how it *feels*), not just the external one. One-liner: "We help [character] who struggle with [problem] to [solution] so they can [result]."

**Invoke:** Use the `storybrand-messaging` skill with the avatar and USP from MARKETING.md. Ask for a full BrandScript, homepage copy following the StoryBrand wireframe (header, stakes, value, guide, plan, CTA), and five one-liner variations ranked by repeatability.

**Decide with the user:** Which one-liner is most repeatable after a single hearing? Confirm the customer, not the brand, is the hero — no opening "We…".

**Artifact:** Create docs/POSITIONING.md with `## Brand Script (StoryBrand)`, `## One-Liner`, `## Key Messages`. Create docs/WEBSITE.md with `## Sitemap` and `## Page Briefs` (wireframe-derived copy blocks). Update the tracker.

**Done when:** POSITIONING.md holds a complete BrandScript and a locked one-liner; WEBSITE.md has a sitemap and a homepage page brief; the user approved the one-liner.

### Phase 3 — Make the message stick (made-to-stick)

**Purpose:** Turn clear copy into memorable copy that survives the closed tab and gets repeated.

**Brief (fallback):** SUCCESs — Simple, Unexpected, Concrete, Credible, Emotional, Story. Fight the Curse of Knowledge. Highest leverage is Concrete: replace every abstraction with a picture ("report generation from 4 hours to 10 minutes"). Add one unexpected hook, one Sinatra-test proof, and one named-customer story.

**Invoke:** Use the `made-to-stick` skill with the copy in WEBSITE.md `## Page Briefs` and the messages in POSITIONING.md. Ask for a SUCCESs score, concrete rewrites of every abstract benefit, one unexpected hero hook, and a short customer story.

**Decide with the user:** Approve the sticky rewrites and pick the hero hook. Which numbers and claims are true and citable (this feeds Rule 8)?

**Artifact:** Extend docs/POSITIONING.md `## Key Messages` (sticky versions) and docs/WEBSITE.md `## Page Briefs` (concrete copy). Update the tracker.

**Done when:** every abstract benefit is a concrete outcome with a real, true number, one unexpected hook and one customer story exist, and the copy is signed off.

### Phase 4 — Design the signature moment (top-design)

**Purpose:** Make the page look agency-built, not template-built — starting from the one screenshot-worthy moment.

**Brief (fallback):** Every pixel intentional. Start with the signature moment (usually the hero), not the header: dramatic scale (min 10:1 display-to-body), an asymmetric composition, a choreographed load with ~80ms staggered word reveals. Custom cubic-beziers (expo-out `0.16,1,0.3,1`), animate only `transform`/`opacity`, warm off-blacks (`#0a0a0a`) not pure black. Custom cursor only if the user opts in.

**Invoke:** Use the `top-design` skill with POSITIONING.md and the WEBSITE.md page briefs. Ask for the signature hero design, a custom color system (no AI purple-to-blue gradient), and a scored audit across typography, composition, motion, color, and details.

**Decide with the user:** What is the signature moment worth screenshotting? Approve the color system. Custom cursor — yes, or native (recommend native unless craft is the product)?

**Artifact:** Create docs/DESIGN.md with `## Design Direction` (signature moment, personality, references). Update the tracker.

**Done when:** DESIGN.md names the signature moment and color system, the top-design audit scores are recorded, and the user approved the direction.

### Phase 5 — Choose and tune the type (web-typography)

**Purpose:** Make the type readable as well as dramatic — the discipline behind the drama.

**Brief (fallback):** Clear-goblet principle — type serves content. "Type for a moment" (headlines) versus "type to live with" (body). Three measures beat typeface choice: 16-18px body, 45-75ch measure (66 optimal, `max-width: 65ch`), line height 1.5-1.7 body / 1.1-1.25 headings. One to two families. Under 200KB payload, WOFF2, variable fonts, `clamp()` fluid scale, preload + `font-display: swap`.

**Invoke:** Use the `web-typography` skill with DESIGN.md `## Design Direction`. Ask for a display+body pairing, full CSS (clamp scale, per-context line heights, 65ch measure), and a font-loading plan under 200KB with zero layout shift.

**Decide with the user:** Approve the pairing; confirm the performance budget (recommend a single variable font to cut the file count).

**Artifact:** Extend docs/DESIGN.md `## Typography` (typefaces, scale, measure, line height, loading strategy). Update the tracker.

From wondelai/skills, MIT.

More from wondelai/skills