What is image-to-ui-skill?

A process for turning a screenshot or design into a clickable front-end or app prototype, including a plan for image assets.

Use it to recreate screens, decide which visuals require image generation, produce those assets, integrate them into the interface, and check the result against the reference.

It separates interface elements that should be built as code from visual elements that need real bitmap images, which helps preserve the reference design.

image-to-ui-skill — Skill for Claude Code by bahayonghang

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add bahayonghang/my-ai-cli-toolkit --skill image-to-ui-skill

Clone the repo

git clone --depth 1 https://github.com/bahayonghang/my-ai-cli-toolkit

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/bahayonghang/my-ai-cli-toolkit/image-to-ui-skill/github.svg)](https://agentmods.dev/skills/bahayonghang/my-ai-cli-toolkit/image-to-ui-skill)

Your own site

<a href="https://agentmods.dev/skills/bahayonghang/my-ai-cli-toolkit/image-to-ui-skill"><img src="https://agentmods.dev/badge/skills/bahayonghang/my-ai-cli-toolkit/image-to-ui-skill/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/bahayonghang/my-ai-cli-toolkit/image-to-ui-skill"><img src="https://agentmods.dev/badge/skills/bahayonghang/my-ai-cli-toolkit/image-to-ui-skill.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 65 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 3,477 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits

NVIDIA SkillSpector pass 7 Sept 2026

How audits are shown

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00065	$0.03477
Opus 5	$0.00032	$0.01739
Sonnet 5	$0.00013	$0.00695
Haiku 4.5	$0.00006	$0.00348

Measured 10d ago against content hash 057bbd66c5c9, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-10, from the pricing page.

Security

Grade A, and why

image-to-ui-skill scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.

The scan reads SKILL.md. This mod also ships 9 executable files (demo/artmuse-ios/script.js, demo/artmuse-ios/validate.mjs, demo/marble-note/script.js, …), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/developer-tools-integrations/image-to-ui-skill/SKILL.md · 190 lines

How it starts

The opening of the file, as written. The whole thing — 190 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Image to UI Skill

使用这个 skill，把 UI 参考图转成可执行的图片资产方案：先分析哪些区域需要生成图片，再生成、后处理，并集成回 UI。

本文件保留路由、核心生图边界与主流程；App/网页交付、UI 分析、字体、尺寸、提示词写法、抠图、集成、交互、审查、差距核对与最终交付报告等细则已下沉到 references/，按需读取(见文末「详细规则索引」)。

image2 生图优先规则

当用户明确要求“调用 image2 生图”“用 image2 复刻”“参考图片做高保真 UI”，或参考图的效果明显依赖摄影、插画、颗粒、半色调、像素噪点、复杂纹理、景深、真实材质、复杂岛屿/地图/角色等位图质感时，必须优先走真实的 image2 位图生成流程，而不是只用 HTML/CSS/SVG 做近似。

在这类任务里：

必须先判断哪些区域属于 必须真实生图，哪些区域属于 必须代码实现。
必须至少生成并落地一批真实位图资产后，才能声称“已经调用 image2”。
不要把“用 CSS 画了一个相似背景”“用 SVG 拼了插画”“用渐变和噪点近似了风格”描述成已经完成 image2 生图。
如果只是先做代码骨架，必须明确说明“当前仅完成结构 UI，还未真正调用 image2 生成资产”。
如果用户要的是高保真复刻，优先生成主视觉、路线插画、卡片缩略图、复杂背景纹理等高影响位图资产，再做 CSS 微调。

以下内容默认视为 应优先调用 image2：

首屏主视觉海景、人物、产品、摄影感场景
带颗粒、半色调、像素噪点、蓝晒/丝网印刷、扫描感的复杂插画
跳岛路线图中的岛屿插画、装饰地图、复杂海岸线和非标准装饰物
卡片缩略图、场景图、带统一美术风格的多张主题图
用代码实现会显著降低质感或极难逼近参考图的区域

以下内容默认 不要交给 image2：

标题、正文、价格、按钮文案、列表文案、标签、导航文字
常规按钮、输入框、卡片、分隔线、底部导航、常规 icon 容器
需要保持可访问、可翻译、可交互的 UI 文本

image2 调用边界

本 skill 里的 image2 指项目指定的 image2 调用入口，不等同于任意图片生成工具。当前 skill 也包含一个备案通道：当原生 image2 命令不可用或失败时，scripts/image2_asset.py 会在备案前置条件满足时自动转到 OpenRouter ICU gpt-image-2(前置条件见下方「备案通道前置条件」)。若前置条件不满足，脚本会以非零码明确报错，此时必须如实说明尚未生图，不得声称已落地位图。

执行时：

在任何真实生图前，先按 references/image2-entrypoint.md 确认当前项目的 image2 调用入口和备案通道。
优先调用本 skill 的 scripts/image2_asset.py，不要自己重写 API 请求。
scripts/image2_asset.py 会先尝试原生 image2 命令或 IMAGE2_COMMAND 环境变量；失败后自动调用 openrouter-icu-image/scripts/openrouter_icu_image.py，模型固定默认为 gpt-image-2。
可以把 OpenRouter ICU gpt-image-2 记为“image2 备案通道”或“fallback 通道”，但最终必须说明实际走的是 native-image2 还是 openrouter-icu-gpt-image-2。
不要把 imagegen skill、其它图片生成插件、随机在线生图服务或手写 SDK 请求当作本 skill 的 image2/fallback 通道。
如果原生 image2 和 OpenRouter ICU fallback 都不可用，再停止并说明缺少可用生图入口；不要声称已经生图。
可以继续实现代码 UI 骨架，但必须明确标注“尚未完成真实位图资产生成”，不能把代码近似、CSS/SVG 视觉或其它来源图片写成 image2 结果。

备案通道前置条件

OpenRouter ICU gpt-image-2 备案通道并非无条件可用。scripts/image2_asset.py 走 fallback 需要同时满足：

能定位 OpenRouter ICU CLI:在本 skill 同级目录安装 openrouter-icu-image skill(脚本默认查找 openrouter-icu-image/scripts/openrouter_icu_image.py),或显式设置 OPENROUTER_ICU_IMAGE_CLI 指向该脚本。本仓库默认不附带该兄弟 skill，需要时另行安装或配置。
凭据可用:设置 OPENROUTER_ICU_API_KEY 或 OPENAI_API_KEY。

Read the full file on GitHub · 190 lines

Files

What ships with it

56 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

10d ago First seen · 190 lines · 65 tokens per session scan A 057bbd66c5c9

Subscribe to this mod's changes

image-to-ui-skill is a skill published in the GitHub repository bahayonghang/my-ai-cli-toolkit (16 stars, last pushed 2d ago), licensed MIT. It adds 65 tokens to every session and 3,477 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Design and UX Frontend codex developer-tools-integrations image-to-ui image2 prototype

image-to-ui-skill

Getting it into your agent

Wrote this? Show the measurements

What it costs to keep this loaded

Grade A, and why

Nothing flagged

How it starts

Image to UI Skill

image2 生图优先规则

image2 调用边界

备案通道前置条件

What ships with it

What this file has done since we first saw it

Other skills, from other repositories

prototype-web

saas-landing

web-proto-brutalist

web-proto-editorial

web-proto-soft

sketch