Experiment · built with Claude Opus 5.5

Ten landing pages, one brief: Claude design skills compared

Design skills promise to make Claude build better-looking interfaces. This experiment gave the same landing page brief to Claude ten times, nine times with a different design skill and once with none. Every page below is live, so you can open each one and judge for yourself.

What was tested

A skill is a set of instructions Claude loads for a particular kind of task. The question here is narrow: given an identical brief, how much does each design skill change the page Claude produces, and in what way?

To isolate that, the copy is fixed. Every page has the same sections and the same words, so what is left to vary is design: typography, color, layout, spacing and motion. Each skill was free to choose its own direction, because choosing a direction is most of what these skills do.

The brief

The product is invented: Mooring, a booking tool for small fitness studios. This is the full prompt each run received, with {slug} replaced by the page name.

Build a landing page for Mooring, a booking and scheduling tool for small fitness studios (yoga, pilates, climbing gyms).

Audience: studio owners who run the business themselves and currently juggle spreadsheets, Instagram DMs and a card reader.

Use this copy verbatim and keep the sections in this order. Everything visual is your call.

1. Header
   - Wordmark: Mooring
   - Links: Features, Pricing, FAQ
   - Button: Start free trial

2. Hero
   - Headline: Fill every class without living in your inbox
   - Subheadline: Mooring handles bookings, waitlists and payments for your studio, so you can get back on the mat.
   - Primary button: Start free trial
   - Secondary button: See how it works
   - Note under the buttons: 14 days free. No card required.

3. Social proof
   - Line: Trusted by 1,200 independent studios
   - Stats: 3.4M classes booked / 38% fewer no-shows / 6 hours saved per week

4. Features
   - Online booking: Members book and pay in two taps from a link, your site or Instagram.
   - Automatic waitlists: When someone cancels, the next person in line gets the spot and a notification.
   - Memberships and passes: Sell class packs, monthly memberships and drop-ins with one checkout.

5. How it works
   - Step 1: Add your schedule. Import it from a spreadsheet or build it in minutes.
   - Step 2: Share your booking link. Put it in your bio, on your site or on a poster at the door.
   - Step 3: Teach. Mooring takes care of reminders, payments and the waitlist.

6. Testimonial
   - Quote: We went from forty DMs a day to zero. Classes fill themselves now.
   - Author: Ana Reyes, owner of Low Tide Yoga

7. Pricing
   - Studio: $39 per month. One location, unlimited classes, online payments, email reminders. Button: Start free trial
   - Collective: $89 per month. Up to five locations, staff accounts, SMS reminders, priority support. Button: Start free trial

8. FAQ
   - Can I import my existing members? Yes. Upload a CSV and we match members to their passes.
   - Which payment providers do you support? Stripe and Square, with payouts to your own account.
   - Is there a contract? No. Plans are monthly and you can cancel at any time.
   - Do my members need an app? No. Booking works in any browser, with an optional app for regulars.

9. Final call to action
   - Headline: Open your next class for booking today
   - Button: Start free trial

10. Footer
   - Wordmark, the three header links, and: © 2026 Mooring

Technical constraints:
- Next.js App Router with Tailwind CSS v4, both already installed.
- Style everything with Tailwind utility classes. No hand-written CSS: no CSS modules, no style blocks, no stylesheets with your own selectors. The one exception is what utilities cannot express: CSS variables for theme values and @keyframes.
- Put everything in app/{slug}/, with the page at app/{slug}/page.tsx. Do not edit files outside that folder.
- No external images or stock photos. Any visuals must be CSS, SVG or code.
- Fonts may be loaded with next/font.
- The page must work from 390px to 1440px wide.
- Add a dependency only if you need it, and say which one you added.

How the runs worked

1. Each page was built by its own Claude Opus 5.5 agent with a fresh context, all ten in the same repository at the same time.
2. Each agent was told to read one skill’s files and follow them, and to use no other skill. The control agent was told to use none.
3. One shot. Nobody answered questions or gave design feedback. Where a skill said to ask the user, the agent decided for itself.
4. Each page lives in its own folder and could not touch shared files. In the first round agents could type-check and lint but not run the app, so they built without seeing the page.
5. The output is kept as generated. The project built on the first try and nothing was fixed by hand.

Conditions were not identical for every run. The numbers table marks each one, and these are the differences:

• The Tailwind-only rule was added after the first round had started. Six runs had already begun and adapted mid-way, which cost them extra tokens and time.
• taste-skill and impeccable were run twice. The first time their bundled tooling was not executed, which made it a weak test of two skills that depend on it. The second time the tooling ran and the agent could open its page in a browser. The second runs are the ones shown.
• ckw-design rendered its page outside the app and had the screenshots reviewed before finishing. In the first round it was the only run that saw its own output.

