API Reference

// Agent calls this at the start of a UI task
const designSystem = await mcp.call("get_design_system");

// Or fetch a specific section to reduce token usage
const colourSystem = await mcp.call("get_design_system", {
  section: "colour"
});

// Get all CSS tokens
const tokens = await mcp.call("get_tokens", { format: "css" });

// Get only colour tokens as JSON
const colours = await mcp.call("get_tokens", {
  format: "json",
  type: "colour"
});

// Get Tailwind theme extension
const tailwindTheme = await mcp.call("get_tokens", {
  format: "tailwind"
});

// Get the Button component spec before building it
const buttonSpec = await mcp.call("get_component", {
  name: "Button"
});

// Returns: anatomy, token mappings for default/hover/focus/active/disabled/loading/error,
// and a full TSX example using the design system tokens

// Discover all available components
const components = await mcp.call("list_components");

// Returns an array like:
// [
//   { name: "Button", description: "Primary action element", variants: 4 },
//   { name: "Card", description: "Content container", variants: 2 },
//   ...
// ]

const result = await mcp.call("check_compliance", {
  code: `
    <div style={{ color: "#6366f1" }}>
      <button className="bg-blue-500 text-white px-4 py-2">
        Submit
      </button>
    </div>
  `
});

// Returns:
// {
//   score: 42,
//   violations: [
//     { rule: "no-hardcoded-colours", line: 2, fix: "Use var(--color-primary) instead of #6366f1" },
//     { rule: "use-design-tokens", line: 3, fix: "Replace bg-blue-500 with bg-[var(--color-primary)]" }
//   ]
// }

// Render a component for visual review
await mcp.call("preview", {
  code: `
    export default function PricingCard({ plan, price }: { plan: string; price: string }) {
      return (
        <div className="rounded-xl border border-gray-200 p-6 bg-white">
          <h3 className="text-lg font-semibold text-[#0a0a0a]">{plan}</h3>
          <p className="text-3xl font-bold text-gray-900 mt-2">{price}</p>
        </div>
      );
    }
  `,
  props: { plan: "Pro", price: "£19/mo" }
});
// Opens/refreshes localhost:4321 with the rendered component

// Push a generated component to Figma for designer review (capture mode)
await mcp.call("push_to_figma", {
  code: `
    export default function HeroBanner() {
      return (
        <section className="bg-[var(--color-bg-surface)] px-8 py-16">
          <h1 className="text-5xl font-black text-[var(--text-primary)]">
            Your AI builds on-brand.
          </h1>
        </section>
      );
    }
  `,
  pageName: "Sprint 3 -  Components",
  frameName: "HeroBanner / Desktop"
});

// Push as editable Figma objects (native mode, no Playwright needed)
await mcp.call("push_to_figma", {
  code: `
    export default function HeroBanner() {
      return (
        <section className="bg-[var(--color-bg-surface)] px-8 py-16">
          <h1 className="text-5xl font-black text-[var(--text-primary)]">
            Your AI builds on-brand.
          </h1>
        </section>
      );
    }
  `,
  mode: "native",
  pageName: "Sprint 3 -  Components"
});

// Push tokens to an existing Figma file
await mcp.call("push_tokens_to_figma", {
  fileKey: "EHmQZ1wq5qHUcifyRYtiBC"
});

// Push tokens to a new Figma file
await mcp.call("push_tokens_to_figma");

// Capture a reference site into Figma
await mcp.call("url_to_figma", {
  url: "https://linear.app",
  pageName: "Reference -  Linear",
  viewports: [
    { width: 1440, height: 900 },
    { width: 390, height: 844 }
  ]
});
// Creates annotated frames in Figma with the captured screenshots

// Design a dashboard directly in Figma using your tokens
await mcp.call("design_in_figma", {
  prompt: "A settings page with sidebar navigation and dark theme",
  fileKey: "EHmQZ1wq5qHUcifyRYtiBC"
});
// Returns token palette + Figma MCP instructions

// Add a new brand colour token
await mcp.call("update_tokens", {
  tokens: { "--color-brand": "#6366F1", "--color-brand-hover": "#7577F3" },
  format: "css"
});

// Get all reference screenshots
const screenshots = await mcp.call("get_screenshots");

// Get only the viewport-cropped screenshot
const viewport = await mcp.call("get_screenshots", {
  type: "viewport"
});

// Scan the current directory for all components and stories
const result = await mcp.call("scan_project");

// Scan a specific path for Storybook stories only
const stories = await mcp.call("scan_project", {
  path: "./src",
  type: "storybook"
});

// Returns:
// {
//   components: [
//     { name: "Button", path: "src/components/Button.tsx", importPath: "@/components/Button", props: [...] },
//     ...
//   ],
//   stories: [
//     { name: "ButtonStory", component: "Button", path: "src/stories/Button.stories.tsx" },
//     ...
//   ]
// }

// Check everything
const result = await mcp.call("check_setup");

// Check only Figma setup and auto-fix issues
const fixed = await mcp.call("check_setup", {
  focus: "figma",
  fix: true
});