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와 조합해 10배 효율

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
호출당 토큰: 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