---
name: pixels-to-product
description: 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.
license: Apache-2.0
metadata:
  compatibility: Codex, Kimi Code, and Grok Build; best with screenshot and browser automation tools.
  author: Lei Huang
  version: "0.1.0"
  status: experimental
---

# 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.