Build something new
Start with an idea, a new page, or a redesign. Choose a direction, then bring it into code.
/impeccable design a signup page for our monthly book clubStart with Impeccable
Build an interface you have in mind, or improve the one you have.
Install via
npx impeccable installIf you use the GitHub Copilot app, Impeccable is built in. Enable it in Settings → Experimental, then set up your project.
Install options and tool support
Choose your coding tool and install for this project or all your projects. The installer selects the build for your tool.
Each build includes the file locations and integrations your tool supports, plus guidance for common design mistakes made by its models.
/plugin marketplace add pbakaus/impeccableRun in the Claude Code chat. Then open /plugin, choose Discover, and install Impeccable.
npx skills add pbakaus/impeccableRun in your terminal to install the shared skill. Use the recommended installer for integrations tailored to your coding tool.
Get started
/impeccable initIn your agent chat, save your audience and goals in PRODUCT.md.
Update later with npx impeccable update
Update Impeccable with npx skills update impeccable
What are you working on?
Describe the outcome in your agent chat. You don’t need to know a special command.
Improve an existing design
Describe what feels wrong or ask for a focused pass. Keep the decisions that already work.
/impeccable polish the pricing pageWant to see a mockup before building?
Mockup first (comp-led) opens up bolder visual directions, with several rounds to translate the image into code. Build directly (code-led) tends to produce a more coherent first build, with less ambitious visuals.
Enable image generation with your coding tool or an OpenAI API key. Compare the workflows →
Keep designing
Work with a design systemRecord shared rules and make the next page fit.Generate variationsName an element and direction in chat, then compare on the page.Iterate in the browserName or pick an element, compare variations, and accept one.Review with a visual overlayUnderstand the findings and decide what to fix.
Checks & troubleshooting
Reference
Command reference
Use a focused command when you know what kind of change you want.
Create 2
Evaluate 2
Refine 8
- animateUse motion to make changes, relationships, and feedback clear.
- bolderGive an existing section more presence while keeping it true to the design.
- colorizeUse color to clarify actions, states, and the design’s character.
- delightMake meaningful moments surprising, satisfying, and unmistakably yours.
- layoutArrange the page so people know where to look and what belongs together.
- overdrivePush past the expected. Make an interface feel extraordinary.
- quieterReduce visual noise while keeping the design’s personality.
- typesetMake text easier to read, scan, and recognize across the product.
Simplify 3
Harden 4
System 5
- documentRecord your visual system so future work can follow it.
- extractTurn repeated UI patterns into shared components and styles.
- generateName an element, compare variations, and keep your favorite.
- initGive Impeccable the context to design for your project.
- livePoint at your page, explore variations, and keep the one you like.