skills.rest
BasitShafiq
BasitShafiqCOMMUNITY
Explore all skills by this author →
Website𝕏@BasitShafiq4GitHub

design-exploration

Analyzes component constraints and generates a design brief for subagent.

Updated Mar 14, 2026
Search Tags:#design#ideation#prototyping#exploration#alternatives#variations
One-click install
npx skills add https://github.com/BasitShafiq/personal --skill design-exploration-basitshafiq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-exploration
Source: https://github.com/BasitShafiq/personal/tree/main/.local/skills/design-exploration
Command: npx skills add https://github.com/BasitShafiq/personal --skill design-exploration-basitshafiq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill ensures that when a user asks for design variations, the agent first comprehends the component's purpose, constraints, and degrees of freedom before generating new options, leading to more meaningful and distinct design explorations.

Core Features & Use Cases

  • Problem Comprehension: Analyzes component function, content, interaction, structure, and context.
  • Constraint Identification: Distinguishes hard and soft constraints from degrees of freedom.
  • Meaningful Variation: Selects 2-3 axes (structural, content, conceptual, behavioral, aesthetic) for exploration.
  • Design Brief Generation: Creates a structured brief detailing analysis, constraints, and variation specifications.
  • Delegation with Context: Passes the design brief and source files to a subagent for generation.
  • User Communication: Explains the exploration strategy and the rationale behind each variation.
  • Use Case: A user wants to "generate variations" for a product card. This skill will analyze the card's current layout, content, and interaction, identify what can be changed (e.g., layout, information hierarchy, visual style), and then generate a design brief for a subagent to create distinct options like a "comparison-focused" card, a "feature-highlight" card, and a "minimalist" card.

Quick Start

Use the design exploration skill to generate variations for the selected component, focusing on structural and aesthetic axes.

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 for a UI component?▼

To generate meaningful design variations, this skill first analyzes the component's purpose, constraints, and degrees of freedom to select structural, content, conceptual, behavioral, or aesthetic variation axes before creating distinct options.

What is the best way to explore design alternatives without losing the original function?▼

Exploring design alternatives safely is done by identifying hard and soft constraints from degrees of freedom, ensuring new structural or aesthetic variations respect the component's core function, content, and interaction context.

How do I create a structured design brief for generating UI alternatives?▼

A structured design brief is created by analyzing component function, identifying constraints, and selecting 2-3 meaningful variation axes, which is then passed to a subagent to generate distinct design options.

Can I use this to generate variations for a specific UI element like a product card?▼

Yes, you can generate variations for elements like a product card by analyzing its current layout and information hierarchy, then producing distinct structural and aesthetic options such as comparison-focused or minimalist variations.

What are the limitations of automated design exploration?▼

Automated design exploration is limited by its dependency on the initial analysis of component function and constraints; if the identified degrees of freedom are too narrow, the generated structural and conceptual alternatives may lack meaningful distinction.

Related Skills

Explore More Design & Creative Skills→
jamesrochabrunjamesrochabrun
194

design-brief-generator

Generate Markdown design briefs with defined sections from structured inputs.

Community
Advanced
abdullah1854abdullah1854
1

deep-thinking

Decompose complex problems into components and analyze multiple approaches with trade-offs.

Community
Advanced
Kirankumar2604Kirankumar2604

design-exploration

Analyze component constraints and degrees of freedom to produce structured design briefs.

Community
Advanced
KhaledMKhaledKhaledMKhaled

design-exploration

Analyze a selected component and generate constraint-aware UI design variations.

Community
Advanced