design-brief-builder

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

Updated Jun 29, 2026
One-click install
npx skills add https://github.com/iJosueeh/amauta --skill design-brief-builder-ijosueeh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-brief-builder
Source: https://github.com/iJosueeh/amauta/tree/main/.opencode/skills/design-brief-builder
Command: npx skills add https://github.com/iJosueeh/amauta --skill design-brief-builder-ijosueeh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? When a product spec is complete but the visual direction is undefined, teams get vague requests like "make it premium" that designers and developers cannot execute. This Skill turns vague style preferences into a concrete, structured Design-Brief.md that design tools and coding agents can act on. ## Core Features & Use Cases - Structured Design Interview: Guides the user through a four-phase workflow (Startup, Interview, Translation, Output) using a 10-field discovery questionnaire, dimension checklists, and this-or-that choice strategies anchored to real reference products. - Visual Direction Presets: Offers five selectable style presets (Editorial Monocle, Modern Minimal, Warm Soft, Tech Utility, Brutalist Experimental) when the user cannot articulate a style. - Quality Gates: Enforces sufficiency judgment, an anti-AI-slop checklist, and an 8-item scoring rubric before the brief is finalized. - Use Case: After finishing a Product-Spec.md for a developer chat app, run the interview to lock mood keywords, color direction, information density, and state designs, then output a Design-Brief.md ready for mockup generation. ## Quick Start Ask the assistant to run /design-brief-builder to interview you about visual preferences and produce a Design-Brief.md from your existing 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 brief?▼

Run the design interview workflow, which converts vague terms like "premium" into concrete directions using this-or-that choices anchored to real products such as Linear or Notion. The result is saved as a structured Design-Brief.md.

What is a design brief for AI design tools?▼

A design brief is a Markdown document specifying mood keywords, color direction, information density, typography, interaction style, and state designs. Design tools and coding agents read it to produce mockups and implement styles consistently.

Does design-brief-builder require a Product-Spec.md first?▼

Yes, Product-Spec.md is a required prerequisite checked at startup. If it is missing, the Skill prompts you to run the product-spec-builder first, since the interview extracts product type, users, and features from the spec.

Can I use the design brief without a connected design tool?▼

Yes, if no design tool MCP is connected, the Skill runs in manual design mode. The Design-Brief.md is still generated, and you feed it to your design tool yourself.

When should I not use design-brief-builder?▼

Do not use it to generate actual mockups or design files, write code, or define product features. Those tasks belong to design-maker, dev-builder, and product-spec-builder respectively.