shape

Plans UX/UI by conducting a discovery interview and generating a design brief.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/yinshucheng/vibeflow --skill shape-yinshucheng
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: shape
Source: https://github.com/yinshucheng/vibeflow/tree/main/.claude/skills/shape
Command: npx skills add https://github.com/yinshucheng/vibeflow --skill shape-yinshucheng

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Plan the UX and UI for a feature before coding. This Skill helps teams avoid rushed design decisions by guiding upfront thinking through a structured discovery interview and a produced design brief that informs implementation.

Core Features & Use Cases

  • Discovery Interview Phase: Conducts a structured conversation to extract feature context, goals, constraints, and user needs.
  • Design Brief Output: Produces a comprehensive design brief that guides implementation, aligning design direction and strategy.
  • Planning & Alignment: Provides a clear artifact to drive design decisions, ensure stakeholder alignment, and reduce cycle time during planning.

Quick Start

Start by running the discovery interview to gather feature context, then generate a design brief to 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 design before coding starts?

Plan UX and UI design before coding by running a structured discovery interview to gather feature context, goals, and user needs. This process produces a comprehensive design brief that guides implementation and aligns stakeholders.

What is a design brief and how does it guide feature implementation?

A design brief is a comprehensive document that captures feature context, user needs, and constraints discovered during an interview phase. It guides implementation by aligning design direction and strategy, ensuring informed decisions before coding begins.

How do I conduct a discovery interview for feature planning?

Conduct a discovery interview for feature planning by using a structured conversation protocol to extract specific context, goals, constraints, and user needs. This upfront thinking process prevents rushed design decisions and reduces planning cycle time.

Do I need a defined context protocol to extract user needs for UI planning?

Yes, a defined context protocol is required to effectively collect insights and extract user needs during the discovery interview. This protocol ensures the resulting design brief accurately informs constraints and strategy for UI planning.

What's the best way to align stakeholders on UI design strategy?

Align stakeholders on UI design strategy by producing a clear design brief artifact from a structured discovery interview. This document drives design decisions, ensures alignment, and reduces cycle time during the planning phase.

Why should I use a discovery interview instead of rushing design decisions?

Use a discovery interview instead of rushing design decisions to avoid misaligned implementation. Upfront structured thinking extracts accurate feature context and constraints, producing a design brief that reduces cycle time and guides accurate UI development.