Create a design brief

Goal

Generate consistent design briefs from requester input, outputting both machine-readable specifications (JSON) for direct reference in Figma/Make and other prototyping tools, plus stakeholder-friendly summaries (Markdown). Leverage the current repo's design system (Button, Card, Banner, MetricCard components and color/typography/spacing/radius/elevation/motion tokens) to ensure reusability across advertising creative, prototyping, external branding, and social media.

Output

Storage Location

Per Initiative: initiatives/[initiative-name]/design/
File Naming Convention: design-brief-[feature-name].[json|md]

File Structure Example

initiatives/live-sports-vod-conversion/
├── design/
│   ├── design-brief-autoplay-highlights.json
│   ├── design-brief-autoplay-highlights.md
│   └── README.md

A) Machine-Readable JSON (Figma/variables & components friendly)

Required root keys: meta, purpose, audience, tone, brand_voice, variables, components, patterns, channels, deliverables, a11y, naming, file_structure, metrics, assets.

Schema Overview

{
  "meta": {
    "version": "1.0", 
    "date": "YYYY-MM-DD", 
    "locale": "en-US", 
    "brand": "YourBrand",
    "design_system": {
      "source": "internal",
      "path": "design-system/",
      "tokens_path": "tokens/design-tokens.json",
      "components_path": "components/component-library.json"
    },
    "sources": ["research/2024-q1-user-study", "benchmark/competitor-analysis"]
  },
  "purpose": "<Campaign/Product objective>",
  "audience": {
    "primary": "<Primary target>",
    "secondary": "<Secondary target>",
    "personas": ["<Persona 1>", "<Persona 2>"],
    "context": "<Usage context>"
  },
  "tone": "<Tone and manner>",
  "brand_voice": {
    "keywords": ["trustworthy", "modern", "accessible"],
    "dos": ["Use clear, action-oriented language", "Emphasize user benefits"],
    "donts": ["Use jargon or technical terms", "Make assumptions about user knowledge"]
  },
  "variables": {
    "collections": {
      "color": {
        "semantic": {
          "bg/default": "#FFFFFF", 
          "text/primary": "#1A1A1A", 
          "accent/brand": "#0066CC",
          "accent/success": "#00AA44",
          "accent/warning": "#FF8800",
          "accent/error": "#CC0000"
        },
        "neutral": {
          "50": "#FAFAFA",
          "100": "#F5F5F5",
          "200": "#E5E5E5",
          "300": "#D4D4D4",
          "400": "#A3A3A3",
          "500": "#737373",
          "600": "#525252",
          "700": "#404040",
          "800": "#262626",
          "900": "#171717"
        }
      },
      "typography": {
        "font_family": {
          "brand": "Inter",
          "mono": "JetBrains Mono"
        },
        "sizes": {
          "xs": 12, 
          "sm": 14, 
          "md": 16, 
          "lg": 20, 
          "xl": 24,
          "2xl": 32,
          "3xl": 40
        },
        "weights": {
          "regular": 400,
          "medium": 500,
          "semibold": 600,
          "bold": 700
        }
      },
      "spacing": {
        "scale": {
          "0": 0, 
          "1": 4, 
          "2": 8, 
          "3": 12, 
          "4": 16, 
          "6": 24, 
          "8": 32,
          "12": 48,
          "16": 64
        }
      },
      "radius": {
        "none": 0, 
        "sm": 4, 
        "md": 8, 
        "lg": 12, 
        "xl": 16,
        "full": 9999
      },
      "elevation": {
        "e1": "0 1px 3px rgba(0,0,0,0.12)",
        "e2": "0 4px 6px rgba(0,0,0,0.15)",
        "e3": "0 10px 15px rgba(0,0,0,0.1)"
      },
      "motion": {
        "duration": {
          "fast": 120, 
          "base": 240, 
          "slow": 400
        },
        "easing": {
          "standard": "cubic-bezier(0.4, 0, 0.2, 1)",
          "decelerate": "cubic-bezier(0, 0, 0.2, 1)",
          "accelerate": "cubic-bezier(0.4, 0, 1, 1)"
        }
      }
    }
  },
  "components": [
    {
      "name": "Button",
      "library_ref": "Button/Primary",
      "variants": {
        "emphasis": ["primary", "secondary", "tertiary"], 
        "size": ["sm", "md", "lg"], 
        "icon": ["none", "leading", "trailing"], 
        "state": ["default", "hover", "pressed", "focus", "disabled"]
      },
      "props": {
        "cornerRadius": "radius.md", 
        "paddingX": "spacing.4", 
        "paddingY": "spacing.2",
        "fontSize": "typography.sizes.md",
        "fontWeight": "typography.weights.medium"
      },
      "content_guidelines": {
        "max_label": 24, 
        "case": "Sentence",
        "min_width": 80
      },
      "interactions": [
        {
          "event": "onClick", 
          "action": "Navigate", 
          "animate": {
            "type": "scale", 
            "duration": "motion.duration.fast", 
            "easing": "motion.easing.standard"
          }
        }
      ]
    },
    {
      "name": "MetricCard",
      "library_ref": "Card/Metric",
      "props": {
        "elevation": "elevation.e1", 
        "padding": "spacing.6",
        "cornerRadius": "radius.lg"
      },
      "data_bindings": {
        "title": "string", 
        "value": "number", 
        "delta": "number", 
        "trend": "up|down|flat",
        "unit": "string"
      }
    }
  ],
  "patterns": [
    {
      "name": "Dashboard/Grid", 
      "columns": 12, 
      "gap": "spacing.6", 
      "breakpoints": {
        "sm": 640, 
        "md": 768, 
        "lg": 1024, 
        "xl": 1280
      }
    },
    {
      "name": "Hero/Ad", 
      "layout": "Left copy + Right visual", 
      "ratio": "16:9",
      "min_height": "400px"
    }
  ],
  "channels": {
    "ads": {
      "message": "ROI proof in 3 bullets", 
      "visual": "MetricCard + chart",
      "cta_placement": "above_fold"
    },
    "branding": {
      "usage": "Enterprise minimal", 
      "lockups": ["logo top-left", "CTA bottom-right"],
      "clear_space": "2x logo height"
    },
    "social": {
      "formats": ["1080x1080", "1080x1920", "1920x1080"], 
      "rules": ["1 idea per frame", "CTA within first 3s", "text overlay max 20%"]
    },
    "prototype": {
      "flows": ["Signup", "Dashboard tour", "Settings"], 
      "transitions": "smart animate 240ms",
      "fidelity": "high"
    }
  },
  "deliverables": [
    {
      "name": "Executive Dashboard", 
      "key_elements": ["AI ROI card", "adoption chart", "exportable reports"],
      "priority": "high"
    },
    {
      "name": "Manager Dashboard", 
      "key_elements": ["team heatmap", "individual profile", "coaching tips"],
      "priority": "medium"
    }
  ],
  "a11y": {
    "contrast": "WCAG 2.2 AA", 
    "min_touch": 44, 
    "focus_visible": true, 
    "rtl": true, 
    "localization": ["en-US", "es-ES", "fr-FR"],
    "screen_reader": true,
    "keyboard_navigation": true
  },
  "naming": {
    "components": "PascalCase", 
    "variants": "kebab-case", 
    "slash": "Component/Variant=Value", 
    "tokens": "dot.case",
    "files": "kebab-case"
  },
  "file_structure": {
    "pages": [
      "00 Cover", 
      "01 Foundations (Tokens)", 
      "02 Components", 
      "03 Patterns", 
      "04 Flows",
      "05 Responsive"
    ], 
    "libraries": ["Core", "Marketing", "Data Visualization"]
  },
  "metrics": {
    "primary": "CTR or Task completion", 
    "secondary": ["Time to first value", "Recall/Brand lift", "User satisfaction"],
    "success_criteria": ">15% CTR improvement"
  },
  "assets": {
    "illustration_style": "isometric minimal", 
    "photo": "warm neutral lighting", 
    "icon_set": "Feather/Remix",
    "image_formats": ["SVG", "PNG", "WebP"],
    "max_file_size": "2MB"
  }
}

