How to Create a New Website with AI Skills

You are about to build a brand-new website, and the blank page is the most expensive thing in your business right now. Every day it does not exist is a day prospects find a competitor instead. So you open your agent, type “build me a landing page for my SaaS,” and out comes something that looks fine — a hero, three feature cards, a pricing table, a footer. It compiles. It is responsive. And it converts almost nobody, because “looks fine” is the floor, not the goal.

The reason most first websites fail is not bad code. It is that they are built in the wrong order. Founders start with the design — colors, fonts, a hero image — and bolt copy on at the end as an afterthought. But a visitor decides whether to stay in about five seconds, and that decision is driven almost entirely by whether they instantly understand what you do and why it matters to them. Beautiful design wrapped around a confusing message is a gorgeous building with no front door. The clarity has to come first.

This guide gives you the correct order. You will start with the message — who the customer is, what they want, and what you do for them — using narrative structure proven across ten thousand brands. Then you will layer on award-level design and typography so the page feels like it was built by a top agency, not a template marketplace. Then you will instrument it for conversion: handle objections, add proof, capture leads, and ship a lead-generating quiz. Finally, you will subject the whole thing to a brutal, Steve-Jobs-grade review before a single visitor sees it. Ten skills, one sequence, one website that converts from day one.

The workflow chains like this: StoryBrand Messaging writes the words, Made to Stick makes them memorable, Top Design and Web Typography make it stunning, Refactoring UI makes it consistent, UX Heuristics makes it usable, CRO Methodology and Scorecard Marketing make it convert, 1-Page Marketing Plan makes sure it sits inside a real strategy, and Steve Jobs Design Review holds the whole thing to an insanely-great bar. Work them in this order and each phase feeds the next.

A beautiful website with a confusing message is a gorgeous building with no front door.

Phase 0: Set the strategic frame before you build a page

Before you write a headline, answer a harder question: who is this website for, and where does it sit in the journey from stranger to customer? Skip this and you will build a gorgeous page that targets everyone and therefore no one. This is the job of the 1-Page Marketing Plan skill, drawn from Allan Dib’s framework of nine squares across three phases — Before (target, message, media), During (capture, nurture, convert), and After (experience, lifetime value, referrals).

For a brand-new website you care most about the Before and During phases. The skill’s core insight is the PVP Index: score your candidate niches on Personal fulfillment, Value to the marketplace, and Profitability, then pick one to dominate. “If you speak to everyone, you speak to no one.” A homepage aimed at “small businesses” is weak; a homepage aimed at “bootstrapped SaaS founders doing their first launch” is a magnet. The second deliverable here is your USP — the answer to “why should I buy from you rather than your nearest competitor?” Run the swap test the book teaches: if a competitor’s name fits your tagline, it is too generic and you are competing on price.

The other thing this phase decides is what the website is actually for. A site has one primary conversion goal — start a trial, book a demo, take the quiz — and everything else is secondary. Naming that goal now stops you from building five competing calls to action later. Map the Before and During squares so you know what the homepage must do, what a dedicated landing page must do, and where the lead magnet fits.

Phase 1: Write the message first with StoryBrand

Now the most important phase. Before design, before code, you write the words — because the words are what the visitor judges. The StoryBrand Messaging skill is built on Donald Miller’s SB7 framework, and its one non-negotiable idea is this: the customer is the hero, not your brand. You are the guide. Position yourself as the hero and you compete with your customer; position yourself as the guide — the Yoda to their Luke — and you serve them. Most first websites get this exactly backwards, opening with “We’re an innovative platform that leverages…” The visitor does not care about you yet. They care about their problem.

SB7 walks seven elements: a Character who wants something, who has a Problem (external, internal, and philosophical), who meets a Guide with empathy and authority, who gives them a Plan, calls them to Action, and helps them avoid Failure while ending in Success. The trick most people miss is the internal problem. Companies sell solutions to external problems (“your invoices are scattered”), but customers buy solutions to internal ones (“you feel disorganized and embarrassed when a client asks for a status”). Name how the problem feels and the visitor feels understood.

