Design knowledge for AI coding agents — curated, not hallucinated.
A hand-curated catalog of design tokens, references, and patterns served over MCP. Drop-in source of truth for any AI coding agent.
→ Quickstart · What sets it apart · Tools
Live server: https://designlib.app-builders.club/mcp
Catalog: 67 styles · 100 palettes · 34 font pairs · 134 domains · 25 chart types · 34 landing patterns · 105 icons · 405 inspiration pages · 120 animations · social templates (stories + carousels) · web + iOS
Status: v1, production, read-only.
When you ask an AI agent to "design a landing page for a fintech dashboard," it will happily invent #2B7FFF, pair Inter with Playfair, and move on. The tokens are plausible. They are also made up. Five prompts later the design has drifted, nothing matches, and you are hand-fixing colors that were never rooted in anything.
designlib-mcp replaces the guessing with a retrieval step.
Hand-curated, not scraped or auto-generated. Palettes, font pairs, styles, and references are authored — not pulled from low-quality sources or synthesized by a model. Every entry has a reason it is there.
Role-mapped, not raw. Palettes ship with primary, surface, text_primary, and contrast pairs already mapped — not just five hexes. Font pairs include weights, fallbacks, and style_fit tags. Icons come with ready-to-paste import code. Each catalog family is agent-ready — not raw data the agent has to interpret.
MCP-native, client-agnostic. Standard Model Context Protocol. Works in Claude Code, Claude Desktop, and any MCP-aware client. Not coupled to one tool.
Read-only, no telemetry, hosted. It does not write to your repo, does not call OpenAI, does not ship telemetry. Zero infra, zero secrets on your machine. It answers MCP queries and that is it.
Point your MCP client at the hosted server.
claude mcp add --transport http designlib https://designlib.app-builders.club/mcp
claude mcp listThen ask your agent:
Use designlib to find a palette and font pair for a fintech dashboard.
Claude Desktop does not speak streamable-http natively — bridge it with mcp-remote. Edit claude_desktop_config.json:
- Windows:
%APPDATA%\Claude\claude_desktop_config.json - macOS:
~/Library/Application Support/Claude/claude_desktop_config.json
{
"mcpServers": {
"designlib": {
"command": "npx",
"args": ["-y", "mcp-remote", "https://designlib.app-builders.club/mcp"]
}
}
}Restart Claude Desktop. The designlib tools will appear.
Add an HTTP MCP server entry pointing at https://designlib.app-builders.club/mcp.
Use it when:
- You are building UI with an AI agent and want consistent, non-hallucinated tokens across a session.
- You are prototyping multiple styles for the same product and want to compare them without re-authoring palettes each time.
- You are scaffolding a design system and need a sensible starting point keyed to a product domain.
- You are generating marketing pages, dashboards, mobile screens and want the agent to pick a coherent palette + typography combo instead of freestyling.
Skip it when:
- You already have a mature design system — use your own tokens.
- You need editable / writable storage — this server is read-only.
- You need brand-specific assets (logos, illustrations, custom icons). This catalog is about tokens and style direction, not brand identity.
All 30 tools are read-only and platform-aware where applicable. Every list_* supports limit / offset; every get_* returns a NOT_FOUND payload when the id does not exist.
| Tool | Purpose | Key args |
|---|---|---|
list_styles · get_style · list_style_facets |
Complete design styles (palette + typography + density) | platform, family, tone, density, tags |
list_palettes · get_palette · list_palette_facets |
Palettes with role mapping and contrast pairs | platform, family, mood, appearance |
list_font_pairs · get_font_pair · list_font_pair_facets |
Heading + body + mono font pairings | platform, category_id, style_fit |
list_domains · get_domain · list_domain_facets |
Product domains with top-N style/palette/font recommendations | category_id, audience, tone, top_n |
list_chart_types · get_chart_type · list_chart_type_facets |
Chart types with when-to-use, accessibility grades, library picks | data_type, a11y_grade, library, keyword |
list_landing_patterns · get_landing_pattern · list_landing_pattern_facets |
Landing page layouts with section order and CTA placement | keyword, cta_placement |
list_icons · get_icon · list_icon_facets |
Individual icons with import code and usage snippets | category, library, style, keyword |
list_inspiration_pages · get_inspiration_page · list_inspiration_page_facets |
Curated real-world page references | page_type, style_family, industry, mood, keyword |
list_animations · get_animation · list_animation_facets |
Animation snippets with library, category, complexity | category, framework, complexity, library, keyword |
list_social_templates · get_social_template · list_social_template_facets |
Story/carousel design templates: fillable HTML/CSS with content slots | format, category, platform, style_tag, slides, keyword |
designlib-mcp is a stateless FastMCP server backed by a single Postgres database — no Supabase, no cloud lock-in. The only required secret is DATABASE_URL.
pip install -e .
export DATABASE_URL="postgresql://user:pass@host:5432/designlib"
export DESIGNLIB_TRANSPORT=http # or pass --http
export PORT=8000
designlib-mcp # serves /mcp on $PORTOr with Docker (the repo ships a Dockerfile):
docker build -t designlib-mcp .
docker run -p 8000:8000 -e DATABASE_URL="postgresql://user:pass@host:5432/designlib" designlib-mcpBring up the schema with migrations/selfhosted_schema.sql, then load catalog data. The full operator guide — schema, seeding, and a Coolify + Hetzner deployment walkthrough — lives in docs/self-hosting.md.
The hosted
designlib.app-builders.clubdeployment runs this exact image against Postgres 16 behind Coolify.
designlib-mcp is one of three open-source tools we ship for builders who code with AI:
- mvp-builder — Document-Driven Development for Claude Code. Specs before code, TDD enforced, self-review catches stubs.
- design-builder — production-grade UIs from Claude Code without the AI-slop look. Uses
designlib-mcpunder the hood. - designlib-mcp — this repo. The design-knowledge MCP. Standalone and client-agnostic.
Methodology and build films at app-builders.club · YouTube @appbuildersclub
MIT. See LICENSE.