Not in the top 1,000 by GitHub stars

xiaopu-ai/web-design

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

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

`SKILL.md`

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → 22a4f482cc4c

No earlier version was observed for comparison.

Compare on GitHub

View on GitHub Add to my skills

Verified commit 22a4f482cc4caa2394391c0c31ff0aefd1908774

811GitHub stars

4stars in 7 days

1skill in this repository

0commits in 30 days

Heat

3.1

Star growth, last 7 daysNot available
Star growth, last 24 hoursNot available
Rank movement, last 7 daysNot available
Commits, last 30 daysNot available
Accounts asking about it through MCP, last 7 daysNot available
Hot votes this weekNot available

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

Individual skills in this repository

web-design /

How it works

web-design

When your agent uses it

Web 视觉设计 SKILL。输入 PRD / 参考 URL / 截图 / 关键词（任意组合），先产出一份标准化 DESIGN.md 设计规范，用户确认后据此生成 UI/UX、视觉、动效、响应式全部达标的 web 代码。专攻 web 端：Landing Page、Portfolio、产品页、博客、个人站、SaaS 介绍页等。当用户说"帮我做个网站""设计一个页面""参考 XX 做一个""把这个截图/PRD 做成网页""做一个 landing page""出一份 design 规范"时触发。不用于后端、数据库、纯逻辑 bug 修复。

What it loads into context

Frontmatter

155 tokens

Always available to the agent

SKILL.md

5,863 tokens

When the skill is activated

Reference documents

285,602 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

核心流程
Phase A: 理解需求
Phase B: 输出 DESIGN.md（必走）
Phase C: 生成项目代码（必走）
首页爆点原则（Landing Page 专属）
100 分质量底线（硬性验收）
技术栈原则
语言规则
参考文件索引

Scripts executed separately

docs/app.js
scripts/crawl_website.py
scripts/extract_design_tokens.py
scripts/fetch_unsplash_images.py

Files

