# DesignVault

> A free library of 1,231 original website designs — sections, components, effects and full pages — each with live code (HTML/CSS/vanilla JS, plus React and Next wrappers), design tokens, layout/typography/motion specs and agent instructions. MIT licence. English and Hebrew (RTL) designs; search understands English and Hebrew.

## Connect an AI agent (MCP, no sign-up)

- MCP endpoint (Streamable HTTP, stateless): https://designvault.sites.tab.bot/mcp
- Claude Code: `claude mcp add --transport http designvault https://designvault.sites.tab.bot/mcp`
- Any MCP client: add a remote/HTTP server with the URL above.
- Setup page: https://designvault.sites.tab.bot/agents

## MCP tools (9)

- `search_designs` — search in English or Hebrew (prefixes, plurals and typos are understood); filters kind, category, style, industry, color, mode; `compact: true` for small answers; `include_facets: true` for counts.
- `get_design` — spec, tokens, animations, responsive and accessibility notes, agent instructions.
- `get_design_code` — files for `html` | `react` | `next-tailwind`; `include_runtime: false` skips the shared dv-behavior file after the first design; `tailwind: "v4"` (default) or `"v3"`.
- `get_design_tokens` — tokens as JSON, CSS variables or a Tailwind object.
- `get_animation_spec` — motion timings, triggers, keyframes, reduced-motion handling.
- `get_implementation_guide` — step-by-step brief; honours `project_context` (Tailwind v4/v3, a brand colour like #0e7490, Hebrew/RTL, TypeScript).
- `list_taxonomy` — kinds, categories, styles, industries, colours with counts.
- `similar_designs` — related designs (same language/direction first).
- `compose_page` — stack sections into one page with one theme; root `<html lang dir>` follows the sections' majority language or `lang`.

Typical flow: search_designs → get_design → get_implementation_guide (with project_context) → get_design_code → write the files.

## Honest notes

- React / Next files are wrappers: the original vanilla JS runs inside useEffect through a small scoped runtime (dv-behavior). Working, not an idiomatic React rewrite.
- "Next + Tailwind": the design keeps its own plain CSS; Tailwind gets the tokens through an @theme block.

## REST API (read-only, CORS open)

- `GET /api/designs?q=&kind=&category=&style=&industry=&color=&mode=&sort=&limit=&offset=` — search (same engine as MCP)
- `GET /api/designs/{slug}` · `/code?framework=html|react|next-tailwind` · `/guide?framework=&context=` · `/preview` · `/similar`
- `GET /api/meta` — taxonomy and counts

## Pages

- Every design has its own page: https://designvault.sites.tab.bot/d/{slug} (e.g. /d/page-event-low-tide); add `?lang=he` for the Hebrew interface.
- Sitemap: https://designvault.sites.tab.bot/sitemap.xml