Skip to main content
skill Claude Code CX Codex Cursor GitHub Copilot

impeccable-design-polish — Claude Code skill: setup and features

Polishes existing HTML pages by removing generic AI styling cues, fixing mobile layout bugs, and tightening accessibility.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add nexu-io/open-design --skill impeccable-design-polish -a claude-code
Open on GitHub

What impeccable-design-polish does

This skill acts as a finishing pass for an existing HTML artifact. It does not rebuild layouts from scratch. Instead, the agent inspects the markup to catch hierarchy issues and uneven spacing.

Work happens across six modes: audit, critique, polish, animate, harden, and live review. The skill targets typical AI tells. It strips out purposeless purple-blue glow gradients and oversized card radiuses.

Running this skill on an empty workspace is pointless because it requires an existing HTML file to inspect. For complex motion work, the author suggests pairing it with emilkowalski-motion or GSAP skills.

What it helps with

  • remove artificial purple-blue gradients and oversized rounded cards
  • fix mobile layout overflow and clipped text
  • ensure proper color contrast and keyboard focus states
  • introduce restrained interface motion without layout shifts

Example prompts for the agent

  • Use impeccable-design-polish on the current HTML artifact to tighten hierarchy and remove AI tells
  • Run impeccable-design-polish in harden mode to resolve mobile overflow issues
  • Review this landing page with impeccable-design-polish before sharing it live

How to install impeccable-design-polish

1Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill impeccable-design-polish -a claude-code

2Manually: put the files in place

~/.claude/skills/impeccable-design-polish/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/impeccable-design-polish/

From the same set106

The whole set →
ui-ux-pro-max nexu-io A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests. Claude Code CX Codex Cursor +1 5,400installs frontend-design nexu-io Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. Claude Code CX Codex Cursor +1 4,800installs threejs nexu-io Guides the agent in building browser 3D scenes, materials, interactive controls, and post-processing with Three.js. Claude Code CX Codex Cursor +1 3,400installs creative-director nexu-io This skill takes a creative concept from brief to presentation and checks it on three axes. Use it for campaign ideas and creative critique. Claude Code CX Codex Cursor +1 3,400installs design-brief nexu-io Parses an I-Lang design brief into a concrete spec with palette, typography, density, and constraints. Eliminates ambiguity from phrases like "make it professional." Claude Code CX Codex Cursor +1 3,400installs apple-hig nexu-io Integrates Apple Human Interface Guidelines for iOS, macOS, visionOS, watchOS, and tvOS into your coding agent during planning. Claude Code CX Codex Cursor +1 3,200installs hatch-pet nexu-io Creates, validates, and packages 8×9 animated pet spritesheets for Codex. Use it when turning visual references or concept prompts into importable digital pet companions. Claude Code CX Codex Cursor +1 3,100installs design-md nexu-io Creates and maintains DESIGN.md with design direction, tokens, and visual rules. Useful when an agent needs one source of truth for a project’s design system. Claude Code CX Codex Cursor +1 3,100installs

Similar

argent-lens software-mansion Visual variant staging for UI elements in a native preview window. Stages design options on a simulator so you can pick the winner. Claude Code CX Codex Cursor +1 22,400installs magic-ui magicuidesign The magic-ui skill teaches Claude Code to work with Magic UI components in React and Next.js: select animations, install via shadcn registry, and check accessibility. Claude Code CX Codex Cursor +1 1,200installs pptx-generator MiniMax-AI A skill to read, edit, and build PowerPoint decks from scratch using PptxGenJS and XML workflows. Useful when generating presentations from code or extracting slide text. Claude Code CX Codex Cursor +1 6,000installs material-ui-theming mui Skill for building and managing Material UI themes: palettes, color schemes, CSS variables, light/dark switching, and TypeScript augmentation. Use it when designing your app's visual system or implementing theme customization. Claude Code CX Codex Cursor +1 604installs ip-as-logo s1dashu This skill creates simple square character images for logos and product visuals. Use it when you need a clear silhouette and several candidates to compare. Claude Code CX Codex Cursor +1 3,400installs diagram-generator zhaoxuya520 Generates, checks, and renders diagrams from text, code, schemas, and tables. Useful for architecture views, process maps, and UML models. Claude Code CX Codex Cursor +1 1,300installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. Claude Code 1,424,476installs