web-design-guidelines is a special case. It reviews code instead of generating it, so its page is a copy of the control that the skill audited and fixed. The two look almost identical; the differences are in accessibility and interaction details.

How each skill works

The skills are different kinds of thing. Some are a single page of guidance; others ship their own tooling and will not call a page finished until it passes a check. That difference explains much of the cost further down.

Checking depth is how hard the skill makes Claude verify its own work, not how good the result looks. One star is a checklist or a self-check. Two stars means the rendered page gets reviewed. Three stars means automated checks or a separate reviewer must pass before the page counts as finished.

This table comes from each skill’s own instructions and from what the agents reported doing, not from the skills’ authors.

The numbers

What each run cost and what it produced. Click a column heading to sort by it.

How to read these:

• Tokens are the total the agent harness reported for the run. That includes reading the skill itself and the framework docs, not only writing the page, and it is not split into input and output.
• impeccable and ckw-design each started a second agent to review their work. Whether that agent’s tokens are inside the total is not known.
• The web-design-guidelines row covers the audit only. Add the control row for the full cost of that page.
• Time is wall-clock, and the first round ran ten agents at once, so treat it as a rough ranking.
• Lines count the TypeScript and CSS the run wrote in its own folder.
• Copy kept is how many of the brief’s 47 pieces of copy appear on the page word for word. Most misses are small: pricing features turned into a list, or a full stop dropped.
• Words is all the text on the page. Most pages sit near 300, so a much higher number is text the run added, mostly inside mock screens.
• Accessibility and performance are Lighthouse scores out of 100, measured on a local production build with Lighthouse’s default mobile settings.

What the pages show

Everything above is measurement. This section is judgment. It was drafted with Claude after looking at every rendered page, it rests on one run per skill, and you may well disagree once you open the pages yourself.

Plain Claude is already competent, and three skills barely moved it. The control page is clean and usable. It is also the look people now call AI-made: a cream background, a serif headline with one italic word, three icon cards, numbered circles, a centered quote. ui-ux-pro-max, shadcn and ui-styling produced the same structure in different colors. What they add is consistency, components and accessibility, not a different look.

The pages that look designed came from skills that force a decision before any code. frontend-design, ckw-design and impeccable each make Claude commit to a concept first: a studio timetable set in condensed signage type, a mooring rope that runs through the whole page, a Pilates spring bar you can click. All three dropped the three-card grid. frontend-design did it for 99k tokens, the second cheapest build.

More checking cost far more, and bought realism, not originality. taste-skill’s checks and finish gate took 79 minutes and 534k tokens, over seven times the control. The result is the most product-like page: every section shows a believable screen of the app. It also drifted furthest from the brief, with 805 words on the page and the fewest pieces of copy kept word for word.

Measured quality was high almost everywhere. Seven of the ten pages score 100 for accessibility and every page scores 93 or more for performance. The control loses points for one low-contrast button. The audit skill noticed that button and left it, because its rule list does not cover contrast. emil-design-eng scored lowest at 94; its strength is motion, which screenshots and scores do not show.

No skill kept the copy fully intact. Asked to use the copy verbatim, every run changed something. The closest were frontend-design and ckw-design at 45 of 47.

The stars are an opinion about one thing: how far the page moved from the look Claude produces unaided. They are not a quality score.

Which one for a production page that should not look AI-made? The skills that set a direction are the ones that changed the outcome. frontend-design gives the best return. ckw-design and impeccable go further and include a review step, for two to four times the control’s cost. taste-skill produces the most convincing product imagery, at a cost that is hard to justify for one page.

The component skills and the audit skill solve a different problem, and they should combine well with a direction skill: one for the look, shadcn for the components, web-design-guidelines as a last pass. That combination was not tested here.

Limits

• One run per skill. Claude’s output varies between runs, so a single page is a sample and not a verdict on the skill.
• One kind of page. A skill that does well on a marketing page may do differently on a dashboard or an app.
• Fixed copy removes writing from the comparison, including for skills that would have improved it.
• The skills were read from disk by an agent, not loaded through Claude Code’s own skill mechanism, and they ran under rules (one folder, Tailwind only, no photographs) that some of them were not written for. taste-skill in particular is built around its own page kit and real photographs.
• The runs were not equal. Two skills got a second run with their tooling and a view of their page, and six had a rule arrive mid-run. The cost figures compare what happened, not a controlled race.