impeccable-design-polish

designnexu-io2.3K installs

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.

Install

npx skills add https://github.com/nexu-io/open-design --skill impeccable-design-polish

SKILL.md

---name: impeccable-design-polishdescription: |triggers: od: mode: prototypesurface: webplatform: desktopcategory: creative-directionupstream: https://github.com/pbakaus/impeccablepreview: type: htmldesign_system: requires: craft: 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

Inspect the current HTML/page before editing. Do not guess from the prompt alone.
Keep the existing content, brand, and scenario unless the user explicitly asks to change them.
Prefer a few decisive fixes over broad cosmetic churn.
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
Preserve accessibility: focus states, contrast, semantic controls, readable text, and reduced-motion fallbacks.
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.

Related skills

frontend-designanthropics932KGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.prototypemattpocock852KBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.hyperframes-animationheygen-com569KAll animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography hyperframes-creativeheygen-com539KNon-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.