web-design

KO | EN

gitlite — search

#javascript #python #llm #android #deep-learning #nodejs #windows #awesome #kubernetes #vue #security #ios #mcp #openai

(★ 640)

A Claude Code SKILL for designing beautiful, consistent web pages — spec first, code second.

파일 탐색기

최종 버전 다운로드 (.zip)

- app.js
- DESIGN.md
- index.html
- styles.css
- - airbnb.md
  - airtable.md
  - apple.md
  - bmw.md
  - cal.md
  - claude.md
  - clay.md
  - clickhouse.md
  - cohere.md
  - coinbase.md
  - composio.md
  - cursor.md
  - elevenlabs.md
  - expo.md
  - ferrari.md
  - figma.md
  - framer.md
  - hashicorp.md
  - ibm.md
  - INDEX.md
  - intercom.md
  - kraken.md
  - lamborghini.md
  - linear.app.md
  - lovable.md
  - minimax.md
  - mintlify.md
  - miro.md
  - mistral.ai.md
  - mongodb.md
  - notion.md
  - nvidia.md
  - ollama.md
  - opencode.ai.md
  - pinterest.md
  - posthog.md
  - raycast.md
  - renault.md
  - replicate.md
  - resend.md
  - revolut.md
  - runwayml.md
  - sanity.md
  - sentry.md
  - spacex.md
  - spotify.md
  - stripe.md
  - supabase.md
  - superhuman.md
  - tesla.md
  - together.ai.md
  - uber.md
  - vercel.md
  - voltagent.md
  - warp.md
  - webflow.md
  - wise.md
  - x.ai.md
  - zapier.md
- design-md-template.md
- icon-library.md
- interaction-patterns.md
- motion-library.md
- quality-checklist.md
- scene-defaults.md
- scroll-story-patterns.md
- style-seeds.md
- text-decoration-rules.md
- crawl_website.py
- extract_design_tokens.py
- fetch_unsplash_images.py
.gitignore
LICENSE
README.md
SKILL.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# web-design

**A Claude Code SKILL for designing beautiful, consistent web pages — spec first, code second.**

[![Live Demo](https://img.shields.io/badge/Live_Demo-kaopu--xiaopu.github.io/web--design-5EEAD4?style=for-the-badge)](https://kaopu-xiaopu.github.io/web-design/)

[![License: MIT](https://img.shields.io/badge/License-MIT-FB923C.svg?style=flat-square)](https://raw.githubusercontent.com/xiaopu-ai/web-design/main/LICENSE)
[![GitHub Pages](https://img.shields.io/badge/GitHub_Pages-Live-5EEAD4?style=flat-square)](https://kaopu-xiaopu.github.io/web-design/)
![HTML](https://img.shields.io/badge/HTML-E34F26?style=flat-square&logo=html5&logoColor=white)
![CSS](https://img.shields.io/badge/CSS-1572B6?style=flat-square&logo=css3&logoColor=white)
![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&logo=javascript&logoColor=black)

<br>

[![web-design landing page](https://raw.githubusercontent.com/xiaopu-ai/web-design/main/docs/images/preview/hero.webp)](https://kaopu-xiaopu.github.io/web-design/)

</div>

## ✨ 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

```
web-design/
├── SKILL.md            # the skill itself (instructions for Claude)
├── references/         # design systems, style seeds, motion library,
│                       # interaction patterns, quality checklist
├── scripts/            # Playwright crawler, static token extractor,
│                       # Unsplash image fetcher
└── docs/               # landing page (served by GitHub Pages)
    ├── index.html
    ├── styles.css
    ├── app.js
    ├── DESIGN.md       # the page's own spec (produced by the SKILL itself)
    └── images/
```

## 🚀 Install

Clone into your Claude Code skills directory:

```bash
git clone https://github.com/KAOPU-XiaoPu/web-design ~/.claude/skills/web-design
```

Claude Code will auto-discover the SKILL the next time you start a session.

## 💻 Run the landing page locally

```bash
cd web-design/docs
python3 -m http.server 8000
# open http://localhost:8000
```

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](https://github.com/DavidHDev):

- [vue-bits](https://github.com/DavidHDev/vue-bits) (MIT) — GradientBlinds, RollingGallery
- [react-bits](https://github.com/DavidHDev/react-bits) (MIT) — DomeGallery

Reference inspirations for the `DESIGN.md` structure draw from [awesome-design-md](https://github.com/VoltAgent/awesome-design-md) (MIT).

## 📄 License

[MIT](./LICENSE) — use it, fork it, ship it.

---

**Built with ❤️ by [@KAOPU-XiaoPu](https://github.com/KAOPU-XiaoPu)**

[Live Demo](https://kaopu-xiaopu.github.io/web-design/) · [Report Issues](https://github.com/KAOPU-XiaoPu/web-design/issues) · [Install](#-install)

</div>

web-design

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

web-design

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README