Design-MCP — Awwwards UI/UX Knowledge Base + MCP Server

An autonomous build: a data pipeline that cleans, chunks, tags, and embeds thousands of premium static websites into a vector database, plus a custom MCP server that lets any AI coding agent semantically retrieve world-class UI components and adapt them into clean React + Tailwind.

How to run this project with Claude Code

This repo is set up to be built by an agent. Open it in Claude Code and type:

/start

The orchestrator reads .claude/state/progress.json, figures out the next incomplete phase, and dispatches the matching subagent. It loops: run phase → QA verifier gates it → mark done → next phase. Say /start again anytime to resume from where it stopped. Other commands: /status, /run-phase <n>, /verify.

Pipeline (one command, resumable)

npm install
cp .env.example .env      # fill in keys
npm run pipeline          # clean -> chunk -> tag -> embed -> upload
npm run server            # start the MCP server on stdio

Architecture

Four phases, each owned by a dedicated subagent, gated by a QA verifier:

Phase	Owner subagent	Output
1. Clean + Chunk	data-pipeline-engineer	clean component chunks
2. Tag	data-pipeline-engineer	.metadata.json per chunk
3. Embed + Store	vector-db-engineer	vectors in Mongo Atlas
4. MCP Server	mcp-server-engineer	search_premium_ui tool
—. Wire agent	integration-engineer	client config + persona

See docs/ARCHITECTURE.md for the full engineering blueprint and CLAUDE.md for the rules every agent follows.

Design principles

• Zero manual processing — no hand-cleaning of folders.
• Resumable + idempotent — every stage skips already-done work; re-runs are safe.
• Bounded concurrency — a worker pool (src/lib/pool.ts) keeps memory flat over thousands of files and respects LLM rate limits.
• Adapt, don't copy — the agent rebuilds retrieved UI as modular React, never pastes.