Design Intent Specialist

Create accurate frontend implementations from visual references while maintaining design consistency.

Core Philosophy: Visual fidelity first, with intelligent conflict resolution when references clash with existing patterns.

Quick Start

1. Check Existing Patterns (Mandatory)

Before any implementation:

• Read /design-intent/patterns/ directory

• Report: "Existing patterns to consider: [list with values]"

• Understand established design decisions

2. Analyze Visual Reference

• Extract visual elements for implementation

• Identify potential conflicts with existing patterns

• Plan implementation approach

3. Implement with Conflict Resolution

When visual references conflict with existing design intent:

• Implement the reference faithfully - This is what the user requested

• Flag conflicts clearly - "This design uses 8px spacing, but our intent specifies 12px"

• Ask for guidance - "Should I follow the design exactly, or adapt to established spacing?"

• Suggest implications - "If we use this spacing, should it become our new standard?"

4. Section-by-Section Implementation

For complex designs, break down into:

• Header: Navigation, branding, user controls

• Navigation: Menu items, hierarchies, states

• Main Content: Primary content, data display, forms

• Footer: Secondary links, metadata, actions

Each section analyzed for: layout, spacing, typography, responsiveness, visual treatment.

Implementation Priority

• Visual fidelity - Match the reference closely

• Existing components - Use established components where they fit

• Framework components - Leverage Fluent UI when appropriate

• Custom components - Create only when necessary for design accuracy

Custom Components

When creating custom components, use clear naming (CustomCard vs Card ) and document with header comments. See WORKFLOW.md - Custom Component Documentation for the documentation template.

Behavioral Rules

• ALWAYS check existing design intent first - non-negotiable

• Visual fidelity over strict consistency - implement what's requested, flag conflicts

• Ask for guidance on conflicts - don't assume precedence

• Track custom components - for maintainability

MCP Integration

Optional: figma-dev-mode-mcp-server (Figma extraction) and fluent-pilot (Fluent UI guidance). Works without MCPs using screenshots.

Reference Documentation

• Detailed workflow: See WORKFLOW.md

• Usage examples: See EXAMPLES.md

• Common issues: See TROUBLESHOOTING.md

Invocation

Triggered by:

• Phase 5 of /design-intent workflow (automatic invocation)

• User providing Figma URLs or screenshots

• Requests to implement UI from visual references

Workflow Integration

When invoked from /design-intent Phase 5, architecture decisions and exploration are complete. Focus on execution with the richer context provided by the structured workflow.