visual-dev

name	visual-dev
description	Screenshot-driven visual development workflow using Playwright MCP. Use when implementing designs from mockups or Figma, building new UI components, or fixing visual bugs.

Visual Development Workflow

When to Use This Workflow

• Implementing designs from mockups, Figma, or design specifications
• Building new UI components that need precise visual matching
• Fixing visual bugs or inconsistencies
• Creating responsive layouts that match design breakpoints
• Iterating on complex visual interactions or animations

Prerequisites

Playwright MCP must be available for browser automation and screenshots.

Visual Development Process

1. Screenshot-Driven Analysis

• Take initial screenshots of current implementation state
• Compare with design specifications (mockups, Figma, etc.)
• Identify visual gaps — spacing, colors, typography, layout, interactions
• Document specific differences before making changes

2. Iterative Implementation Loop

Take Screenshot → Analyze vs Design → Make Code Changes → Navigate & Test → Repeat

3. Implementation Strategy

• Start with structure — get HTML/component hierarchy correct
• Apply base styles — colors, typography, basic spacing
• Refine layout — flexbox, grid, positioning details
• Add interactions — hover states, focus states, animations
• Verify accessibility — focus indicators, contrast, screen readers

Screenshot & Analysis

• Take full page screenshots for layout verification
• Take element-specific screenshots for component comparison