The design skill
A skill for Claude that writes a page for a real business — designed to look like its industry, written like a copywriter wrote it, and structured so search engines and AI engines can quote it.
It is one text file. You give it to Claude once, then describe the business in your own words.
Download
Same file in both. Pick the one that matches how you use Claude.
The .zip is for Claude Code; the .md is for pasting
into a Claude Project on claude.ai. Nothing installs on your website.
It looks like your industry, not like AI
Most AI pages look like each other. This one reads the visual codes of the category first, commits to one art direction, and writes the design down as a spec before a line of CSS.
Sentences a competitor could not publish
Numbers, names, places and timeframes instead of adjectives. Every sentence is tested against one question: could the business next door publish this exact line?
Built to be found and quoted
Real structure — one intent, one H1, headings that read alone, and self-contained answers an AI engine can lift without mangling.
Why the pages do not look machine-made
Ask any AI for a landing page and you can usually tell. The tells are consistent: a gradient on white, three equal cards in every section, everything centred, a shadow on every box, and an editorial feature about a business rather than that business's own site.
The skill attacks that at the root. Before writing anything it picks the visual codes of the category — a bakery, a law firm and a physiotherapist do not look alike, and a visitor knows within a second when a page is wearing the wrong clothes. It then proposes three art directions with different centres of gravity, commits to one, and writes the design as a short spec: the object the design is drawn from, the colours with a rule for each, the type scale, the layout grammar, the radius language, and five lines of Do and Don't.
That spec is the steering wheel. Thirty seconds to read, one line to veto — before sixty kilobytes of HTML exist.
Copy, which is where most AI pages lose
Design earns the stop. Words earn the belief, and generic words lose it instantly.
The rule the skill applies hardest is specificity: "Eleven years, two vans, same-day in summer" beats "experienced and reliable", and a competitor cannot copy it. Headlines are capped at eight words so they stay readable in one breath, with the detail moved into the line beneath. Proof sits next to the claim it defends rather than in a testimonial ghetto at the bottom. Objections become page structure instead of an FAQ afterthought.
There is also a banned list, enforced in any language — unlock, seamless, transform your, elevate, journey, solutions, passionate about, cutting-edge, in today's fast-paced world.
What "SEO ready" actually means here
Not a keyword field. The page is built so that both a search engine and an answer engine can read it correctly:
- One page, one intent
- A single search the page is built to win, plus the location if the business is local. Everything else on the page supports it.
- Title tag under 60 characters, description around 150
- Primary term and the differentiator first — not the company name. The description is written as copy that earns the click, not as a keyword list.
- One H1, and headings that make sense read alone
- Section headings are statements of six words or fewer. That outline is exactly what an AI engine summarises, so it has to stand up on its own.
- Quotable 40–60 word answers
- Under each major heading sits a self-contained answer that still makes sense if an engine quotes only that block. This is how a page gets cited rather than merely crawled, and almost nobody writes this way.
- Questions kept to the FAQ
- A page whose every heading is a question reads as a help centre. Questions go in the FAQ, where they earn the quote without costing the page its voice.
- The primary term in the first 100 words
- Inside a sentence a human would actually say. Never repeated to hit a count — density is a dead model and reads as spam.
- Semantic structure and honest alt text
header,nav,main,section,article,footer; lists as lists; tables only for tabular facts. Alt text describes the image for someone who cannot see it.- Accessible by default
- A real skip link as the first focusable element, landing on a real
<main>, and a heading outline that moves one level at a time — no jump from an H2 to an H4.
Sample content that says it is sample content
A page delivered with empty sections is hard to judge, so the skill fills them — testimonials, pricing, team, stats and FAQ all ship designed and populated, as a draft to overwrite rather than a blank to compose.
But it draws a hard line at who is being quoted. The business's own voice — its descriptions, service names, sample prices, opening hours — is written freely; adjusting a number is one keystroke and nobody is misled. Anything attributed to someone else is marked: testimonials, reviews, star ratings, named clients, logos, "as seen in", credentials, awards, sourced statistics.
Why that matters to you and not just to us. An AI-written
endorsement does not announce itself the way "John Doe" does — "Maria K., re-tiled our bathroom
in two days" is indistinguishable from a real review. If one of those reaches your live site, the
consumer-law exposure is the site owner's. So each one carries a small
sample chip, styled in the page's own colours. A review labelled sample is not a fake
review — and you can see at a glance what is left to replace before launch.
Installing it
On claude.ai
Download the .md and copy all of it
Any text editor will open it.
Create a Project and paste it into the custom instructions
Then start a chat inside that Project.
Describe the business
It asks at most three questions, shows you three art directions, and builds once you pick one.
On Claude Code
Unzip into your skills folder
The archive expands to one folder containing one file:
~/.claude/skills/page-skill-v3/SKILL.md
On Windows that is C:\Users\<you>\.claude\skills\.
Run it
Invoke it with /page-skill-v3, or just ask for a page — Claude picks it up.
What you need, and what this is not
- Claude — claude.ai or Claude Code. The skill is instructions for it, not software of its own.
- Nothing is installed on your website. It is a text file. It never touches your WordPress, never runs code on your server, and asks for no credentials.
- It writes pages; it does not publish them. You get one self-contained HTML file, review it, change what you want, and convert it when you are happy.
If the page comes with a separate CSS file, convert it as a ZIP. Uploading a
bare .html that links a css/ folder means the stylesheet never arrives —
the text imports fine and the design does not, so nothing looks wrong until you open it. Send the
whole folder as a ZIP and everything comes through.
Then you have an HTML file. Now what?
This is the part people underestimate. The skill hands you one self-contained page, and there are only three things you can do with it.
Drag out every section, re-enter every heading, re-pick every colour until it matches. It works. It also takes hours per page, and you are re-doing work that is already finished.
Thirty seconds, and the page looks exactly right — until someone asks you to change a price. Then you are editing code inside a text box, and so is your client, forever.
The page arrives as real Elementor sections: headings that are headings, buttons that are buttons, images in your Media Library. You edit it like anything else you have ever built — because that is what it is.
The converter does that in seconds, not minutes, calling no AI model — so it costs no credits, and the same file gives the same result every time you run it. That last part matters more than it sounds: a page you can re-convert is a page you can keep improving.
The skill is free. So is your first conversion.
Every WordPress site gets one free conversion — enough to take a page the skill wrote, put it into Elementor, and see the whole thing work end to end before you decide anything. A licence is what lets you keep going: every page after that, on that site.
See the converter