Impeccable — design directions and gallery
Projekt-ScreenshotsÜber diesen Skill
Impeccable is a design workflow for coding agents that gives specific names to interface tasks. Use critique and audit to review a page, or operations such as polish and typeset to refine a component. It can also help build a new interface; its documented strongest use is iterating on an existing page or component.
Warum wir es empfehlen
A useful choice when you can describe an interface problem but struggle to turn it into an actionable request. Instead of repeatedly asking an agent to make a page look better, you can name the task: clarify the reading order, simplify competing content, or improve one component while preserving the surrounding design. Our recommendation is to start with a small, visible problem and review the result before expanding the scope.
Wobei es hilft
- Independent developers and founders: you already use an AI coding tool to build a product, and want to make a landing page or core screen easier to understand before launch.
- Frontend engineers: you have a working implementation, but headings, spacing, density or mobile layouts need a focused refinement pass.
- Designers who work with code: you want to explain a visual problem to an agent, inspect alternatives in context, and decide which change should enter the implementation.
- Small product teams: several contributors work on related screens, and you want shared design decisions to survive between tasks and agent sessions.
What can Impeccable help you do?
The official workflows cover both new work and focused improvements. Choose the scope before you start: one label, a component, a page, or a broader design direction. A smaller target makes it easier to judge whether the result solves the original problem.
Make content easier to read
Typography and layout commands help refine text and composition. A practical brief might ask the agent to make the main result easier to find, separate supporting details, and preserve enough space around the primary action.
Review a design before choosing fixes
Critique assesses the design; audit looks for implementation issues. Use a critique when a page feels confusing but you cannot name the cause. Use an audit when you want a more technical review before delivery.
Refine an existing interface
Focused refinement lets you preserve useful decisions while adjusting the weak parts. Tell the agent which product facts, navigation, branding and behaviors must stay. This is especially useful when a working page needs finishing rather than an entirely new direction.
Develop a new visual direction
For new work, Impeccable supports a design workflow that can start from a visual mockup or go directly to code. Bring a clear audience and purpose. References help explain your preferred composition, but the finished interface still needs usable content and interactions.
Official command referenceImproving an existing designBuilding a new interface
Practical use cases to start with
These are suggested starting briefs, not claims of measured conversion or performance gains. Pick the example closest to the problem in your own project and replace the details with real content.
A product landing page with competing messages
Ask which message a first-time visitor should understand first. Then give one refinement task: simplify the hero, explain the main benefit, or make the next action easier to locate. Keep the product's actual claims and signup flow intact.
A dashboard that is difficult to scan
Choose the question the user needs to answer, such as whether an order requires attention. Ask the agent to group related data and reduce competing emphasis. Evaluate the result using realistic labels and values rather than empty placeholder cards.
An article or documentation page
Give the agent a representative long page. Ask it to improve heading hierarchy, paragraph width and separation between prose and examples. Keep links and code readable, and include a small-screen view in your acceptance criteria.
A settings screen with incomplete states
Name the states that matter: saving, success, invalid input and network failure. Ask for clear feedback without shifting the surrounding layout. Include long names and translated labels if those occur in the product.
Previously reviewed release
The listing previously reviewed v4.7.0, published October 20, 2026. Check the current changelog and installation instructions for later releases; the date at the top records this page’s editorial review.
Common commands and when to use them
Most tools use /impeccable <command> <target>; Codex uses $impeccable <command> <target>. These are agent-chat instructions. Installation, updates and detector scans beginning with npx run in a terminal. The main-branch README currently lists 24 task commands.
A bare /audit or /polish is a shortcut only after it has been pinned, for example with /impeccable pin audit. Use the unified entry in new instructions. Add the target and constraints to make each request actionable.
| Befehl | Wofür er hilfreich ist |
|---|---|
/impeccable craft | Run the full shape-and-build workflow. |
/impeccable init | Save durable product context in PRODUCT.md. |
/impeccable document | Record the existing visual system in DESIGN.md. |
/impeccable extract | Extract reusable components and tokens. |
/impeccable shape | Plan the UX and UI before implementation. |
/impeccable critique | Review hierarchy, clarity and design direction. |
/impeccable audit | Check accessibility, performance and responsiveness. |
/impeccable polish | Refine an existing page before delivery. |
/impeccable bolder | Give an existing design more presence. |
/impeccable quieter | Reduce excessive visual emphasis. |
/impeccable distill | Simplify the interface and reduce clutter. |
/impeccable harden | Handle errors, long text, localization and edge cases. |
/impeccable onboard | Improve first-use flows and empty states. |
/impeccable animate | Add purposeful motion and feedback. |
/impeccable colorize | Use color to clarify states and actions. |
/impeccable typeset | Improve font choices, sizing and hierarchy. |
/impeccable layout | Improve layout, spacing and visual rhythm. |
/impeccable delight | Add fitting moments of delight. |
/impeccable overdrive | Explore ambitious effects for an appropriate surface. |
/impeccable clarify | Make labels, copy and next steps clear. |
/impeccable adapt | Adapt a design to other devices and screens. |
/impeccable optimize | Measure and improve interface performance. |
/impeccable live | Iterate on a locally running page in the browser. |
/impeccable generate | Compare variations for a named element. |
A suggested first workflow
You do not need to use every command. For a working page, a short sequence with a clear goal is easier to evaluate than asking for an unrestricted redesign.
Describe the user task and what must stay
For example: customers need to compare plans, and existing plan names, prices and signup behavior must remain. Also name the problem you see, such as weak hierarchy or too much decoration.
Ask for a critique of one target
Read the findings and choose the ones that match the problem. Our example targets a subscription comparison rather than the entire application.
/impeccable critique the subscription comparisonApply one focused refinement
State both the desired improvement and the decisions to preserve. A narrow instruction makes reviewing the code and visual result more straightforward.
/impeccable layout the subscription comparison. Keep plan names and signup behavior.Judge the outcome against the original task
Can the user compare the relevant information more easily? Try representative content and a narrow viewport. Keep useful changes, give specific feedback on remaining issues, and only then expand to other parts of the page.
How to install and get started
| Befehl | Wofür er hilfreich ist |
|---|---|
npx skills add pbakaus/impeccable | Alternative shared-Skill installation with skills.sh; use the recommended installer for tool-specific integrations. |
/impeccable pin audit | Optional agent-chat command: create /audit as a standalone shortcut. In Codex, start with $impeccable. |
npx impeccable detect https://example.com | Terminal-only rendered-page inspection. Replace the example URL with your page; this does not apply live edits to production. |
Run the installer in your terminal
Open the project folder in your terminal. The getting-started guide requires Node.js 18.19 or later for this installer.
npx impeccable installChoose your coding tool and scope
Follow the installer prompts, then reload your coding tool. The installer handles tool-specific locations; use its generated instructions if your tool needs an additional setup step.
Give the agent product context
Run init in the agent conversation to establish the audience and goals in PRODUCT.md. In Codex, use $impeccable init. Review the saved context before asking for design work.
/impeccable initChoose one page, then keep the installation current
For an install managed by the recommended CLI, run npx impeccable update in the terminal, then reload your tool. Claude Code plugin installs update through /plugin; skills.sh installs use npx skills update impeccable.
npx impeccable update
Browser iteration and automatic design checks
Compare changes in Live Mode
Live Mode connects a running page with your agent session. You can select an element, describe a change, compare alternatives and accept the one you want in the project. Give the page enough real content to assess the result in context.
Scan supported UI code or a rendered page
The deterministic detector can flag supported issues such as low contrast, overflow and design-system drift. It does not need an LLM or model API key for the scan itself. Its findings cover defined rules; broader design judgement still belongs in a critique and your own review.
Enable hooks where your tool supports them
Automatic hooks send detector feedback while the agent works on UI code. Setup and approval differ between coding tools, so follow the official hook guide. Installing the Skill and allowing its hooks are separate setup steps.
Live Mode browser iterationDeterministic detectorAutomatic design checks
Keeping later pages consistent
If an existing product has visual decisions you want to keep, document them before asking the agent to add more screens. The document workflow records the current system in DESIGN.md, while PRODUCT.md holds audience and product context. Review those records so future tasks inherit deliberate choices.
For a small team, we suggest using a representative screen as a reference and naming the shared controls that must be reused. When a repeated pattern is ready to become a component, ask for extraction explicitly. Refresh the design record after an accepted change so it stays useful for the next contributor.
When to choose a different approach
You need a ready-to-use hosted website
Plan for an implementation workflow: an agent, a project and a place to run the result. If you need hosting, deployment or business integrations, those remain part of your project setup.
You are solving backend or business problems
Use this Skill where the interface is the part that needs attention. Database correctness, permissions, payments and domain-specific rules require their own implementation and review.
You need a guaranteed commercial outcome
Define a hypothesis and measure it in your own product. A clearer interface may be worth trying, but screenshots and design commands alone cannot establish a conversion improvement. The scenarios here are starting briefs, not performance results.
Impeccable vs UI UX Pro Max
Choose Impeccable when you want focused actions on an existing interface, such as a usability critique or typography pass. Choose UI UX Pro Max when the task starts with searching design references and generating a project design system. They can also be used together: establish a direction first, then review the resulting page.
UI UX Pro Max on SkillHey
Search design references and create project-level design-system guidance.
GitHub README and project sourceImproving an existing designReviewed upstream Skill
Vor der Nutzung
- An AI coding tool that can load the Skill, plus access to the project you want to change. Choose the appropriate tool and installation scope in the installer.
- For the recommended npx installer, follow the official getting-started guide's Node.js requirement. Other installation routes are documented by the author.
- For Live Mode, keep a local web page and the agent session running. Browser integration and automatic hooks depend on the tool's supported capabilities and trust settings.
- Provide real product context and representative content. Review changes against the task you care about, especially important flows, long labels and narrow screens.
Unterstützte Agents
Häufige Fragen
Can I use it on an existing project?
Yes. The official improvement workflow starts with an existing page. Explain the problem and what must remain, then choose a focused task. You can begin with one component without changing the whole visual identity.
Do I need to know design terminology?
You can describe the problem in ordinary language. For example, say that people cannot find the primary action or that a table is hard to scan. Focused commands are useful when you already know which kind of improvement you want.
Why do command examples differ in Codex?
Use /impeccable <command> <target> in most agent chats and $impeccable <command> <target> in Codex. A bare /audit is available after pinning it with /impeccable pin audit. Reload the tool after installing or updating.
Does the detector require a model API key?
The deterministic detector does not need an LLM or model API key for its checks. Agent-led design work still uses your coding tool's model access, and image-generation workflows need their own supported setup. Those capabilities have different requirements.
Where can I see an official example?
The Neo Mirai case study describes a fictional conference site built from a mockup and a brand toolkit. It shows how a visual direction became a responsive implementation and how browser iteration addressed layout and interaction issues. The link is included in the sources below.
Quellen und Referenzen
Die Originalquellen sind unten verlinkt. Praktische Einstiegsideen sind redaktionelle Vorschläge von SkillHey.
- GitHub README and project source
- Official command reference
- Installation and first steps
- Improving an existing design
- Building a new interface
- Live Mode browser iteration
- Deterministic detector
- Automatic design checks
- Working with a design system
- Neo Mirai official case study
- Official release notes
- Reviewed upstream Skill
- UI UX Pro Max on SkillHey
