Design Analyzer Skill

Purpose

Fetch and extract technical requirements from design references (Figma URLs, screenshots, mockups) for CMS component implementation.

CRITICAL FIRST STEP: This skill MUST actively fetch design data using available tools (Figma MCP, Read tool) before performing any analysis. Never guess or infer design specifications - always fetch the actual design first.

Philosophy

Accurate design-to-code translation requires systematic extraction of technical specifications.

Core Beliefs

1. Precision Over Interpretation: Extract exact values, don't guess or estimate
2. Accessibility from the Start: Check contrast and touch targets during analysis
3. Responsive by Default: Design for mobile first, enhance for desktop
4. Document Technical Decisions: Record exact colors, spacing, typography for reproducibility

Why Design Analysis Matters