skills.rest
hajrasarwar11
hajrasarwar11COMMUNITY
Explore all skills by this author →
GitHub

design-exploration

Analyze component context and constraints to produce a structured design brief.

Updated Mar 19, 2026
Search Tags:#design#ideation#exploration#user-experience#design-system#design-brief#branching-ideas
One-click install
npx skills add https://github.com/hajrasarwar11/DataBase-Engine-with-AI --skill design-exploration-hajrasarwar11
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-exploration
Source: https://github.com/hajrasarwar11/DataBase-Engine-with-AI/tree/main/.local/skills/design-exploration
Command: npx skills add https://github.com/hajrasarwar11/DataBase-Engine-with-AI --skill design-exploration-hajrasarwar11

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Problem comprehension is often bypassed when users request design variations, leading to shallow, generic outputs. This skill ensures the agent performs a proper problem-understanding step by analyzing a component's function, constraints, and context before generating variations. It then composes a structured design brief and delegates to the design subagent, preventing premature or unfocused edits.

Core Features & Use Cases

  • Reads and analyzes a component's source, surrounding layout, dependencies, and styles to build a mental model.
  • Identifies hard constraints, soft constraints, and degrees of freedom to guide variation.
  • Selects meaningful variation axes (Structural, Content/Semantic, Conceptual, Behavioral, Aesthetic).
  • Generates a formal design brief with analysis, rationale, and concrete variation specs.
  • Delegates the brief to a design subagent to produce diverse design hypotheses.
  • Use Case: when a user asks for "generate variations" or "explore alternatives" for a component or page.

Quick Start

Read the target component, identify constraints and opportunities, and draft a design brief before proposing 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 meaningful design variations instead of generic alternatives?▼

Generate design variations by first analyzing the component's source, surrounding layout, and dependencies to identify constraints, then drafting a structured design brief that defines specific variation axes before producing divergent hypotheses.

What is a design brief and how does it improve UI exploration?▼

A design brief is a formal document specifying a component's context, constraints, and variation specs. It improves UI exploration by enforcing problem comprehension before generation, preventing unfocused edits during divergent design ideation.

How do I explore divergent design hypotheses for a specific page component?▼

Explore divergent design hypotheses by selecting meaningful variation axes like Structural, Content/Semantic, Conceptual, Behavioral, and Aesthetic, then delegating a formal design brief to a subagent to produce diverse design outputs.

Can I use this approach to explore alternatives for an entire design system?▼

Yes, this design exploration approach applies to components, pages, or entire design systems. It identifies hard constraints, soft constraints, and degrees of freedom to guide broad systemic variation generation effectively.

Why do my generated design variations look shallow and lack proper context?▼

Generated design variations look shallow when problem comprehension is bypassed. Without analyzing a component's function, dependencies, and surrounding layout before generation, the agent produces generic outputs lacking contextual relevance.

Related Skills

Explore More Design & Creative Skills→
laststancelaststance
1

explain

Trace dependencies and call sites to explain code targets with code references.

Official
Advanced
shahmirerrorshahmirerror

design-exploration

Analyze component constraints and compose a design brief for variation exploration.

Community
Advanced
BasitShafiqBasitShafiq

design-exploration

Analyzes component constraints and generates a design brief for subagent.

Community
Advanced
mecolejrmecolejr

design-exploration

Analyze a component and create a structured design brief before generating variations.

Community
Advanced