kyriecheungyep/ky-design-to-html-skill

This repository contains a skill file for AI coding assistants, specifically designed for Codex and Claude. The skill instructs the AI to convert a UI screenshot or design mockup into working HTML and CSS code. The README is written in Chinese, but the core purpose is straightforward: it addresses a common failure mode that happens when you hand an AI an image and simply ask it to generate a page. The problem the skill tries to fix is that when an AI is given a raw design image with no structured guidance, it tends to handle layout structure, visual style, and complex graphic assets all at once. This often results in distorted proportions, blurry assets, or code that looks nothing like the original. The skill breaks that task into a defined sequence of steps: first map out the page structure, then decide which parts should be coded in HTML and CSS versus treated as image assets, set the correct canvas ratio, write the code, take a browser screenshot, and compare it to the original to correct visual errors. Installing the skill means copying a folder into a specific directory under your Codex or Claude configuration. Once installed, you invoke it by name in a chat message, either in English or Chinese, pointing the AI to a screenshot you want reproduced. The file structure includes a main skill definition file, an OpenAI agent configuration, reference documents covering asset handling and a taxonomy of common visual errors, and a Python script for capturing browser screenshots. The README is explicit that the goal is not to produce a perfect page in one shot, but to make the AI follow a disciplined process where the final quality comes from the screenshot-and-correct loop at the end.