Blockboard Design System

What I Built

A server, and the app that runs on it

Two separate things carry this project, and it's worth naming them before the screenshots start. I wrote and deployed the design system as a web server. Then I built a shipping product whose entire interface comes out of it.

Component Delivery

Live previews, copy-paste source

Every component gets a route on the server, and the page renders the real thing — styled by the actual product CSS, not screenshots — above its props table, its slots, its CSS classes, and its full Vue 3 source. There's no npm package to version-chase: consumers copy the source into their app, downloads resolve the complete dependency closure, and improvements flow back to the repo as PRs.

<script setup lang="ts">
import { computed } from "vue";
import Icon from "./Icon.vue";

// .btn family. `href` renders an <a>, otherwise a <button type="button">.
// `icon` is a leading icon; the default slot is the label. Extra classes
// and handlers fall through to the root element (Vue attr fallthrough).
const props = defineProps<{
  variant?: "primary" | "cta" | "secondary" | "outline" | "ghost";
  size?: "sm" | "lg";
  block?: boolean;
  icon?: string;
  href?: string;
}>();

const classes = computed(() => [
  "btn",
  props.variant ? `btn--${props.variant}` : "",
  props.size ? `btn--${props.size}` : "",
  props.block ? "btn--block" : "",
]);
</script>

Button.vue verbatim — components ship no <style>, so the copy lands in your app already speaking tokens

Built for Agents

The same server, spoken to over MCP

This is the migration path, and the reason the system is a deployment instead of a document. Developers on the team increasingly ship UI through coding agents — and a system their agents can't read is a system that gets ignored. So the same deployment that serves the portal also answers MCP over Streamable HTTP: nothing to install, and it can never drift from the pages a human reads, because it's the same generated content behind a different door. An agent discovers components, pulls one with its complete closure as ready-to-write files, and reads the tokens and brand rules in the same session — so the code it writes already obeys the design law. An llms.txt covers the agents that read before they call tools.

> get_component("button")

{
  "files": [
    { "target": "src/ui/Button.vue", "content": "…" },
    { "target": "src/ui/Icon.vue",   "content": "…" },
    { "target": "src/ui/icons.ts",   "content": "…" }
  ],
  "props": [
    { "name": "variant",
      "type": "primary | cta | secondary | outline | ghost" }
  ],
  "cssBlocks": ["btn"],
  "install": {
    "note": "Components ship no <style>. Load the base
             style layer once (tokens + reference CSS).",
    "styles": "/tokens.css"
  }
}

One call returns the closure — every file with its target path, the props, the CSS blocks, and the install note. The agent writes files, not guesses