技能 image-to-ui

📦

image-to-ui

Name: image-to-ui
Author: uizze

v1.0.0 內容修訂 r1 安全 🌐 網路存取

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.

支援: Claude Codex Code(CC)

🥈 80 銀級

Maintain this Skill? Claim it 🥈 80 銀級

使用我的智慧代理安裝

將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。

智能體請求

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.

你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。

Agent 可讀資源

當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。

Markdown 詳情 GET /skills/uizze-image-to-ui.md 已簽名 manifest GET /api/skills/uizze-image-to-ui/manifest 已簽名 lockfile GET /api/skills/uizze-image-to-ui/lockfile

測試它

正在使用「image-to-ui」。 A settings screenshot and an existing frontend project, with the original viewport specified.

預期結果:

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.

正在使用「image-to-ui」。 A cropped mobile mockup with supplied icons and a requested wider viewport.

預期結果:

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.

安全審計

安全

v1 • 2026/10/10 開啟版本化報告

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)

SKILL.md:10 SKILL.md:18

最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。

審計單位: codex

分享與引用此報告

分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。

開啟版本化報告

複製報告連結

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

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)

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>

嵌入卡片

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

學術引用 (APA · BibTeX · CFF)

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

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"

Skillstore 評分

評分依據證據置信度: 中

架構

100

可維護性

內容

社群

規範符合度

你可以打造什麼

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.

試試這些提示

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.

最佳實務

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.

避免

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.

常見問題

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.

開發者詳細資訊

作者

uizze

授權

MIT

作者版本

v1.0.0

Skillstore 修訂

儲存庫

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

引用

e406bf64b5db6e514879399e87b346fa7ff7c2fb

維護新鮮度

2026/10/11

使用量

0 次下載 · 0 次瀏覽

檔案結構

📄 LICENSE

📄 SKILL.md