design-exploration

Analyze component designs and generate variations along selected axes.

Updated May 16, 2026
One-click install
npx skills add https://github.com/ckrono-prog/Kotlin-Code-Builder --skill design-exploration-ckrono-prog
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-exploration
Source: https://github.com/ckrono-prog/Kotlin-Code-Builder/tree/main/.local/skills/design-exploration
Command: npx skills add https://github.com/ckrono-prog/Kotlin-Code-Builder --skill design-exploration-ckrono-prog

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This skill helps users explore alternative designs for components by generating variations and alternative approaches.

Core Features & Use Cases

  • Component Analysis: Analyzes selected components to understand their function, content model, interaction model, visual structure, and context.
  • Constraints Identification: Identifies hard and soft constraints and degrees of freedom for design variation.
  • Variation Axes Selection: Selects 2-3 axes for variation (structural, content/semantic, conceptual, behavioral, aesthetic).
  • Design Brief Composition: Composes a structured design brief to pass to the design subagent.
  • Delegation to Design Subagent: Passes the design brief and source file(s) to the design subagent for specific variation generation.
  • User Communication: Communicates with the user before and after generation, explaining design concepts and trade-offs.

Quick Start

Use the design-exploration skill to generate design ideas for a selected component, such as a pricing section.

Frequently Asked Questions about design-exploration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate diverse component variations for interface design?

To generate diverse component variations, this skill analyzes your selected component's function, interaction model, and visual structure, then selects 2-3 variation axes to produce distinct design hypotheses. It outputs structured design briefs for a subagent to execute.

What is design exploration and how does it work for UI components?

Design exploration is the process of generating alternative UI approaches by identifying hard and soft constraints. It works by selecting structural, content, behavioral, or aesthetic variation axes to provide distinct design hypotheses for a given component.

How do I identify constraints and degrees of freedom for component design?

You identify constraints and degrees of freedom by analyzing the component's content model and context. The skill automatically detects hard and soft constraints, allowing it to safely vary structural and semantic elements without breaking the larger system.

Can I use this for exploratory design work within a larger product system?

Yes, this skill is specifically intended for exploratory design work within the context of a larger system or product. It communicates trade-offs and design concepts to ensure variations align with the overall product environment.

What are the limitations of automating design hypothesis generation?

A limitation is that generation requires delegation to a design subagent and source files. The skill focuses on selecting 2-3 variation axes and composing briefs, meaning it provides design hypotheses rather than final production-ready code.