# Pixels To Product

> Turn a product brief, screenshot, Figma reference, or existing interface into a coherent design language and visually verified implementation. Use for substantial UI creation or redesign. Do not use for a tiny CSS correction with an existing exact target.

- Skill: `leihuang23/pixels-to-product` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add leihuang23/pixels-to-product`
- Raw SKILL.md: https://api.skillmd.com/api/skills/leihuang23/pixels-to-product/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- License: Apache-2.0
- Author: leihuang23 (https://skillmd.com/u/leihuang23)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/leihuang23/pixels-to-product

---


# Pixels to Product

Design from context, not from fashionable defaults. A visual implementation is unfinished until expected and actual can be compared.

## Route

1. Inspect product context: tokens, shared components, typography, icons, assets, routes, representative screens, and technical constraints.
2. If a visual target exists, preserve it and use it. If this is greenfield with no target, invoke `prototype-interface` to generate exactly three genuinely different image-based directions, then wait for the user to select one.
3. Invoke `design-language` to translate the selected direction into semantic tokens, component rules, content hierarchy, states, and accessibility requirements.
4. Invoke `prototype-interface` to produce the interactive prototype and verification matrix.
5. If production implementation is requested, invoke `build-vertical-slice` for the smallest real user flow.
6. Capture expected, actual, and diff at the same viewport, browser, scale, theme, data, fonts, and motion state.
7. Invoke `review-change` with visual, interaction, accessibility, and code evidence.

## Required states

Choose the applicable states and record omissions:

- narrow and wide viewports;
- empty, loading, error, partial, and success;
- hover, focus, active, selected, and disabled;
- long content, localization, font fallback, and zoom;
- reduced motion and keyboard-only navigation.

## Quality bar

- Use the product’s real visual language for an existing product.
- Use semantic tokens instead of scattered values.
- Preserve readable hierarchy, consistent rhythm, and intentional density.
- Treat clipping, overflow, low contrast, invisible focus, tiny targets, and inconsistent components as failures.
- Avoid decorative gradients, glass panels, excessive cards, neon dark themes, and generic “AI startup” styling unless the selected target explicitly requires them.
- Do not claim pixel accuracy without same-context comparison artifacts.

## Evidence packet

Return:

- selected target and why it fits the product;
- token and component artifacts;
- implemented routes and states;
- expected, actual, and diff image paths;
- accessibility checks and interaction tests;
- exact build and test commands with outcomes;
- remaining visual differences and untested environments.