[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-1249":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":25,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":33,"readmeContent":34,"aiSummary":35,"trendingCount":16,"starSnapshotCount":16,"syncStatus":15,"lastSyncTime":36,"discoverSource":37},1249,"web-design","KAOPU-XiaoPu\u002Fweb-design","KAOPU-XiaoPu","A Claude Code SKILL for designing beautiful, consistent web pages — spec first, code second. ","https:\u002F\u002Fkaopu-xiaopu.github.io\u002Fweb-design\u002F",null,"Python",430,31,1,2,0,11,46,110,33,4.52,"MIT License",false,"main",true,[27,28,29,30,5,31,32],"claude-code","claude-skill","design-system","we-b","webdesign","xiaopu","2026-06-12 02:00:25","\u003Cdiv align=\"center\">\n\n# web-design\n\n**A Claude Code SKILL for designing beautiful, consistent web pages — spec first, code second.**\n\n[![Live Demo](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLive_Demo-kaopu--xiaopu.github.io\u002Fweb--design-5EEAD4?style=for-the-badge)](https:\u002F\u002Fkaopu-xiaopu.github.io\u002Fweb-design\u002F)\n\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-FB923C.svg?style=flat-square)](.\u002FLICENSE)\n[![GitHub Pages](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FGitHub_Pages-Live-5EEAD4?style=flat-square)](https:\u002F\u002Fkaopu-xiaopu.github.io\u002Fweb-design\u002F)\n![HTML](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FHTML-E34F26?style=flat-square&logo=html5&logoColor=white)\n![CSS](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FCSS-1572B6?style=flat-square&logo=css3&logoColor=white)\n![JavaScript](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FJavaScript-F7DF1E?style=flat-square&logo=javascript&logoColor=black)\n\n\u003Cbr>\n\n[![web-design landing page](.\u002Fdocs\u002Fimages\u002Fpreview\u002Fhero.webp)](https:\u002F\u002Fkaopu-xiaopu.github.io\u002Fweb-design\u002F)\n\n\u003C\u002Fdiv>\n\n\n## ✨ What it does\n\nFeed 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.\n\nThe result: UI, visuals, motion, and responsiveness that all land. Consistent across pages, portable across AI tools, editable by hand.\n\n## 🧭 How it works\n\n**Phase A · Understand.** Extracts design cues from PRD \u002F URL \u002F screenshot \u002F keywords \u002F brand name. A graceful fallback chain keeps it working even with sparse inputs.\n\n**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.\n\n**Phase C · Generate code.** Strictly follows the spec. Self-audits against a 100-score quality checklist. Diff-audits when a reference URL exists.\n\n\n## 📦 Repository layout\n\n```\nweb-design\u002F\n├── SKILL.md            # the skill itself (instructions for Claude)\n├── references\u002F         # design systems, style seeds, motion library,\n│                       # interaction patterns, quality checklist\n├── scripts\u002F            # Playwright crawler, static token extractor,\n│                       # Unsplash image fetcher\n└── docs\u002F               # landing page (served by GitHub Pages)\n    ├── index.html\n    ├── styles.css\n    ├── app.js\n    ├── DESIGN.md       # the page's own spec (produced by the SKILL itself)\n    └── images\u002F\n```\n\n## 🚀 Install\n\nClone into your Claude Code skills directory:\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002FKAOPU-XiaoPu\u002Fweb-design ~\u002F.claude\u002Fskills\u002Fweb-design\n```\n\nClaude Code will auto-discover the SKILL the next time you start a session.\n\n## 💻 Run the landing page locally\n\n```bash\ncd web-design\u002Fdocs\npython3 -m http.server 8000\n# open http:\u002F\u002Flocalhost:8000\n```\n\nOpening `index.html` directly with `file:\u002F\u002F` won't work — Google Fonts and the OGL ES module need an HTTP origin.\n\n\n## 🙏 Credits\n\nMotion effects on the landing page derive from work by [David Haz](https:\u002F\u002Fgithub.com\u002FDavidHDev):\n\n- [vue-bits](https:\u002F\u002Fgithub.com\u002FDavidHDev\u002Fvue-bits) (MIT) — GradientBlinds, RollingGallery\n- [react-bits](https:\u002F\u002Fgithub.com\u002FDavidHDev\u002Freact-bits) (MIT) — DomeGallery\n\nReference inspirations for the `DESIGN.md` structure draw from [awesome-design-md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md) (MIT).\n\n## 📄 License\n\n[MIT](.\u002FLICENSE) — use it, fork it, ship it.\n\n---\n\n\u003Cdiv align=\"center\">\n\n**Built with ❤️ by [@KAOPU-XiaoPu](https:\u002F\u002Fgithub.com\u002FKAOPU-XiaoPu)**\n\n[Live Demo](https:\u002F\u002Fkaopu-xiaopu.github.io\u002Fweb-design\u002F) · [Report Issues](https:\u002F\u002Fgithub.com\u002FKAOPU-XiaoPu\u002Fweb-design\u002Fissues) · [Install](#-install)\n\n\u003C\u002Fdiv>\n","web-design 是一个用于设计美观且一致的网页的 Claude Code SKILL，强调先定义规范再生成代码。其核心功能包括从产品需求文档、参考网址或截图中提取设计线索，生成详尽的设计规范文件（`DESIGN.md`），然后严格按照该规范自动生成前端代码，并通过质量检查表进行自我审核。该项目采用 Python 编写，支持 HTML、CSS 和 JavaScript，确保了设计的一致性和跨工具的可移植性。适用于需要快速构建高质量、视觉一致性的网站场景，尤其适合希望在开发前明确设计细节的团队使用。","2026-06-11 02:42:34","CREATED_QUERY"]