PixelClone-Skill
PixelClone Skill is a set of instructions for AI coding assistants that forces them to copy a website design from a reference image exactly, matching layouts, spacing, and icons pixel-for-pixel instead of reinterpreting the design.
PixelClone Skill is a workflow for AI coding assistants that want to replicate website designs from reference images with pixel-level accuracy. It is designed to be installed as a skill in OpenAI Codex, but can also be used with other AI coding tools like Claude Code, Cursor, or Cline.
The problem it addresses is common: designers or vibe coders generate a web design image using an AI image tool, a screenshot, a Figma export, or a mockup, and then ask a coding assistant to turn it into working frontend code. The coding assistant typically treats the image as inspiration and reinterprets the design, changing layouts, creating new icons, pulling in external assets, and adjusting proportions. PixelClone tries to stop this by giving the assistant a strict set of instructions: treat the reference image as the only source of truth for visual decisions, treat the existing application as the only source of truth for business behavior, and copy rather than redesign.
The skill tells the assistant to match page width, section heights, column ratios, card grids, and spacing from the reference image. It requires cropping logos, icons, button backgrounds, and decorations directly from the reference image rather than creating or downloading similar-looking replacements. It also requires leaving all existing APIs, routes, forms, state management, and user flows unchanged.
The repository includes two versions of the skill file: one with prompts in Chinese and one in English. It also includes two optional Python scripts. One crops and cleans assets from a reference image, handling transparency, edge feathering, and background color removal. The other extracts a layout blueprint from the image, recording canvas dimensions, section boundaries, column counts, and spacing as a JSON file the assistant can reference when adjusting code.
To use PixelClone with Codex, you copy the skill directory into your Codex skills folder. For other tools, you copy the skill file into your project and instruct the coding agent to read it before making any UI changes.
Where it fits
- Turn a Figma export or design screenshot into frontend code that matches the original layout, spacing, and icons exactly without any AI reinterpretation.
- Extract a JSON layout blueprint from a reference image recording canvas dimensions, section boundaries, and column counts for your coding agent to reference.
- Crop and clean logos, icons, and button backgrounds directly from a reference image for use in your frontend code.