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.
将此请求复制给你的智能体，其中包含权威 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.你的智能体仍应展示其计划，并按安全策略请求必要确认。
当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。
正在使用“image-to-ui”。 A settings screenshot and an existing frontend project, with the original viewport specified.
预期结果:
正在使用“image-to-ui”。 A cropped mobile mockup with supplied icons and a requested wider viewport.
预期结果:
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.
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
https://skillstore.io/skills/uizze-image-to-ui/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/uizze-image-to-ui?utm_source=security_passport_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><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>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@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}
}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"
Recreate a designer's mockup within an existing frontend project while preserving its layout, text, typography, and assets.
Compare a rendered interface against a supplied reference and identify visible differences for correction.
Turn an approved screenshot into working controls, then check requested screen sizes without inventing unrelated pages or backend features.
Recreate the attached screenshot in this project. Inspect the image first, preserve visible content, and report any missing assets.
Match [target screen] to the attached mockup at [reference viewport]. Reuse existing components, preserve current behavior, and compare the rendered result.
Implement the attached reference at [reference viewport], then adapt it for [additional sizes]. Check controls and disclose remaining 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.
作者
uizze许可证
MIT
作者版本
v1.0.0
Skillstore 修订
r1
引用
e406bf64b5db6e514879399e87b346fa7ff7c2fb
维护新鲜度
2026/10/11
使用量
0 次下载 · 0 次浏览
实现 React View Transitions
由 vercel-labs
React 视图过渡很容易放错位置，从而导致无提示或嘈杂的动画。此技能可指导路由、Suspense、列表和共享元素动画的选择。
使用 Resend 构建 React Email 模板
由 resend
创建可用于生产环境的电子邮件模板并不容易，因为各个邮件客户端存在差异。此技能会指导 Claude、Codex 和 Claude Code 完成 React Email 组件、发送、样式、本地化和编辑器工作流。
改进 Vue 3 TypeScript 实践
由 hyf0
Vue TypeScript 项目经常遇到令人困惑的模板、路由器和 Volar 错误。此技能为 Codex、Claude 和 Claude Code 提供有针对性的 Vue 3 修复方案。
改进 Vue Options API 组件
由 vuejs-ai
Vue Options API 项目可能会失去类型安全性和正确的 this 绑定。此技能提供更安全 Vue 组件的直接模式。
构建可用于生产的前端功能
由 davila7
前端团队需要在各项目中获得一致的 React 和 Next.js 指导。此技能提供用于前端分析的参考工作流、质量实践和辅助脚本。
优化 React 和 Next.js 性能
由 vercel-labs
React 和 Next.js 应用常常会因为瀑布式请求、大型包体以及可避免的重复渲染而变慢。此技能为代理提供具体规则，以便更安全地进行以性能为重点的改动。