---
name: design-to-prompt
description: >
  Use this skill whenever a user uploads screenshots, a PDF export, or any visual design file
  (from Adobe XD, Figma, Sketch, or similar tools) and wants to build a pixel-perfect frontend
  from it. Triggers on: "build this design", "implement this UI", "convert this to code",
  "make this pixel perfect", "turn this design into HTML/React/CSS", or when any design image
  or PDF is uploaded alongside any coding or frontend intent. This skill extracts all design
  tokens, layout structure, typography, colors, spacing, components and interaction notes from
  the visuals, then constructs a complete, structured implementation prompt ready to hand off
  to a frontend developer or use directly with Claude.
compatibility: opencode
metadata:
  audience: frontend-developers
  workflow: design-to-code
---

# Design to Prompt — Design Handoff Skill

This skill takes visual design inputs (screenshots or PDF exports from Adobe XD, Figma, Sketch, etc.) and produces a complete, structured implementation prompt for pixel-perfect frontend development.

## Installation in OpenCode

Place this skill in one of the following locations:

```
# Project-level (recommended — commit to Git)
.opencode/skills/design-to-prompt/SKILL.md

# Or Claude-compatible path (also works in OpenCode)
.claude/skills/design-to-prompt/SKILL.md

# Global (available across all projects)
~/.config/opencode/skills/design-to-prompt/SKILL.md
```

OpenCode will automatically discover and list it via the `skill` tool. To use it, drag and drop your design screenshots into the OpenCode TUI (it supports image drag-and-drop natively) or reference a PDF file with `@path/to/design.pdf`, then say:
> "Build this design pixel-perfect" or "Implement this UI"

OpenCode will call `skill({ name: "design-to-prompt" })` and follow the steps below.

---

## What This Skill Does

1. **Analyzes** the uploaded visuals with deep attention to detail
2. **Extracts** every design token and layout decision
3. **Structures** findings into a developer-ready implementation prompt
4. **Flags** anything that needs clarification before coding starts

---

## Step 1 — Receive and Catalog Inputs

When the user uploads files, immediately identify:

- **Type**: PDF (multi-screen export) or individual screenshots
- **Count**: How many screens/states are shown
- **Scope**: What UI is being designed (app, website, component, dashboard, etc.)

If no files are attached but the user implies they want to share them, ask:
> "Please upload your design — either individual screenshots per screen, or a PDF export from XD/Figma. The more screens and states you share (hover, error, empty, mobile), the more complete the output prompt will be."

---

## Step 2 — Deep Visual Analysis

Analyze every uploaded image or PDF page carefully. For **each screen or component**, extract the following. Be precise — use exact values where visible, and flag estimates with `~`.

### 2a. Layout & Structure
- Overall layout type (single column, sidebar + content, grid, etc.)
- Max content width and horizontal padding/margins
- Section breakdown (header, hero, cards, footer, etc.)
- Grid system if detectable (number of columns, gutter width)
- Vertical rhythm and spacing between sections

### 2b. Color Tokens
Extract every color used, grouped by role:
```
Background colors: #XXXXXX
Surface/card colors: #XXXXXX
Primary brand color: #XXXXXX
Secondary/accent colors: #XXXXXX
Text colors (primary, secondary, muted): #XXXXXX
Border/divider colors: #XXXXXX
State colors (success, warning, error, info): #XXXXXX
```
If exact hex isn't visible, note the approximate hue and saturation. Use the eyedropper mental model — describe exactly what color you see.

### 2c. Typography
For each text style visible:
```
Element type (heading, subheading, body, label, caption, button text, etc.)
Font family: [name if visible or best guess from letterform]
Font weight: [thin/light/regular/medium/semibold/bold/extrabold]
Font size: [px or rem estimate]
Line height: [ratio or px estimate]
Letter spacing: [tight/normal/wide or em value]
Text transform: [none/uppercase/capitalize]
Color: [from color tokens above]
```

### 2d. Spacing System
Identify the spacing unit (usually 4px or 8px base). Extract:
- Padding inside cards/containers
- Margin between elements
- Gap between grid items
- Vertical spacing between sections

### 2e. Component Inventory
List every UI component visible:
- Navigation (type, items, active state)
- Buttons (variants: primary, secondary, ghost, icon; sizes; border-radius)
- Cards (structure, shadow, border, radius)
- Forms (inputs, selects, checkboxes, labels, error states)
- Badges/tags/chips
- Modals/overlays
- Tables
- Icons (style: outline/filled/rounded; approximate size)
- Images/avatars (shape, size, fit)

### 2f. Visual Effects
- Border radius values (per component if different)
- Box shadows (color, blur, spread, offset)
- Borders (width, color, style)
- Gradients (direction, color stops)
- Opacity variations
- Blur/backdrop effects
- Dividers or decorative elements

