skills.rest
fairchild
fairchildCOMMUNITY
Explore all skills by this author →
GitHub

brainstorm-to-brief

Guides UI/UX design exploration from wide brainstorming to a polished HTML design brief.

1|Updated Nov 11, 2012
Search Tags:#brainstorming#image generation#user stories#ui design#design brief#mockups#wireflows
One-click install
npx skills add https://github.com/fairchild/dotfiles --skill brainstorm-to-brief-fairchild
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: brainstorm-to-brief
Source: https://github.com/fairchild/dotfiles/tree/main/agents/shared/first-party-skills/brainstorm-to-brief
Command: npx skills add https://github.com/fairchild/dotfiles --skill brainstorm-to-brief-fairchild

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve? Turning early product ideas into a coherent visual design direction is chaotic: mockups scatter across tools, feedback gets lost, and there is no single shareable artifact. This Skill provides a structured four-phase workflow (Context, Explore, Iterate, Refine) that takes UI/UX concepts from open-ended exploration to one polished, shareable design brief. ## Core Features & Use Cases - Four-Phase Wide-to-Narrow Workflow: Define the product in product_overview.md, generate many mockup options, converge on consistent story flows and wireflows, then refine into a final design-brief.html. - AI Image Generation Guidance: Includes provider comparison (Google Imagen 4, OpenAI gpt-image-1.5, fal.ai Flux) and prompt patterns for maintaining visual continuity across sequential story screens using image editing APIs. - Ready-Made HTML Templates: Ships gallery, story-flow, and design-brief templates with dark mode, lightbox viewing, rating/feedback collection via localStorage, and copy-pastable feedback summaries. - Use Case: A product designer exploring a new mobile app generates 3-5 mockup variations per key screen, collects stakeholder ratings in the gallery page, builds sequential story flows with consistent visuals, and delivers a single HTML brief linking personas, color palette, wireflows, and user stories. ## Quick Start Use the brainstorm-to-brief skill to take my app concept from initial exploration through user stories and mockups to a final shareable HTML design brief.

Frequently Asked Questions about brainstorm-to-brief

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

FAQPage Schema
How do I turn a product idea into a visual design brief?▼

Follow the four-phase workflow: write a product overview for context, generate many mockup options during exploration, narrow to consistent story flows and wireflows, then refine everything into a single design-brief.html page with hero image, personas, and color palette.

How do I keep AI-generated app mockups visually consistent across screens?▼

Use OpenAI gpt-image-1.5 image editing: generate the first screen to establish style, then pass that image as a reference for subsequent screens. Describe only what changed and anchor the style with phrases like 'same blue header' or 'iOS 17 style'.

Which AI image model should I use for UI mockup generation?▼

Google Imagen 4 works well for independent screens, OpenAI gpt-image-1.5 is best for sequential flows needing visual continuity, and fal.ai Flux suits fast iteration. Choose based on whether screens must share a consistent look.

How do I collect stakeholder feedback on design mockups?▼

Copy the included index.html gallery template into your brainstorm folder and add your mockups. Reviewers rate each screen and add notes in the browser; the page compiles all feedback into a copy-pastable summary stored in localStorage.

What files does the brainstorm-to-brief workflow produce?▼

It produces docs/product_overview.md, docs/user-stories.md with Mermaid diagrams and ASCII wireframes, brainstorm and story mockup images, wireflow composites, and a final design-brief.html with supporting hero, icon, and persona images.

Related Skills

Explore More Design & Creative Skills→
lalulalilalulali
8

explore-idea

Synthesize a concept brief and coordinate market, competitor, and user research.

Community
Advanced
iusztinpauliusztinpaul
487

implement

Coordinate software-engineer and tester agents to implement and commit a single ticket.

Community
Advanced
YaugourtYaugourt
2

plan-design-review

Generate visual mockups and identify missing design decisions in plans.

Community
Advanced
proophboardproophboard
6

wireframe-sketch

Generate hand-drawn style SVG wireframes for UI prototypes.

Official
Intermediate