shape

Plan UX and UI design direction through structured discovery interviews and design briefs.

Updated Feb 22, 2026
One-click install
npx skills add https://github.com/metang/imganalyzer --skill shape-metang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shape
Source: https://github.com/metang/imganalyzer/tree/main/.agents/skills/shape
Command: npx skills add https://github.com/metang/imganalyzer --skill shape-metang

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interfaces often fail because design decisions are made without understanding the feature's purpose, users, and constraints. This Skill prevents premature coding by running a structured discovery process that produces a design brief before any implementation begins. ## Core Features & Use Cases - Discovery Interview: Guides a conversational interview covering purpose, users, content ranges, edge cases, design goals, constraints, and anti-goals. - Design Brief Generation: Synthesizes interview answers into a nine-section brief covering feature summary, primary user action, design direction, layout strategy, key states, interaction model, content requirements, recommended references, and open questions. - Use Case: Before building a new dashboard settings page, run this Skill to clarify who uses it, what states it needs (empty, error, loading), and how it should feel, then hand the confirmed brief to an implementation skill. ## Quick Start Ask the AI to shape the UX and UI for your feature, for example: "Shape the design for a notification preferences panel before we write any code."

Frequently Asked Questions about shape

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

FAQPage Schema
How do I plan UI design before writing code?▼

Run a structured discovery interview covering the feature's purpose, target users, content ranges, edge cases, and constraints, then synthesize the answers into a design brief. This Skill automates that process and produces a brief ready for implementation handoff.

What should a design brief include for a new feature?▼

A design brief should include a feature summary, the primary user action, design direction, layout strategy, key states (default, empty, loading, error), interaction model, content requirements, and open questions. This Skill generates all nine sections from interview answers.

Does this Skill write any UI code?▼

No, this Skill is scoped to design planning only and explicitly does not write code. Its output is a design brief that can be handed to implementation skills such as /impeccable craft or any other build workflow.

When should I use a discovery interview instead of building directly?▼

Use discovery when the feature's users, content ranges, edge cases, or design direction are unclear. Skipping this step often leads to generic interfaces that miss the actual user need, especially for features with multiple states or dynamic content.

What are the limitations of a design brief workflow?▼

A design brief captures direction and strategy but not pixel-level specifications or working code. Implementers still resolve open questions during the build, and the brief's quality depends on how thoroughly the discovery questions are answered.