design-exploration

Analyzes user requests and composes structured design briefs for generating distinct hypotheses via a design subagent.

Updated Mar 13, 2026
One-click install
npx skills add https://github.com/tann200/CodingAgent --skill design-exploration-tann200
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-exploration
Source: https://github.com/tann200/CodingAgent/tree/main/tui/.local/skills/design-exploration
Command: npx skills add https://github.com/tann200/CodingAgent --skill design-exploration-tann200

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the need for a structured approach to design exploration, enabling the generation of distinct design hypotheses based on a thorough analysis of user requirements and existing design constraints.

Core Features & Use Cases

  • Problem Comprehension: Analyzes user requests for design variations to ensure a clear understanding of the user's needs.
  • Component Analysis: Inspects source code and context, identifying function, content model, interaction model, visual structure, and context.
  • Constraint Identification: Determines hard and soft constraints to inform the degree of freedom for design variation.
  • Variation Axes Selection: Identifies and selects the most meaningful axes for design variation, considering structural, content/semantic, conceptual, behavioral, and aesthetic aspects.
  • Design Brief Composition: Composes a structured design brief that includes component analysis, constraints, variation axes, and concrete variation specifications.
  • Delegate and Generate: Passes the design brief to a design subagent to generate distinct design hypotheses.
  • User Communication: Provides explanations and insights to the user throughout the process, fostering a deeper understanding of design principles.

Quick Start

Generate design variations for the 'pricing section' component with a focus on content hierarchy and conceptual framing.

Frequently Asked Questions about design-exploration

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

FAQPage Schema
What is structured design exploration and when do I need it?

Structured design exploration generates distinct design hypotheses by analyzing component constraints and selecting variation axes. You need it for divergent design exploration when component functionality, content model, interaction model, and visual structure are under consideration.

How do I generate design variations based on component constraints?

To generate design variations, analyze the user request and source code to identify hard and soft constraints. Select meaningful structural, semantic, and aesthetic variation axes, compose a structured design brief, and delegate it to generate concrete hypotheses.

How does component analysis work for identifying design degrees of freedom?

Component analysis works by inspecting source code and context to determine function, content model, interaction model, and visual structure. Identifying hard and soft constraints establishes the degrees of freedom available for meaningful design variation.

Can I use this approach for divergent design exploration of any UI component?

Yes, you can apply this approach to any UI component when you need divergent design exploration. It analyzes component functionality, content model, interaction model, and visual structure to compose a structured design brief for hypothesis generation.

What are the limitations of using structured analysis for design hypotheses?

A limitation of structured analysis is that it requires clear source code and context to accurately identify design constraints and degrees of freedom. Without proper component context, the generated design hypotheses may not align with actual structural or functional requirements.