skills.rest
LYGOLANG
LYGOLANGCOMMUNITY
Explore all skills by this author →
GitHub

design-brief-builder

Interviews users to define visual direction and generates a Design-Brief.md specification document.

Updated Jul 3, 2026
Search Tags:#style guide#product design#design specification#ui design#design brief#design interview#visual direction
One-click install
npx skills add https://github.com/LYGOLANG/fufan-cc-flow --skill design-brief-builder-lygolang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-brief-builder
Source: https://github.com/LYGOLANG/fufan-cc-flow/tree/main/.agents/skills/design-brief-builder
Command: npx skills add https://github.com/LYGOLANG/fufan-cc-flow --skill design-brief-builder-lygolang

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Users often describe design preferences with vague words like "premium", "clean", or "modern", leaving designers and AI coding tools guessing. This Skill runs a structured designer-style interview that translates fuzzy aesthetic preferences into concrete, actionable design decisions, producing a Design-Brief.md that design tools and dev-builders can follow without ambiguity. ## Core Features & Use Cases - Guided Design Interview: Walks users through six phases (business/audience, mood/personality, references, visual tokens, core presentation, structure) using forced-choice questions anchored to real products like Linear, Notion, and Stripe. - Form-Aware Branching: Detects whether the product is a GUI app, terminal tool, conversational Agent, or hybrid, and adapts the question track accordingly (e.g., ANSI color depth and column-width degradation for terminals instead of border-radius). - Search-Augmented Reference Gathering: Performs two-pass web searches to bring current competitor and trend references into the interview rather than relying on stale memory. - Use Case: A founder says "I want a high-end feel for my CLI coding agent." The Skill asks whether that means Apple's whitespace or a dark engineering aesthetic, searches for current terminal-agent exemplars, forces trade-offs, and outputs a complete Design-Brief.md aligned with the existing Product-Spec.md. ## Quick Start Ask the AI to help you define the visual direction for your product and generate a Design-Brief.md based on your Product-Spec.md.

Frequently Asked Questions about design-brief-builder

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

FAQPage Schema
How do I turn vague design preferences into a design specification?▼

Run a structured interview that forces concrete choices instead of accepting adjectives. This Skill translates words like "premium" or "clean" into specific attributes (whitespace, contrast, typography), anchors choices to real products, and outputs a Design-Brief.md.

What inputs does the design brief interview need before starting?▼

It requires an existing Product-Spec.md defining functional scope, since the brief must not invent features beyond the spec. If a Design-Brief.md already exists, the Skill switches to iteration mode and updates it instead of starting over.

Does this work for terminal apps and conversational AI agents?▼

Yes. The Skill detects product form first and branches: GUI products get page/component/visual-token tracks, while terminal and agent products get interaction skeletons, rendering units, run-state display, authorization granularity, and ANSI color depth questions.

How does the interview handle conflicting design preferences?▼

It detects contradictions explicitly and forces prioritization rather than accepting "both." For example, asking for minimalism plus twenty metrics per screen triggers a direct trade-off question between folded pagination and dense clean layouts.

What happens to design decisions that cannot be finalized during the interview?▼

Undecided specifics like exact color values or spacing tokens are marked as [待补充] (to be supplemented) and handed to design tools, rather than being fabricated. Direction-level decisions are always captured even when exact values are deferred.

Related Skills

Explore More Design & Creative Skills→
iJosueehiJosueeh

design-brief-builder

Generates a Design-Brief.md through a structured design interview about visual direction.

Community
Advanced
proophboardproophboard
6

wireframe-sketch

Generate hand-drawn style SVG wireframes for UI prototypes.

Official
Intermediate
skytiger6724skytiger6724
2

porters-five-forces

Evaluate industry attractiveness with Porter's Five Forces ratings and strategic responses.

Community
Intermediate
Buntyarora97Buntyarora97

branding-generator

Create brand identity kits with color palettes, typography, and logo concepts.

Community
Advanced