design-exploration

Generate structured design briefs for UI/UX component variations.

Updated Feb 17, 2026
One-click install
npx skills add https://github.com/Celia-12/Proyecto-Mern --skill design-exploration-celia-12
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-exploration
Source: https://github.com/Celia-12/Proyecto-Mern/tree/main/frontend/.local/skills/design-exploration
Command: npx skills add https://github.com/Celia-12/Proyecto-Mern --skill design-exploration-celia-12

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill ensures that before generating design variations, the agent performs a thorough analysis of the selected component, its constraints, and possible axes of change, producing a structured design brief instead of raw file paths.

Core Features & Use Cases

  • Component comprehension: Reads source code, layout, interactions, and context.
  • Constraint identification: Distinguishes hard and soft constraints and degrees of freedom.
  • Axis selection: Chooses meaningful variation axes (structural, content, conceptual, behavioral, aesthetic) based on user intent.
  • Design brief composition: Generates a detailed brief describing analysis, constraints, axes, and concrete variation specs.
  • Delegation: Passes the brief and file paths to a design sub‑agent with clear instructions.

Quick Start

Activate the design-exploration skill when a user requests variations of a UI component.

Frequently Asked Questions about design-exploration

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

FAQPage Schema
How do I generate UI design variations from an existing component?

To generate UI design variations, the skill analyzes the component's source code, identifies hard and soft constraints, selects meaningful axes of change, and composes a structured design brief for a sub-agent to execute.

What is a design brief for component variation requests?

A design brief for component variation requests is a structured document detailing component comprehension, constraint identification, selected variation axes, and concrete design specifications passed to an executing sub-agent.

How do I identify constraints and degrees of freedom for UX exploration?

UX exploration constraint identification distinguishes hard constraints from soft constraints by analyzing source code, layout, interactions, and context to determine available degrees of freedom for component variations.

Can I use design exploration for structural and behavioral layout alternatives?

Yes, design exploration supports structural, content, conceptual, behavioral, and aesthetic variation axes based on user intent to produce distinct UI/UX component design hypotheses.

Does design variation brief generation work without external dependencies?

Yes, design variation brief generation operates without external dependencies, relying entirely on analyzing the provided component source code and layout context to produce distinct design hypotheses.

When should I not use automated design briefs for UI variations?

Automated design briefs for UI variations should not be used when a component's source code is unavailable for analysis, as the skill requires reading code to identify constraints and select variation axes.