Create Website

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

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 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.

Done when: DESIGN.md ## Typography specifies the pairing, scale, measures, and a sub-200KB loading strategy, and the user approved the pairing.