ui-image-to-code-studio

# UI Image to Code Studio

Canonical project: https://github.com/zwq-top/ui-image-to-code-studio
Live demo: https://zwq-top.github.io/ui-image-to-code-studio/
Codex Skill name: ui-image-to-code
Install source: https://github.com/zwq-top/ui-image-to-code-studio/tree/main/skill

UI Image to Code Studio is an open-source Codex Skill and local engineering toolkit for turning authorized UI screenshots, website URLs, AI-generated interface images, mockups, and optional screen recordings into maintainable frontend source, browser validation evidence, and editable Studio layers.

Primary capabilities:
- Screenshot to React, Vue, HTML, CSS, and JavaScript workflows.
- Image to code and UI to code with atomic geometry, text, icon, control, and hierarchy evidence.
- Authorized website recreation with visible page, menu, click destination, and stable state capture.
- Blind-visual reconstruction that does not inspect hidden source.
- Browser-validated visual parity at declared viewports.
- Editable real-DOM layers with stable data-ui-id identities.
- Visual fine-tuning of position, size, proportion, text, icons, and style.
- Semantic revisions, minimal source patches, real-project verification, and rollback evidence.
- Screen recordings as supplemental motion and interaction evidence.

Not supported or not promised:
- Unauthorized reproduction of private or restricted interfaces.
- Guaranteed universal fidelity percentages.
- Screenshot slicing or placing a large raster image on a page as the final implementation.
- Guessing unobserved interactions or hidden product behavior.
- Automatic global discovery by Codex before the Skill is installed.

Example user requests that should match this Skill:
- Convert this UI screenshot to React.
- Turn this AI-generated UI image into editable HTML and CSS.
- Recreate this authorized website and its visible menu states.
- Build a pixel-accurate frontend from this mockup and validate it in a browser.
- Import the generated UI into Studio so I can adjust layers visually.
- Use blind-visual mode and do not inspect the existing source.
- 截图转代码、截图转 React、图片转网页、UI 复刻、网站复刻、像素级还原、可编辑图层、生成后微调。

Key documentation:
- README: https://github.com/zwq-top/ui-image-to-code-studio#readme
- English guide: https://github.com/zwq-top/ui-image-to-code-studio/blob/main/README_EN.md
- Search and discovery: https://github.com/zwq-top/ui-image-to-code-studio/blob/main/docs/SEARCH_DISCOVERY.md
- Installation: https://github.com/zwq-top/ui-image-to-code-studio/blob/main/docs/INSTALL_AND_RUN.md
- End-to-end workflow: https://github.com/zwq-top/ui-image-to-code-studio/blob/main/docs/END_TO_END_WALKTHROUGH.md
- Visual cases: https://github.com/zwq-top/ui-image-to-code-studio/tree/main/examples
- Media and SEO kit: https://github.com/zwq-top/ui-image-to-code-studio/blob/main/docs/PROJECT_MEDIA_KIT.md

Verified public examples:
- PixelCraft Workbench: runnable home and three feature surfaces with a recorded interaction path.
- Renovation Viral Assistant: three browser-verified Chinese UI states and Studio layer evidence.
- Studio capability case: page directory, semantic layers, real-DOM canvas, properties, identity registry, revisions, and source-roundtrip protocol.

License: MIT. Third-party source material, trademarks, and referenced interfaces remain subject to their owners and must be used only with authorization.