design-mind

AI-powered frontend design knowledge base with MCP integration.

96 visual styles, 52+ curated design assets, 9 MCP tools, and 4 workflow commands — covering design philosophy, visual foundations, style recipes, React/Next.js engineering patterns, accessibility, and quality assurance.

Full MCP Integration Guide (多客户端接入指南) — Claude Code / Cursor / Windsurf 配置方法

What's Inside

Layer	Content	Assets
L1 Design Philosophy	Design Thinking, OpenAI/Anthropic Official Skills, Neethan Wu's 3-Layer Harness	5
L2 Visual Foundations	Typography, Color Tokens, Spacing, Visual Effects, CSS Animations	3
L3 Design Systems	96 Style Recipes, Design Tokens, Atomic Design, Page Archetypes	18
L4 Frontend Engineering	React Patterns, Tailwind v4, Next.js, Accessibility, Responsive, Forms, Dark Mode	9
L5 Decision & QA	Product Recommendations (39 types), UX/Web Guidelines, 23-Check Quality Gate	5
L6 Resources	Color Palettes (40), Typography (20), Icons (120 Lucide), Charts (20)	10+

Quick Start (5 minutes)

Prerequisites

• Claude Code installed
• A CloudMind MCP URL and auth token (get one from the instance owner)

Option A: One-line setup

bash <(curl -sL https://raw.githubusercontent.com/AnxForever/design-mind/main/scripts/setup-mcp.sh) \
  "<MCP_URL>" "<AUTH_TOKEN>"

This automatically:

1. Configures Claude Code MCP connection in ~/.claude/settings.json
2. Installs 4 design workflow commands
3. Verifies the connection

Option B: Manual setup

1. Add MCP to Claude Code

Edit ~/.claude/settings.json:

{
  "mcpServers": {
    "cloudmind": {
      "type": "url",
      "url": "<MCP_URL>",
      "headers": {
        "Authorization": "Bearer <AUTH_TOKEN>"
      }
    }
  }
}

2. Install design commands (optional)

mkdir -p ~/.claude/commands/design
cp commands/design/*.md ~/.claude/commands/design/

3. Restart Claude Code

Usage

MCP Tools (9)

Tool	Function	Permission
search_assets	Semantic search across design assets	Read
ask_library	RAG Q&A with source citations	Read
get_asset	Get full asset details by ID	Read
save_asset	Save new content to knowledge base	Write
suggest_style	Recommend 2-3 visual styles for a product description	Read
compare_styles	Side-by-side comparison of 2-3 styles	Read
get_design_tokens	Extract Tailwind/CSS tokens for a specific style	Read
suggest_layout	Recommend page layout patterns	Read
get_component_recipe	Generate component Tailwind implementation for a style	Read

Design Workflow Commands

Command	What It Does
/design-init	Bootstrap a new project's design system — asks product type, recommends style/colors/fonts, generates design-system.md
/design-style	Explore visual styles — describe what you want, get 3 candidates with full tokens and Tailwind code
/design-review	Review UI code quality — scans files against 5 categories (typography, spacing, color, accessibility, components)
/design-audit	Pre-launch full audit — WCAG 2.2 checklist + 23-check Quality Gate + 7 Litmus Checks + anti-pattern scan

Example Queries

# Search for specific knowledge
search_assets("glassmorphism CSS backdrop-filter")
search_assets("SaaS style priority decision rules")

# Ask design questions
ask_library("What visual styles work best for a fintech dashboard?")
ask_library("How to set up Tailwind v4 with OKLCH colors?")

# Design-specific tools
suggest_style({ productDescription: "AI chatbot platform for developers" })
compare_styles({ styleNames: ["Neo-Brutalist", "Glassmorphism", "Swiss Style"] })
get_design_tokens({ styleName: "Ghibli Style", format: "tailwind" })
get_component_recipe({ component: "button", styleName: "Cyberpunk", framework: "react" })
suggest_layout({ pageType: "landing", productType: "SaaS" })

# Find the master index
search_assets("[INDEX] Frontend Design Knowledge Base")

Knowledge Base Architecture

┌─────────────────────────────────────────────┐
│  L1: Design Philosophy                     │
│  Intent-driven design, anti-default         │
│  thinking, OpenAI vs Anthropic approaches   │
├─────────────────────────────────────────────┤
│  L2: Visual Foundations                     │
│  Typography, Color, Spacing, Effects,       │
│  Animations, Design Workflow                │
├─────────────────────────────────────────────┤
│  L3: Design Systems & Styles               │
│  50+ style recipes with tokens + code,      │
│  Atomic Design, Page Archetypes             │
├─────────────────────────────────────────────┤
│  L4: Frontend Engineering                   │
│  React, Next.js, Tailwind v4, a11y,        │
│  Responsive, Forms, Dark Mode               │
├─────────────────────────────────────────────┤
│  L5: Decision & QA                          │
│  39 product type rules, UX/Web guidelines,  │
│  23-check automated Quality Gate            │
├─────────────────────────────────────────────┤
│  L6: Resources                              │
│  Color palettes, font pairings, icons,      │
│  chart recommendations                      │
└─────────────────────────────────────────────┘

Powered By

• CloudMind — Serverless AI knowledge base on Cloudflare Workers
• StyleKit — 50+ design style recipes and design system
• Frontend Patterns — Design thinking and engineering patterns
• Anthropic / OpenAI — Official frontend design skills

License

MIT