Impeccable
Frontend design
Commands and checks for typical AI design patterns, for steps 7 and 9.
Guide · October 2026
Design a website with AI, one decision at a time.
Free agent skills that take you from facts and personas to a tested prototype, in eleven steps from established design practice. The agent does the work. You make the decisions, on a short review page after every step.
The problem
Why "build me a website" looks like every other website.
Ask an AI for a website and you get one in minutes. It usually looks familiar: the same fonts, a purple gradient, three cards in a row. Anthropic calls this distributional convergence: without constraints, a model picks the most likely option, and the most likely option is the average of the web.
More prompting rarely fixes it. What is missing are decisions: who the site is for, what is true about the offer, what it should feel like and what it must not look like. A design agency gets those from a process. These skills give your agent the same process.
AI changes one thing about that process. Variants used to be expensive, so teams made few. Now an agent can draw ten in an hour. The bottleneck moves from making to deciding, so every step here ends with a decision, not with a deliverable.
How it works
Install, say one sentence, then decide.
- Copy the skills into your agent's skills folder. They use the open Agent Skills format, so they work with Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and other agents that read
SKILL.mdfiles. For Claude Code:git clone https://github.com/caelo-cms/website-design-skills cp -r website-design-skills/skills/* ~/.claude/skills/ - Open an empty folder and say "I want to design a new website for my company", or "Let's redesign example.com".
- The agent asks a few setup questions and starts with step 1. After each step it shows a review page: the result, why the step exists and three to eight decisions, each with a recommended option. You tick, click Copy feedback and paste it into the chat.
The project lives in plain files: STATUS.md says where you are, DECISIONS.md records every decision with date and source. Close the laptop, come back next week and say "Let's continue".
Phase 1 · Understand
Know what is true and who it is for.
Most redesigns start with colours. These two steps come first because every later step builds on them, and because an AI fills every gap with something plausible.
1 · Facts and inventoryWhat the offer, prices and proof really are, each with a source. Every page of the old site gets a verdict: keep, merge, rewrite or drop.
2 · Personas and goalsYou answer ten short questions about your best customers. The AI builds personas from them and marks what it assumed. Plus measurable goals for the site.
Phase 2 · Define
Decide what to say before deciding how it looks.
Structure and message are cheap to change on paper and expensive to change in a finished design. Grey wireframes keep the discussion on content.
3 · Positioning and brand attributesPromise, proof and four or five attributes, each with the pole it must not slide into: calm, but not sleepy.
4 · Structure and wireframesPage tree, navigation, URLs and redirects first. Then grey wireframes with real text, in the order the pages need to answer questions.
Phase 3 · Develop
Find a look that is yours, then make it a system.
This is where AI defaults creep in. Real references, named directions and explicit anti-defaults keep the result away from the average.
5 · MoodboardReal websites, print, places and photos you like or dislike, rated keep, change or drop. The AI summarises your taste; it does not invent the references.
6 · Directions as style tilesThree directions as colour, type and interface elements, not as full pages. You judge the feel without reopening the layout.
7 · Design systemTokens with measured contrast, fonts with file size and licence, spacing, components, and a DESIGN.md that every later AI session follows.
8 · Copy in page contextFinal text written into the wireframes and checked against the fact base. Claims without a source do not ship.
Phase 4 · Deliver
Build it, look at it, test it, hand it over.
The agent builds from the tokens and looks at its own screenshots on phone and desktop before you see anything.
9 · Prototype with QA loopKey pages as HTML, checked for overflow, contrast, accessibility (WCAG 2.2 AA), the performance budget and typical AI patterns.
10 · Test with personasEach persona gets a task and a five-second impression. Good for finding obvious problems; five real users find far more.
11 · CMS handover and measurementTokens become the theme, components become modules with named fields, and every goal gets a metric and a date.
Moodboards
Real references, rated by you.
AI-generated moodboards show what the model already knows, which is exactly the look you want to escape. So the skill asks for around 24 real references: about half of them not websites at all (print, interiors, signage, photography), and at most a quarter from competitors.
You rate each one keep, change or drop and say why in a few words. The agent turns that into a taste profile with mood words, things to avoid and the reference behind each rule. A later round checks the direction with a word test: which three words describe it?
Case study
How we redesigned caelo-cms.com this way.
The process comes from our own work. These are the real review pages from the redesign of this site, in German, our working language.
Our own redesign compared full pages in the directions step. It worked, but every round reopened layout questions. That is why the skills use style tiles.
Limits
What AI is good at here, and what it is not.
- Good at: collecting and ordering facts, drafting variants, writing copy to a brief, building HTML, checking its own screenshots against a list.
- Not good at: knowing your customers. AI personas and AI test users are a pre-filter: they find obvious problems and tend to be too positive. One real conversation per persona, and five real people for the test, are optional steps the skills offer when it matters.
- Not allowed to: invent facts. Every claim on the site needs a source in the fact base, and the agent marks assumptions as assumptions.
Step 11
Where the design comes to life.
A prototype is thrown away. What stays is the system: tokens, modules, templates. Built that way, a site keeps its look when editors and AI change it later.
Step 11 works with any CMS. For Caelo it includes a guide: your agent connects through MCP, sets the theme from your tokens, builds one module per component with named fields and fills the pages with the approved copy. Caelo runs the quality gate on every Stage and keeps Publish live a person's click.
Start
Design your next website with a process.
Free, MIT-licensed, and it works with any agent that reads skills.