How to Improve an Existing Website with AI Skills

You already have a website. It is live, it gets traffic, and it is quietly underperforming. Visitors land and leave. The signup count is flat. Someone on the team says “the homepage feels off” and someone else says “we should redesign it,” and three weeks later you have a prettier page that converts exactly the same. The problem with improving an existing site is not a shortage of opinions — it is a shortage of evidence about which opinion is right.

This guide gives you a different approach: a sequenced diagnostic that turns vague dissatisfaction into a ranked list of specific, defensible fixes. Each phase is driven by an AI agent skill that packages a canonical book on its subject, so your agent (Claude, Claude Code, Claude Cowork, Codex, Cursor, OpenClaw, or Hermes Agent) isn’t improvising from generic web-tips — it is applying the actual methodology from Making Websites Win, Don’t Make Me Think, Refactoring UI, On Web Typography, Building a StoryBrand, High Performance Browser Networking, Made to Stick, and The Design of Everyday Things.

The order matters, and it is deliberate. You start by finding out why visitors don’t convert (research, not guessing). Then you remove the usability friction that makes them stumble, sharpen the visual hierarchy and typography so the page reads at a glance, rewrite the message so a stranger understands the offer in five seconds, make the page fast so none of that work is wasted on a slow load, make the core idea memorable so it survives the trip to a buying decision, and finally close the loop with error-tolerant design so the few visitors who do act never get stuck. By the end you will not have “a redesign.” You will have a prioritized backlog of changes, each tied to a reason, plus the experiment design to prove the big ones actually worked.

You don’t need all eight skills on day one. But installed together they form a single pipeline — diagnose, fix, prove — that you can run on a homepage, a pricing page, a checkout flow, or the entire funnel. Let’s walk it.

Phase 1 — Diagnose why visitors don’t convert

Skill: CRO Methodology (from Making Websites Win)

Before you change a single pixel, find out what is actually broken. The central rule of the CRO Methodology skill is blunt: don’t guess — discover. Every visitor who doesn’t convert has a reason, and your team’s theory about that reason is, statistically, almost always wrong. Conversion Rate Experts built a career on doubling the sales of sites for Google, Apple, and Amazon precisely by researching visitors instead of copying competitors or applying “best practices” on faith.

So the first job is research, not redesign. Point your agent at the page and have it map the funnel to find blocked arteries (high-traffic stages that underperform) and missing links (funnel stages that don’t exist yet). A homepage with a 70% bounce rate and a checkout with 40% abandonment are two completely different problems, and you want to spend your effort on the one that moves the most money. The skill also forces you to name the ONE action the page exists to drive — a page with three competing CTAs has no conversion goal, it has a committee.

The richest output of this phase is the Objection/Counter-Objection (O/CO) table. Visitors arrive with objections — the “Big 5” are Trust, Price, Fit, Timing, and Effort — and if the page doesn’t answer them at the point they arise, the visitor leaves. The skill builds a table mapping each researched objection to a specific, evidence-backed counter, placed where the friction actually occurs (the security objection next to the credit-card field, not buried in an FAQ). Critically, the counter-objections use the customer’s own language pulled from reviews, support tickets, and exit surveys — which out-persuades any copywriter’s invention.

Don’t guess — discover. Every visitor who doesn’t convert has a reason, and your team’s theory about that reason is almost always wrong.

One more thing the skill will insist on, and you should let it: prioritize with ICE scoring (Impact, Confidence, Ease) and design bold experiments, not meek tweaks. Testing a button color wastes traffic on an effect too small to ever reach significance. Testing a fundamentally clearer value proposition can double conversion. The skill ends Phase 1 by handing you a ranked list of hypotheses in the format “If we change X, then metric Y will improve because [reason from research].” That ranked list is the spine of everything that follows.

Phase 2 — Remove the usability friction

Skill: UX Heuristics (from Don’t Make Me Think)

Research tells you what visitors object to. Usability tells you where they stumble — the friction that makes them give up before they ever weigh your offer. Steve Krug’s first law is the title of his book: Don’t Make Me Think. Every question mark that pops into a visitor’s head (“Wait, is that a link?” “Where am I?” “What does this label mean?”) is cognitive load that competes with the task. Users don’t read, they scan; they don’t make optimal choices, they satisfice; they don’t figure out how things work, they muddle through.

