png-to-code

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

▸ 精选理由

适合将视觉稿自动化为可运行前端代码，减少手工像素调校

▸ 风险提示

可能需要运行无头浏览器和截图工具，需本地环境与权限

这个 Skill 做什么

把 PNG 原型精确还原成 SVG/HTML/CSS 并通过像素差迭代收敛

把一张 PNG、截图或设计稿直接还原成可复用的代码：SVG 插画/Logo、HTML/CSS 界面或动画组件。适合你拿着 Mockup 想要“像素级还原”或把视觉稿做成 web component 的场景。独到之处是按区域分解、渲染再用截图差异（screenshot 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".

开发编程设计还原像素对齐前端生成图像比对通用

Stars

Forks

仓库内 Skill

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

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

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/YosefHayim/dufflebag/main/src/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. Use a second agent or browser model a

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