★ 编辑实测 · PixelClone-Skill(bjvgukv25842-cmyk/PixelClone-Skill)
This is an open-source skill repo (bjvgukv25842-cmyk/PixelClone-Skill): a collection of skills (a skill = instructions your AI assistant can install) — ready to install and use.
Use bjvgukv25842-cmyk/PixelClone-Skill as a skill-asset index to browse; until the license is specified, don't clone-and-reuse directly.
Derived from structured fields · Confidence: high (functionality not individually tested)
| Name | bjvgukv25842-cmyk/PixelClone-Skill |
|---|---|
| Description | Design-to-Web skill:把 AI 生成/Figma/截图总设计图一比一落地为真实前端(不是复制现有网站),保持业务功能不变。 |
| Official / source | https://github.com/bjvgukv25842-cmyk/PixelClone-Skill |
| License | not specified |
| Language | Python |
| Stars | 62 |
Chinese editor copy (original, collapsed)
① 这是什么
PixelClone-Skill 是面向 Codex(也可移植到 Claude Code / Cursor / Windsurf)的「设计图转前端(Design-to-Web)」Skill:把一张 AI 生成网页设计图 / Figma 导出图 / 截图 / Mockup,一比一落地成真实可运行的前端页面,同时保留现有业务功能(API、路由、表单、状态管理)不动。它的输入是设计稿而非现有站点,与复制现有网站无关。
② 值不值得用
适合 vibe coding 用户:先出设计图再让 Agent 按图施工,能显著减少「Agent 自由发挥导致不像」的返工。核心价值是落地纪律(参考图=唯一视觉真相、当前应用=唯一业务真相),并配有素材裁切与布局蓝图脚本提升稳定性。缺点是 star 少(62)、未声明开源许可、依赖 Pillow;本平台已人工通读文档,未做全流程沙箱实测。
③ 怎么开始
git clone https://github.com/bjvgukv25842-cmyk/PixelClone-Skill.git,把 skills/pixel-perfect-reference-ui-zh 复制到 ~/.codex/skills/,安装 Pillow(python -m pip install Pillow),然后在 Codex 中写 Use $pixel-perfect-reference-ui-zh 并附参考图路径与目标页面。
④ 关键证据
- Star 62 · Fork 1 · 语言 Python · 无 LICENSE(GitHub API 2026-08-20 实测,默认 All Rights Reserved)
- 内置双版 Skill:skills/pixel-perfect-reference-ui(EN)与 skills/pixel-perfect-reference-ui-zh(中文),能力一致仅语言不同
- 辅助脚本:prepare_reference_asset.py(精确裁切/透明 alpha/去边缘底色/1-2px 羽化/matte 融合/检查报告)+ extract_layout_blueprint.py(画布宽高/section 高度/包围盒/gutter/网格/CSS 变量)
- 业务红线明确:不改 API、路由、store、auth、表单校验、筛选排序分页;功能 UI 必须真实 HTML/CSS,不能截图化
- 目录站收录:截至 2026-08-20 未在 skillsllm.com / ui-skills.com 检索到该仓库收录页
⑤ 注意事项与坑
仓库未声明许可证 → 默认 All Rights Reserved,商用或再分发前必须联系作者确认;脚本依赖 Pillow;复刻素材版权归原设计图来源,使用前需确认拥有使用权;本平台已人工分析文档,未做全流程沙箱实测。
Best for: developers exploring tooling, tech stacks, or reusing assets under not specified license.
Consider if: you require commercial SLA or cannot maintain open-source dependencies.
Status: machine-checked (structure & source validation); functionality not individually tested.
Minimal verification (3 steps)
- License — not specified
- Last push — —
- Run CLI — npx aiskillready search pixelclone
Use it like this
git clone https://github.com/bjvgukv25842-cmyk/PixelClone-Skill # third-party repo command, per official docs (not individually tested) npx aiskillready search pixelclone # official CLI, verified runnable (aiskillready@0.2.0)
Note: `npx aiskillready` is this site's published CLI (npm aiskillready@0.2.0) — verified runnable; third-party commands are given per official docs and not individually tested. We don't fabricate conclusions.
Glossary: what are SKILL.md / veridrop / schema? (expand)
- SKILL.md — The manifest file of a skill: how to install and use it.
- veridrop — A third-party API-gateway observer: data source for this site's Observation entries.
- schema — The data-structure versioning convention for machine-readable JSON.
- Skill 客户端 — An app/tool that supports the Agent Skills standard and can install and run skills.
- Skill 注册表 — A public directory of who published which skills (e.g. skills.sh).
Trust layer: machine check / cost / confidence / schema (expand)
Related (what you should know)
Related (3) · expand
★ GitHub 热门项目 · anthropics/skills
Open-source skill repo anthropics/skills · Public repository for Agent Skills · Language: Python · License: not specified · ★ 170,527.
Similar★ 编辑实测 · web-clone(Jane-xiaoer/claude-skill-web-clone)
Open-source skill repo Jane-xiaoer/claude-skill-web-clone · Methodology for faithfully cloning any website (static / React / WebGL) — without copying AI-hallucinated code. Real source first. · Language: JavaScript · License: MIT · ★ 955.
Complementary✧ Skill Client · Agentman (Agent Skills)
Agentman is an agentic healthcare platform. It automates revenue cycle workflows using AI agents without sacrificing control. Every action is testable, traceable, and auditable.
Something wrong / command failed? File an issue with the entry ID; it feeds back into the next revision.
🐞 Report an issue →AI block · machine-readable JSON (click to expand)
{
"schema_version": "0.5",
"entry_id": "ASR-REPO-20260820-pixelclone",
"record_type": "skill_repo",
"title": "编辑实测 · PixelClone-Skill(bjvgukv25842-cmyk/PixelClone-Skill)",
"observed_at": "2026-08-20",
"source": {
"name": "github.com/bjvgukv25842-cmyk/PixelClone-Skill",
"url": "https://github.com/bjvgukv25842-cmyk/PixelClone-Skill",
"snapshot_hash": "a02902144b35e450c24f3897f3e6a7eeadfd4b713b1aebc7afc96862656b3071",
"fetched_at": "2026-08-20T08:10:00+00:00"
},
"confidence": "high",
"human_stream": {
"summary": "PixelClone-Skill 是面向 Codex 的「设计图转前端(Design-to-Web)」Skill(62★ / 1 fork / Python / 未声明许可):把一张 AI 生成 / Figma / 截图总设计图一比一落地为真实前端,核心约束 = 参考图是唯一视觉真相、当前应用是唯一业务真相、禁止自由发挥与外部素材。注意:它复刻的是「设计图」,不是复制现有网站。内置中英文双版 Skill 与 2 个 Python 辅助脚本(素材裁切清理、布局蓝图提取)。",
"key_points": [
"复刻纪律:不发明 → 先测量 → 再裁切 → 再摆放 → 对照截图 → 保留业务行为",
"双版 Skill:pixel-perfect-reference-ui-zh(中文)/ pixel-perfect-reference-ui(英文),能力一致",
"2 个脚本:prepare_reference_asset.py(裁切/去白黑边/羽化/matte)+ extract_layout_blueprint.py(布局蓝图/CSS 变量)",
"业务红线:不改 API / 路由 / store / 表单 / 校验;功能区必须是真实 HTML/CSS,禁止截图化",
"仓库未声明 LICENSE → 默认 All Rights Reserved,商用/再分发前需作者授权"
],
"note": "本平台 2026-08-20 人工通读 GitHub README 全文分析(非爬虫索引)。分析结论:这是「设计图 → 真实前端」的落地控制型 Skill(Design-to-Web),适合 vibe coding 场景(GPT image / Figma 出图后让 Codex 按图施工),核心价值在克制落地而非自由设计;它复刻的对象是设计图,与复制现有网站是两回事。仓库未声明开源许可,且当前未在 SkillsLLM / UI Skills 目录发现收录页。",
"what_it_is": "PixelClone-Skill 是面向 Codex(也可移植到 Claude Code / Cursor / Windsurf)的「设计图转前端(Design-to-Web)」Skill:把一张 AI 生成网页设计图 / Figma 导出图 / 截图 / Mockup,一比一落地成真实可运行的前端页面,同时保留现有业务功能(API、路由、表单、状态管理)不动。它的输入是设计稿而非现有站点,与复制现有网站无关。",
"worth_it": "适合 vibe coding 用户:先出设计图再让 Agent 按图施工,能显著减少「Agent 自由发挥导致不像」的返工。核心价值是落地纪律(参考图=唯一视觉真相、当前应用=唯一业务真相),并配有素材裁切与布局蓝图脚本提升稳定性。缺点是 star 少(62)、未声明开源许可、依赖 Pillow;本平台已人工通读文档,未做全流程沙箱实测。",
"how_to_start": "git clone https://github.com/bjvgukv25842-cmyk/PixelClone-Skill.git,把 skills/pixel-perfect-reference-ui-zh 复制到 ~/.codex/skills/,安装 Pillow(python -m pip install Pillow),然后在 Codex 中写 Use $pixel-perfect-reference-ui-zh 并附参考图路径与目标页面。",
"evidence": [
"Star 62 · Fork 1 · 语言 Python · 无 LICENSE(GitHub API 2026-08-20 实测,默认 All Rights Reserved)",
"内置双版 Skill:skills/pixel-perfect-reference-ui(EN)与 skills/pixel-perfect-reference-ui-zh(中文),能力一致仅语言不同",
"辅助脚本:prepare_reference_asset.py(精确裁切/透明 alpha/去边缘底色/1-2px 羽化/matte 融合/检查报告)+ extract_layout_blueprint.py(画布宽高/section 高度/包围盒/gutter/网格/CSS 变量)",
"业务红线明确:不改 API、路由、store、auth、表单校验、筛选排序分页;功能 UI 必须真实 HTML/CSS,不能截图化",
"目录站收录:截至 2026-08-20 未在 skillsllm.com / ui-skills.com 检索到该仓库收录页"
],
"cautions": "仓库未声明许可证 → 默认 All Rights Reserved,商用或再分发前必须联系作者确认;脚本依赖 Pillow;复刻素材版权归原设计图来源,使用前需确认拥有使用权;本平台已人工分析文档,未做全流程沙箱实测。"
},
"ai_stream": {
"structured": {
"full_name": "bjvgukv25842-cmyk/PixelClone-Skill",
"stars": 62,
"forks": 1,
"language": "Python",
"license": "未标注",
"description": "Design-to-Web skill:把 AI 生成/Figma/截图总设计图一比一落地为真实前端(不是复制现有网站),保持业务功能不变。",
"url": "https://github.com/bjvgukv25842-cmyk/PixelClone-Skill",
"topics": [
"codex",
"frontend",
"ui-replication",
"vibe-coding"
],
"skill_name": "pixel-perfect-reference-ui(-zh)",
"skill_md_paths": [
"skills/pixel-perfect-reference-ui/SKILL.md",
"skills/pixel-perfect-reference-ui-zh/SKILL.md"
],
"install": [
"git clone https://github.com/bjvgukv25842-cmyk/PixelClone-Skill.git",
"cp -R ./skills/pixel-perfect-reference-ui-zh ~/.codex/skills/",
"python -m pip install Pillow"
],
"directory_listings": [],
"analysis_points": [
"核心约束:参考图=唯一视觉真相;当前应用=唯一业务行为真相;Agent 的任务是复制不是再设计",
"素材纪律:装饰素材只能来自参考图或用户本地素材,禁止下载外部 UI 模板/图标包/图库",
"验证闭环:真实浏览器截图 + 布局蓝图比例 + 实际 served asset URL + build/lint/typecheck",
"典型用法:整页复刻 / 单个素材替换 / 布局比例修正 / 素材边缘清理"
],
"keywords": "设计图转前端 · 设计稿转web · 图转网页 · design-to-web · pixelclone",
"human_analyzed": true,
"source_label": "github.com/bjvgukv25842-cmyk/PixelClone-Skill"
},
"raw": [
{
"repo": "bjvgukv25842-cmyk/PixelClone-Skill",
"stars": 62,
"forks": 1,
"language": "Python",
"license": "None",
"description": "",
"readme_headline": "PixelClone Skill|像素级网页复刻 Skill(面向 Codex,参考图=唯一视觉真相)"
},
{
"scripts": [
"skills/pixel-perfect-reference-ui/scripts/prepare_reference_asset.py",
"skills/pixel-perfect-reference-ui/scripts/extract_layout_blueprint.py",
"skills/pixel-perfect-reference-ui-zh/scripts/prepare_reference_asset.py",
"skills/pixel-perfect-reference-ui-zh/scripts/extract_layout_blueprint.py"
]
}
]
},
"token_cost": {
"total": 0.0,
"currency": "USD",
"breakdown": {
"crawl": 0.0,
"clean": 0.0,
"elevate": 0.0,
"verify": 0.0
}
},
"machine_verified": true,
"review": {
"status": "agent_reviewed",
"reviewer": "pipeline-validate",
"reviewed_at": "2026-08-20T08:33:14+00:00",
"comments": "人工分析条目(provenance.curated)机检通过;schema 0 error + 溯源一致 + 成本达标"
},
"provenance": {
"curated": true,
"extracted_by": "codex",
"extracted_at": "2026-08-20T08:35:00+00:00",
"pipeline": "人工调研(Codex 2026-08-20):GitHub API + README 全文",
"access_urls": [
"https://github.com/bjvgukv25842-cmyk/PixelClone-Skill"
]
}
}