Skills image-to-ui
📦

image-to-ui

v1.0.0 Content revision r1 Safe 🌐 Network access

Recreate Screenshots as Working Interfaces

Recreating a screenshot can introduce unwanted design changes and visible mismatches. This skill guides your agent to implement the reference and compare rendered results.

Supports: Claude Codex Code(CC)
🥈 80 Silver

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request
Review the Skillstore skill "image-to-ui" from https://skillstore.io/skills/uizze-image-to-ui.md and its manifest at https://skillstore.io/api/skills/uizze-image-to-ui/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Your Agent should still show its plan and request any confirmation required by the security policy.

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/uizze-image-to-ui.md Signed manifest GET /api/skills/uizze-image-to-ui/manifest Signed lockfile GET /api/skills/uizze-image-to-ui/lockfile

Test it

Using "image-to-ui". A settings screenshot and an existing frontend project, with the original viewport specified.

Expected outcome:

  • Example implementation summary: Settings layout recreated with real text and controls using existing components.
  • Example comparison report: Rendered at the supplied viewport; alignment and spacing differences corrected after comparison.
  • Example limitation: The original font was unavailable, so typography remains an acknowledged mismatch.

Using "image-to-ui". A cropped mobile mockup with supplied icons and a requested wider viewport.

Expected outcome:

  • Example implementation summary: Visible region recreated with supplied icons; no unseen sections added.
  • Example validation report: Reference viewport compared and requested wider layout checked for usability.
  • Example limitation: Backend behavior was not added because it was not requested.

Security Audit

Safe
v1 • 10/10/2026 Open versioned report

All three static findings are false positives: two Markdown references and one instruction to reuse the project stack. No evidence found of credential collection, unauthorized data transmission, system reconnaissance, or prompt injection in the reviewed instructions. The skill explicitly treats image text and links as reference content, not executable instructions.

2
Files scanned
67
Lines analyzed
0
Review items
0
False positives ignored

Risk Factors

🌐 Network access (2)
SKILL.md:10 SKILL.md:18
No confirmed security findings were detected by the latest completed static and semantic audit. This does not prove the skill has no side effects.
Audited by: codex
Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report
Security Assessment

Copy report link

https://skillstore.io/skills/uizze-image-to-ui/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/uizze-image-to-ui/security.svg)](https://skillstore.io/skills/uizze-image-to-ui?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/uizze-image-to-ui?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/uizze-image-to-ui/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/uizze-image-to-ui.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
Academic citations (APA · BibTeX · CFF)

APA citation

uizze. (2026). image-to-ui security audit report (audit version 1) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/uizze-image-to-ui/audits/1

BibTeX citation

@techreport{uizze-uizze-image-to-ui-2026, author = {uizze}, title = {image-to-ui security audit report (audit version 1)}, institution = {Skillstore}, year = {2026}, number = {1}, url = {https://skillstore.io/skills/uizze-image-to-ui/audits/1}, note = {Author version 1.0.0} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "image-to-ui security audit report (audit version 1)" version: "1.0.0" type: report authors: - name: "uizze" date-released: "2026-10-10" url: "https://skillstore.io/skills/uizze-image-to-ui/audits/1" identifiers: - type: other value: "skillstore:uizze-image-to-ui:audit:1" description: "Skillstore immutable audit report identifier"

Skillstore Score

Why this score Evidence Confidence: Medium
55
Architecture
100
Maintainability
87
Content
65
Community
83
Spec Compliance

What You Can Build

Implement a supplied mockup

Recreate a designer's mockup within an existing frontend project while preserving its layout, text, typography, and assets.

Validate design implementation

Compare a rendered interface against a supplied reference and identify visible differences for correction.

Build a reference-based prototype

Turn an approved screenshot into working controls, then check requested screen sizes without inventing unrelated pages or backend features.

Try These Prompts

Recreate a reference 
Recreate the attached screenshot in this project. Inspect the image first, preserve visible content, and report any missing assets.
Match an existing screen 
Match [target screen] to the attached mockup at [reference viewport]. Reuse existing components, preserve current behavior, and compare the rendered result.
Add requested responsive sizes 
Implement the attached reference at [reference viewport], then adapt it for [additional sizes]. Check controls and disclose remaining visual differences.
Iterate on visual differences 
Compare [implemented screen] with the attached reference at [viewport]. Correct layout, typography, spacing, colors, and assets in that order. Render again and report comparisons.

Best Practices

  • Provide the original reference image, its viewport dimensions, and available fonts, icons, and images.
  • Identify the target screen and requested interactions so the agent can preserve existing project behavior.
  • Render at matching dimensions, wait for assets to load, and review remaining mismatches after each correction.

Avoid

  • Providing only filenames or text descriptions instead of an accessible reference image.
  • Requesting unrelated redesigns while expecting faithful reproduction of the reference.
  • Claiming pixel-perfect fidelity without rendering and comparing the implementation.

Frequently Asked Questions

What reference formats can I use?
Use an accessible screenshot, mockup, or other visual reference that the agent can inspect directly.
Does this require an account or MCP connection?
The skill requires neither an account nor an MCP connection. Image inspection and rendering depend on tools available to your agent.
Does it require a specific frontend framework?
No. It instructs the agent to use your project's existing stack and reuse suitable components.
Can it guarantee a pixel-perfect match?
No. Missing assets or unavailable rendering can prevent verification; remaining mismatches must be disclosed.
Can it make the interface responsive?
It guides adaptation to requested sizes after matching the original viewport, while preserving the reference's visual identity.
Will it add backend behavior or unseen screens?
No. It preserves existing behavior and wires requested interactions without inventing backend behavior, unrelated screens, or unseen sections.

Developer Details

Author

uizze

License

MIT

Author version

v1.0.0

Skillstore revision

r1

Repository

https://github.com/uizze/uizze/tree/146928eb50bc08a787b0987e0a2235b6594c5af1/skills/image-to-ui

Ref

e406bf64b5db6e514879399e87b346fa7ff7c2fb

Maintenance freshness

10/11/2026

Usage

0 downloads · 0 views

File structure

📄 LICENSE

📄 SKILL.md