Compétences image-to-ui
📩

image-to-ui

v1.0.0 RĂ©vision du contenu r1 SĂ»r 🌐 AccĂšs rĂ©seau

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.

Prend en charge: Claude Codex Code(CC)
Maintain this Skill? Claim it đŸ„ˆ 80 Argent

Installer avec mon Agent

Copiez cette demande dans votre Agent. Elle contient la page Skill de référence et le manifeste.

Demande d’agent
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.

Votre Agent doit toujours présenter son plan et demander toute confirmation exigée par la politique de sécurité.

Ressources lisibles par les agents

Utilisez ces liens lorsqu’un Agent IA, un crawler ou un script a besoin d’un contexte propre au lieu de lire toute la page.

Détail Markdown GET /skills/uizze-image-to-ui.md manifest signé GET /api/skills/uizze-image-to-ui/manifest lockfile signé GET /api/skills/uizze-image-to-ui/lockfile

Tester

Utilisation de « image-to-ui ». A settings screenshot and an existing frontend project, with the original viewport specified.

RĂ©sultat attendu:

  • 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.

Utilisation de « image-to-ui ». A cropped mobile mockup with supplied icons and a requested wider viewport.

RĂ©sultat attendu:

  • 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.

Audit de sécurité

Sûr
v1 ‱ 10/10/2026 Ouvrir le rapport versionnĂ©

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
Fichiers analysés
67
Lignes analysées
0
ÉlĂ©ments Ă  examiner
0
Faux positifs ignorés

Facteurs de risque

🌐 AccĂšs rĂ©seau (2)
SKILL.md:10 SKILL.md:18
Le dernier audit statique et sĂ©mantique terminĂ© n’a dĂ©tectĂ© aucun constat de sĂ©curitĂ© confirmĂ©. Cela ne prouve pas que le skill est sans effets secondaires.
Audité par: codex
Partager et citer ce rapport

Partagez le rapport d’évaluation versionnĂ©, le badge neutre, la carte intĂ©grable et les citations. Skillstore prĂ©sente les preuves sans dĂ©cider si ce Skill est sĂ»r.

Ouvrir le rapport versionné
Évaluation de sĂ©curitĂ©

Copier le lien du rapport

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

Badge Markdown

[![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)

Badge HTML

<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>

Carte intégrable

<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>
Citations académiques (APA · BibTeX · CFF)

Citation APA

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

Citation BibTeX

@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"

Score Skillstore

Pourquoi ce score Niveau de confiance des preuves: Moyen
55
Architecture
100
Maintenabilité
87
Contenu
65
Communauté
83
Conformité aux spécifications

Ce que vous pouvez créer

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.

Essayez ces 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.

Bonnes pratiques

  • 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.

Éviter

  • 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.

Foire aux 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.

Détails du développeur

Auteur

uizze

Licence

MIT

Version de l’auteur

v1.0.0

RĂ©vision Skillstore

r1

DĂ©pĂŽt

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

RĂ©f

e406bf64b5db6e514879399e87b346fa7ff7c2fb

RĂ©cence de maintenance

11/10/2026

Utilisation

0 téléchargements · 0 vues

Structure de fichiers

📄 LICENSE

📄 SKILL.md