102.3K+Download
Skip to the usage guide
Image to UIby UIZZE

Image to UI Skill.

Implement the interface you can already see. Image to UI treats a screenshot or mockup as the visual specification, keeps the project’s existing stack, and asks your agent to render and compare before claiming a match.

  • Screenshot to Code
  • Reference Matching
  • UI Implementation
Download OpenDesignView Usage Guide
Source Review · image-to-uiSKILL.md
Task Screenshot-to-UI Implementation Produces • Interface code in the existing project • Real text and controls, not a flattened screenshot • A comparison summary with remaining mismatches Before You Start Provide a readable reference image, its target viewport, project access and available assets. Browser rendering is needed to verify the visual match. No UIZZE account or MCP connection is required.
Editorial summary · source reviewed 2026-10-12 · not a generated example

01 What It Does

Use the Image as the Specification

This short skill focuses on reproducing an existing visual decision, not finding a new art direction. The workflow below describes the source; it is not a completed reconstruction.

Source-based workflowNot an execution benchmark

The Working Approach

The agent begins with the actual image: its dimensions, visible copy, hierarchy, proportions and assets. It also reads the target project so the implementation fits the existing framework and screen. A cropped screenshot defines only the visible area; it is not permission to invent the rest of the page.

Implementation uses real layout, text and controls. Once the reference viewport is matched, the agent checks other requested sizes. The final step is to render at the reference dimensions, wait for fonts and images, compare the result and correct visible differences. Missing assets and unverified rendering must remain explicit.

Expected Deliverables

  • Editable interface code using the target project’s stack and appropriate reusable components
  • Requested controls connected to existing behavior, without invented backend functionality
  • A short account of the actual visual comparisons, remaining differences and missing assets
See the Example Brief

From Reference to Comparison

  1. 01
    Inspect the Actual Image

    Read the image itself, not just its filename or extracted text. Identify its dimensions, visible region, alignment, typography and assets before editing code.

  2. 02
    Build at the Reference Size

    Match hierarchy, wrapping, spacing and crops in the existing stack. Reuse components when they can reproduce the reference; do not force it into unrelated defaults.

  3. 03
    Render and Correct

    Capture the running screen at the same viewport. Compare large layout and proportion differences first, then typography, color and small details; render again after changes.

  4. 04
    Check the Requested Variants

    After the reference size is established, test the requested responsive sizes and working controls. Report any remaining mismatches instead of promising pixel-perfect fidelity.

02 When to Use It

When to Use It

Choose Image to UI when the visual direction is already settled and you need to implement it faithfully.

A Good Fit

  • An Approved Screen MockupTurn a supplied design image into a screen in an existing app, keeping the visible hierarchy and content.
  • A Screenshot-Based RebuildRecreate a reference whose original design file is unavailable, while making any missing fonts or images explicit.
  • A Focused Visual CorrectionBring an implementation closer to a known reference using same-viewport captures and a list of remaining differences.

Limits to Check

  • A Screenshot Does Not Define Hidden BehaviorUnseen sections, backend responses and additional screens are outside the reference. Supply requirements for them rather than expecting the skill to infer a product.
  • Exact Assets May Be MissingThe skill asks for missing fonts, icons or imagery to be disclosed. It cannot establish an exact visual match when the required assets are unavailable.
  • Fidelity Needs Rendered EvidenceA plausible implementation or a successful build does not verify similarity. If the environment cannot render the screen, the visual match remains unverified.

Bring These Inputs

  • A Readable Reference and ViewportAttach the actual image and specify the intended browser dimensions. Mark whether the image is a crop and which region must be implemented.
  • The Existing Project and AssetsIdentify the target route or component, framework, fonts, icons and image files. Point out existing components or behavior that must be retained.
  • Interaction and Responsive RequirementsName the controls to wire and the additional widths to support. State what the screenshot does not show and what should remain out of scope.

03 Decisions That Matter

Decisions That Matter

  1. Match Before Redesigning

    The image controls palette, composition and visible content. Decorative additions or a different design direction require a separate request.

  2. Reconstruct the Interface, Not the Bitmap

    Normal grid and flex layouts, real text and usable controls preserve an editable UI. Absolute positioning is reserved for actual overlays rather than the whole screen.

  3. Compare Like With Like

    Matching viewport dimensions and loaded assets make the comparison meaningful. The documented correction order starts with proportions and layout before polishing small details.

04 Try a Focused Brief

Try a Focused Brief

The example below has not been executed. Attach your reference image and adapt the project details before using it.

Review the Setup

The upstream README documents the install command below. It installs the GitHub-native Image to UI package; it is not an installation of the optional UIZZE MCP service.

Documented Install Command
npx skills add uizze/uizze --skill image-to-ui

Use an agent that can inspect images and edit your project. Run the project in a browser for visual verification. The skill itself requires no UIZZE account or MCP connection; your project and agent keep their own setup requirements.

Attach One Screen

Keep the first task bounded to a visible screen or crop. Include the image, exact assets and the interactions already supported by the app.

Example Brief
Use image-to-ui to implement the attached billing-screen reference in the existing app. First inspect the image and project, then confirm the target route and reference viewport with me if they are unclear. Match the visible copy, hierarchy, spacing, wrapping and image crops rather than redesigning them. Use the supplied fonts and assets; list anything missing instead of silently substituting it. Preserve existing payment and invoice behavior, and do not invent API responses or unseen sections. Render at the reference viewport, wait for fonts and images, compare with the supplied image and correct the largest differences first. Then check 390 px and 320 px widths without changing the visual identity. Report the screenshots actually compared, controls checked and remaining mismatches.

Review the Rendered Result

Compare the same viewport before judging the responsive variants. Check both the visible design and the requested controls.

  • The reference and rendered capture use the same viewport, with fonts and images loaded.
  • Visible content and proportions follow the image; missing assets or deliberate differences are named.
  • Requested controls retain their real behavior, and the specified narrow layouts remain usable.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
UIZZE
Repository
uizze/uizze
Skill File
skills/image-to-ui/SKILL.md
License
MIT · skill-level license
Reviewed Snapshot
2026-10-12 · 146928eb50bc
Editorial Source Summary
Image to UI is a short screenshot-reconstruction workflow: inspect the image and project, implement the visible interface in the existing stack, then render at the reference viewport and correct differences. This is an editorial summary, not a reported test run.

Original summary by OpenDesign, based on the linked source. The MIT license is specific to this skill directory; other packages in the repository may have different notices. Repository stars are not install counts.

06 Questions Before You Start

Questions Before You Start

Does Image to UI need the paid UIZZE MCP?

No. The skill and upstream README explicitly say no account or MCP connection is required. The repository also offers an optional paid reference-search service, but that is separate from implementing your supplied image.

Can it build the rest of a page from a cropped screenshot?

The source says to reproduce the visible region and not invent unseen sections. Provide additional reference images or explicit requirements for anything beyond the crop.

Will it guarantee a pixel-perfect result?

No guarantee follows from the instructions. The skill targets close reconstruction and requires rendered comparison. Missing assets and remaining mismatches must be reported; without rendering, visual fidelity is unverified.

Image to UI

Build the Screen You Already Chose

Bring the readable reference, the target project and its assets. Match the original viewport, inspect the running interface and make the remaining differences explicit.

Download OpenDesignBrowse Design Skills
Documented Install Command
npx skills add uizze/uizze --skill image-to-ui