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.