.gitignoreasset280 bytes
LICENSEasset1,069 bytes
README.mddoc3,776 bytes
SKILL.mdcore19,808 bytes
SKILL.mdcore19,808 bytes
SKILL.mdcore19,808 bytes
SKILL.mdcore19,808 bytes
docs/DESIGN.mddoc37,395 bytes
docs/app.jsruns34,142 bytes
docs/images/optimized/01.webpasset25,358 bytes
docs/images/optimized/02.webpasset20,838 bytes
docs/images/optimized/03.webpasset28,934 bytes
docs/images/optimized/04.webpasset11,894 bytes
docs/images/optimized/05.webpasset22,994 bytes
docs/images/optimized/06.webpasset25,728 bytes
docs/images/optimized/07.webpasset19,616 bytes
docs/images/optimized/08.webpasset16,616 bytes
docs/images/optimized/09.webpasset14,210 bytes
docs/images/optimized/10.webpasset28,178 bytes
docs/images/optimized/11.webpasset20,628 bytes
docs/images/optimized/12.webpasset37,720 bytes
docs/images/optimized/13.webpasset25,678 bytes
docs/images/optimized/14.webpasset31,474 bytes
docs/images/optimized/15.webpasset28,348 bytes
docs/images/optimized/16.webpasset31,970 bytes
docs/images/optimized/17.webpasset25,098 bytes
docs/images/optimized/18.webpasset27,816 bytes
docs/images/optimized/19.webpasset14,672 bytes
docs/images/optimized/20.webpasset35,426 bytes
docs/images/optimized/21.webpasset56,308 bytes
docs/images/optimized/22.webpasset58,844 bytes
docs/images/optimized/23.webpasset44,472 bytes
docs/images/optimized/24.webpasset34,152 bytes
docs/images/optimized/25.webpasset23,242 bytes
docs/images/optimized/26.webpasset25,604 bytes
docs/images/optimized/27.webpasset25,574 bytes
docs/images/optimized/28.webpasset29,310 bytes
docs/images/optimized/29.webpasset25,450 bytes
docs/images/optimized/30.webpasset26,424 bytes
docs/images/optimized/31.webpasset101,054 bytes
docs/images/optimized/32.webpasset24,794 bytes
docs/images/optimized/33.webpasset30,460 bytes
docs/images/optimized/34.webpasset24,854 bytes
docs/images/optimized/35.webpasset22,712 bytes
docs/images/optimized/36.webpasset32,538 bytes
docs/images/optimized/37.webpasset34,390 bytes
docs/images/optimized/38.webpasset25,210 bytes
docs/images/optimized/39.webpasset15,396 bytes
docs/images/optimized/40.webpasset40,434 bytes
docs/images/optimized/41.webpasset34,972 bytes
docs/images/optimized/42.webpasset18,376 bytes
docs/images/preview/avatar.webpasset16,612 bytes
docs/images/preview/hero.webpasset33,086 bytes
docs/index.htmlasset26,432 bytes
docs/styles.cssasset35,259 bytes
references/design-md-template.mddoc5,380 bytes
references/design-systems/INDEX.mddoc2,367 bytes
references/design-systems/airbnb.mddoc14,051 bytes
references/design-systems/airtable.mddoc3,559 bytes
references/design-systems/apple.mddoc20,418 bytes
references/design-systems/bmw.mddoc9,812 bytes
references/design-systems/cal.mddoc17,801 bytes
references/design-systems/claude.mddoc20,296 bytes
references/design-systems/clay.mddoc17,332 bytes
references/design-systems/clickhouse.mddoc15,394 bytes
references/design-systems/cohere.mddoc14,757 bytes
references/design-systems/coinbase.mddoc5,008 bytes
references/design-systems/composio.mddoc20,914 bytes
references/design-systems/cursor.mddoc19,081 bytes
references/design-systems/elevenlabs.mddoc15,192 bytes
references/design-systems/expo.mddoc18,680 bytes
references/design-systems/ferrari.mddoc25,490 bytes
references/design-systems/figma.mddoc11,617 bytes
references/design-systems/framer.mddoc17,570 bytes
references/design-systems/hashicorp.mddoc15,639 bytes
references/design-systems/ibm.mddoc19,555 bytes
references/design-systems/intercom.mddoc6,421 bytes
references/design-systems/kraken.mddoc4,353 bytes
references/design-systems/lamborghini.mddoc21,122 bytes
references/design-systems/linear.app.mddoc22,449 bytes
references/design-systems/lovable.mddoc17,387 bytes
references/design-systems/minimax.mddoc14,285 bytes
references/design-systems/mintlify.mddoc17,429 bytes
references/design-systems/miro.mddoc4,797 bytes
references/design-systems/mistral.ai.mddoc15,635 bytes
references/design-systems/mongodb.mddoc15,015 bytes
references/design-systems/notion.mddoc18,349 bytes
references/design-systems/nvidia.mddoc17,093 bytes
references/design-systems/ollama.mddoc15,521 bytes
references/design-systems/opencode.ai.mddoc15,529 bytes
references/design-systems/pinterest.mddoc11,921 bytes
references/design-systems/posthog.mddoc18,561 bytes
references/design-systems/raycast.mddoc18,487 bytes
references/design-systems/renault.mddoc24,297 bytes
references/design-systems/replicate.mddoc14,161 bytes
references/design-systems/resend.mddoc18,431 bytes
references/design-systems/revolut.mddoc8,622 bytes
references/design-systems/runwayml.mddoc14,356 bytes
references/design-systems/sanity.mddoc21,234 bytes
references/design-systems/sentry.mddoc14,753 bytes
references/design-systems/spacex.mddoc11,323 bytes
references/design-systems/spotify.mddoc12,958 bytes
references/design-systems/stripe.mddoc20,450 bytes
references/design-systems/supabase.mddoc14,803 bytes
references/design-systems/superhuman.mddoc18,928 bytes
references/design-systems/tesla.mddoc22,215 bytes
references/design-systems/together.ai.mddoc14,287 bytes
references/design-systems/uber.mddoc18,657 bytes
references/design-systems/vercel.mddoc19,457 bytes
references/design-systems/voltagent.mddoc26,323 bytes
references/design-systems/warp.mddoc16,671 bytes
references/design-systems/webflow.mddoc4,122 bytes
references/design-systems/wise.mddoc8,467 bytes
references/design-systems/x.ai.mddoc16,285 bytes
references/design-systems/zapier.mddoc18,743 bytes
references/icon-library.mddoc4,102 bytes
references/interaction-patterns.mddoc15,600 bytes
references/motion-library.mddoc11,966 bytes
references/quality-checklist.mddoc2,234 bytes
references/scene-defaults.mddoc6,486 bytes
references/scroll-story-patterns.mddoc12,551 bytes
references/style-seeds.mddoc5,759 bytes
references/text-decoration-rules.mddoc1,772 bytes
scripts/crawl_website.pyruns14,279 bytes
scripts/extract_design_tokens.pyruns20,537 bytes
scripts/fetch_unsplash_images.pyruns8,197 bytes

