web-design MCP — 使用场景, 安装 & 实时演示

为什么要用

核心特性

Spec-first flow: extract cues → DESIGN.md → code (with audit)
Nine standardized sections — nothing the agent 'improvises'
Inputs: PRD text / reference URL / screenshot / brand keywords
Consistent across runs and across AI tools (spec is portable)
Human-editable spec — you can tweak a token and regenerate code

实时演示

实际使用效果

web-design-skill.replay ▶ 就绪

0/0

安装

选择你的客户端

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "web-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/KAOPU-XiaoPu/web-design",
        "~/.claude/skills/web-design"
      ],
      "_inferred": false
    }
  }
}

打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "web-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/KAOPU-XiaoPu/web-design",
        "~/.claude/skills/web-design"
      ],
      "_inferred": false
    }
  }
}

Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "web-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/KAOPU-XiaoPu/web-design",
        "~/.claude/skills/web-design"
      ],
      "_inferred": false
    }
  }
}

点击 Cline 侧栏中的 MCP Servers 图标，然后选 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "web-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/KAOPU-XiaoPu/web-design",
        "~/.claude/skills/web-design"
      ],
      "_inferred": false
    }
  }
}

格式与 Claude Desktop 相同。重启 Windsurf 生效。

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "web-design-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/KAOPU-XiaoPu/web-design",
        "~/.claude/skills/web-design"
      ]
    }
  ]
}

Continue 使用服务器对象数组，而非映射。

~/.config/zed/settings.json

{
  "context_servers": {
    "web-design-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/KAOPU-XiaoPu/web-design",
          "~/.claude/skills/web-design"
        ]
      }
    }
  }
}

加入 context_servers。Zed 保存后热重载。

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

一行命令搞定。用 claude mcp list 验证，claude mcp remove 卸载。

使用场景

实战用法： web-design

Build a landing page with a real design system in under an hour

👤 Solo founders, indie hackers, early-stage PMs ⏱ ~45 min beginner

何时使用： You need a landing page for a product and don't want to commission or pay for Figma work.

前置条件

Claude Code installed — npm install -g @anthropic-ai/claude-code
web-design skill installed — git clone https://github.com/KAOPU-XiaoPu/web-design ~/.claude/skills/web-design

步骤

Feed the brand

/web-design — build a landing page for 'Lumo', a B2B SaaS for event logistics. Reference: stripe.com's layout; vibe: calm, competent.✓ 已复制

→ Skill generates DESIGN.md with 9 sections; shows it before coding
Edit the spec, not the code

In DESIGN.md, change primary color to #2E6BE6 and headings to Inter Tight. Regenerate the page from the updated spec.✓ 已复制

→ Code regenerated to match edits; no random extra changes
Audit

Run the skill's audit step — flag any component that doesn't match DESIGN.md tokens.✓ 已复制

→ Audit report with per-component pass/fail

结果： A landing page that looks designed, not 'AI-ed'. Portable DESIGN.md you can hand to a designer later for refinement.

注意事项

Spec is ignored on the second page — Always regenerate 'from DESIGN.md'; don't ask Claude to add a page without spec reference
Reference URL too generic (e.g. 'apple.com') — Point at something in your product's category; vague references yield vague specs

搭配使用： filesystem · hue-brand-skill

Rebrand an existing site coherently, not as a search-and-replace

👤 Teams doing a visual refresh ⏱ ~90 min intermediate

何时使用： Marketing handed you new brand tokens and you don't want to touch 300 components by hand.

步骤

Import tokens into DESIGN.md

Update DESIGN.md with these new colors and typography. Leave layout/motion/components sections alone.✓ 已复制

→ Clean diff on DESIGN.md
Regenerate styles

Regenerate the globals and component styles from DESIGN.md. Do not touch component structure.✓ 已复制

→ Style-only diff; zero structural changes
Audit and fix stragglers

Audit across src/components. Any hardcoded colors/fonts not from the spec?✓ 已复制

→ List of offenders; patches applied

结果： Coherent rebrand; no ghost-old-color surprises two weeks later.

注意事项

Hardcoded hex scattered across the codebase — Audit catches them; make fixing part of the rebrand, not 'later'

