Design Intelligence Bundle

December 23, 2025 · View on GitHub

Transform raw design ideas into refined solutions through collaborative intelligence

What This Provides

The Design Intelligence bundle equips Amplifier with comprehensive design capabilities through:

7 specialized design agents - Each expert in their domain
Design philosophy framework - 9 Dimensions, 5 Pillars, 4 Layers
Design knowledge base - Color theory, typography, animation, accessibility
Established protocols - Component creation, checklists, wireframes, anti-patterns

The Three-Part Goal

Every design output achieves ALL THREE:

Looks Good - Meets 9.5/10 quality standard
Feels Theirs - User recognizes their vision in the result
Beyond Imagination - Refined in ways they never thought possible

User's spark → Design philosophy + craft → Their expression, elevated

Quick Start

Option 1: Use Directly (One-Off)

# Load the bundle directly via git URL
amplifier run --bundle git+https://github.com/microsoft/amplifier-bundle-design-intelligence@main \
  "Design a notification toast that feels warm and inviting"

# Or from local path (if cloned)
amplifier run --bundle ./bundle.md "Design a notification toast"

Option 2: Add to Registry (Recommended for Repeated Use)

# Add bundle to your registry (name auto-derived from bundle metadata)
amplifier bundle add git+https://github.com/microsoft/amplifier-bundle-design-intelligence@main

# Set as active bundle
amplifier bundle use design-intelligence

# Now run without specifying --bundle each time
amplifier run "Design a notification toast"

# Check which bundle is active
amplifier bundle current

# Check for updates
amplifier bundle update --check

# Update to latest
amplifier bundle update

Include in Another Bundle

includes:
  - bundle: git+https://github.com/microsoft/amplifier-bundle-design-intelligence@main

Include Just the Behavior

Add design intelligence capabilities to any bundle without the full bundle:

includes:
  - bundle: git+https://github.com/microsoft/amplifier-bundle-design-intelligence@main#subdirectory=behaviors/design-intelligence.yaml

Architecture

This bundle follows the thin bundle + behavior pattern:

amplifier-bundle-design-intelligence/
├── bundle.md                          # Thin entry point (includes foundation + behavior)
├── behaviors/
│   └── design-intelligence.yaml       # Reusable behavior defining agents + context
├── agents/                            # 7 specialized design agents
│   ├── design-system-architect.md
│   ├── component-designer.md
│   ├── animation-choreographer.md
│   ├── layout-architect.md
│   ├── art-director.md
│   ├── responsive-strategist.md
│   └── voice-strategist.md
└── context/
    ├── design-instructions.md         # Consolidated instructions
    ├── philosophy/                    # Design philosophy docs
    ├── knowledge-base/                # Color, typography, animation, accessibility
    └── protocols/                     # Component creation, checklists, etc.

Key Design Decisions

Inherits from foundation - No duplication of tools, session config, or hooks
Behavior pattern - behaviors/design-intelligence.yaml can be included independently
Consolidated instructions - Single source of truth in context/design-instructions.md
Minimal bundle.md - Just includes and context references

Resources

Agents (7 specialists)

Agent	Expertise	Keywords
design-system-architect	System-wide patterns, tokens, architecture	system, tokens, foundation, palette, theme
component-designer	Individual components, props, variants	component, button, modal, form, card
animation-choreographer	Motion sequences, easing, choreography	animate, motion, transition, timing
layout-architect	Page layout, IA, grid systems	layout, IA, grid, structure, hierarchy
art-director	Aesthetic strategy, visual coherence	art-direction, aesthetic, brand, style
responsive-strategist	Responsive strategy, breakpoints	responsive, mobile, tablet, breakpoint
voice-strategist	Tone, messaging, content strategy	voice, tone, messaging, microcopy

Context

Philosophy (4 documents):

DESIGN-PHILOSOPHY.md - Five Pillars of design thinking
DESIGN-PRINCIPLES.md - Quick reference principles
DESIGN-FRAMEWORK.md - 9 Dimensions + 4 Layers framework
DESIGN-VISION.md - Design beyond the artifact

Knowledge Base (4 documents):

color-theory.md - Color systems, psychology, accessibility
typography.md - Type systems, hierarchy, readability
animation-principles.md - Motion design, timing, choreography
accessibility.md - WCAG guidelines, inclusive design

