by yuzhworkhard-wq · Codex Skill · ★ 191
Last updated: · Indexed by AgentSkillsHub · Auto-synced every 8h
Image to Code is a Codex skill for turning a selected UI image, screenshot, or Figma export into an adaptive code implementation, high-density transparent PNG assets, and optional editable Figma layer output. is the baseline coordinate system used for measurement and QA. It is not the only final display width. The final production output should include a responsive fit wrapper that scales the locked 750px artboard to mobile viewports or embedding containers without reflowing individual layers. 是一个用于 Codex 的图片转代码 skill：它把选中的 UI 图片、截图或 Figma 导出稿还原为最终可自适应展示的代码，同时导出 2x/3x/4x 高清透明 PNG 切图资源，并可在后续拆分为可编辑 Figma 图层。 是测量、定位和复核用的基准坐标系，不是最终页面唯一显示宽度。最终生产代码必须在保持 750px 基准稿可精确复核的前提下，通过外层 fit wrapper 按手机视口或容器宽度整体等比缩放。 Contents 中文说明 English Guide Repository Structure License 中文说明 核心定位 这个项目不是普通前端模板，也不是“重新设计”工具。它是一套 Codex skill 工作流，用来约束图片转代码任务中的测量、切图、代码、响应式适配、QA 和 Figma 后续导入。 核心产出包括： 自适应前端代码：以 750px 锁定画板为基准，外层整体缩放适配 手机宽度、375px 演示宽度或指定容器宽度。 独立高清 PNG 资源：图标、头像、插画、复杂装饰、产品图等从当前源图切出，默认 2x，必要时 3x 或 4x。 ：记录每个图层的源图 bbox、750px 基准 bbox、z-index、资源路径、PNG 像素尺寸和 CSS 显示尺寸。 透明背景与防裁切 QA：bbox 预览、PNG alpha 审计、棋盘格/黑底/白底检查、整页截图差异对比。 可选 Figma 输出：代码与 QA 完成后，可按同一份 manifest/code/assets 拆成 Figma text node、shape、image fill 和本地...
| Stars | 191 |
| Forks | 25 |
| Language | Python |
| Category | Codex Skill |
| License | MIT |
| Quality Score | 68.1546163631684/100 |
| Last Updated | 2026-06-10 |
| Created | 2026-06-06 |
| Platforms | codex, python |
| Est. Tokens | ~6k |
These tools work well together with image-to-code for enhanced workflows:
Looking for a image-to-code alternative? If you're comparing image-to-code with other codex skill tools, these 6 projects are the closest alternatives on Agent Skills Hub — ranked by topic overlap, star count, and community traction.
AI Agent Orchestrator with Skills System - Give AI Agents superpowers: memory search, code graph queries, agen
Generate and evaluate agent skills for code agents like Claude Code, Open Code, OpenAI Codex
开源了Codex Skills等集合，大部分是自己实际需要搞得，需要的自取。欢迎star
Skills for agentic development on Solana
Набор навыков для AI(ИИ)-агентов (Claude Code, Cursor, Codex и др.), помогающий охватить полный цикл разработк
A Codex/Claude skill that maintains per-repo operating theory documents.
Explore other popular codex skill tools:
image-to-code is Codex skill for 750px image-to-code reconstruction and transparent PNG slicing. It is categorized as a Codex Skill with 191 GitHub stars.
image-to-code is primarily written in Python.
You can find installation instructions and usage details in the image-to-code GitHub repository at github.com/yuzhworkhard-wq/image-to-code. The project has 191 stars and 25 forks, indicating an active community.
image-to-code is released under the MIT license, making it free to use and modify according to the license terms.
The top alternatives to image-to-code on Agent Skills Hub include ai-maestro, upskill, skills. Each offers a different approach to the same problem space — compare them side-by-side by stars, quality score, and community activity.