design-exploration

Generate structured design briefs for UI component variation requests.

Updated Apr 1, 2026
One-click install
npx skills add https://github.com/koya-alt/Catalyst --skill design-exploration-koya-alt
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-exploration
Source: https://github.com/koya-alt/Catalyst/tree/main/local/skills/design-exploration
Command: npx skills add https://github.com/koya-alt/Catalyst --skill design-exploration-koya-alt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It ensures that before generating design variations, the agent performs a thorough analysis of the component and creates a structured design brief, preventing shallow or redundant outputs.

Core Features & Use Cases

  • Component Analysis: Reads source code, layout, interaction, and visual structure to build an internal model.
  • Constraint Identification: Distinguishes hard and soft constraints and degrees of freedom.
  • Variation Axis Selection: Chooses meaningful axes (structural, content, conceptual, behavioral, aesthetic) based on user intent.
  • Design Brief Composition: Generates a detailed brief that guides downstream design subagents.
  • User Communication: Explains chosen axes and rationale before delegation.

Quick Start

Invoke the design-exploration skill to analyze a component and generate a structured design brief before exploring variations.

Frequently Asked Questions about design-exploration

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

FAQPage Schema
How do I generate structured design briefs for UI component variations?

To generate design briefs for component variations, apply the design-exploration skill to analyze the source code, layout, and interaction structure before delegating to a design subagent. This ensures a structured brief covering functionality, constraints, and variation axes is created.

What is the best way to prevent shallow outputs when exploring alternative UI designs?

The best way to prevent shallow design outputs is to perform thorough component analysis and constraint identification first. By generating a detailed design brief that defines structural and aesthetic variation axes, you ensure downstream variations are meaningful and not redundant.

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

To identify constraints and degrees of freedom, analyze the component's source code and visual structure to distinguish hard constraints from soft ones. This analysis is a core step in generating a structured design brief for component variation requests.

What variation axes should I choose when requesting alternative component designs?

Variation axes for alternative component designs should be chosen based on user intent and can include structural, content, conceptual, behavioral, and aesthetic dimensions. Analyzing the component ensures these axes are meaningful and aligned with the design brief.