Read SKILL.md


# Web Design

Web 端视觉设计 SKILL。两阶段工作流：**先出规范（DESIGN.md），再出代码。**

DESIGN.md 是显式文件产物，保存到项目目录，可跨项目复用、可手动修改、可给其他工具消费。

## 核心流程

```
Phase A  理解需求（灵活输入）──→  Phase B  输出 DESIGN.md（用户确认）──→  Phase C  生成项目代码
```

**启动时先检测**（按优先级）：
1. 项目里已经有 DESIGN.md 了吗？→ 有则沿用/修改/重建

View the complete source on GitHub

Skills included

web-design

Repository facts

License: MIT
Created: Apr 16, 2026
Last pushed: Jun 24, 2026
Forks: 82
Open issues: 2
Project activity: Slowing

Rank over the last 12 weeks

Now #997 · best #717 · down 267 in 30 days

#842 on Oct 19
#853 on Oct 20
#866 on Oct 21
#841 on Oct 22
#852 on Oct 23
#997 since Oct 25

52 earlier periods

#737 on Aug 2
#739 on Aug 7
#744 on Aug 8
#787 on Aug 10
#788 on Aug 11
#779 on Aug 14
#768 on Aug 16
#770 on Aug 17
#778 on Aug 19
#773 on Aug 20
#778 on Aug 21
#735 on Aug 22
#758 on Aug 23
#782 on Aug 24
#792 on Aug 25
#772 on Aug 26
#781 on Aug 27
#805 on Aug 28
#737 from Aug 29 to Aug 30
#771 on Aug 31
#791 on Sep 1
#766 on Sep 2
#764 on Sep 3
#739 on Sep 4
#717 on Sep 5
#744 on Sep 6
#758 on Sep 7
#778 on Sep 8
#759 on Sep 9
#773 on Sep 10
#744 on Sep 11
#743 from Sep 12 to Sep 13
#769 on Sep 14
#760 on Sep 15
#768 on Sep 16
#773 on Sep 17
#732 on Sep 19
#774 on Sep 21
#785 on Sep 23
#754 on Sep 24
#730 on Sep 25
#800 on Sep 30
#746 on Oct 1
#751 on Oct 3
#778 on Oct 4
#786 on Oct 5
#812 on Oct 7
#817 on Oct 9
#799 from Oct 10 to Oct 11
#844 on Oct 14
#814 on Oct 17
#799 on Oct 18

Before you install

Network or broad shell

Automated signals, not a guarantee

Checked Nov 4, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 3 notes

SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed

No broad tool permissions
No dangerous shell commands
85 network referencesin 13 files: docs/index.html:10 README.md:7 docs/DESIGN.md:29 and 10 more
No hidden or obfuscated text
No instruction overrides
4 executable scriptsin 4 files: docs/app.js:1 scripts/crawl_website.py:1 scripts/extract_design_tokens.py:1 and 1 more
1 reference to secretsin 1 file: .gitignore:11
No requests to vote in Hot

Show all 90 signals by file

`.gitignore`

Access to secretsline 11
```
[Credential-related source omitted]
```

`README.md`

Network accessline 7

