Individual skill
dev-image-to-code
Implement a frontend from a UI screenshot or design image in an existing project or a runnable standalone page. Use for "UI图生成代码", "看图写页面", "根据设计图实现", "screenshot to code", or "image to code" requests. Preserve visual fidelity and working control semantics, then verify in a real renderer. Not for redesigns without a reference image.
plugins/Jason-chen-coder/dev-skills/skills/dev-image-to-code/SKILL.md
Source commit d780783eba4ecc7c8b9429f95c9362df95f07c61
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- Yes
- Repository scan complete
- No
- Skill scan complete
- No
- Observed behavior
- Network or broad shell
- Last checked
- Nov 4, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 1,530
- Repository last updated
- Nov 6, 2026
- License
- Apache-2.0
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- ai-coding Repository topic
- awesome Repository topic
- awesome-list Repository topic
- codex Repository topic
- codex-plugins Repository topic
- openai Repository topic
- codex-skill Repository topic
- codex-skills Repository topic
- marketplace Repository topic
- codex-marketplace Repository topic
- design Derived category
- design-interface Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
SKILL.mdcore · 5,590 bytesSKILL.mdcore · 5,590 bytesSKILL.mdcore · 5,590 bytesSKILL.mdcore · 5,590 bytesSKILL.mdcore · 5,590 bytesSKILL.mdcore · 5,590 bytesagents/openai.yamlasset · 202 bytesreferences/dev-baseline.mddoc · 3,571 bytesreferences/image-analysis.mddoc · 6,661 bytesreferences/implementation-paths.mddoc · 5,003 bytesreferences/input-contract.mddoc · 2,571 bytesreferences/visual-verification.mddoc · 5,022 bytesscripts/image-metadata.mjsruns · 4,192 bytesscripts/interaction-smoke.mjsruns · 5,216 bytesscripts/screenshot-page.mjsruns · 3,773 bytesscripts/visual-diff.mjsruns · 5,645 bytes
Read excerpt
# Dev Image To Code
Use the image as the visual source of truth, the design size as the coordinate
baseline, and a rendered screenshot as verification evidence. Match the supplied
design before adding any user-requested improvements.
## Load Baseline
Read `references/dev-baseline.md` once per task. Keep changes scoped to the
requested screen and reuse the project's components, themes, wrappers, state,
i18n, routing, and tests.
## Inputs And Decisions