Questions about impeccable-design-polish

How do I install impeccable-design-polish in Claude Code?

Run npx skills add nexu-io/open-design --skill impeccable-design-polish -a claude-code in your terminal. You can also place the file directly at ~/.claude/skills/impeccable-design-polish/SKILL.md.

What does impeccable-design-polish do?

It audits and polishes existing HTML code instead of generating pages from scratch. The skill removes visual AI clichés, fixes responsive layout bugs, and tunes typography.

Which complementary skills work well with it?

The repository recommends pairing it with design-taste-frontend or gpt-taste for taste audits. For advanced web animations, it pairs with emilkowalski-motion or GSAP skills.

Source text

SKILL.md · Apache-2.0
---
name: impeccable-design-polish
description: |
  Follow-up design polish skill inspired by Impeccable. Use after a web or HTML artifact exists to audit, critique, polish, animate, harden, and prepare the page for a live/share pass.
triggers:
  - "impeccable"
  - "design polish"
  - "polish page"
  - "anti ai polish"
  - "critique design"
  - "animate page"
  - "harden ui"
  - "live review"
  - "反 AI 味"
od:
  mode: prototype
  surface: web
  platform: desktop
  category: creative-direction
  upstream: "https://github.com/pbakaus/impeccable"
  preview:
    type: html
  design_system:
    requires: true
  craft:
    requires:
      - typography
      - color
      - anti-ai-slop
      - animation-discipline
      - accessibility-baseline
  example_prompt: |
    Use impeccable-design-polish on the current HTML artifact: audit visual hierarchy, remove AI tells, tighten copy, add restrained motion, and harden responsive/accessibility issues.
---

# Impeccable Design Polish

Use this skill as the post-generation pass for an existing design. It should not restart the project from scratch; it should make the current artifact sharper, more usable, and closer to something a designer would ship.

## Follow-Up Modes

- **Audit**: identify the highest-impact issues in hierarchy, spacing, color, type, interaction states, responsiveness, and accessibility.
- **Critique**: explain what feels generic, overdesigned, underdesigned, or inconsistent.
- **Polish**: directly edit the artifact to improve the top issues while preserving the user's intent.
- **Animate**: add restrained, useful motion only where it improves feedback or storytelling.
- **Harden**: repair mobile overflow, text clipping, contrast problems, missing states, broken links, and fragile layout assumptions.
- **Live**: prepare the artifact for presentation or sharing, including final visual QA and clear next actions.

## Operating Rules

1. Inspect the current HTML/page before editing. Do not guess from the prompt alone.
2. Keep the existing content, brand, and scenario unless the user explicitly asks to change them.
3. Prefer a few decisive fixes over broad cosmetic churn.
4. Remove common AI tells:
   - purple-blue glow gradients with no product reason
   - generic 3-card feature rows
   - oversized rounded cards everywhere
   - empty marketing adjectives
   - inconsistent spacing and type scale
   - decorative effects that do not support comprehension
5. Preserve accessibility: focus states, contrast, semantic controls, readable text, and reduced-motion fallbacks.
6. Finish with the artifact in a better runnable state, not just a critique list.

## Best Pairings

- Pair with `design-taste-frontend` or `gpt-taste` for stronger anti-slop redesign work.
- Pair with `emilkowalski-motion` or GSAP skills for motion-specific polish.
- Pair with image/video skills when the artifact needs real visual assets rather than CSS-only decoration.

© nexu-io · Apache-2.0 · nexu-io/open-design

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor