Shot to Code
Designs the page as an image first, then builds the site to match it.
What it does
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.
Install in under a minute
Mac or Linux, after you download
unzip shot-to-code.zip -d ~/.claude/skills/Windows PowerShell
Expand-Archive shot-to-code.zip -DestinationPath $HOME\.claude\skills- Start a new Claude Code session so it sees the skill.
- Ask in plain words, for example: "Use Shot to Code on this project."
- Unzip the download, then zip just the shot-to-code folder if your computer added an extra folder.
- In Claude.ai, open Settings, then Capabilities, and upload it under Skills.
- Turn the skill on and ask Claude to use it.
Shot to Code uses the open SKILL.md format, so it also works in agents like Cursor, Gemini CLI, GitHub Copilot and Codex. Copy the shot-to-code folder into that agent's skills folder, for example .cursor/skills/ or .github/skills/ in your project.
What's inside
The 16 main sections of the SKILL.md, in order.
- Active baseline configuration
- Mandatory image-first rule
- Generate enough images rule
- Codex-specific section image rule
- Do not crop old images rule
- Fresh re-generation rule
- Optional detail / extraction image rule
- Clean analysis standard
- Deep image analysis requirement
- Image-first codex website workflow
- When to trigger image generation first
- The combinatorial variation engine
- Website reference rule
- Hero minimalism rules
- Responsive first-view rule
- Anti-nested-box rule
In the download: LICENSE, NOTICE.md, SKILL.md
Credit and license
Shot to Code is a renamed, packaged copy of image-to-code-skill by Leonxlnx (github.com/leonxlnx/taste-skill), used under the MIT license. The license and a list of changes ship inside the download.
Questions
Does Shot to Code work in Claude.ai, not just Claude Code?
Yes. In Claude.ai, upload the shot-to-code folder as a zip in Settings under Capabilities. It also works in other agents that support Agent Skills, like Cursor, Gemini CLI and GitHub Copilot.
What do I get?
A zip with the shot-to-code folder: its SKILL.md (6,289 words) and its license files. One payment, instant download.
Who made Shot to Code?
It's a renamed, packaged copy of image-to-code-skill by Leonxlnx, used under the MIT license. The license and a list of changes ship inside the download.