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 نفس مخطط mcpServers مثل Claude Desktop. إعدادات المشروع أولى من الإعدادات العامة.

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
    }
  }
}

انقر على أيقونة MCP Servers في شريط Cline الجانبي، ثم "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 أخرى لتحقيق نتائج x10

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

لماذا تستخدمه

الميزات الأساسية

عرض مباشر

كيف يبدو في الممارسة

التثبيت

اختر العميل

حالات الاستخدام

استخدامات عملية: 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 أخرى لتحقيق نتائج x10

الأدوات

ما يوفره هذا الـ MCP

التكلفة والحدود

تكلفة التشغيل

الأمان

الصلاحيات والأسرار ونطاق الأثر

استكشاف الأخطاء

الأخطاء الشائعة وحلولها

البدائل

web-design مقابل البدائل

المزيد

الموارد