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 對比其他方案

更多

資源