WEB-DESIGN-MCP

# 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`](.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`](docs/ARCHITECTURE.md) for the full engineering blueprint and [`CLAUDE.md`](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`](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.