Protocols (5 documents):

COMPONENT-CREATION-PROTOCOL.md - Step-by-step component design
DESIGN-CHECKLIST.md - Quality assurance checklist
REQUIREMENTS-TEMPLATE.md - Design requirements capture
WIREFRAME-STANDARDS.md - Wireframing guidelines
ANTI-PATTERNS.md - Common mistakes to avoid

Working Approach

The design intelligence system follows a collaborative transformation process:

1. Receive the Spark

Welcome any input:

Rough ideas: "I want it to feel premium but not cold"
Vibes: "Like Sunday morning coffee"
References: [screenshot], "like Stripe but warmer"
Feelings: "I don't know how to describe it..."

2. Collaborative Interpretation

Reflect back understanding:

"By 'premium', I understand: sophisticated shadows, refined motion, subtle depth - is that right?"
"Premium can mean minimal OR luxurious - which resonates with your vision?"

3. Systematic Transformation

Apply frameworks to YOUR vision:

Nine Dimensions - Style, Motion, Voice, Space, Color, Typography, Proportion, Texture, Body
Five Pillars - Purpose, Craft, Constraints, Incompleteness, Humans
Technical Standards - Accessibility, performance, maintainability

4. Refined Output

Deliver your vision, elevated to 9.5/10 quality.

"Close, but the shadow feels too heavy" → Adjust while preserving ownership.

Goal: You say "That's MY vision, done better than I imagined."

Design Frameworks

Nine Dimensions

The design intelligence system evaluates designs across nine dimensions:

Style - Visual language, aesthetic decisions
Motion - Animation, transitions, timing
Voice - Tone, messaging, personality
Space - Layout, whitespace, rhythm
Color - Palette, contrast, meaning
Typography - Type system, hierarchy, readability
Proportion - Scale, size relationships
Texture - Depth, layers, materials
Body - Components, patterns, systems

Five Pillars

Every design decision considers:

Purpose - Why does this exist?
Craft - Is it well-made?
Constraints - What limitations shape it?
Incompleteness - What's intentionally left open?
Humans - Who experiences this and how?

Four Layers

Design work operates at four levels:

Product Layer - What is the product?
Interaction Layer - How do users interact?
Interface Layer - What do users see and touch?
Visual Layer - How does it look and feel?

Example Sessions

Design a Button Component

amplifier run --bundle git+https://github.com/microsoft/amplifier-bundle-design-intelligence@main \
  "Design a primary button that feels confident but not aggressive"

# The system will:
# 1. Interpret your vision ("confident but not aggressive")
# 2. Apply component-designer agent expertise
# 3. Reference design system patterns
# 4. Deliver button spec with:
#    - Visual design (colors, shadows, typography)
#    - States (default, hover, active, disabled)
#    - Motion (transitions, feedback)
#    - Accessibility (contrast, focus states)
#    - Code (props API, variants)

Create a Design System

amplifier run --bundle ./bundle.md \
  "Create a design system for a healthcare product that feels trustworthy and calm"

# The system will:
# 1. Route to design-system-architect
# 2. Apply color theory and psychology
# 3. Define token architecture
# 4. Create comprehensive system including:
#    - Color tokens (primary, secondary, semantic)
#    - Typography scale
#    - Spacing system
#    - Motion timing tokens
#    - Component patterns

Design an Animation

amplifier run --bundle ./bundle.md \
  "Create a drawer slide-in animation that feels smooth and natural"

# The system will:
# 1. Route to animation-choreographer
# 2. Apply animation principles
# 3. Deliver animation spec with:
#    - Easing curves
#    - Timing values
#    - Choreography sequence
#    - CSS/code implementation

Philosophy Alignment

The design intelligence bundle follows Amplifier's core principles:

Mechanism, not policy - Provides design frameworks and agents; your choices determine outcomes
Ruthless simplicity - Clear, focused expertise per agent; no over-complicated abstractions
Convention over configuration - Standard bundle structure; no complex manifests
Text-first - All design knowledge in markdown; inspectable and versionable

Dependencies

foundation bundle - Inherited via includes: in bundle.md (provides tools, session, hooks)

This project is not currently accepting external contributions, but we're actively working toward opening this up. We value community input and look forward to collaborating in the future. For now, feel free to fork and experiment!

Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit Contributor License Agreements.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

Trademarks

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.