LAYOUT STRUCTURE
- Grid system (columns, gutters, margins)
- Component hierarchy
- Container widths
VISUAL SPECIFICATIONS
- Colors (hex values)
- Typography (sizes, weights)
- Spacing (padding, margins, gaps)
- Border radius, shadows
COMPONENTS IDENTIFIED
- List each distinct component
- Note variations
- Identify reusable patterns
RESPONSIVE CONSIDERATIONS
- How might this adapt to mobile?
- Collapsible sections
- Priority content

Output as structured JSON.


### Phase 2: Component Breakdown

```markdown
## Component: [Name]

**Priority:** High/Medium/Low
**Complexity:** Simple/Medium/Complex
**Reusability:** One-off/Reusable/Design System

**Props Interface:**

- variant: 'primary' | 'secondary'
- size: 'sm' | 'md' | 'lg'
- disabled?: boolean

**Accessibility:**

- Keyboard navigation
- ARIA labels
- Focus management

Phase 3: Implementation

Implement with comparison loop:

Compare mockup vs implementation:

1. What differences do you see?
2. What's missing?
3. Spacing/sizing adjustments needed?
4. Color accuracy?
5. Typography match?

Prioritize fixes by visual impact.

Technology Patterns

React + Tailwind

Convert to React with Tailwind CSS.

Requirements:
- Functional components with TypeScript
- Tailwind utility classes
- Extract repeated patterns
- Semantic HTML
- Responsive classes (sm:, md:, lg:)

Vue 3

Convert to Vue 3 component.

Requirements:
- Composition API with <script setup>
- Scoped styles
- Props with TypeScript

Plain HTML/CSS

Convert to semantic HTML and CSS.

Requirements:
- Semantic HTML5 elements
- CSS Grid/Flexbox layout
- CSS custom properties

Quality Checklist

Visual Fidelity

Responsiveness

Desktop layout matches
Tablet works
Mobile is usable
No horizontal scroll

Interactions

Hover states
Focus states
Transitions smooth

Code Quality

Properly typed
Sensible defaults
Uses tokens (no hardcoded values)
Accessible markup

Storage

Save implementations to .opencode/memory/design/implementations/

Related Skills

Need	Skill
Aesthetic quality	`frontend-design`
Accessibility	`accessibility-audit`
Design tokens	`design-system-audit`

mockup-to-code

Mockup to Code Skill

When to Use

Core Workflow

Phase 1: Design Analysis