Install & first steps
Install Impeccable, then build or improve a page.
On this page 5 sections
You’ll need a coding tool, a project folder, and Node.js 22.18 or later. An empty project or freshly scaffolded app is fine.
Which coding tools can I use?
Impeccable supports Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode, Pi, and other coding tools. The installer lets you choose your tool and installs the matching build.
Using the GitHub Copilot app? Impeccable is built in. Enable it in Settings → Experimental, then skip to step 2. You don’t need the terminal installer for this route.
For other install methods, see installation options on the homepage.
1. Install Impeccable
In your terminal, open your project folder and run:
npx impeccable install
Follow the prompts to choose your coding tool and install for this project or all your projects. Then reload your coding tool.
For other methods, see installation options on the homepage.
The remaining commands go in your agent chat. Choose your coding tool in any command box; the examples will use its syntax.
Not showing up, or enabled automatic checks?
If Impeccable doesn’t appear after reloading, run the installer again and check your coding tool and installation scope.
If you enabled the automatic design hook, allow it to run in your coding tool. It checks UI edits and sends findings back to your agent.
2. Give Impeccable the context for your project
Impeccable needs to know who your project serves and what those people need to do. Save that context with:
/impeccable init
Impeccable reads the project first, then asks you to fill the gaps. Describe the people who will use it and the decisions their needs should shape. For example:
Our customers reorder the same supplies every week. They need to find their usual items and check out quickly, often on a phone.
Include anything the work must preserve, such as established product names or accessibility requirements. You can leave colors and fonts for the design work.
Impeccable saves the agreed context in PRODUCT.md. Read it before moving on. Correct anything it misunderstood; future commands will use this file to guide their work.
Choose how new designs start
Mockup first (comp-led) can push the visual direction further, but translating the image into code loses detail; expect a few rounds of prompting and review. Build directly (code-led) tends to give you a more coherent first implementation, with less ambitious visuals. Both paths include a design direction and review.
Init may ask which path to save as the default. You can switch in the design picker later. Compare workflows and defaults.
Already have a design system? Record it before you build
/impeccable document
Impeccable reads the interface and records colors, typography, and component rules in DESIGN.md. Review the file so later work follows the decisions you want to keep. Skip this for an unstyled scaffold.
See Work with a design system for the workflow.
3. Choose your first task
Ordinary language is enough. Choose the path that fits your project:
- Build something newCreate a page or redesign an interface.
- Improve an existing designRefine a page while keeping what works.
Build something new
Describe a page, its audience, and what visitors should be able to do:
/impeccable design a signup page for our monthly book club. Help visitors understand the next event and reserve a seat.
Impeccable helps resolve missing details, develops a direction you can choose and steer, then builds and reviews the interface. In the mockup-first workflow, you approve a composition before implementation. A new page inside an established product follows that product’s visual system.
Follow Build something new for the direction picker, mockups, redesigns, and what carries into future sessions. Use shape if you want to stop at a plan before implementation.
Improve an existing design
Describe what feels wrong, or name a page for a focused polish pass:
/impeccable polish the pricing page
polish refines spacing, typography, labels, and interaction states within the existing design. Add any constraints to your request: “Keep our colors and the current plan names.”
Unsure what needs fixing? Ask for /impeccable critique the pricing page, read the findings, then choose what to address. See Improve an existing design for examples.
4. Review the result
Open the page and try its main task. Can you reserve a seat, or compare the pricing plans and choose one? Check a narrow screen too, and review the code changes.
Tell your agent what to keep or adjust. For example:
The plan comparison is easier to read now. Keep that, but restore the monthly/yearly switch above it.
If the overall design still feels wrong, describe what you want to change or ask for a redesign. A polish pass is for refining the design you have.
What to try next
- Keep future pages consistent: Work with a design system to record shared decisions and reuse existing components.
- Compare visual alternatives: Generate variations by naming an element and direction in chat, or pick it in Live Mode. Compare on the page and accept one into your code.
- Check before shipping:
/impeccable audit the pricing pagereviews accessibility, performance, responsive behavior, and other implementation issues.
To update an installation made with npx impeccable install, run npx impeccable update in your terminal. Marketplace installations update through your coding tool’s plugin menu.