skills.rest
KhaledMKhaled
KhaledMKhaledCOMMUNITY
Explore all skills by this author →
GitHub

design-exploration

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

Updated Dec 10, 2025
Search Tags:#interaction design#design brief#component analysis#design variations#ui exploration#constraint reasoning
One-click install
npx skills add https://github.com/KhaledMKhaled/FodaStore --skill design-exploration-khaledmkhaled
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-exploration
Source: https://github.com/KhaledMKhaled/FodaStore/tree/main/.local/skills/design-exploration
Command: npx skills add https://github.com/KhaledMKhaled/FodaStore --skill design-exploration-khaledmkhaled

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents shallow “variation-only” outputs by forcing the agent to first understand the selected component, identify constraints, and then generate meaningfully different design hypotheses before delegating to the design subagent.

Core Features & Use Cases

  • Problem comprehension first: Reads the selected component’s source and surrounding context to build an internal model of function, content, interaction, visual structure, and placement in the flow.
  • Constraint-aware divergence: Separates hard constraints from soft ones and identifies degrees of freedom so options don’t break requirements or copy the same hypothesis with different styling.
  • Axis-based variation planning: Chooses 2–3 variation axes (structural, content/semantic, conceptual, behavioral, or aesthetic) based on the user’s intent and exploration funnel.
  • Structured design brief delegation: Produces a concrete, structured brief that is passed downstream with explicit rules to avoid reskins and to maintain distinct hypotheses.

Quick Start

Use the design-exploration skill when you want the AI to explore alternatives for an existing UI component and produce a structured brief before generating options.

Frequently Asked Questions about design-exploration

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

FAQPage Schema
How do I generate design variations for a UI component without just getting aesthetic reskins?▼

To generate meaningful design variations, the system first analyzes the component's source to understand its function and constraints, then applies axis-based planning to structural, behavioral, or conceptual changes before delegating to a design subagent.

What is constraint reasoning in interaction design exploration?▼

Constraint reasoning in interaction design separates hard constraints from soft ones to identify degrees of freedom, ensuring generated UI exploration options do not break existing requirements while exploring meaningful directions.

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

You create a structured design brief by comprehending the selected component, identifying explicit constraints, selecting variation axes, and delegating to a subagent with rules that enforce distinct design hypotheses rather than simple visual changes.

Can I use axis-based variation planning for existing component flows?▼

Yes, axis-based variation planning applies to existing component flows by choosing 2-3 axes such as structural, content/semantic, conceptual, behavioral, or aesthetic based on the user's intent and exploration funnel.

Why does my AI design tool output shallow variations with only different styling?▼

AI outputs are often shallow because they lack constraint-aware divergence; this process forces the agent to build an internal model of the component's interaction and visual structure before generating distinct design hypotheses.

Related Skills

Explore More Design & Creative Skills→
Buntyarora97Buntyarora97

design-exploration

Generate a structured design brief analyzing component function, content, interaction, visual structure, and context.

Community
Advanced
aryankumarraiaryankumarrai

design-exploration

Analyzes component constraints and variation axes to generate distinct design hypotheses.

Community
Advanced
DevHive1DevHive1
18

design-exploration

Analyze component constraints and degrees of freedom to generate design variations.

Community
Advanced
lengjinglengjing
1

frontend-design

Provide CSS patterns and design guidelines for cohesive web interfaces.

Community
Basic