Start by building the complete BrandScript — it is the foundation every other piece of copy inherits from.

With the BrandScript done, derive the homepage copy from it, section by section. StoryBrand’s website wireframe is specific: a header with the one-liner and a direct CTA above the fold, a stakes section, a value proposition section, a guide section with empathy plus proof, a three-step plan, an explanatory paragraph, and a repeated CTA. The headline should state the customer’s desired outcome, not your category — “Fill your calendar without the back-and-forth” beats “Cloud-based scheduling software.”

Finally, lock your one-liner: “We help [character] who struggle with [problem] to [solution] so they can [result].” Test it the way the skill prescribes — can someone repeat it after hearing it once? That single sentence goes in your hero, your meta description, your email signature, and your elevator pitch. Consistency of message across every surface is what makes a small brand feel established.

Phase 2: Make the message stick with Made to Stick

StoryBrand makes your message clear. The Made to Stick skill, from Chip and Dan Heath, makes it memorable — and the two are different jobs. Clear copy is understood in the moment; sticky copy survives the close of the tab and gets repeated to a colleague. The framework is SUCCESs: Simple, Unexpected, Concrete, Credible, Emotional, and wrapped in a Story. The single greatest barrier it fights is the Curse of Knowledge — once you know your product deeply, you literally cannot imagine not knowing it, so you over-abstract and assume context the visitor lacks.

The highest-leverage move for a new website is Concrete. Abstraction kills memorability; “bicycle” sticks where “vehicle” evaporates. So everywhere your draft says something abstract, replace it with something you can picture. “Improve customer experience” becomes “Customers get their order in 30 minutes, still hot.” “Save time on reporting” becomes “Reduce report generation from 4 hours to 10 minutes.” Run your whole homepage through this filter.

Then find your Unexpected angle. Visitors pattern-match landing pages and tune them out; a counterintuitive claim or a curiosity gap snaps attention back. The skill’s example is GEICO’s “15 minutes could save you 15%” — specific and surprising at once. For credibility, lean on the internal kind the book prizes most: vivid details and the Sinatra Test — one reference so strong it answers every objection (“We handle Super Bowl traffic” proves scalability without a spec sheet). And remember the Mother Teresa principle for emotion: a single named customer’s story moves people that a statistic about ten thousand users never will.

Phase 3: Design the signature experience with Top Design

Your words are clear and sticky. Now make the page look like it belongs on Awwwards, not in a template gallery. The Top Design skill encodes the DNA of agencies like Locomotive, Studio Freight, and Active Theory, and its governing principle is that every pixel is intentional — nothing default, nothing accidental. The gap between a 7/10 site and a 10/10 site is not skill, it is intention: an 8 has good typography and smooth animation; a 10 has typography that makes you gasp and motion that tells a story.

The skill’s most important instruction is counterintuitive: do not start with the header. Start with the signature moment — the one thing people will screenshot and describe to a colleague. For a new brand that is usually the hero: viewport-filling display type at a dramatic scale (the skill wants a minimum 10:1 ratio between display and body, e.g. 180px over 14px), an asymmetric composition that breaks the centered-everything default, and a choreographed page-load reveal where hero words stagger in at roughly 80ms intervals rather than fading in as a block.

