{"repo":"xiaopu-ai/web-design","free":true,"listed":false,"github":"https://github.com/xiaopu-ai/web-design","clone":"git clone https://github.com/xiaopu-ai/web-design.git","description":"A Claude Code SKILL for designing beautiful, consistent web pages — spec first, code second.","language":"Python","stars":634,"topics":["claude-code","claude-skill","design-system","web-design","we-b","webdesign","xiaopu"],"license":"MIT","category":"ui-components","readme_excerpt":"web-design A Claude Code SKILL for designing beautiful, consistent web pages — spec first, code second. ✨ What it does Feed the SKILL a PRD , a reference URL , or a screenshot — any combination works. It produces a readable, editable, portable DESIGN.md first . Only then does it generate the web code. The result: UI, visuals, motion, and responsiveness that all land. Consistent across pages, portable across AI tools, editable by hand. 🧭 How it works Phase A · Understand. Extracts design cues from PRD / URL / screenshot / keywords / brand name. A graceful fallback chain keeps it working even with sparse inputs. Phase B · Produce DESIGN.md . A full 9-section spec: color · type · component · layout · motion · depth · do's & don'ts · responsive · accessibility. Once you approve it, the spec lives in your project and can be edited by hand. Phase C · Generate code. Strictly follows the spec. Self-audits against a 100-score quality checklist. Diff-audits when a reference URL exists. 📦 Repository layout 🚀 Install Clone into your Claude Code skills directory: Claude Code will auto-discover the SKILL the next time you start a session. 💻 Run the landing page locally Opening index.html directly with file:// won't work — Google Fonts and the OGL ES module need an HTTP origin. 🙏 Credits Motion effects on the landing page derive from work by David Haz: - vue-bits (MIT) — GradientBlinds, RollingGallery - react-bits (MIT) — DomeGallery Reference inspirations for the DESIGN.md structure d","default_branch":null,"files":null,"tree":[],"storefront":"/r/xiaopu-ai","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/xiaopu-ai/web-design/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}