shape

Plan UX and UI direction through a structured discovery interview and design brief.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams often jump straight into coding UI features without clarifying user goals, content ranges, edge cases, or design constraints, resulting in interfaces that miss the mark. This Skill enforces a discovery-first workflow that produces a confirmed design brief before any code is written. ## Core Features & Use Cases - Structured Discovery Interview: Runs a guided dialogue covering purpose, audience, 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 feature, invoke this Skill to interview the product owner about user context and data ranges, then hand the confirmed brief to an implementation skill for precise execution. ## Quick Start Ask the AI to shape the UX and UI for your new feature before writing 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 purpose, audience, content ranges, edge cases, and constraints, then synthesize answers into a design brief. This Skill automates that process and requires explicit confirmation of the brief before implementation begins.

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

A design brief should include a feature summary, primary user action, design direction, layout strategy, key states (empty, loading, error, success), interaction model, content requirements, recommended references, and open questions for the implementer.

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 meant to be handed off to implementation skills such as /impeccable craft or other build workflows.

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

Use discovery when the feature's user goals, data ranges, or edge cases are unclear, or when skipping thinking has previously led to generic UI output. For a combined discovery-and-build flow, use /impeccable craft, which runs this Skill internally.

What are the limitations of a design-brief-only workflow?▼

The brief captures intent but cannot resolve every implementation detail, so it includes an open questions section for issues the implementer must settle during the build. It also depends on the quality of answers given during the interview phase.