搭配使用： filesystem · hue-brand-skill

Turn a screenshot into a layout starter

👤 Anyone who saw a site they like and wants a starting point for their own (not a copy) ⏱ ~30 min intermediate

何时使用： You have a screenshot of a reference site and want a coherent starter, not a pixel clone.

步骤

Provide the screenshot

Attached: screenshot of [reference.png]. Extract the design cues to DESIGN.md (vibe only — don't clone).✓ 已复制

→ DESIGN.md with cues inferred from the image, not literal pixel values
Set your content

Override content in DESIGN.md's 'Narrative' section with my product's copy.✓ 已复制

→ Spec keeps the structural cues but with your content
Generate

Generate a Next.js + Tailwind starter from DESIGN.md.✓ 已复制

→ Code compiles; matches the spec; original enough to not be a clone

结果： A starter inspired by but distinct from the reference — ethically and visually.

注意事项

Temptation to ask for an exact clone — Don't — the skill is designed to extract cues, not reproduce; asking for clones degrades output

搭配使用： hue-brand-skill

组合

与其他 MCP 搭配，撬动十倍杠杆

web-design-skill + hue-brand-skill

hue extracts brand tokens; web-design places them in DESIGN.md

Use hue on stripe.com, then bake those tokens into web-design's DESIGN.md for our new landing page.✓ 已复制

web-design-skill + interactive-slides-skill

Use DESIGN.md's tokens to style an investor deck

Generate the investor deck (interactive-slides) using our web-design DESIGN.md tokens for consistency.✓ 已复制

web-design-skill + filesystem

Edit DESIGN.md on disk with normal tools; regenerate code on save

After my edits to DESIGN.md, regenerate the affected components.✓ 已复制

工具

此 MCP 暴露的能力

工具	输入参数	何时调用	成本
/web-design	PRD \| URL \| screenshot \| brand name → DESIGN.md (editable)	Any new page or rebrand pass — always spec-first	Moderate Claude calls (vision if screenshot)

成本与限制

运行它的成本

API 配额: None beyond normal Claude usage
每次调用 Token 数: First pass (spec + code) is token-heavy; subsequent edits are cheap (regenerate just the diff)
费用: Free (MIT-style)
提示: Lock in DESIGN.md first; then regenerate only the sections you change

安全

权限、密钥、影响范围

凭据存储： None

数据出站： None — local skill; any external calls are Claude's normal ones

Screenshots uploaded to Claude are transmitted to Anthropic as part of the conversation. Don't submit screenshots containing PII or unannounced brand assets.

故障排查

常见错误与修复

Generated code ignores DESIGN.md

Re-invoke with explicit 'from DESIGN.md' framing; the skill expects spec-first calls, not 'make a hero section'

验证： Check the skill output — it should cite DESIGN.md sections

Spec section empty for brand keywords only

Add 1–2 reference URLs to seed the cues; brand name alone is too sparse

验证： Re-run with 'reference: …' added

Audit flags many false positives

Audit compares against DESIGN.md tokens; if tokens are loose, audit feels strict. Tighten DESIGN.md color/type values before re-running.

替代方案

web-design 对比其他方案

替代方案	何时用它替代	权衡
hue (brand extraction)	You need the brand tokens; not a full web-page workflow	No code generation; produces a design system to feed elsewhere
ui-ux-pro-max-skill	You want a large style library with built-in palettes and industry rules	Bigger surface; less spec-first
Hand-write Tailwind	You want total control	Slow; inconsistent without a spec

web-design

为什么要用

核心特性

实时演示

实际使用效果

安装

选择你的客户端

使用场景

实战用法： web-design

Build a landing page with a real design system in under an hour

前置条件

步骤

注意事项

Rebrand an existing site coherently, not as a search-and-replace

步骤

注意事项

Turn a screenshot into a layout starter

步骤

注意事项

组合

与其他 MCP 搭配，撬动十倍杠杆

工具

此 MCP 暴露的能力

成本与限制

运行它的成本

安全

权限、密钥、影响范围

故障排查

常见错误与修复

替代方案

web-design 对比其他方案

更多

资源