### 2g. Motion & Interactions (if annotated or inferable)
- Hover states for buttons, cards, links
- Active/focus states
- Transition style (ease, duration)
- Any animations shown or noted

### 2h. Responsive Signals
- Is the design desktop-only or are mobile views shown?
- Any visible breakpoint behavior (stacked columns, hidden elements, etc.)

---

## Step 3 — Screen-by-Screen Summary

After extracting tokens globally, document each screen individually:

```
Screen N — [Name or inferred purpose]
- Layout: [description]
- Key components: [list]
- Notable details: [anything unique to this screen]
- States shown: [default / hover / empty / error / loading]
```

---

## Step 4 — Flag Gaps & Ambiguities

List everything that needs clarification before implementation:
- Colors that couldn't be precisely identified
- Font families that aren't clearly legible
- Spacing values that couldn't be measured
- Missing states (e.g., mobile view not provided)
- Interactions not shown
- Assets that need to be provided (icons, images, logos)

Format as:
```
⚠️ NEEDS CLARIFICATION:
1. [Item] — [what's unclear and what would resolve it]
```

---

## Step 5 — Build the Implementation Prompt

Compile everything into a single, complete, copy-paste-ready prompt. Use this structure:

---

```
# Frontend Implementation Brief — [Project/Screen Name]

## Tech Stack
[Ask the user or infer from context — e.g., React + Tailwind, plain HTML/CSS, Vue, etc.]
[If unknown, default to: "Plain HTML + CSS + vanilla JS unless otherwise specified"]

## Design Tokens

### Colors
```css
--color-bg: #XXXXXX;
--color-surface: #XXXXXX;
--color-primary: #XXXXXX;
--color-primary-hover: #XXXXXX;
--color-text: #XXXXXX;
--color-text-muted: #XXXXXX;
--color-border: #XXXXXX;
--color-success: #XXXXXX;
--color-error: #XXXXXX;
```

### Typography
```css
--font-heading: 'FontName', sans-serif;   /* weight: 700 */
--font-body: 'FontName', sans-serif;       /* weight: 400, 500 */
--text-xs: Xpx;
--text-sm: Xpx;
--text-base: Xpx;
--text-lg: Xpx;
--text-xl: Xpx;
--text-2xl: Xpx;
```

### Spacing
```css
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
```

### Effects
```css
--radius-sm: Xpx;
--radius-md: Xpx;
--radius-lg: Xpx;
--radius-full: 9999px;
--shadow-sm: X;
--shadow-md: X;
--shadow-lg: X;
```

## Font Loading
[Google Fonts import / Adobe Fonts / local — with exact URL if possible]

## Screens to Build

### Screen 1 — [Name]
[Detailed description of layout, components, and behavior]

### Screen 2 — [Name]
[Detailed description]

## Component Specifications

### [Component Name]
- Structure: [HTML/JSX description]
- Variants: [list]
- States: default, hover ([describe]), active ([describe]), disabled ([describe])
- Exact sizing: [width, height, padding, font-size]

[Repeat for each component]

## Interactions & Animations
- [Element]: [behavior on hover/click/focus]
- Transition default: [e.g., all 200ms ease]

## Responsive Behavior
- Desktop breakpoint: [width]
- Mobile breakpoint: [width]
- Key changes at mobile: [describe layout shifts]

## Assets Needed
- Icons: [style, source if known — e.g., Heroicons outline]
- Images: [placeholder dimensions and aspect ratios]
- Logo: [dimensions, format]

## Implementation Notes
- [Any design decision that needs special attention]
- [Pixel-perfect priorities — what matters most]
- [Anything the developer should NOT deviate from]

## ⚠️ Unresolved / Needs Confirmation
[List from Step 4 above]
```

---

## Step 6 — Deliver

Present the implementation prompt cleanly. Then ask:

> "Does this look complete? Let me know:
> 1. What tech stack are you targeting? (React, plain HTML, Vue, etc.)
> 2. Any clarifications on the flagged items above?
> 3. Should I go ahead and start building now?"

If the user says yes to building — proceed directly into implementation using the prompt you just generated as your own brief. Do not ask again for information you already extracted.

---

## Quality Checklist (internal — verify before delivering)

- [ ] Every visible color captured with hex or close approximation
- [ ] Every text style documented (size, weight, family, color)
- [ ] Every component listed with its variants and states
- [ ] Spacing system defined with base unit
- [ ] Border radius and shadow values captured
- [ ] All screens named and described individually
- [ ] Gaps and ambiguities explicitly listed
- [ ] Prompt is self-contained — a developer could implement without seeing the original designs