Designing with Impeccable

You can start with an idea, a rough interface, or a product people already use. Tell Impeccable what you want to make better. It can help work out the design and carry it through to code.
Describe the page, who it is for, and what someone should be able to do. You do not need a finished brief or the right design vocabulary.
Impeccable reads the project, asks about decisions it cannot safely infer, and helps you choose a direction before building. Bring references, rough sketches, or a strong idea if you have them.
Init records the product’s audience, purpose, and constraints in PRODUCT.md. It reads what is already available so you do not have to explain everything from scratch. For an existing visual system, document records the design separately in DESIGN.md.
Existing code is useful context too. Missing product context can still lead to the wrong assumptions about the audience or what matters. Keep the saved record current as those facts change.
Use shape when you want to agree on a plan and stop before implementation.
With a mockup-first (comp-led) workflow, image generation can push the visual direction beyond what the coding model would naturally build. You choose a composition, then Impeccable works toward it in code. That translation loses detail: expect a few rounds of prompting and review to get closer to the mockup.
The Neo Mirai case study shows a generated brand toolkit and page mockup alongside the working site built from them. The conference is fictional.
Read the Neo Mirai case study or open the working site.
To inspect the small details, open the full-size brand reference or full-size page mockup.
Yes. The direction picker lets you choose mockups first or go straight to code. You can save a project default and still change the path for an individual session in the picker. Code-led still starts with a concept, but the model builds within its natural visual range. It tends to look more coherent on the first pass, with less ambitious execution.
Compare mockup first (comp-led) and build directly (code-led), or enable image generation for your coding tool.
Mockups require an image-generation tool. Impeccable can use a supported tool in your coding environment or an API-backed fallback when configured. It should tell you before using your own API credit. Without image generation, use the code-first path.
The first two Neo Mirai images above were generated with OpenAI GPT Image 2. That is the case study’s tool, not a requirement for using Impeccable.
If the page looks sloppy or obviously AI-generated, say so. You can also name a specific problem: the important number is buried, the form is tiring, or the layout falls apart on a phone. Impeccable can help diagnose it and choose an approach.
A focused refinement keeps the existing design identity. Say when you want a redesign that departs from it. If a result misses your intent, explain what feels wrong or show a reference; you do not need to accept the agent’s first answer.
Choose checks that fit what changed. A new checkout, a rewritten help page, and a color adjustment need different attention.
Give the agent a clear target and describe the states that matter. Review the changes and try the actual task, including on narrow screens and with a keyboard. A clean report is useful evidence; it does not replace using the result.
Looking for a specific check? Browse the full command reference or the anti-pattern catalog with visual examples.
As features accumulate, similar components can drift apart. Keep shared code and recorded design decisions aligned with the product you are building.
Use the dark green primary button for the main action. Keep secondary actions quieter.
Keep the button’s focus outline visible for keyboard use.
Design commands run in your AI coding tool. The detector also works outside that conversation:
These checks identify known patterns. They support the broader design work; they do not decide the whole design for you.
The same product may need a persuasive landing page, an efficient app, and readable documentation. Impeccable adapts its design decisions to that purpose.
Decide and act (Persuade): make the offer clear and give someone a reason to take the next step. Common on landing pages, campaigns, and pricing pages.
Complete a task (Operate): make frequent actions easy to find and carry out. Common in dashboards, editors, and product interfaces.
Understand something (Read): use clear structure, readable type, and a comfortable pace. Common in docs, guides, and help.
Explore the work (Experience): let the work itself lead. Common in portfolios, galleries, and showcases.
You can describe the visitor’s task in your own words. Knowing the mode names is optional.
Get set up for a first design session, or choose a tutorial to work through Live Mode or critique step by step.