Decide how it looks once.
Answer five questions about how your project should look. Every page built after that has to reference your answers instead of inventing its own. No design software, no CSS, and no arguing with a model about colors on every page.
why they all look alike
Nobody told it how yours should look, so it used the average.
Vibe coded projects look alike because nothing said how yours should be different. The model reached for the average of everything it trained on. Your visitor has seen that average forty times, recognizes it before reading a word, and reads it as nobody having decided anything here.
Prompting your way out does not hold. Art direction supplied one page at a time never carries to the next page, so six pages become six dialects of the same project.
The same thing happens inside the code itself , not just on the surface. And if yours is already built and you would rather not redo it yourself, it can be rebuilt for you .
how it works
An interview, then a file your project keeps.
Run /codemyspec:design ui and answer the questions.
There is nothing to configure first.
You watch it fill in.
Your design system updates after every answer, so you can open it in a browser and see your palette and type as you decide. Change your mind while it is still cheap.
A page, not a document.
One file in your project that documents your choices and renders them live at the same time. Show it to someone and they see the real thing, not a description of it.
Every page has to cite it.
From then on, each page states its layout and behavior before any code exists, and the agent is told to read your design system first rather than invent something.
Roles, not swatches. You assign colors to jobs in your product rather than picking values you like. That is what makes a palette survive contact with features you have not thought of yet.
what comes out
Three projects. Three systems. One interview.
These answered the same five questions and share no palette, no density, and no type treatment. MetricFlow is an analytics product and wanted to feel alive. Keel is a ledger, and its file says why in one line: low eye-strain for long tax-season sessions.
The subtler thing they prove is what did not happen: none of them look like CodeMySpec. The process does not impose a house style. It makes you decide, then holds every page you build afterward to the decision.
what it does not do
What this doesn't do, said plainly.
You have probably been oversold once already, so here is the honest shape of it.
- Your design system reaches the agent as something it must read, and as a required section on every page before code exists. What does not happen is a machine rendering your finished page and checking it against your design system pixel by pixel. No tool does that today.
- The check confirms your design decisions exist and are complete. It does not confirm the built page obeyed them. Reviewing pages is still yours, with much less to review.
- The instruction points the agent at your design system file, so the file has to exist. Skip the interview and it points at nothing.
- This step is optional. Nothing stops you building pages without it, you just inherit the average again.
how it fits
One of several decisions you make once.
Design sits alongside the other things CodeMySpec has you settle before building: what the product does, how it is structured, what it runs on. The pattern is the same every time. You decide once through a structured interview, the decision lands in a file your project keeps, and later work has to reference it.
That is what working a process instead of prompting means in practice. Design is the clearest instance of it, because the cost of not deciding shows up on the page where your customers can see it.
questions
Straight answers.
Do I need to know design, or write any CSS?
No. The step interviews you and offers concrete options for every question, so you are picking rather than describing. You never open a design tool and you never write a line of styling.
What do I actually end up with?
One page in your own project that documents your choices and renders them live at the same time, in your colors and your type, with a switch for light and dark. It is plain HTML you can open in a browser, read, edit, and take anywhere. Because the documentation and the preview are the same file, they cannot drift apart.
Does this stop the AI from ignoring my design system?
It makes ignoring it much harder, and it is worth being precise about how. Your design system is handed to the agent as something it must read before building, and every page has to state its design choices before any code exists. What does not happen is a machine rendering your finished page and comparing it to your design system pixel by pixel. No tool does that today, and anyone implying otherwise is overstating. Reviewing pages is still yours, with far less to review because the decisions are already made.
Can I change my mind later?
Yes. Run the step again on an existing project and it walks you through revisions instead of starting over. The file updates as you answer, so you can see your palette and type while changing your mind is still cheap.
Do I have to do this before I build anything?
No, nothing blocks you from building without it. But run it before your first page and every page after inherits the decision. Run it late and you will be revisiting pages that guessed.
Will my site still look like every other AI-built site?
That sameness comes from nothing having told the model how your project should look, so it used the average of everything it trained on. Once your choices are written down and every page has to reference them, the average stops being the default. The decision is the fix, and the point of this step is that you make it once instead of arguing about colors on every page.
The cheapest afternoon in the project.
It is the one that stops you rebuilding pages later. Building with CodeMySpec is free.