Design-MCP
Provides semantic retrieval of premium UI components from Awwwards, enabling AI agents to adapt them into React + Tailwind.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Design-MCPFind a premium hero section from Awwwards and convert to React+Tailwind"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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:
/startThe 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.
Related MCP server: aceternityui-mcp
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 stdioArchitecture
Four phases, each owned by a dedicated subagent, gated by a QA verifier:
Phase | Owner subagent | Output |
1. Clean + Chunk |
| clean component chunks |
2. Tag |
|
|
3. Embed + Store |
| vectors in Mongo Atlas |
4. MCP Server |
|
|
—. Wire agent |
| 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.
This server cannot be deployed
Maintenance
Related MCP Connectors
Capability registry for the agentic economy. Semantic search over verified MCP server listings.
MCP server connecting AI agents to 100+ apps (Gmail, Slack, Notion, GitHub) via one-click OAuth.
The Figma MCP server brings Figma design context directly into your AI workflow.
MCP server for building and testing AI agents with multi-model experimentation and insights.
Related MCP Servers
- AlicenseAqualityAmaintenanceMCP server for Aceternity UI components, enabling AI assistants to discover, search, install, and generate page layouts with 106 components.121MIT
- AlicenseAqualityFmaintenanceAn MCP server that enables AI assistants to search, discover, and install Aceternity UI components programmatically.5217 npm23MIT
- FlicenseAqualityDmaintenanceMCP server that gives AI coding agents the ability to design UIs through Google Stitch. It generates production-ready HTML and screenshots from natural language prompts.9-
- FlicenseAqualityCmaintenanceAn MCP server implementing a 7-stage agentic frontend workflow—from design audit to PR review—including AI-driven component generation, browser validation, E2E testing, and CI self-healing.48 npm-