screenshot-to-interface

Screenshot to Interface

Treat references as evidence, not as a bitmap to trace blindly. Reconstruct the underlying layout and behavior while preserving maintainability and rights.

Trigger boundary

Use this skill for:

• implementing a page, screen, component, or flow from screenshots;
• translating a design comp into responsive components;
• auditing why an implementation differs from its reference;
• inferring a coherent component/system model from multiple visual states.

Do not trigger for:

• deciding an original visual direction without a reference—use product-design-director;
• a production web/mobile audit unrelated to reference fidelity—use the platform builder;
• extracting or redistributing protected assets without permission;
• image OCR or screenshot transcription where no interface reconstruction is requested.

Required inputs

Obtain or record as unknown:

1. all reference images and their source/provenance;
2. pixel dimensions, device scale factor, viewport, orientation, theme, locale, and state if known;
3. target repository, stack, routes, and existing design system;
4. required interactions, responsive range, browsers/devices, and accessibility target;
5. asset rights and available original logos/icons/fonts/images;
6. acceptable fidelity tolerance and whether content may be adapted.

Do not infer one desktop screenshot as the complete responsive specification.

Provenance

This skill is an original restructuring that selectively adapts visual-reference and fidelity concepts from Leonxlnx/taste-skill. Read references/provenance.md and preserve the root notice.

Safety baseline

• Inspect repository and working-tree state before editing.
• Reuse existing tokens/components when they can express the reference without distortion.
• Do not replace project architecture, framework, or styling system solely for visual convenience.
• Do not embed screenshots as the interface, hard-code coordinates for one viewport, or use inaccessible canvas/text images for ordinary UI.
• Do not download fonts/assets from a reference without rights and license evidence.
• Preserve user code and keep generated or broad formatting changes out of the diff.