B) Stakeholder Markdown Summary

Generate the following sections with clear headings:

Purpose & Audience
Tone & Brand Voice (including Do/Don't guidelines)
Design Variables (Tokens/Variables) Summary
Component Library Mapping & Variant Table
Patterns & Flows
Channel-Specific Guidelines (Ads/Branding/Social/Prototype)
Accessibility & Internationalization
Naming Conventions & File Structure
Success Metrics & Experiment Plan
Asset Guidelines

Process

Brief Intake: Collect product/campaign objectives, constraints (e.g., regulations/brand guidelines), deadlines, and key stakeholders.
Design System Reference: Reference tokens and components from the current repo's design-system/ folder.
Library Mapping: Prioritize existing components/patterns (minimize new creation).
Token First: Define color, typography, spacing variables first → inject into components.
Channel Consistency: Ensure Ads/Branding/Social/Prototype share the same variables and copy principles.
A11y/Localization Gate: Check WCAG 2.2 AA, minimum 44px touch, RTL/multilingual support.
Output Dual-Track: Generate JSON (tool input) + Markdown (review) simultaneously.
File Storage: Save to initiatives/[initiative-name]/design/ folder.

Generation Rules

Design System: Use the current repo's design-system/ folder as the foundation.
Library References: Use "Button/Primary" format for component references, mark as "proposed" if not available.
Token References: Use "color.semantic.primary.500" format for token references.
Data Binding Examples: Specify type/unit/format in data_bindings.
Interactions: Detail event/action/animation (type/duration/easing) specifications.
Token Naming: Use dot.case for tokens, Slash-Naming for components.
Success Metrics: Include measurable success criteria and experiment hypotheses.
Sources: Attach research/benchmark sources in meta.sources[] for sensitive claims.
Responsive Design: Include breakpoint specifications and mobile-first approach.
Performance: Consider loading states, skeleton screens, and progressive enhancement.

Example Prompts

Basic Usage (Most Common)

"Create a design brief. Product: sports autoplay highlights. Purpose: user adoption validation. Target: sports routine users. Use VideoPlayer, Button, Card components. Output both JSON + Markdown summary according to the schema above, and save to initiatives/live-sports-vod-conversion/design/ folder."

Detailed Usage

"Create a design brief. Product: AI observability platform. Purpose: ROI proof and adoption scaling. Target: VP/CTO/EM at 100–999 employee software organizations. Leverage Button, Card, MetricCard, Tag, Banner components for reusability across social, advertising, and prototyping. Output both JSON + Markdown summary according to the schema above, and save to initiatives/[initiative-name]/design/ folder."

Advanced Usage

"Create a comprehensive design brief for a B2B SaaS onboarding flow. Include user journey mapping, component variants for different user roles, accessibility considerations, and A/B testing framework. Ensure the design system supports both light and dark themes. Output both JSON + Markdown summary and save to initiatives/user-onboarding-v2/design/ folder."

create-design-brief