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.
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.
Start with what
you want to make
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 design a signup page for our monthly book club. Make the next event and how to reserve a seat clear.
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.
Give it context it can reuse
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.
- Audience
- Readers choosing a book-club event.
- Main task
- Understand the next meeting and reserve a seat.
- Constraint
- Use confirmed dates and capacity. Do not invent availability.
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.
Choose a direction you can see
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.
Can I go straight to code instead?
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.
Improve what is already there
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.
/impeccable this pricing page feels generic, and it is hard to compare plans. Give it a clearer hierarchy while keeping our brand and pricing accurate.
- Describe the outcome: ordinary language is enough. For a change you can name, commands such as layout, typeset, and colorize focus the work.
- Ask for a review: critique explains what is holding the design back and recommends where to start. You choose which changes to make.
- Compare alternatives: generate takes an element and a direction from chat, then shows variants in your running page. Choose the version to keep in source.
- Point at the page: Live Mode lets you select elements yourself. Use Steer for a direction that applies across the page.
/impeccable generate 3 bold variants of the pricing cards
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.
Check the work before release
Choose checks that fit what changed. A new checkout, a rewritten help page, and a color adjustment need different attention.
- Review the implementation with audit: investigate accessibility, performance, responsive behavior, theming, and anti-patterns.
- Make the words clear with clarify: check labels, instructions, errors, and empty states against what people need to understand.
- Handle difficult cases with harden: look at missing data, long content, failures, and recovery.
- Finish the details with polish: refine hierarchy, spacing, consistency, and interaction in the working interface.
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.
Keep the design consistent as it grows
As features accumulate, similar components can drift apart. Keep shared code and recorded design decisions aligned with the product you are building.
- Consolidate repeated patterns with extract. Turn recurring designs with the same purpose into shared components and reusable style values, then update their uses. Visual similarity alone is not a reason to merge different behaviors.
- Update the visual record with document. Record the current palette, type, layout, and components in
DESIGN.mdso later work can follow the established system. Update it when the design changes intentionally. - Keep checks close to the work with hooks. Run automated detector checks after relevant agent edits, so supported tools can surface problems while the work is still in progress.
In the interfaceYour usual orderReview quantities and delivery before placing it.
In DESIGN.md
colors.action: "#263c32"Use the dark green primary button for the main action. Keep secondary actions quieter.
Keep the button’s focus outline visible for keyboard use.
Work in chat, inspect in the browser, check in automation
Design commands run in your AI coding tool. The detector also works outside that conversation:
- In the terminal or CI: scan files, folders, or rendered pages. JSON output and exit codes let you use findings in automated checks.
- In Chrome: use the extension to scan a page and show findings on its elements. Browser permissions still apply.
These checks identify known patterns. They support the broader design work; they do not decide the whole design for you.
What did the visitor come to do?
The same product may need a persuasive landing page, an efficient app, and readable documentation. Impeccable adapts its design decisions to that purpose.
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.
A few habits that help
- Give it one clear set of design instructions. Overlapping design skills can pull the agent in different directions. Choose which should guide the work.
- Pin only the commands you use often. Shortcuts are optional; the main command already gives you access to the full skill. Set up a shortcut.
- Keep context useful. Correct stale product facts and record intentional design changes. More text is not automatically better context.
- Keep your own judgment. Impeccable can supply design expertise, but your goals, constraints, and feedback guide the result.
Where to start
Get set up for a first design session, or choose a tutorial to work through Live Mode or critique step by step.