Have your agent run a heuristic evaluation against Nielsen’s 10 heuristics and rate each violation on the 0–4 severity scale, so you fix catastrophes (severity 4: prevents task completion) before cosmetics (severity 1: minor annoyance). The skill weighs three factors — frequency, impact, and persistence — so a small annoyance that hits every visitor on every page can outrank a big problem buried in a rarely-seen corner.

A few checks pay off immediately on most sites. The Trunk Test: drop the agent on a random interior page and ask whether a visitor can instantly answer “What site is this? What page? What are my options? Where am I in the hierarchy? Where’s search?” If not, your navigation is leaking visitors who feel lost. Get rid of half the words, then half of what’s left — happy-talk (“Welcome to our website!”) and instructions nobody reads are pure noise that buries the words that matter. And kill mystery-meat navigation — icons without labels force guessing, and every guess is a thought you promised not to make them have.

The payoff here compounds with Phase 1: an O/CO table is worthless if visitors can’t find the answer because the page is confusing. Usability is what lets your persuasion actually land.

Phase 3 — Fix the visual hierarchy

Skill: Refactoring UI (from Refactoring UI)

Now the page reads clearly in principle — but does it look like it reads clearly? The Refactoring UI skill, built from Adam Wathan and Steve Schoger’s book, rests on one counterintuitive idea: great UI isn’t about talent, it’s about systems. Constrained scales for spacing, type, color, and shadow produce professional results without a designer. And the foundational move is to design in grayscale first — strip the color out, and force the page to establish hierarchy through size, weight, contrast, and spacing alone. If the page falls apart in grayscale, color was a crutch.

The most common reason an existing site “looks amateur” is not ugly colors — it is that everything competes for attention. The skill’s first principle is visual hierarchy through three levers (size, weight, color), with a rule most people break: combine levers, don’t multiply. Primary text is large or bold or dark — save all three for the single most important element on the page. Form labels, table headers, and metadata are secondary; make them smaller, lighter, or uppercase-small so the data they describe can dominate.

The second-most-common problem is spacing. Have the agent enforce the spacing scale (4, 8, 16, 24, 32, 48, 64px) and the rule that spacing between groups must exceed spacing within groups — that single relationship is what makes a layout read as organized instead of soupy. Constrain text width to 45–75 characters; full-width body text is almost never right. And tell it to start with too much white space and remove, because you will almost never remove enough.

