design-iterator_skill

Overview

This skill is a UI/UX design iterator that runs focused, repeatable refinement cycles on a single component or area until the visual issues are resolved. It captures element-only screenshots, proposes 1–2 targeted tweaks per cycle, implements them, documents the change, and repeats for N iterations to converge on a polished result. Use it when small, single-shot changes fail to fix balance, color harmony, or hierarchy.

How this skill works

On invocation the agent confirms the target element, opens a headed browser at a recommended viewport, and captures an initial focused screenshot. For each iteration it identifies 3–5 observations, chooses the single highest-impact change, applies a small measurable code update, documents the action and rationale, then captures a new focused screenshot. The loop repeats for the requested number of iterations or until no clear improvement remains.

When to use it

• After 1–2 quick edits where the design still feels off (color balance, spacing, weight).
• When a component needs progressive tuning rather than a single sweeping change.
• To explore multiple visual directions quickly (5x or 10x iterative passes).
• When you want documented, conservative changes that preserve functionality.
• When you need a reproducible record of what changed and why during design refinement.

Best practices

• Always screenshot only the target element/area to keep visual context tight.
• Make 1–2 small, measurable changes per iteration (e.g., font-size 24→28px).
• Start with structure (layout, spacing), then move to color/typography and finally polish.
• Preserve working elements; never undo previously approved improvements.
• Keep accessibility in mind: check contrast ratios and semantic markup after changes.

Example use cases

• A CTA button was recolored but the page still feels unbalanced — run 10 iterations to tune contrast, shadow, and spacing.
• Hero section typography reads weak — iterate to establish hierarchy and rhythm across breakpoints.
• Card grid looks flat — run 5 iterations to add depth, subtle motion, and improved spacing.
• Product page details feel cluttered — refine spacing, badge treatments, and icon scale progressively.