Web Design

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

807 stars 81 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add xiaopu-ai/web-design --skill web-design

Manual install

git clone --depth 1 https://github.com/xiaopu-ai/web-design.git /tmp/web-design
mkdir -p ~/.claude/skills
cp -r /tmp/web-design/. ~/.claude/skills/web-design

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Web Design

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

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

## 核心流程

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

**启动时先检测**（按优先级）：
1. 项目里已经有 DESIGN.md 了吗？→ 有则沿用/修改/重建
2. 项目里有 PRD.md 吗？→ 有则进入 A4（PRD 驱动流程）
3. 都没有 → 正常走 Phase A

---

## Phase A: 理解需求

输入是灵活的，以下任意组合都行，不要强制用户走固定路径：

| 输入 | 处理方式 |
|------|---------|
| **参考 URL** | 抓取 HTML+CSS，提取 Token，motion audit |
| **截图 / 设计稿** | 从视觉提取气质、色温、密度、字体风格 |
| **关键词 / 描述** | "暗色克制衬线风格" → 从 style-seeds 匹配 Token |
| **品牌名** | "做成类似 Linear 的" → 先查 `references/design-systems/`，有则直接读取；无则抓取该网站 |
| **混合** | "参考这个 URL 但配色要暖一些" → 提取 + 覆盖 |
| **PRD 文档** | 读取 PRD.md 的产品定位、页面结构、设计交接区 → 分析竞品风格 → 推导设计方向 |

### A1. URL 分析（有参考 URL 时）

**意图判断**：参考（提取设计语言，做独立新页面）vs 复刻（用户明确说"复刻/clone"）。

**抓取流程**（按优先级尝试）：

1. **首选：Playwright 爬虫**（真实浏览器，能绕反爬、渲染 SPA、模拟滚动）
   ```bash
   python3 scripts/crawl_website.py --url [URL] --output ./crawl-output --scroll-delay 600
   ```
   输出：每屏视口截图 + tokens.json + structure.json + styles.css
   
2. **备选：Token 提取脚本**（轻量，适合简单静态站）
   ```bash
   python3 scripts/extract_design_tokens.py --url [URL] --format json
   ```

3. **降级：手动 curl**（脚本都不可用时）
   ```bash
   curl -Ls [URL]
   ```

综合三类输入判断：实际体验（氛围节奏）> 截图（局部气质）> Token 数值（精确参数）。Playwright 爬虫的视口截图可直接作为"体验"和"截图"两类输入。

**Motion Audit**（参考站有滚动联动动效时必做）：
- 触发信号：动效跟随滚动连续变化 / 模块间有 stagger-pin-parallax / 引用 GSAP-Lenis 等
- 记录每个动效区块的 trigger、driver、elements、effect、timing

**降级链路**：

Read the full skill on GitHub

Details

Skill name: web-design
Repository: xiaopu-ai/web-design
License: MIT
Repo updated: 24 June 2026

FAQ

What does the Web Design skill do?

How do I install the Web Design skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add xiaopu-ai/web-design --skill web-design. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Web Design popular?

It lives in xiaopu-ai/web-design, which has 807 GitHub stars and 81 forks.

Related skills

Power Design

748

ItsssssJack/power-design

Generate beautiful, on-brand HTML — presentation decks or full responsive websites — in any brand's design language, combining brand DNA extracted via Firecrawl with codified, research-backed design principles (20 rules for slides, 20 for the web).

Frontend & Design98

Bang Motion

780

bangtutorial/bang-motion

Membangun motion graphic sinematik di browser (promo video, opener, intro, bumper, kinetic typography, explainer/video penjelasan bergambar 16:9 atau 9:16) memakai HTML + CSS + GSAP (+ Three.js bila perlu), dengan hasil yang bergerak seperti video sungguhan — bukan slide presentasi. Gunakan skill ini setiap kali user meminta "video promo", "opener", "intro animasi", "motion graphic", "bumper", "kinetic typography", "animasi teks sinematik", "explainer", "video penjelasan" (jurnalisme visual, kartun edukasi, kolase), atau menunjukkan referensi video promosi/explainer dan ingin dibuatkan versi w

Frontend & Design120

Color Expert

629

meodai/skill.color-expert

Use when working with color naming, color theory, color spaces, color definitions, or any task involving color knowledge - palettes, ramps, gradients, conversions, accessibility, perceptual matching, pigment mixing, print-vs-screen color, CSS color syntax, or historical color terminology. Use this skill whenever the user is choosing, comparing, generating, naming, converting, or explaining colors, even if they do not explicitly ask for "color theory.

Frontend & DesignIn 1 list39

Director

841

s1dashu/director

导演并制作多类型视频，从创意、研究、剧本、视觉开发、人物与声音设计、分镜和生成 Prompt，一直推进到素材生成、任务追踪与交付。适用于 Storytime Animation、Animated Explainer 与 Cinematic Drama，三个 Mode 均已完成实际作品验证。尚未建立专属 Mode 的类型不得冒充已支持流程。

Frontend & Design110

Better Design

545

marvkr/better-design

Build, improve, and review production interfaces with the Better Design MCP. Use for frontend design, UI, UX, interactions, flows, forms, navigation, components, styling, design systems, accessibility, responsive layouts, motion, React Native, Expo, Shopify, Three.js, and product video work, especially when creating, redesigning, polishing, or reviewing an interface.

Frontend & DesignIn 1 list32

Revenue Centric Design

heliocosta-dev/revenue-centric-design

Playbook for designing SaaS and startup products that convert, retain, and monetize — landing pages & CRO, checkout & forms, onboarding/activation, churn reduction, pricing psychology, dashboards, behavioral-science tactics, feature discipline, positioning/ICP, go-to-market, and AI-era differentiation. Use when advising on product design, UX, conversion, landing pages, checkout, onboarding, trials, pricing, retention/churn, growth, or positioning for a startup or SaaS. Distilled from product designer Richard (@richardrx). Not for use on gambling, betting, or casino products.

Frontend & Design70

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.