Image to code handoff

Skill jukrap/ai-agent-playbook/skills/design/image-to-code-handoff

Reusable AI agent skills, project templates, and guardrails for safer software maintenance and delivery.

Install

npx -y skills add jukrap/ai-agent-playbook --skill image-to-code-handoff

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use when turning generated images, screenshots, mockups, reference boards, or Figma frames into implementation-ready UI specs and verification criteria.

SKILL.md

1.2 KB, 187 tokens by cl100k_base, as published. Nobody here has run it

Image To Code Handoff

Use this when a visual artifact should guide implementation, but the coding work still needs explicit tokens, components, states, responsive rules, and verification evidence.

Workflow

Identify the source artifact, authority level, viewport, state, and allowed degree of visual match.
Extract design intent, structure, tokens, component roles, content hierarchy, and interaction states.
Convert image-only decisions into repository-native implementation contracts.
Mark uncertain details instead of guessing hidden behavior, data contracts, or inaccessible states.
Hand off to frontend, design-system, accessibility, or visual regression skills with acceptance criteria.

Reference

Read references/image-to-code-contract.md for extracting implementable contracts from images and mockups.