Agents

const manifest = await fetch("https://design.mattermode.com/design-system.json").then((r) => r.json());
const version = manifest.version;                       // → "2.3.0"
const tokens = manifest.tokens;                         // grouped by kind
const components = manifest.components;                 // canonical export list
const button = components.find((c) => c.name === "Button");

{
  name: string;        // "fg" / "peach2" / "radius-md"
  css_var: string;     // "--fg" / "--peach-2" / "--radius-md"
  value: string;       // "#0D0D0D" / "12px" / "0 1px 2px rgba(0,0,0,0.05)"
  source: "matter" | "brand";
  ts_path: string;     // "packages/tokens/src/index.ts#colors.fg"
  group?: string;      // "Foreground" / "Surface" / "Status" — taxonomy
  doc?: string;        // optional inline doc string from the TS source
}

{
  name: string;                    // "Button"
  import_path: "@matter/components" | "@repo/brand/components";
  source_url: string;              // GitHub blob URL
  source_path: string;             // relative path in the monorepo
  has_page: boolean;
  page_url?: string;               // /components/button when has_page
}

import Ajv from "ajv";
import schema from "./design-system.schema.json";

const ajv = new Ajv({ strict: true });
const validate = ajv.compile(schema);

const manifest = await fetch(MANIFEST_URL).then((r) => r.json());
if (!validate(manifest)) {
  throw new Error(`Schema drift: ${ajv.errorsText(validate.errors)}`);
}

// Pattern 1 — exact pin. Strict but brittle; agent breaks on every release.
if (manifest.version !== "2.3.0") throw new Error("Bumped");

// Pattern 2 — minor pin via semver. Tolerates patches; surfaces minor + major.
import semver from "semver";
if (!semver.satisfies(manifest.version, "~2.3.0")) throw new Error("Bumped beyond patch");

// Pattern 3 — drift detection. Allow any version, but log when it changes.
if (manifest.version !== lastSeenVersion) {
  logger.info("Design system bumped", { from: lastSeenVersion, to: manifest.version });
  lastSeenVersion = manifest.version;
}

curl -s https://design.mattermode.com/llms-design.txt

const designSystemContext = await fetch("https://design.mattermode.com/llms-design.txt").then((r) => r.text());

const systemPrompt = `
You are an agent generating UI code for Matter consumers. The Matter design
system is documented below. Generate code that consumes the documented
components and tokens; never invent tokens or components that don't appear
in the manifest.

${designSystemContext}

When responding, cite the component you used by its name and link (e.g.
"Used <Pill> from /components/pill").
`;

curl -s https://design.mattermode.com/api/raw/components/button

async function generateComponent(userRequest: string) {
  const manifest = await getManifest();
  const candidates = manifest.components.map((c) => `${c.name} (${c.import_path})`);

  const result = await claude.messages.create({
    system: `${await getDesignSystemContext()}\n\nGenerate code consuming only the listed components.`,
    messages: [
      { role: "user", content: `Build me: ${userRequest}\n\nAvailable components: ${candidates.join(", ")}` },
    ],
  });

  return result.content;
}

function scoreAgainstSystem(generatedSource: string, manifest: Manifest) {
  const componentNames = new Set(manifest.components.map((c) => c.name));
  const tokenVars = new Set(manifest.tokens.colors.map((t) => t.css_var));

  const issues: string[] = [];

  // Every import from @matter/components or @repo/brand should be in the manifest.
  const imports = parseImports(generatedSource);
  for (const imp of imports) {
    if (imp.from.startsWith("@matter") || imp.from.startsWith("@repo/brand")) {
      for (const name of imp.names) {
        if (!componentNames.has(name)) {
          issues.push(`Unknown component: ${name} from ${imp.from}`);
        }
      }
    }
  }

  // Every CSS var should be in the token surface.
  const usedVars = extractCssVars(generatedSource);
  for (const v of usedVars) {
    if (!tokenVars.has(v)) {
      issues.push(`Unknown CSS variable: ${v}`);
    }
  }

  // No raw hex literals.
  const hex = generatedSource.match(/#[0-9a-fA-F]{3,8}\b/g);
  if (hex) {
    issues.push(`Raw hex literals: ${hex.slice(0, 3).join(", ")}…`);
  }

  return issues;
}

function getCachedManifest(): Manifest | null {
  try {
    return JSON.parse(localStorage.getItem("ds-manifest") ?? "");
  } catch {
    return null;
  }
}

async function refreshIfDrifted() {
  const cached = getCachedManifest();
  const liveHead = await fetch("https://design.mattermode.com/design-system.json", { method: "HEAD" });
  const liveEtag = liveHead.headers.get("etag");

  if (cached?.etag === liveEtag) return cached;

  const live = await fetch("https://design.mattermode.com/design-system.json").then((r) => r.json());
  localStorage.setItem("ds-manifest", JSON.stringify({ ...live, etag: liveEtag }));
  return live;
}

function withCitation(component: { name: string; import_path: string; page_url?: string }) {
  return `Used <${component.name}> from ${component.import_path}${component.page_url ? ` (${component.page_url})` : ""}.`;
}

const voiceRules = manifest.voice.rules.join("\n");
const systemPrompt = `${corpusContext}\n\nWhen writing copy, follow:\n${voiceRules}`;