코딩

yueban-image-to-code

Guides Codex through pixel-accurate conversion of UI screenshots and design images into fixed-width 750px code with editable text, vector elements, transparent PNG assets, layer manifests, and visual QA.

★ 126 GitHub Stars
78 품질 점수
1 파일

이 Skill 소개

像素级 750px 图片转代码与切图工作流。当 Codex 需要把当前选中的 UI 图片、截图、App/Web 设计稿、Figma 图片导出稿或设计长图转换为代码,并输出独立透明 PNG 切图资源时使用。适用于严格 1:1 等比例还原、画板宽度精确 750px、禁止自动排版优化、文本可编辑、简单图形原生矢量/代码化、图标和位图独立透明 PNG 提取,以及按矢量层、文本层、位图/图标切图三类模块独立验收的任务。

사용 사례

  • Converting UI screenshots into HTML or component code
  • Recreating mobile or web designs at 750px width
  • Extracting icons and illustrations as transparent PNGs
  • Building layer manifests for precise positioning
  • Comparing rendered output against a source image

기능

  • 750px proportional normalization
  • Manifest-driven layer coordinates and asset mapping
  • Editable text and code-based simple shapes
  • Transparent PNG extraction guidance
  • Overlay and asset quality assurance workflow

지원 Agent

Codex

Skill 파일

관련 Skills

repo-task-proof-loop

Provides a repo-local workflow for large coding tasks, managing task artifacts, project-scoped Codex and Claude subagents, implementation evidence, fresh verification, and iterati…

DenisSergeevitch/repo-task-proof-loop ★ 731
coding workflow task verification proof loop repo automation

programming-principles

Applies distilled principles from 14 classic software engineering books to code reviews, refactoring, architecture, design, implementation, testing, and reliability decisions.

magnus919/agent-skills ★ 88
code review refactoring software architecture clean code

backend-engineering

Guides agents in implementing backend services and APIs, including transport layers, business logic, database access, integrations, event handling, coexistence seams, error handli…

magnus919/agent-skills ★ 88
backend apis services database