design-exploration_skill

Overview

This skill generates a visual design catalogue of 6–12 diverse proposals for an existing project to help choose a clear aesthetic direction before implementation. It emphasizes living visual previews (HTML or Pencil) and a rigorous review loop so the selected direction is implementation-ready. All visual generation is delegated to Kimi K2.5 via MCP, with research and orchestration steps handled by other tools.

How this skill works

I inspect the current UI, infer its design DNA across layout, color, typography, motion, density and background, and run targeted research to surface distinct directions. Proposal generation is delegated to Kimi (parallel agents allowed) to produce working visual previews; proposals are then reviewed, iterated, and passed through an expert panel until quality gates are met. Final output is a chosen design direction with tokens, specimens, and an implementation-ready handoff path.

When to use it

• When you want multiple visual directions before committing to an implementation
• Redesigning or refreshing an existing interface with unclear aesthetic goals
• Starting an /aesthetic or /polish phase and need concrete options
• When product maturity is low (<6) and direction is undecided
• If you need working previews (HTML or Pencil) rather than verbal descriptions

Best practices

• Always delegate visual generation to Kimi K2.5 via MCP; do not synthesize visuals as text-only mockups
• Preserve key strengths of the existing UI while varying DNA axes—no two proposals share more than two axes
• Include at least 2 bold directions, 2 subtle directions, 1 wild card, and 1 preservation option
• Run the expert panel review and iterate until the average score meets the quality gate (≥90)
• Deliver a working preview (Pencil preferred, HTML fallback) plus a tokenized spec for handoff

Example use cases

• Product manager asks: “Show me visual options for the dashboard before we build”
• Design lead wants a refreshed homepage with 8 diverse directions to present to stakeholders
• Small team needs a rapid catalogue to pick an accessible color/typography system to implement
• Front-end engineers need a Pencil or HTML preview to accelerate theme export to React/Tailwind
• You want to hybridize two promising directions and iterate with targeted refinements