web-design

Install

npx skillfoxx add skills/web-design

npx skills add xiaopu-ai/web-design --skill web-design -a claude-code -y

npx skills add xiaopu-ai/web-design --skill web-design -a cursor -y

npx skills add xiaopu-ai/web-design --skill web-design -a github-copilot -y

npx skills add xiaopu-ai/web-design --skill web-design -a codex -y

npx skills add xiaopu-ai/web-design --skill web-design -a gemini-cli -y

npx skills add xiaopu-ai/web-design --skill web-design -a cline -y

npx skills add xiaopu-ai/web-design --skill web-design -a roo -y

npx skills add xiaopu-ai/web-design --skill web-design -a opencode -y

git clone https://github.com/xiaopu-ai/web-design ~/.claude/skills/web-design

This is third-party code. Review the repository files before installing.

What it does

The skill splits web-page work into two steps: the spec first, then the code. It accepts a PRD, a reference URL, a screenshot, keywords or a brand name in any combination and extracts design cues from them. It then assembles a DESIGN.md file with sections on color, type, components, layout, motion, depth, responsiveness and accessibility, which you edit and keep in the project. After you approve it, the skill generates code strictly by the spec and self-checks it against a checklist. It bundles references on design systems, patterns and motion, plus scripts to crawl sites and fetch images.

Who it is for. For designers and developers who want a web interface with a single spec rather than scattered code.

Example request

Produce a DESIGN.md and a landing page from this reference, but with a warmer palette

Limitations

The skill targets web frontend, not backend or logic bugs. Crawling reference sites uses Playwright and image fetching uses Unsplash, which need network and a local environment. Running the demo page locally needs an http server; opening it via file does not work.

How to disable. Remove the web-design folder from the Claude Code skills directory.

Security check

• Scripts crawl reference sites via Playwright and fetch images from Unsplash
• The skill generates and writes page code into the project

README in short

The README describes web-design as a Claude Code skill that outputs a DESIGN.md first and then the code. Work runs in three phases: understand the input, assemble a nine-section spec and generate code strictly by it with a checklist self-audit and a diff against the reference. The repo holds SKILL.md, references on design systems, patterns and motion, Playwright scripts to crawl sites and fetch images, and a demo landing page. Install clones into the Claude Code skills directory. MIT licensed.

SKILL.md

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

# 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"）。

Related