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.
npx skills add jiushiwon/wg-skills --skill uniapp-ui-replica-skillgit clone --depth 1 https://github.com/jiushiwon/wg-skillsWrote 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.
[](https://agentmods.dev/skills/jiushiwon/wg-skills/uniapp-ui-replica-skill)<a href="https://agentmods.dev/skills/jiushiwon/wg-skills/uniapp-ui-replica-skill"><img src="https://agentmods.dev/badge/skills/jiushiwon/wg-skills/uniapp-ui-replica-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.
<a href="https://agentmods.dev/skills/jiushiwon/wg-skills/uniapp-ui-replica-skill"><img src="https://agentmods.dev/badge/skills/jiushiwon/wg-skills/uniapp-ui-replica-skill.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.00080 | $0.02176 |
| Opus 5 | $0.00040 | $0.01088 |
| Sonnet 5 | $0.00016 | $0.00435 |
| Haiku 4.5 | $0.00008 | $0.00218 |
Grade A, and why
uniapp-ui-replica-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 9d ago.
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.
How it starts
The opening of the file, as written. The whole thing — 177 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI Replica Skill
把 UI 原型图/截图高还原地复刻成可运行代码。
核心原则：先看到像原图的页面，再谈规范和收敛。第一稿目标是把可见部分还原到 80% 以上；样式收敛、组件沉淀、设计系统治理交给 frontend-style-harmonizer-skill 或 ui-component-commands-skill 后续处理。
适用场景
- 用户发来一张 UI 原型图或截图，要求复刻成代码
- 图片来源是 AI UI 生成器（Stitch、v0、Galileo AI、Uizard、Figma/AI 等）
- 用户之前复刻效果差，需要系统化方法提升还原度
不适用场景
- 用户只有文字需求，没有图片 —— 用
frontend-ui-foundry - 用户想从零设计一个新页面 —— 用
frontend-ui-foundry或ui-ux-pro-max - 用户只想改某个已有组件 —— 用
ui-component-commands-skill
两种执行模式
| 模式 | 触发方式 | 输出 |
|---|---|---|
| 快速模式 | 用户只发图，未指定框架 | 直接输出单文件 HTML，一句话结构说明，Token 表折叠或后置 |
| 完整模式 | 用户指定技术栈、要求接入项目、或发来多图 | 走完整 0-6 阶段流程，输出结构分析 + Token 表 + 代码 |
默认走快速模式。只有用户明确说“我要 Vue/React/uniapp 版本”或“接入项目”时，才进入完整模式。
核心流程
0. 读图准备
└── 读取本地路径或 URL，失败时要求用户重新提供
└── 评估图片清晰度、完整性、是否长图/多图
└── 质量不足时，先告知用户再估算
1. 结构化读图
└── 识别页面类型（中后台/营销/官网/移动端/文档）
└── 拆结构：页面 → 区块 → 卡片 → 元素
└── 标记颜色、字号、间距、圆角、阴影、图标
└── 识别特殊元素：二维码、图表、头像、地图
2. 收敛 Token
└── 提取主色、中性色、文字色、背景色
└── 收敛间距、圆角、阴影、字号阶梯
└── Token 用于快速保持一致，不强求与项目设计系统对齐
3. 代码生成
└── 先搭骨架（layout），再填血肉（components）
└── 默认单文件 HTML + Tailwind CDN（可直接浏览器打开）
└── 指定框架时生成对应骨架并填充页面
└── 复杂元素优先用代码模拟，无法模拟再占位
4. 验证与交付
└── 检查关键状态（hover/active/disabled）
└── 说明未在浏览器实测
└── 给出还原度自评和待确认项
输出规范
快速模式
- 一句话结构分析：页面类型 + 主要区块
- 完整代码：单文件 HTML，可直接打开
- Token 表：可选，用户追问时再给
- 验证提醒：说明未实测，请用户打开查看并指出差异
完整模式
- 结构分析：页面类型 + 结构树
- 图质量评估：清晰度、完整性、遮挡情况
- Token 表：颜色、间距、圆角、阴影
- 完整代码：按指定技术栈输出
- 验证提醒与还原度自评：说明未实测，列出待确认项
复杂元素策略
按“能模拟就模拟，不能模拟再占位”处理：
| 元素 | 优先方案 | 降级方案 |
|---|---|---|
| 通用图标 | Iconify / 内联 SVG | 语义文字标签 |
| 二维码 | QRCode.js 真实生成 | 占位 div |
| 图表 | ECharts / Recharts 渲染 mock 数据 | 占位 div |
| 地图 | CSS 色块 + 标注点模拟 | 占位 div |
| Banner/头像 | Unsplash 直接 URL | CSS gradient 占位 |
| 日历 | 原生 <input type="date"> 或组件库 DatePicker |
占位 div |
| 文件上传 | 拖拽上传 UI | 占位 div |
禁止直接使用 Emoji 作为正式图标。
技术栈默认策略
| 用户输入 | 工作目录 | 输出形态 |
|---|---|---|
| 只发图，未指定框架 | 任意 | 单文件 HTML + Tailwind CDN |
| 指定 uniapp/Vue/React/HTML | 任意 | 按指定框架生成 |
| 要求“接入项目” | 目标项目 | 询问确认后按项目技术栈生成 |
| 多图/原型图集 | 任意 | 先梳理页面关系，再逐个生成 |
What ships with it
15 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.
- examples/admin-dashboard/description.md 599 B
- examples/admin-dashboard/sample.html 5.9 KB
- examples/landing-page/description.md 607 B
- examples/landing-page/sample.html 4.4 KB
- examples/mobile-page/description.md 525 B
- examples/mobile-page/sample.html 3.7 KB
- examples/README.md 819 B
- README.md 3.1 KB
- references/checklist.md 2.9 KB
- references/complex-components.md 5.5 KB
- references/integration-guide.md 4.1 KB
- references/multi-mockups.md 2.6 KB
- references/structure-template.md 3.2 KB
- references/token-template.md 2.1 KB
- references/workflow.md 9.3 KB
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.
- 9d ago First seen · 177 lines · 80 tokens per session scan A fe20234cb5d2
uniapp-ui-replica-skill is a skill published in the GitHub repository jiushiwon/wg-skills (100 stars, last pushed 2d ago), licensed Apache-2.0. It adds 80 tokens to every session and 2,176 once invoked, about $0.0004 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-09-03.
Other skills, from other repositories
chakra-ui-builder
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…
visual-ralph
Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ultragoal with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
reveal-hover-effect
Build cursor-following spotlight reveals that expose a second aligned image through a soft radial mask. Use for hover-to-color, before-and-after, x-ray, material, texture, product-detail, and illustrated hero effects where a desaturated or embossed base image should remain visible while another treatment follows an…
frontend-visual-qa
Audits already-rendered web, landing-page, HTML deck/slide, browser tool/game, dashboard/admin, design-system, and desktop UIs using real-browser or native-app journeys, inspected screenshots, DOM geometry, responsive or projection viewports, and a bundled Playwright sweep. Use after UI implementation to find…
prototype-web
A clickable, high-fidelity web product prototype with navigation, a hero section, feature cards, steps, social proof, and optional pricing. It is designed to resemble a finished landing page while remaining a prototype.