A few hard rules from the skill that separate professional from amateur, and that your agent should follow: ban the default easing curves (ease, ease-in, ease-out, linear) and use custom cubic-beziers like expo-out cubic-bezier(0.16, 1, 0.3, 1); never animate anything but transform and opacity so you hold 60fps; use warm off-blacks and off-whites (#0a0a0a, #fafaf9) instead of pure #000/#fff; and treat custom cursors as opt-in only — the skill is explicit that you must ask before replacing the native cursor, because misapplied cursors feel gimmicky. Scroll should feel weighted (Lenis or Locomotive Scroll), and parallax belongs only on decorative elements, never on text.

Phase 4: Choose and tune the type with Web Typography

Top Design treats typography as architecture; the Web Typography skill, from Jason Santa Maria’s On Web Typography, makes sure the type is also readable — the discipline behind the drama. Its core idea is the “clear goblet” principle: the best typography is invisible, keeping focus on the content (the wine), not the glass. There are two jobs for type — “type for a moment” (headlines, buttons, navigation, where personality and impact win) and “type to live with” (body and long-form, where comfort and endurance win) — and confusing the two is why so many sites have gorgeous headlines and unreadable paragraphs.

The skill insists that three measurements matter more than which typeface you pick: body size (16px minimum, prefer 18px because users hold phones farther than designers assume), line length (45–75 characters, 66 optimal, enforced with max-width: 65ch), and line height (1.5–1.7 for body, tighter 1.1–1.25 for headlines). Get those right and even a humble typeface reads beautifully; get them wrong and the finest font on earth fatigues the reader. For pairing, the rule is one to two families maximum with clear structural contrast (serif plus sans), or a single family with weight variation.

Performance is part of the craft here, not a separate concern. The skill sets a budget of under 200KB total font payload, prefers WOFF2, and notes that a single variable font can replace four to six static weight files. It also wants fluid type via clamp(min, preferred, max) so a single rule serves a 320px phone and a 1440px desktop without breakpoint jumps. If your hero uses a heavy display font, subset it to just the glyphs that headline needs and preload it; the body font can load with swap and a solid system fallback so text is never invisible.

Phase 5: Make it systematic and polished with Refactoring UI

Top Design supplies the wow; Refactoring UI supplies the consistency that keeps the wow from collapsing into chaos on the second and third sections. From Adam Wathan and Steve Schoger, its founding move is design in grayscale first, add color last — which forces real hierarchy through size, spacing, weight, and contrast before color becomes a crutch. Great UI, the book argues, is not talent; it is systems: constrained scales for spacing (4, 8, 16, 24, 32, 48, 64px), type, color, and shadows that produce professional results by removing arbitrary decisions.

The practical wins for a new site are immediate. Visual hierarchy comes from combining levers, not multiplying them — primary text is large or bold or dark, and you save “all three” for the single most important element. Spacing between groups must exceed spacing within groups, which is what makes a layout read as organized. Constrain widths: prose to ~65ch, forms to 300–500px; full-width is almost never right. And the darkest “black” in your palette should be a near-black like #111827, never pure #000, with grays subtly tinted toward your brand temperature so they do not look lifeless.

Apply the skill to the components every website has and every template gets wrong: buttons (a clear primary/secondary/tertiary hierarchy, not five competing filled buttons), cards (let images bleed to the edges instead of floating in padded boxes), and the empty states and forms that templates ignore entirely. Shadows should map to elevation — small for raised buttons, large for floating modals — and a good shadow has two layers, a tight dark one for crispness plus a soft wide one for atmosphere. Run the blur test: squint at the page; if hierarchy survives, it works.

Phase 6: Make it effortless to use with UX Heuristics

A page can be clear, beautiful, and consistent and still make visitors think — and thinking is friction. The UX Heuristics skill, built on Steve Krug’s Don’t Make Me Think and Jakob Nielsen’s ten heuristics, exists to remove that friction. Its first law is the title: every page should be self-evident, because users do not read, they scan; they do not make optimal choices, they satisfice; they do not figure out how things work, they muddle through. Design for what users actually do.

The most useful tests for a new website are concrete. Run the Trunk Test: imagine a visitor dropped onto any page cold — can they instantly answer what site this is, what page, what the major sections are, and where to go next? If not, your orientation is broken. Run Krug’s “get rid of half the words” pass — cut the “Welcome to our website!” happy-talk and the polite filler, because every unnecessary word competes with the words that matter. And make CTAs use plain action language (“Sign in,” “Start free trial”), never clever names that force a half-second of decoding.

Pay special attention to the navigation, the signup form, and system feedback — the three places usability quietly kills new sites. Navigation needs a persistent site ID and a clear “you are here” indicator. Forms should validate inline on blur with specific messages, mark optional fields rather than required ones, and use tap targets of at least 44×44px. And every action needs visible status: “Saving…” then “Saved,” skeleton screens while loading, a confirmation after submit. Silent failures destroy trust faster than slow ones.

Phase 7: Engineer the conversion with CRO Methodology

Now make the page actually convert. The CRO Methodology skill, from Karl Blanks and Ben Jesson’s Making Websites Win, is built on one discipline: don’t guess — discover. Every visitor who does not convert has a reason, and that reason is discoverable through research, then eliminable with evidence. This beats copying competitors, applying generic “best practices,” and HiPPO (Highest Paid Person’s Opinion) decisions every time. For a brand-new site you will not have exit-survey data yet, so you start from the universal objections and the proof you already own.

The central technique is the Objection / Counter-Objection table. Every visitor arrives carrying objections from the “Big 5” — Trust, Price, Fit, Timing, Effort — and if the page does not answer them, they leave. Map each likely objection to a specific, evidence-backed counter, and place that counter at the point of friction (the trust counter near the signup button, the price counter on the pricing page), not buried in an FAQ. For implicit objections a visitor would never admit, use “CO Only” — counter it without naming it.

The second move is a persuasion-asset audit. Most companies sit on overlooked proof — undisplayed testimonials, unmentioned credentials, buried guarantees — and the skill’s proof hierarchy ranks specific results with context above named testimonials with photos, above case studies, above bare logos. Use the “proof sandwich”: a bold claim, then the proof, then a reinforcement. Specific numbers beat round ones (“47,832 customers,” not “about 50,000”). For a new site with little social proof yet, build a wish list of the assets to acquire — your first three testimonials, a money-back guarantee, a security badge — and design the layout to slot them in where objections peak.

Phase 8: Add a lead-generating quiz with Scorecard Marketing

A homepage converts the roughly 3% of visitors ready to buy today. The other 97% leave — unless you give them a lower-commitment reason to raise their hand. That is the job of the Scorecard Marketing skill, from Daniel Priestley’s playbook, whose core claim is that everything is downstream from lead generation — and that an interactive assessment converts 30–50% of visitors versus 3–10% for a static PDF lead magnet, because a quiz creates psychological engagement static content cannot.

The mechanics are a four-step system: a landing page whose only job is to make clicking “Start” irresistible (built on a concept hook plus the 3 Cs — Clarity, Credibility, Connection), a questionnaire that captures the email before the questions so you keep the lead even on abandonment, a results page with dynamic content per score tier, and a follow-up sequence segmented by tier. The concept hook is the single most important element — “moving toward” hooks (“Are you ready to scale?”) outperform fear-based ones. Keep it to 8–15 questions for cold traffic; abandonment spikes past 15.

The reason this is so powerful for a brand-new site is that every lead arrives pre-qualified, with self-reported pain points and a score, which makes your follow-up dramatically more relevant than a generic drip. The skill is firm on the ethics: the hook must promise value the assessment actually delivers, results must give genuine insight (real help for low scorers, not manufactured anxiety), and capturing email up front must be transparent. Done right, the quiz becomes the highest-converting page on your new site and the engine that feeds the nurture sequence you mapped back in Phase 0.

Phase 9: Hold it to an insanely-great bar with Steve Jobs Design Review

Everything is built. Before you ship, subject the whole thing to one brutal, honest review — the kind Steve Jobs ran. The Steve Jobs Design Review skill distills his documented standards, and its governing line is: “You’ve got to start with the customer experience and work backwards.” Not from your feature list, not from the tech you happened to use — from what a customer sees, feels, and accomplishes. And remember the standard: “Design is not just what it looks like. Design is how it works.”

The review runs a fixed protocol. First, experience the site cold, as a stranger would — first impressions cannot be re-run. State the One Thing the site must do in a single sentence; if you cannot, you have no focus. Then audit against the principles: count steps-to-value (does a new visitor reach the core value in three steps, not nine?), demand the interaction not the mockup (walk the slow paths — the empty form, the error state, the failed payment, the mobile cold-start), and check the “back of the fence” — the 404 page, the error copy, the confirmation email — because users sense plywood where they think nobody looks. The verdict is binary: insanely great, or not done. No “pretty good.”

The most valuable output here is the cut list. Jobs’s other principle — “focusing is about saying no” — applies hard to a first website, where the temptation is to add one more section, one more feature callout, one more testimonial until the page says nothing because it tries to say everything. Ask the skill what to remove, not what to add: every element a visitor must perceive and parse taxes their attention. A site that does one thing with total clarity beats one that does six things adequately.

Your checklist

• Score your niches with the PVP Index and write a one-paragraph ideal-customer avatar (one niche, not “everyone”)
• Write a USP that passes the swap test and name the site’s single primary conversion goal
• Build the complete StoryBrand BrandScript with the customer as hero and the internal problem named
• Derive homepage copy from the BrandScript following the StoryBrand wireframe; lock a one-liner you can repeat after one hearing
• Run every line through the SUCCESs checklist; replace abstractions with concrete, specific outcomes and numbers
• Design the signature hero moment first — dramatic scale contrast, custom easing, warm off-blacks, a choreographed reveal
• Choose a 1–2 family type system; set 16–18px body, 65ch measure, correct line heights, and a sub-200KB font payload
• Define constrained design tokens (spacing, color, type, shadow); audit in grayscale; fix button hierarchy to one primary per section
• Run the Trunk Test and “get rid of half the words”; add inline validation and visible system-status feedback
• Build the Objection / Counter-Objection table for the Big 5 and place counters at points of friction
• Audit persuasion assets, build a wish list for missing proof, and lay out a proof sandwich where doubt peaks
• Ship an 8–15 question scorecard quiz with email captured first and dynamic results per tier
• Run the Steve Jobs review cold; act on the binary verdict and the cut list before launch

Common mistakes

Designing before you have a message. This is the cardinal error. Founders fall in love with a hero image and a color palette, then jam copy in at the end. The visitor judges the message in five seconds; a stunning page with a vague headline still loses. Always run Phase 1 (StoryBrand) before Phase 3 (Top Design).

Making your brand the hero. “We’re a revolutionary platform that leverages cutting-edge AI…” The visitor does not care about you yet. Open with their problem and their desired outcome. If your homepage’s first sentence starts with “We,” rewrite it.

Stacking competing calls to action. Three filled buttons of equal weight above the fold means the visitor has no idea what to do, so they do nothing. One direct CTA, one optional transitional CTA (the quiz, a free guide), and a clear visual hierarchy between them. Refactoring UI and the Jobs review both catch this.

Confusing clear with sticky. StoryBrand gets you clarity, but clear copy can still be forgettable. Without the Made to Stick pass — concrete numbers, an unexpected hook, one customer’s story — your message is understood and then immediately evaporates. Do both passes.

Testing button colors instead of understanding objections. CRO methodology is blunt about this: changing a button from green to orange is a “meek tweak” that rarely moves anything. The leverage is in discovering and answering the real objections that stop visitors. Build the O/CO table before you fiddle with details.

Beautiful happy path, broken everywhere else. Templates and quick builds nail the hero and ignore the empty state, the form error, the 404, the confirmation email, the mobile cold-start. That is exactly where the Jobs review aims — the back of the fence. A polished entrance and a hostile exit reads as a cheap product.

A 30-question quiz for cold traffic. Scorecard funnels convert because they feel quick. Past ~15 questions for a cold visitor, abandonment spikes — and if you put the email field after the questions, you lose every person who drops out. Capture the email first, keep it short.

Letting fonts tank performance. Loading six static weights of a display font causes layout shift and a slow LCP, which the Top Design and Web Typography skills both treat as a craft failure, not just a metric. Subset, preload the critical face, use font-display: swap, and stay under 200KB.

Frequently asked questions

In what order should I actually run these skills?

Strictly message-first: Phase 0 strategy (1-Page Marketing Plan) to decide who and what for, then Phase 1 message (StoryBrand) and Phase 2 stickiness (Made to Stick), then the visual layers — Top Design, Web Typography, Refactoring UI — then usability (UX Heuristics) and conversion instrumentation (CRO Methodology, Scorecard Marketing), and finally the Steve Jobs review as a gate before launch. The reason is dependency: design decisions should serve the message, and conversion instrumentation should sit on top of a page that is already clear, beautiful, and usable. Running them out of order means redoing work — a gorgeous hero built before you know your message usually gets thrown away.

Do I need all ten skills for a simple landing page?

No. For a single landing page on a tight timeline, the irreducible core is four: StoryBrand for the message, Refactoring UI for clean visual hierarchy, UX Heuristics for usability, and CRO Methodology for objection handling and proof. Add Top Design and Web Typography when the brand needs to impress (you are competing on craft, or selling design-adjacent products). Add Scorecard Marketing when you need lead generation beyond the ready-to-buy minority. Add 1-Page Marketing Plan when the site is part of a broader funnel, and the Steve Jobs review whenever you can afford one brutal pass before shipping — which is almost always worth it.

How do I install these skills and use them with my agent?

Install the whole library with npx skills add wondelai/skills --all --global, or add one skill at a time with npx skills add wondelai/skills/storybrand-messaging --global (swap in any slug). Once installed, you invoke a skill by telling your agent to use it in plain language — for example, “Use the cro-methodology skill to build an objection table for my pricing page.” The skills work with Claude, Claude Code, Claude Cowork, Codex, Cursor, OpenClaw, and Hermes Agent. The prompt blocks throughout this guide are copy-paste ready; each one completes the sentence “Use the <slug> skill to…”.

My agent built a page that “looks fine.” How do I push it to a 10/10?

“Looks fine” is the symptom of working without a rubric, and three of these skills exist precisely to fix it. Top Design, Refactoring UI, and the Steve Jobs review each score work 0–10 and tell you the specific changes needed to reach 10. Ask your agent to run those scoring passes explicitly: “Score this against the Top Design rubric and tell me what’s blocking a 10.” The honest answer is usually flat hierarchy, default easing, too little white space, no signature moment, and unaddressed objections — all of which the skills give you concrete fixes for. The gap between fine and great is almost never talent; it is intention applied through a system.

Can these skills write the actual code, or just give me advice?

Both. Because you invoke them inside a coding agent (Claude, Claude Code, Claude Cowork, Codex, Cursor, OpenClaw, Hermes Agent, or any other agentskills.io-compatible agent), the agent reads the skill’s principles and then applies them directly to your files — writing the CSS for your type scale, refactoring your button components, restructuring your homepage copy in the actual markup. The skills supply the judgment (what good looks like and why); your agent supplies the implementation in your real codebase. Point the agent at concrete artifacts — “refactor Hero.tsx and pricing.astro” — and it edits them, rather than handing you a document to implement yourself.

Ship your website, then make it convert better

The order is the whole game. Message first, then award-level design and typography, then usability, then conversion, then a brutal review — that sequence is what turns a blank page into a website that converts from the day it goes live. Install the full stack and start with your BrandScript:

npx skills add wondelai/skills --all --global

Then point your agent at the prompts above, phase by phase. When the new site is live and you have real visitor data, the next move is optimization — turning the assumptions you made today into tested, evidence-backed wins. For that, read How to Improve an Existing Website with AI Skills, which picks up where this guide ends. And if your next build is a product rather than a marketing site, How to Create a New App with AI Skills applies the same message-first discipline to software.