Make your AI-built website look like yours.
The Impeccable walkthrough from my TikTok, plus a few instructions to try on your own site.
Collected by Kevin Magnan. Skill and demonstration by Paul Bakaus.
Watch the comparison
Paul Bakaus / AI Engineer / 16 minutes
Same request. Different design direction.
Paul opens with the same project, model, and request to make a section bolder, with and without Impeccable. He also points out what still needs work. Start at 0:58 and compare the results yourself.
This guide draws on Paul's demonstration. The example instructions below are adaptations for your own project, not results from a personal test.
Get it into your project
Impeccable adds design guidance to an AI coding tool. Open your website's project folder in the terminal, then run the install command from its official instructions.
npx impeccable install
Choose the coding tool you use during setup. Then open a session in that project and run:
/impeccable init
Requires Node.js/npm for the terminal installer. Review the repository before installing. Installation adds local skill and hook configuration; it does not make your model usage free. In Codex, use /skills or $impeccable to find the skill if needed.
Give it something to design for
Before asking for changes, fill in these four details. A reference is more useful when you explain what you like about it.
- Who's it for?
- The person visiting and the thing they came to do.
- How should it feel?
- Use words you can explain, such as calm, playful, or direct.
- What should it avoid?
- A look, pattern, or feeling that would be wrong for this project.
- What's the reference?
- A link or screenshot, plus the specific detail worth borrowing.
This website is for [audience]. Their main task is [action]. It should feel [qualities], because [reason]. Avoid [patterns or feelings that don't fit]. Reference: [link or screenshot]. I like its [specific detail]. Preserve [existing brand, content, and functional constraints]. Ask me about any missing context before making changes.
Pick the change the page needs
Work on one section at a time. These examples give you a starting point; replace the target with the part of your own site you're editing.
Bolder
When everything has the same visual weight.
Make the important part easier to see through size, type, and hierarchy. Keep the project's existing design direction in view.
/impeccable bolder the main call-to-action section. Strengthen the hierarchy and typography while preserving our brand colors and existing copy.
Distill
When the page has too much going on.
Reduce the visual clutter around the visitor's main task. Specify anything that must stay, especially required content and functionality.
/impeccable distill the services section. Make the next action easy to find. Preserve the service details, pricing, and working links.
Harden
When the happy-path preview looks finished.
Check what happens with long text, missing content, errors, and other edge cases. Ask for an audit as well when checking accessibility, responsiveness, and performance.
/impeccable harden the contact form. Check long inputs, validation, error messages, and submission states. Preserve the existing submission behavior.
Follow with /impeccable audit for a broader quality check. Inspect the page on your phone and test the form yourself.