[![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/)

Network accessline 9

[![License: MIT](https://img.shields.io/badge/License-MIT-FB923C.svg?style=flat-square)](./LICENSE)

Network accessline 10

[![GitHub Pages](https://img.shields.io/badge/GitHub_Pages-Live-5EEAD4?style=flat-square)](https://kaopu-xiaopu.github.io/web-design/)

Network accessline 11

![HTML](https://img.shields.io/badge/HTML-E34F26?style=flat-square&logo=html5&logoColor=white)

Network accessline 12

![CSS](https://img.shields.io/badge/CSS-1572B6?style=flat-square&logo=css3&logoColor=white)

Network accessline 13

![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&logo=javascript&logoColor=black)

Network accessline 17

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

Network accessline 59

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

Network accessline 67

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

Network accessline 69
```
# open http://localhost:8000
```

Network accessline 77

Motion effects on the landing page derive from work by [David Haz](https://github.com/DavidHDev):

Network accessline 79

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

Network accessline 80

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

Network accessline 82

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

Network accessline 92

**Built with ❤<U+FE0F> by [@KAOPU-XiaoPu](https://github.com/KAOPU-XiaoPu)**

Network accessline 94

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

`SKILL.md`

Network accessline 57
```
curl -Ls [URL]
```

Network accessline 67

- Playwright 爬虫失败 → 查 `references/design-systems/` 有无该品牌预置文件（58 个品牌） - 预置文件也无 → `extract_design_tokens.py` 尝试静态提取 - 静态提取也失败 → 手动 curl CSS

Network accessline 68

- 预置文件也无 → `extract_design_tokens.py` 尝试静态提取 - 静态提取也失败 → 手动 curl CSS - 全部失败 → 要求用户提供截图，从视觉手动建 Token

Network accessline 69

- 静态提取也失败 → 手动 curl CSS

Network accessline 278

**任何 L2 及以上页面必须包含以下 6 类动效，缺一不可**。优先从 [vue-bits / reactbits](https://github.com/DavidHDev/vue-bits) 目录挑（查 `references/motion-library.md`），能复用源码就不要自己写。

Network accessline 317

**致谢**：使用 vue-bits / reactbits 源码时，在页面 footer 或 README 注明 "Motion effects derived from [vue-bits](https://github.com/DavidHDev/vue-bits) by DavidHDev (MIT)"。

`docs/DESIGN.md`

Network accessline 29

**Motion Library 选型**（从 [vue-bits](https://github.com/DavidHDev/vue-bits) 直接移植，MIT）：

Network accessline 104

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400..700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

Network accessline 384

<!-- GSAP + ScrollTrigger + Lenis (全部 CDN，零构建) --> <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

Network accessline 385

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

Network accessline 386

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>

Network accessline 387

<script src="https://cdn.jsdelivr.net/npm/lenis@1.1.14/dist/lenis.min.js"></script>

Network accessline 694

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js';

`docs/app.js`

Executable scriptline 1
```
Executable file
```

Network accessline 2

web-design SKILL · app.js (GradientBlinds + RollingGallery)    Motion effects derived from vue-bits by DavidHDev (MIT)    https://github.com/DavidHDev/vue-bits

Network accessline 3

Motion effects derived from vue-bits by DavidHDev (MIT)    https://github.com/DavidHDev/vue-bits    ========================================================= */

Network accessline 4
```
https://github.com/DavidHDev/vue-bits
```

Network accessline 7

import { Renderer, Program, Mesh, Triangle } from 'https://esm.sh/ogl@1.0.11';

`docs/index.html`

Network accessline 10

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 11

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 12

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400..700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400..700&display=swap">

Network accessline 29

<span class="lang-en">EN</span>         </button>         <a href="https://github.com/KAOPU-XiaoPu/web-design" target="_blank" rel="noopener" class="nav-github">

Network accessline 30

</button>         <a href="https://github.com/KAOPU-XiaoPu/web-design" target="_blank" rel="noopener" class="nav-github">           <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .3a12 12

Network accessline 31

<a href="https://github.com/KAOPU-XiaoPu/web-design" target="_blank" rel="noopener" class="nav-github">

Network accessline 402

<p class="author-bio" data-i18n="author.bio">web-design is a side project. If it saves you time, a star on GitHub helps keep it actively maintained.</p>       <div class="author-links">         <a class="author-btn author-btn-icon" href="ht

Network accessline 403

<div class="author-links">         <a class="author-btn author-btn-icon" href="https://github.com/KAOPU-XiaoPu/web-design" target="_blank" rel="noopener" aria-label="GitHub">           <svg width="16" height="16" viewBox="0 0 24 24" fill="c

Network accessline 404

<a class="author-btn author-btn-icon" href="https://github.com/KAOPU-XiaoPu/web-design" target="_blank" rel="noopener" aria-label="GitHub">

Network accessline 405

<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2.2c-3.3.7-4-1.6-4-1.6-.5-1.4-1.3-1.8-1.3-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1.1 1.8 2.8 1.3

Network accessline 406

</a>         <a class="author-btn" href="https://www.woshipm.com/u/1535316" target="_blank" rel="noopener">           <span class="author-btn-dot" aria-hidden="true">人</span>

Network accessline 407

<a class="author-btn" href="https://www.woshipm.com/u/1535316" target="_blank" rel="noopener">

Network accessline 425

<div class="codeblock">         <span class="prompt" aria-hidden="true">$</span>         <code class="cmd">git clone https://github.com/KAOPU-XiaoPu/web-design ~/.claude/skills/web-design</code>

Network accessline 426

<span class="prompt" aria-hidden="true">$</span>         <code class="cmd">git clone https://github.com/KAOPU-XiaoPu/web-design ~/.claude/skills/web-design</code>         <button class="copy-btn" data-cmd="git clone https://github.com/KAOPU

Network accessline 427

<code class="cmd">git clone https://github.com/KAOPU-XiaoPu/web-design ~/.claude/skills/web-design</code>

Network accessline 428

<button class="copy-btn" data-cmd="git clone https://github.com/KAOPU-XiaoPu/web-design ~/.claude/skills/web-design">

Network accessline 434

<div class="install-req">         <span data-i18n="install.req">Requires</span>         <a href="https://claude.com/claude-code" target="_blank" rel="noopener">Claude Code</a>

Network accessline 435

<span data-i18n="install.req">Requires</span>         <a href="https://claude.com/claude-code" target="_blank" rel="noopener">Claude Code</a>       </div>

Network accessline 436

<a href="https://claude.com/claude-code" target="_blank" rel="noopener">Claude Code</a>

Network accessline 439

<div class="install-ctas">         <a href="https://github.com/KAOPU-XiaoPu/web-design" target="_blank" rel="noopener" class="btn-primary" data-magnetic>

Network accessline 440

<a href="https://github.com/KAOPU-XiaoPu/web-design" target="_blank" rel="noopener" class="btn-primary" data-magnetic>

Network accessline 457

<div class="footer-h" data-i18n="footer.credits">Credits</div>         <ul class="footer-list">           <li><a href="https://github.com/DavidHDev/vue-bits" target="_blank" rel="noopener">vue-bits</a> by DavidHDev (MIT)</li>

Network accessline 458

<ul class="footer-list">           <li><a href="https://github.com/DavidHDev/vue-bits" target="_blank" rel="noopener">vue-bits</a> by DavidHDev (MIT)</li>           <li><a href="https://github.com/VoltAgent/awesome-design-md" target="_blank

Network accessline 459

<li><a href="https://github.com/DavidHDev/vue-bits" target="_blank" rel="noopener">vue-bits</a> by DavidHDev (MIT)</li>

Network accessline 460

<li><a href="https://github.com/VoltAgent/awesome-design-md" target="_blank" rel="noopener">awesome-design-md</a> by VoltAgent (MIT)</li>

Network accessline 466

<ul class="footer-list">           <li><a href="#top" data-i18n="footer.top">Back to top</a></li>           <li><a href="https://github.com/KAOPU-XiaoPu/web-design" target="_blank" rel="noopener">GitHub</a></li>

Network accessline 467

<li><a href="#top" data-i18n="footer.top">Back to top</a></li>           <li><a href="https://github.com/KAOPU-XiaoPu/web-design" target="_blank" rel="noopener">GitHub</a></li>           <li><a href="#install" data-i18n="footer.install">Ins

Network accessline 468

<li><a href="https://github.com/KAOPU-XiaoPu/web-design" target="_blank" rel="noopener">GitHub</a></li>

Network accessline 475

<!-- Scripts -->   <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

Network accessline 476

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

`references/design-systems/INDEX.md`

Network accessline 3

58 个真实网站的设计系统预设，来源于 [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md)（MIT License）。

`references/interaction-patterns.md`

Network accessline 376

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>

Network accessline 377

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>

Network accessline 589

<script src="https://cdn.jsdelivr.net/npm/lenis@1/dist/lenis.min.js"></script>

`references/motion-library.md`

Network accessline 3

L2+ 页面的动效默认从 [vue-bits](https://github.com/DavidHDev/vue-bits) 或 [reactbits](https://github.com/DavidHDev/react-bits) 选取（同作者 DavidHDev，Vue / React 双端同一套效果，MIT 许可）。**能复用就不要重写。**

Network accessline 243

1. **优先直接复制**：vue-bits / reactbits 源码是 MIT，保留作者致谢就能用 2. **翻译层**：原 Vue / React 代码移植到 vanilla HTML 时，把 props 展开为 data-attr 或函数参数 3. **致谢位置**：页面 footer 或 README 加 "Motion effects inspired by / derived from [vue-bits](https://github.com/DavidHD

Network accessline 245

3. **致谢位置**：页面 footer 或 README 加 "Motion effects inspired by / derived from [vue-bits](https://github.com/DavidHDev/vue-bits) by DavidHDev (MIT)"

`references/quality-checklist.md`

Network accessline 16

- [ ] 综合体验感知 + Token 提取 + 截图对照三类输入分析 - [ ] 使用脚本或 curl 抓取原始 HTML/CSS，未单纯依赖 AI 摘要

Network accessline 17

- [ ] 使用脚本或 curl 抓取原始 HTML/CSS，未单纯依赖 AI 摘要

`references/scroll-story-patterns.md`

Network accessline 219

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js';

`scripts/crawl_website.py`

Executable scriptline 1
```
#!/usr/bin/env python3
```

Network accessline 12

用法：   python3 crawl_website.py --url https://example.com --output ./output

Network accessline 13

python3 crawl_website.py --url https://example.com --output ./output

Network accessline 14

python3 crawl_website.py --url https://linear.app --output ./output --full-page

Network accessline 15

python3 crawl_website.py --url https://vercel.com --output ./output --scroll-delay 800

`scripts/extract_design_tokens.py`

Executable scriptline 1
```
#!/usr/bin/env python3
```

Network accessline 8

Usage:     python extract_design_tokens.py --file page.html     python extract_design_tokens.py --url https://example.com

Network accessline 9

python extract_design_tokens.py --file page.html     python extract_design_tokens.py --url https://example.com     cat page.html | python extract_design_tokens.py --stdin --base-url https://example.com

Network accessline 10

python extract_design_tokens.py --url https://example.com

Network accessline 11

cat page.html | python extract_design_tokens.py --stdin --base-url https://example.com

Network accessline 51

# Fallback to curl because some sites work in curl but fail urllib TLS validation

Network accessline 53

result = subprocess.run(             ["curl", "-Ls", "--max-time", str(timeout), url],

`scripts/fetch_unsplash_images.py`

Executable scriptline 1
```
#!/usr/bin/env python3
```

Network accessline 86

def generate_unsplash_url(photo_id, width=800, height=600):     return f"https://images.unsplash.com/{photo_id}?w={width}&h={height}&fit=crop&auto=format&q=80"

Network accessline 87

return f"https://images.unsplash.com/{photo_id}?w={width}&h={height}&fit=crop&auto=format&q=80"

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

Signal confidence: 2 facts

Network access in code of documentationREADME.md:59Low confidence
Network access in code of the SKILL.mdSKILL.md:57High confidence

Works with

Agent compatibility, from the files in this repository
Agent	Status	Evidence	Install to
Claude Code	Compatible	Standard SKILL.md SKILL.md	`.claude/skills/<skill-name>/`
Codex	Compatible	Standard SKILL.md SKILL.md	`.agents/skills/<skill-name>/`
Cursor	Compatible	Standard SKILL.md SKILL.md	`.cursor/skills/<skill-name>/`
Gemini CLI	Compatible	Standard SKILL.md SKILL.md	`.gemini/skills/<skill-name>/`
GitHub Copilot	Compatible	Standard SKILL.md SKILL.md	`.github/skills/<skill-name>/`
OpenCode	Compatible	Standard SKILL.md SKILL.md	`.opencode/skills/<skill-name>/`

Native The repository ships a manifest, folder or frontmatter field for this agent.
Compatible A standard SKILL.md that this agent can read.
Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

xiaopu-ai/web-design

History

SKILL.md

Share this page

Heat

Stars over time

Individual skills in this repository

How it works

web-design

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

Skills included

Repository facts

Rank over the last 12 weeks

Before you install

.gitignore

README.md

SKILL.md

docs/DESIGN.md

docs/app.js

docs/index.html

references/design-systems/INDEX.md

references/interaction-patterns.md

references/motion-library.md

references/quality-checklist.md

references/scroll-story-patterns.md

scripts/crawl_website.py

scripts/extract_design_tokens.py

scripts/fetch_unsplash_images.py

How the signals fit together

Works with

You might also use

senlindesign/proof

dominikmartn/hue

uxKero/anydesign

h3nryprod01/design-taste

stevembarclay/pencilplaybook

edisonmbli/refactoring-ui-skill

`SKILL.md`

`.gitignore`

`README.md`

`SKILL.md`

`docs/DESIGN.md`

`docs/app.js`

`docs/index.html`

`references/design-systems/INDEX.md`

`references/interaction-patterns.md`

`references/motion-library.md`

`references/quality-checklist.md`

`references/scroll-story-patterns.md`

`scripts/crawl_website.py`

`scripts/extract_design_tokens.py`

`scripts/fetch_unsplash_images.py`