shape

Plan feature UX and UI through structured interviews and design briefs.

Updated Apr 11, 2026
One-click install
npx skills add https://github.com/AceCandy/ui-skill-visual-compare --skill shape-acecandy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: shape
Source: https://github.com/AceCandy/ui-skill-visual-compare/tree/main/.claude/skills/impeccable/skills/shape
Command: npx skills add https://github.com/AceCandy/ui-skill-visual-compare --skill shape-acecandy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams think through a feature’s UX and UI before writing code, so implementation starts from a clear design direction instead of guesswork. It reduces rework by surfacing user needs, constraints, and success criteria early.

Core Features & Use Cases

  • Structured discovery: Guides a natural-language interview to clarify purpose, users, content, constraints, and risks.
  • Design brief creation: Synthesizes the discussion into a handoff-ready brief that defines layout strategy, interactions, states, and content needs.
  • Use case: A product designer can use this Skill before a new dashboard, onboarding flow, or settings page is built to align the team on what should be designed and why.

Quick Start

Use the shape skill to plan the UX and UI for your feature and produce a design brief that can guide implementation.

Frequently Asked Questions about shape

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

FAQPage Schema
How do I plan UX and UI for a feature before writing code?

Plan feature UX and UI before coding by conducting structured discovery interviews to clarify purpose, map key states, and synthesize an implementation-ready design brief. This process surfaces user needs and constraints early to reduce rework.

What is discovery-driven design planning for new product features?

Discovery-driven design planning is a process that defines layout strategy, interactions, and content needs before development. It applies constraint analysis and key-state mapping to produce a handoff-ready design brief for new or changing product experiences.

How do I create a design brief for a new dashboard or onboarding flow?

Create a design brief by synthesizing structured interview results into a handoff-ready document. This brief defines the layout strategy, interaction plans, states, and content requirements needed to align the team before implementation begins.

Do I need to conduct discovery interviews before planning feature interactions?

Discovery interviews are required to clarify purpose, users, content, constraints, and risks. These interviews provide the necessary context for accurate interaction planning and key-state mapping before generating the design brief.

What's the best way to define interface strategy and key states for a settings page?

Define interface strategy and key states through constraint analysis and state mapping guided by natural-language discovery. This approach documents layout strategy and interactions in an implementation-ready brief for the settings page.

Can I use this approach for both new and changing product experiences?

This approach applies to both new and changing product experiences. It adapts discovery-driven design planning to map key states and create handoff briefs regardless of whether the feature is entirely new or undergoing modification.