{"name":"web-design: A Claude Code SKILL for Spec-First Web Page Design","description":"The web-design project is a Claude Code SKILL designed to streamline the creation of beautiful and consistent web pages. It emphasizes a 'spec first, code second' approach, ensuring design principles are established before development begins. This tool helps generate UI, visuals, motion, and responsiveness that are consistent across pages and easily editable.","github":"https://github.com/xiaopu-ai/web-design","url":"https://osrepos.com/repo/xiaopu-ai-web-design","source":"osrepos.com","sourceDescription":"This repository profile is provided by osrepos.com, an open source repository discovery platform.","repositoryProfile":"https://osrepos.com/repo/xiaopu-ai-web-design","generatedFor":"open source discovery and AI-assisted research","markdown":"https://osrepos.com/repo/xiaopu-ai-web-design.md","json":"https://osrepos.com/repo/xiaopu-ai-web-design.json","topics":["claude-code","claude-skill","design-system","web-design","AI","Python","Frontend","Development Tools"],"keywords":["claude-code","claude-skill","design-system","web-design","AI","Python","Frontend","Development Tools"],"stars":null,"summary":"The web-design project is a Claude Code SKILL designed to streamline the creation of beautiful and consistent web pages. It emphasizes a 'spec first, code second' approach, ensuring design principles are established before development begins. This tool helps generate UI, visuals, motion, and responsiveness that are consistent across pages and easily editable.","content":"## Introduction\n\nThe `web-design` repository introduces a powerful Claude Code SKILL aimed at revolutionizing web page design. This innovative tool prioritizes a 'spec first, code second' methodology, allowing users to define design specifications before generating any code. It takes various inputs like a Product Requirement Document (PRD), a reference URL, or even a screenshot, to understand design cues and produce a comprehensive `DESIGN.md` document.\n\n## Why Use It and Key Benefits\n\nOne of the primary advantages of `web-design` is its ability to produce a readable, editable, and portable `DESIGN.md` specification. This document covers nine sections, including color, typography, components, layout, motion, and accessibility, ensuring a holistic design approach. By strictly following this approved spec, the SKILL then generates web code that results in consistent UI, visuals, motion, and responsiveness across all pages. This approach not only ensures high-quality output but also makes the design portable across different AI tools and easily editable by hand.\n\n## Installation\n\nTo install the `web-design` SKILL, clone the repository into your Claude Code skills directory. Claude Code will automatically discover the SKILL the next time you start a session.\n\nbash\ngit clone https://github.com/xiaopu-ai/web-design ~/.claude/skills/web-design\n\n\n## Examples\n\nYou can explore a live demo of the `web-design` SKILL in action by visiting its GitHub Pages site. Additionally, you can run the landing page locally to see how it functions.\n\nTo run the landing page locally:\n\nbash\ncd web-design/docs\npython3 -m http.server 8000\n# open http://localhost:8000\n\n\nNote that opening `index.html` directly with `file://` might not work due to dependencies requiring an HTTP origin.\n\n## Links\n\nFor more information, check out the official links:\n\n*   [GitHub Repository](https://github.com/xiaopu-ai/web-design){:target=\"_blank\"}\n*   [Live Demo](https://kaopu-xiaopu.github.io/web-design/){:target=\"_blank\"}\n*   [Report Issues](https://github.com/xiaopu-ai/web-design/issues){:target=\"_blank\"}","metrics":{"detailViews":2,"githubClicks":0},"dates":{"published":null,"modified":"2026-10-02T23:18:57.000Z"}}