png-to-code

仓库创建 2026年6月27日最近提交 22 天前SkillHot 收录 22 天前

▸ 精选理由

适合需要像素级还原的前端开发或设计交接，强调度量收敛。

▸ 风险提示

可能需要截图/渲染环境和外部渲染服务。

这个 Skill 做什么

将 PNG/截图精确转成可复现的代码（SVG/HTML/CSS/动画）。

把一张 PNG 或截图一步步还原成能运行的代码（SVG 插画、HTML/CSS 界面、甚至动画）。通常在你有设计稿、截图或灵感图，想要“像素级”复现成代码时用。它不是凭感觉抄样，而是分区构建、每步用像素差（pixel diff）测量、反复收敛到 1:1。

▸ 展开 SKILL.md 英文原文

Convert a PNG design into pixel-perfect code — SVG illustrations/logos, HTML/CSS UI, and animations — using a decompose → reuse-or-build → render → screenshot-diff → refine loop that measurably converges to a 1:1 match instead of eyeballing. Use when the user provides a PNG, screenshot, mockup, or inspiration image and wants it turned into SVG, HTML/CSS, a web component, or an animated illustration, or asks to match a design "pixel-perfect" / "1:1".

开发编程视觉到代码像素匹配UI重建通用

Stars

Forks

仓库内 Skill

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/YosefHayim/dufflebag/main/.agents/skills/png-to-code/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/YosefHayim/dufflebag/main/.agents/skills/png-to-code/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# PNG → Pixel-Perfect Code

Reproduce a PNG (illustration, logo, UI screen, or full mockup) as code that matches the original **1:1**. Go slowly: build one region at a time and **re-measure after every change**. The agent reaches pixel-perfect the same way a designer did with a PerfectPixel overlay — except the overlay is a **measured pixel diff**, not a human eye.

## Ground rule

**The diff score is the source of truth.** Never call something "done" or "1:1" from looking at it. Render it, screenshot it, diff it against the target PNG with `scripts/src/bin/pixelDiff.ts`, and drive the mismatch ratio toward zero. If you cannot measure it, say so plainly.

## The loop

Step 0 runs once at the

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有