Only after the grayscale layout works should the agent add color — a systematic palette of 5–9 shades per hue, with grays tinted (never pure #000) so the interface feels alive instead of lifeless. Color is the last 10%, not the first.

Phase 4 — Make the words readable

Skill: Web Typography (from On Web Typography)

Hierarchy and typography overlap, but typography deserves its own pass because it is where “the text is hard to read” complaints actually live — and because, as Jason Santa Maria argues, getting size, line length, and line height right matters more than which typeface you pick. Typography is the voice of your content; the best of it is invisible, immersing readers in the words rather than calling attention to itself (the “clear goblet” principle).

The three measurements to fix first: body size of at least 16px, ideally 18px for reading-heavy pages (people hold phones farther than designers assume); line length of 45–75 characters, with 66 the sweet spot, enforced via ch units or max-width; and line height of 1.5–1.7 for body text, tighter (1.1–1.25) for headings. These three govern how the eye tracks across and down the page — get them wrong and reading slows, the return sweep lands on the wrong line, and visitors bail on your carefully-written copy.

Have the agent build a hierarchy on a consistent modular scale (a 1.2–1.5 ratio between levels) and apply the squint test: blur the page, and the hierarchy should still be obvious. It will also catch the small stuff that signals amateurism — headings with too much space above and not enough below (which visually detaches them from the content they introduce), orphaned words on heading lines (text-wrap: balance), and body weights set below 400.

There is a performance angle here too, which is why this phase sits right before the speed phase: web fonts are render-blocking by default. The skill will push font-display: swap so fallback text shows immediately, preload the one critical font, subset to the characters you actually use, and keep the total font payload under 200KB — a single variable font often replacing four to six static weight files. Hold that thought; Phase 6 picks it up.

Phase 5 — Sharpen the message

Skill: StoryBrand Messaging (from Building a StoryBrand)

A visitor can see your page perfectly and read it comfortably and still leave — because they can’t tell what you do or why it matters to them. Donald Miller’s core principle is the one most brands get backwards: the customer is the hero, not your brand. Your brand is the guide who helps the hero win — think Yoda, not Luke. The moment your copy makes you the hero (“We’re the industry-leading platform…”), you start competing with your customer instead of serving them.

Run the agent through the SB7 framework on your homepage copy: a Character (the customer) who wants one specific thing, a Problem defined at three levels (external, internal, and philosophical — most brands only name the external one and miss the emotional driver that actually closes sales), a Guide who shows empathy and authority, a Plan (3–4 simple steps that make the path feel safe), a Call to Action (one prominent Direct CTA, plus a Transitional CTA for the not-yet-ready), a stake of Failure, and a vivid picture of Success. The diagnostic question the skill applies: can a caveman grasp the offer in five seconds? If not, the message is too complex.

The single highest-leverage artifact is the one-liner — one sentence in the form “We help [character] who struggle with [problem] to [solution] so they can [result]” — that you then use everywhere: homepage header, email signature, sales calls, ad copy. The test is whether someone can repeat it after hearing it once.

This phase feeds back into Phase 1 beautifully: the objections you researched in the CRO phase tell you exactly which internal problems and which proof points the StoryBrand copy must address. Research and message are two ends of the same rope.

Phase 6 — Make the page fast

Skill: High Perf Browser (from High Performance Browser Networking)

None of the previous five phases survive a slow page. A visitor who waits four seconds for the hero to paint has already formed an impression — and bounced — before reading your perfect one-liner. Ilya Grigorik’s foundational insight reframes the whole problem: latency, not bandwidth, is the bottleneck. Most slow pages suffer from too many round trips, not too little throughput. Throwing a bigger pipe at the problem barely helps; cutting round trips transforms the experience.

Have the agent diagnose against Core Web Vitals with concrete targets: LCP under 2.5s, INP under 200ms, CLS under 0.1, TTFB under 800ms. Each maps to a specific class of fix. For LCP, identify the largest above-the-fold element (usually the hero image or headline block) and preload it with fetchpriority="high". For CLS — the layout-shift jank that destroys trust as content jumps around — reserve space with explicit width/height or CSS aspect-ratio on every image, embed, and ad slot. For INP, keep the main thread free by deferring non-critical JavaScript and breaking up long tasks.

The skill is opinionated about the network layer in ways that matter for an existing site. CSS is render-blocking and JavaScript is parser-blocking, so each needs a different strategy: inline critical above-the-fold CSS and async-load the rest; defer scripts by default and reserve async for genuinely independent ones. Add preconnect for critical third-party origins and dns-prefetch for the rest. Content-hash your static assets and cache them immutable so repeat visitors re-download nothing. And if your site still uses HTTP/1.1 workarounds — domain sharding, image sprites, file concatenation — note that on HTTP/2 these become counterproductive, defeating multiplexing; the skill will tell you to undo them.

Pair this with the font-loading work from Phase 4 and the image treatment from Phase 3, and the page that reads clearly now also arrives before the visitor’s patience runs out.

Phase 7 — Make the core idea stick

Skill: Made to Stick (from Made to Stick)

Clarity gets a visitor to understand your offer in the moment. Stickiness gets them to remember it long enough to act — through the comparison shopping, the “let me think about it,” the conversation with a colleague that happens between the visit and the decision. Chip and Dan Heath’s central villain is the Curse of Knowledge: once you know your product deeply, you literally cannot imagine not knowing it, which makes you systematically bad at explaining it to a newcomer.

The antidote is the SUCCESs checklist — Simple, Unexpected, Concrete, Credible, Emotional, Stories. Have the agent score your key messages (headline, value prop, the pitch a salesperson gives) on all six and rewrite the weak ones. The two principles that fix the most damage on most sites are Concrete and Simple. Concrete means replacing abstraction with sensory specifics: not “improve customer experience” but “customers get their order in 30 minutes, still hot”; not “saves time” but “save 16 hours a month.” The Velcro theory of memory — concrete ideas have more hooks for the mind to grab. Simple means the Commander’s Intent: if visitors remember exactly one thing, what must it be? “If you say three things, you say nothing.”

This phase is where you also fix the credibility numbers. The skill makes statistics human-scale (the Sinatra Test: one example so good it proves everything — “We handle Super Bowl traffic” settles the scalability objection in four words) and uses specific figures over round ones, which dovetails with the CRO skill’s persuasion-asset work from Phase 1.

Clarity makes a visitor understand you in the moment. Stickiness makes them remember you long enough to act.

Phase 8 — Design out the errors

Skill: Design of Everyday Things (from The Design of Everyday Things)

The final phase protects the visitors who actually decided to act. Don Norman’s most quoted line reframes every “user mistake” on your site: there is no such thing as human error — only bad design. When a visitor fat-fingers the wrong option, abandons a form, or misreads a control, the fault is in the design, not the person. So instead of adding more error messages, the goal is to make the wrong action impossible.

Have the agent analyze your conversion-critical flows — signup, checkout, account setup — through Norman’s two gulfs. The Gulf of Execution (“how do I do what I want?”) is bridged with clear signifiers (a button that looks pressable, a field that looks editable — flat design that erases these is a frequent culprit), natural mappings, and constraints that limit wrong actions (a date picker instead of a free-text date field, a Submit button disabled until the form is valid). The Gulf of Evaluation (“what just happened?”) is bridged with immediate feedback — within 0.1s for direct manipulation — and visible system state, so a visitor never wonders whether their click registered.

The skill’s error taxonomy is practical. Slips (right intention, wrong action — clicking Delete instead of Edit) are fixed by separating destructive actions and offering undo. Mistakes (wrong intention from a flawed mental model) are fixed by aligning the system image with how users actually think. And the error-message checklist is non-negotiable: say what went wrong in human language, say how to fix it, never blame the user, and preserve their work — nothing destroys trust like a form that wipes itself on a validation error.

Your checklist

Run these in order. Each builds on the last.

• Define the ONE action each key page exists to drive; remove competing CTAs (cro-methodology)
• Map the funnel to find the highest-impact blocked artery or missing link (cro-methodology)
• Research, don’t guess — run an exit survey and mine reviews and support tickets for real objections (cro-methodology)
• Build the O/CO table and place counter-objections at the point of friction (cro-methodology)
• Heuristic evaluation against Nielsen’s 10, with 0–4 severity ratings (ux-heuristics)
• Trunk Test every interior page; fix navigation that leaves visitors lost (ux-heuristics)
• Cut half the words, then half again (ux-heuristics)
• Grayscale-first hierarchy using size, weight, and color — one lever at a time (refactoring-ui)
• Enforce the spacing scale so gaps between groups exceed gaps within them (refactoring-ui)
• Fix the three measurements: body ≥16px, line length ~66ch, line height 1.5–1.7 (web-typography)
• Rewrite copy with SB7 — customer as hero, internal problem named, one Direct CTA (storybrand-messaging)
• Write the one-liner and deploy it everywhere (storybrand-messaging)
• Hit Core Web Vitals — LCP < 2.5s, INP < 200ms, CLS < 0.1 (high-perf-browser)
• Inline critical CSS, defer scripts, preconnect, and cache static assets immutable (high-perf-browser)
• Score messages on SUCCESs and make every abstraction concrete (made-to-stick)
• Bridge both gulfs with signifiers, constraints, and 0.1s feedback (design-everyday-things)
• Design a bold A/B test for each high-ICE change and run it to 95% confidence over a full business cycle (cro-methodology)

Common mistakes

Redesigning before researching. The cardinal sin. A fresh coat of paint on the same unaddressed objections converts identically. Always run Phase 1 first — the CRO skill exists precisely to stop you from spending three weeks on a prettier page that performs the same. Diagnosis before treatment, every time.

Testing meek tweaks. Button colors, font-size nudges, and image swaps produce effects too small to ever reach statistical significance — you’ll burn weeks of traffic to learn nothing. The CRO skill’s ICE scoring is designed to push you toward bold changes (a new value proposition, a fundamentally clearer page) that can actually double conversion. Ask “could this 10x our results?” before you test it.

Letting the HiPPO decide. The Highest Paid Person’s Opinion is not data. When the founder insists the hero image is fine and the head of sales swears the pricing copy works, the answer is not a meeting — it is research and a test. Both the CRO and UX Heuristics skills are built to replace opinion with evidence; use them to settle the argument.

Adding color before the layout works. Reaching for brand colors to “make it pop” while the grayscale hierarchy is still broken just paints over the real problem. Refactoring UI is emphatic: grayscale first, color last. If the page doesn’t read when desaturated, no palette will save it.

Optimizing speed in a vacuum. Shaving 200ms off a page nobody understands is a rounding error on a rounding error. Performance amplifies good design and clear messaging — it doesn’t substitute for them. That’s why Phase 6 sits after the clarity work, not before it. (The exception: if your page is so slow that visitors leave before anything renders, a quick LCP fix unblocks all the other work — let the high-perf-browser skill triage that case.)

Treating “user error” as the user’s fault. Every abandoned form and mis-clicked control is a design signal, not a user failing. The instinct to add a warning dialog or a longer instruction is usually wrong; the Design of Everyday Things skill will push you toward constraints that prevent the error and undo that forgives it.

Confusing clarity with stickiness. A message can be perfectly clear in the moment and instantly forgotten. StoryBrand makes you understood; Made to Stick makes you remembered. You need both — run Phase 5 and Phase 7, not one or the other.

Frequently asked questions

Which skill should I start with if I can only use one?

CRO Methodology. It is the diagnostic that tells you where every other skill should be aimed. Without it you are optimizing blind — fixing typography on a page whose real problem is an unanswered Trust objection, or speeding up a checkout that’s actually losing people to a confusing form. Run the CRO research first; it will frequently tell you which of the other seven skills to reach for next. If your single biggest complaint is “it looks unprofessional,” start with Refactoring UI instead; if it’s “nobody understands what we do,” start with StoryBrand Messaging.

Do these skills conflict with each other?

Rarely, and when they do the conflict is productive. The UX Heuristics skill’s “get rid of half the words” can tug against the CRO skill’s instinct to add proof and counter-objections — the resolution is that you add the words that answer a researched objection and cut everything else. Refactoring UI’s “aesthetic and minimalist” principle and Made to Stick’s “unexpected” can feel opposed, but minimalism is about visual noise while unexpectedness is about the idea — a clean page can carry a surprising claim. The skills are designed to be run in sequence precisely so each one’s output becomes the next one’s input.

How do I know a change actually worked instead of just feeling better?

You measure it. The CRO Methodology skill is rigorous about this: calculate the required sample size before you start, run the test for at least one full business cycle (covering weekdays and weekends), never peek and stop early (it inflates false positives dramatically), and require 95% confidence. For low-traffic sites, the skill’s advice is to test bold changes — a dramatic difference is detectable with a far smaller sample (roughly 4,000 visitors for a 50% lift) than a subtle one. A failed test that teaches you something about your customers beats a “win” you don’t understand.

My site is small and I get very little traffic. Is A/B testing even worth it?

Often not in the classic sense — you may not reach significance in a reasonable time. But that doesn’t mean you optimize blind. Lean harder on the qualitative side of the CRO skill (exit surveys, session research, support-ticket mining) and the evaluative skills (UX Heuristics, Design of Everyday Things) that find problems by expert analysis rather than statistics. A heuristic evaluation needs zero traffic. And when you do test, make the change big enough that even a small sample can detect it. Most small sites have catastrophic, obvious problems that don’t need a test to justify fixing.

Can my AI agent run all of this end to end, or do I need to drive each phase?

Both work. You can hand the agent one phase at a time using the prompts above, reviewing the output between phases — this is the recommended approach because each phase’s findings should inform the next. Or you can ask it to run the full pipeline and produce a single prioritized report. Either way, give it real access: paste actual page URLs, real copy, real CSS, real analytics screenshots. The skills are only as good as the evidence you feed them — generic input produces generic output, and the entire point of this stack is to escape generic advice.

Get the skills and start diagnosing

Stop guessing about your website. Install the stack and let your agent diagnose it against the actual methodologies that built the world’s highest-converting sites:

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

Everything is free, open-source, and MIT-licensed. Install all 50 skills, or add just the ones for the phase you’re tackling — npx skills add wondelai/skills/cro-methodology --global gets you the diagnostic engine on its own.

Once your site is converting, the natural next move is to turn that working funnel into a growth engine — more traffic, more channels, more compounding. Head to Grow an Existing Website with AI Skills for that playbook. And if your product is an app rather than a marketing site, the parallel walkthrough lives in Improve an Existing App with AI Skills.