design-brief

Generate markdown design briefs from codebase analysis and user input.

Updated Apr 29, 2026
One-click install
npx skills add https://github.com/richardaum/sporty-group --skill design-brief-richardaum
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-brief
Source: https://github.com/richardaum/sporty-group/tree/main/.agents/skills/design-brief
Command: npx skills add https://github.com/richardaum/sporty-group --skill design-brief-richardaum

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Users struggle to systematically plan and communicate UI and experience designs, leading to misalignment and inefficient workflows.

Core Features & Use Cases

  • Guided Interview: Conducts a structured conversation to gather detailed design requirements from the user.
  • Codebase Exploration: Analyzes existing style tokens, themes, components, and patterns to inform the design brief.
  • Documentation Generation: Creates a comprehensive, markdown-formatted design brief based on user input and code analysis.
  • Use Case: Design teams can rapidly produce aligned design briefs for new features, ensuring consistency and clarity before building.

Quick Start

Ask the AI to help draft a design brief for a new onboarding page by providing project goals and preferences.

Frequently Asked Questions about design-brief

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

FAQPage Schema
How do I create a structured UI design brief for a new feature?

Create a structured UI design brief by engaging in a guided interview that gathers project goals and preferences, then generates markdown documentation defining design goals, principles, and component needs.

What is the best way to document UX planning for an existing codebase?

Document UX planning by analyzing existing style tokens, themes, and components within your codebase, then combining those patterns with user input to produce aligned, comprehensive design documentation.

Can I generate design documentation that aligns with my current UI components?

Yes, you can generate design documentation that aligns with current UI components by exploring your codebase to extract existing patterns, ensuring the resulting design brief maintains visual and functional consistency.

How does an interactive brief help streamline UI and experience planning?

An interactive brief streamlines UI and experience planning by conducting a structured conversation to capture detailed design requirements, rapidly producing aligned documentation that clarifies workflows before building begins.

Does this design brief tool work without external dependencies?

Yes, the design brief tool works without external dependencies, relying solely on codebase exploration and an interactive interview process to generate structured markdown documentation for UI development.

When do I need a guided interview for UI and experience design documentation?

You need a guided interview for UI and experience design documentation when struggling to systematically plan and communicate designs, ensuring you capture detailed requirements to prevent misalignment and inefficient workflows.