Can I use this for existing projects?

Absolutely. While it excels at new features, you can use the Context phase to document existing functionality before exploring new design iterations or UI improvements.

What is the wide-to-narrow workflow?

It is a design strategy that starts by generating many diverse ideas (going wide) and then progressively filtering and refining them into a single, polished solution (narrowing).

What are the primary outputs of this skill?

The skill produces markdown documentation (product overview, user stories), visual galleries, sequential flow images, and a final HTML-based design brief.

Do I need an image generation API to use this skill?

Yes, for the visual exploration phases, this skill integrates with providers like Google Imagen, OpenAI, or fal.ai to generate UI mockups and wireflows.

Brainstorm to Brief

Name: Brainstorm to Brief
Author: fairchild

byfairchild

•

디자인 도구

Guides a structured UI/UX design workflow from initial concept exploration to a polished, shareable design brief.

Brainstorm to Brief is a comprehensive UI/UX workflow skill for Claude Code that facilitates a systematic "wide-to-narrow" design process. It guides users through four distinct phases: defining product context, exploring multiple visual concepts through AI image generation, iterating on specific user story flows, and refining a final cohesive design brief. This skill is ideal for developers and product designers who need to bridge the gap between abstract ideas and concrete, documented design specifications with visual assets.

주요 기능

01Automated generation of product overviews and user stories with Mermaid diagrams

02Built-in HTML templates for gallery viewing and sequential story flows

03Four-phase design methodology: Context, Explore, Iterate, and Refine

04Integration with AI image providers for visual screen exploration and wireflows

05Exportable design briefs featuring hero assets, personas, and app icons

061 GitHub stars

사용 사례

01Transforming a raw product idea into a structured design specification

02Rapidly generating and comparing multiple UI/UX layout variations using AI

03Creating polished, shareable design presentations for stakeholders and clients

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fairchild/dotclaude brainstorm-to-brief

For use in Claude.ai and ChatGPT

Download Skill