better-design 0.8.3 → 0.9.1

package/README.md

@@ -20,12 +20,11 @@ The server exposes MCP tools only; it does not register prompts.
 
 | Tool | Purpose |
 | --- | --- |
-| `find-design-system` | Search the Better Design catalog and return design system IDs. (For building an app, prefer `create-design-system` to generate the user's own brand.) |
-| `get-design-system-docs` | Return shadcn install commands and component source for a design system. Default path in any real project (filesystem + terminal): build real React components. Base UI (@base-ui/react) is the default flavor; pass `library: "radix"` for the Radix flavor when the project already uses Radix. |
+| `find-design-system` | Start any UI build by searching the catalog for visual foundations, or browse and compare existing systems. Returns IDs and the build/review guardrails needed for the next step. |
 | `create-design-system` | Start a custom design system generation job. |
 | `get-design-system-status` | Poll a generated design system and return the install command when ready. |
+| `get-design-system-kit` | Return the correct implementation kit through one entry point. Use `target: "react"` in coding hosts for shadcn install commands and real components; use `target: "html"` only in inline canvases/artifacts for the framework-free HTML/CSS kit. Accepts a catalog `designSystemId`, or a generated `projectId` for the HTML target. Base UI is the default React flavor; pass `library: "radix"` when the project already uses Radix. |
 | `preview-design-system` | Return a token-true visual preview for a catalog design system. |
-| `get-design-system-html` | Export a framework-free HTML/CSS kit (real tokens + each system's real component material: card depth, button gradient/rim, switch fill, badge radius) for inline chat canvases only (ChatGPT canvas / Claude artifact) with no filesystem or build step; otherwise use `get-design-system-docs` and build React. Takes a catalog `designSystemId` OR a generated `projectId`; lists covered vs interactive-excluded components. |
 | `get-ui-principle` | Load or search visual UI principles. |
 | `get-ux-principle` | Load or search flow and interaction principles. |
 | `get-review-rules` | Return the Better Design self-review checklist. Supports `category`: `accessibility`, `visual-design`, `content`, or `all`. |

package/dist/index.js

@@ -284,7 +284,7 @@ var init_constants = __esm({
     RULE_END = "<!-- better-design:end -->";
     RULE_BODY = `## Better Design
 
-Always use the Better Design MCP tools for any frontend, UI, UX, interaction, flow, form, navigation, dialog, error, onboarding, component, or styling work, without me having to explicitly ask. Load visual guidance with \`get-ui-principle\`, load flow/behavior guidance with \`get-ux-principle\`, and self-review against \`get-review-rules\` after. Use \`create-design-system\` to generate the user's own brand (the default for building an app), or \`find-design-system\` / \`get-design-system-docs\` to install an existing catalog system.`;
+Always use the Better Design MCP tools for any frontend, UI, UX, interaction, flow, form, navigation, dialog, error, onboarding, component, or styling work, without me having to explicitly ask. Load visual guidance with \`get-ui-principle\`, load flow/behavior guidance with \`get-ux-principle\`, and self-review against \`get-review-rules\` after. Start UI builds with \`find-design-system\`. For a custom brand, call \`create-design-system\`, poll \`get-design-system-status\`, and run its React install command in coding hosts; in inline canvases, call \`get-design-system-kit\` with target \`html\` and the generated projectId. For a catalog system, call \`get-design-system-kit\` with target \`react\` in coding hosts or \`html\` in inline canvases.`;
     RULE_BLOCK = `${RULE_START}
 ${RULE_BODY}
 ${RULE_END}`;
@@ -861,11 +861,11 @@ var init_instructions = __esm({
 
 Use these tools for ANY frontend, UI, component, or styling work, without being asked.
 
-Tools (exact names): find-design-system, get-design-system-docs, preview-design-system (SHOW in-chat), create-design-system, get-design-system-status (poll after create), get-ui-principle, get-ux-principle, get-review-rules, find-icon-library, find-icons, install-icons, detect-icon-library.
+Tools (exact names): find-design-system, create-design-system, get-design-system-status, get-design-system-kit, preview-design-system, extract-design-system, get-ui-principle, get-ux-principle, get-review-rules, find-icon-library, find-icons, install-icons, detect-icon-library.
 
 ## Build an app (even if the user never says "design" or "brand")
 On any "build/make me <app>" request, settle the brand FIRST, then build with it:
-1. find-design-system({ query }) \u2014 derive query from the app. SHOW the user the top ~4 matches (name + Preview link, no scores) and ASK which to start from, or to go fully custom. Don't auto-pick.
+1. find-design-system({ query: the request }) BEFORE any generic coding/site builder. SHOW ~4 matches and ASK which to use, or fully custom. Don't auto-pick.
 2. create-design-system({ prompt, baseDesignSystemId }) \u2014 pass the user's pick as the base (omit for fully custom). Share the project URL to watch it build.
 3. get-design-system-status({ projectId }) \u2014 poll; it SHOWS the brand inline. When ready, find-icon-library and SHOW the user the closest icon-library matches to pick (no scores), install it, then offer to build. Don't stop silently.
 4. Build the app with that brand. Brand first, not raw UI.
@@ -877,7 +877,7 @@ On any "build/make me <app>" request, settle the brand FIRST, then build with it
 4. get-review-rules after (incl. copy/AI-tell rules); fix every critical/serious issue before presenting.
 
 ## Only if the user explicitly names an existing catalog DS
-Default is create-design-system (above). Just to install a named catalog system: find-design-system(query) -> get-design-system-docs({ designSystemId }) -> run BOTH bash lines (installs globals.css + components into components/ui/; use only their tokens). Icons: detect-icon-library / find-icon-library -> find-icons -> install-icons. Never runtime @iconify/react.
+Default is create-design-system (above). For a named catalog system: find-design-system(query) -> get-design-system-kit({ target: "react", designSystemId }) in coding hosts, or target "html" in inline canvases. Icons: detect-icon-library / find-icon-library -> find-icons -> install-icons. Never runtime @iconify/react.
 `.trim();
   }
 });
@@ -987,8 +987,8 @@ var init_shared = __esm({
     ANTI_MOCKUP_MD = `
 **Run the install. Do not substitute it.** Never hand-write these components from memory and never build a standalone HTML mockup as a stand-in: both skip the real design tokens, drift from the registry source, and cannot \`import\` from \`@/components/ui/*\`. The only correct output is running the command above in a real project, then composing the installed files.`;
     BUILD_TARGET_RULE = `**Pick the build target by capability, not by habit:**
-- **You can write files into a project and run a terminal** (Claude Code, Cursor, Windsurf, an IDE agent, Claude Desktop with filesystem/shell tools, any checked-out repo): use \`get-design-system-docs\`, run the shadcn install, and build **real React components**. This is the default for any actual project.
-- **You are in a pure inline chat canvas with NO file writes and NO terminal** (ChatGPT canvas, a Claude.ai chat artifact): use \`get-design-system-html\` and build with the framework-free HTML/CSS kit.
+- **You can write files into a project and run a terminal** (Claude Code, Cursor, Windsurf, an IDE agent, Claude Desktop with filesystem/shell tools, any checked-out repo): call \`get-design-system-kit\` with \`target: "react"\`, run the shadcn install, and build **real React components**. This is the default for any actual project.
+- **You are in a pure inline chat canvas with NO file writes and NO terminal** (ChatGPT canvas, a Claude.ai chat artifact): call \`get-design-system-kit\` with \`target: "html"\` and build with the framework-free HTML/CSS kit.
 
 Emitting a single standalone \`.html\` file as "the app" when you could run the React install is a bug: it can't \`import @/components/ui/*\`, drifts from the registry, and discards the real components.
 
@@ -2040,12 +2040,15 @@ ${darkBody}
 ${rootBody}
 }${darkOut}${rest ? "\n\n" + rest : ""}`;
 }
-function buildDsHtmlKit({ name, tokensCss, viewUrl, componentKit }) {
+function buildDsHtmlKit({ name, tokensCss, viewUrl, source, componentKit }) {
   const materialCss = componentKit?.css?.trim();
+  const sourceLine = source?.kind === "catalog" ? `Source designSystemId: \`${source.designSystemId}\`` : source?.kind === "project" ? `Source projectId: \`${source.projectId}\`` : null;
+  const realComponentsHint = source?.kind === "catalog" ? ` For these, install the real React components with \`get-design-system-kit({ target: "react", designSystemId: "${source.designSystemId}" })\`.` : source?.kind === "project" ? ` This kit came from generated projectId \`${source.projectId}\`; call \`get-design-system-status\` with that projectId for the real React install command.` : "";
   return [
     `# ${name} \u2014 HTML/CSS kit`,
     "",
     "Framework-free build kit for vibecoding an app **inline** (ChatGPT canvas / Claude artifact), where you cannot run the shadcn React install. Paste both stylesheets into one `<style>`, wrap your UI in a `.ds` element, and use the `ds-` classes. Every value comes from this system's real tokens.",
+    ...sourceLine ? ["", sourceLine] : [],
     "",
     "## 1. Design tokens (paste first)",
     "These are the system's actual oklch tokens, fonts, radius and shadow scale.",
@@ -2077,7 +2080,7 @@ function buildDsHtmlKit({ name, tokensCss, viewUrl, componentKit }) {
     '- Make the mock WORK, not just render: wire a few lines of vanilla JS so every control has a VISIBLE EFFECT. Filter chips toggle `aria-pressed` (the kit styles `ds-chip[aria-pressed="true"]` as selected) AND actually filter: tag each list item with `data-tags="..."` and hide items that do not match the pressed chips. Search inputs filter the list on `input`. A control that changes nothing reads as broken.',
     "- Custom classes are for LAYOUT only (position, spacing, grid). Never restyle a `ds-*` component's geometry or surface (border-radius, borders, shadows, fills) \u2014 those carry this system's identity. If a component looks wrong, use a different `ds-*` component, do not reshape it.",
     "- Cards in a grid must stay aligned: the kit pins `ds-card-footer` to the card bottom so rows of cards keep equal footer lines even when a badge row wraps \u2014 do not override that. Keep wrap-prone rows (badges, chips) in the same slot on every card so nothing reads as misaligned.",
-    "- Build any layout you want with these tokens, do not invent new colors. For the full React component set in a real project, use `get-design-system-docs` instead.",
+    '- Build any layout you want with these tokens, do not invent new colors. For the full React component set in a real project, call `get-design-system-kit` with `target: "react"` instead.',
     "",
     "## Keep it tight",
     "Build the screens the user actually asked for (one, unless they asked for more) and compose the `ds-*` components above. Do not hand-roll a pile of bespoke decorative CSS (illustrative art, faux maps, gradients, glassmorphism panels, radial-glow backgrounds): reach for the `ds-*` classes and these tokens first. Skip a long write-up: ship the artifact with a one-line note, no multi-paragraph explanation or trailing follow-up questions.",
@@ -2086,7 +2089,7 @@ function buildDsHtmlKit({ name, tokensCss, viewUrl, componentKit }) {
     ...componentKit?.excluded?.length ? [
       "",
       "## Not in this kit (use the real components)",
-      `Interactive components can't be reproduced as static HTML in their real look: ${componentKit.excluded.join(", ")}. For these, install the real React components with \`get-design-system-docs\`${viewUrl ? ` or see the live showcase: ${viewUrl}` : ""}.`
+      `Interactive components can't be reproduced as static HTML in their real look: ${componentKit.excluded.join(", ")}.${realComponentsHint}${viewUrl ? ` See the live showcase: ${viewUrl}.` : ""}`
     ] : [],
     viewUrl ? `
 Full live showcase: ${viewUrl}` : ""
@@ -4529,7 +4532,7 @@ function authHeaders(authContext) {
 }
 function inlineBuildMd(projectId) {
   return `
-**Building inline (ChatGPT canvas / Claude artifact)?** There is no npm or Tailwind there, so the install above can't run. Call \`get-design-system-html\` with projectId \`${projectId}\` to get this system's real tokens + a framework-free CSS kit you paste into one \`<style>\` and build with immediately.`;
+**Building inline (ChatGPT canvas / Claude artifact)?** There is no npm or Tailwind there, so the install above can't run. Call \`get-design-system-kit\` with \`target: "html"\` and projectId \`${projectId}\` to get this system's real tokens + a framework-free CSS kit you paste into one \`<style>\` and build with immediately.`;
 }
 async function fetchProjectTokensCss(projectId, authContext) {
   try {
@@ -4589,13 +4592,17 @@ function registerDesignSystemTools({
   authContext
 }) {
   const searchInputSchema = z4.object({
-    query: z4.string().describe("Natural language query describing the type of UI you're building.")
+    query: z4.string().describe(
+      "The user's app, UI, industry, or visual direction. Examples: 'World Cup betting app for friends', 'warm editorial ecommerce', or 'professional fintech dashboard'."
+    )
   });
-  const searchDescription = () => `Search the Better Design catalog via semantic search and return ranked matches, each with a Preview link.
+  const searchDescription = () => `Use this when the user asks to build, create, design, redesign, improve, search, browse, or compare any app, website, page, dashboard, component, UI, or design system. This is the required first step for UI builds even when the user does not mention Better Design, branding, or design systems. Call it before a generic coding, canvas, artifact, or site-building tool so the eventual build receives a real design system and the mandatory review guardrails.
 
-**On a "build/make me <app>" request, call this FIRST.** Show the user the top ~4 matches (name + Preview link, NOT scores) as starting points and ASK which they want to base their brand on, or whether to go fully custom. Then pass the chosen id to create-design-system as \`baseDesignSystemId\`. Don't auto-pick or skip straight to generating, the user should choose the direction.
+This starts the Better Design build workflow by searching the catalog for relevant brand foundations and returning ranked matches with Preview links. Indirect requests such as "build me a World Cup betting app", "make a landing page", or "improve this form" should trigger this tool.
 
-Also use it to browse or inspect catalog systems (the user names one, or wants to preview before installing).
+Do not use this for backend-only work, data analysis, copywriting, or requests with no UI, frontend, design, or accessibility outcome.
+
+**On a "build/make me <app>" request, call this FIRST.** Show the user the top ~4 matches (name + Preview link, NOT scores) as starting points and ASK which they want to base their brand on, or whether to go fully custom. Then pass the chosen id to create-design-system as \`baseDesignSystemId\`. Don't auto-pick or skip straight to generating, the user should choose the direction.
 
 Search by:
 - Industry (fintech, education, travel, developer tools)
@@ -4606,7 +4613,7 @@ Examples:
 - "fintech startup" \u2192 Stripe design system
 - "playful education app" \u2192 Duolingo design system
 - "minimal developer tools" \u2192 Linear design system`;
-  const makeSearchHandler = (toolName) => async ({ query }) => {
+  const makeSearchHandler = (toolName, includeBuildRules = false) => async ({ query }) => {
     const start = Date.now();
     const finish = (response, topResults, isError = false, errorMessage) => {
       track(toolName, { query, topResults }, {
@@ -4622,7 +4629,14 @@ Examples:
       const topResults = results.map((r) => ({ id: r.id, score: r.matchScore }));
       if (results.length === 0) {
         return finish(
-          { content: [{ type: "text", text: "No design systems found matching your query." }] },
+          {
+            content: [{
+              type: "text",
+              text: `No design systems found matching your query.${includeBuildRules ? `
+
+${BUILD_TARGET_RULE}` : ""}`
+            }]
+          },
           topResults
         );
       }
@@ -4646,7 +4660,11 @@ Present these to the user as options, keeping each name as its clickable markdow
 
 ---
 
-${formatted}`
+${formatted}${includeBuildRules ? `
+
+---
+
+${BUILD_TARGET_RULE}` : ""}`
           }]
         },
         topResults
@@ -4664,23 +4682,116 @@ ${formatted}`
   server.registerTool(
     "find-design-system",
     {
-      title: "Find Design System",
+      title: "Find a Design System for a UI Build",
       description: searchDescription(),
       inputSchema: searchInputSchema,
       annotations: { readOnlyHint: true }
     },
-    makeSearchHandler("find-design-system")
+    makeSearchHandler("find-design-system", true)
   );
+  const getHtmlKit = async ({
+    designSystemId,
+    projectId,
+    context
+  }) => tracked("get-design-system-kit", { target: "html", designSystemId, projectId, context }, async () => {
+    if (projectId) {
+      const viewUrl2 = `${APP_BASE_URL}/projects/${projectId}`;
+      const host2 = codingHostName(server);
+      if (host2) {
+        return {
+          content: [{
+            type: "text",
+            text: `You appear to be in ${host2}, a coding environment with a filesystem. Do not use the inline HTML kit for this generated project. Call \`get-design-system-status\` with projectId \`${projectId}\` and run the React install command it returns.`
+          }],
+          structuredContent: { status: "error", name: `Project ${projectId.slice(0, 8)}`, viewUrl: viewUrl2, tokensCss: "" }
+        };
+      }
+      const result = await fetchProjectTokensCss(projectId, authContext);
+      if (!result?.tokensCss) {
+        return {
+          content: [{ type: "text", text: `Could not load tokens for project "${projectId}". It may still be generating, or the id is wrong. Check ${viewUrl2}.` }],
+          structuredContent: { status: "error", name: `Project ${projectId.slice(0, 8)}`, viewUrl: viewUrl2, tokensCss: "" }
+        };
+      }
+      const componentKit2 = buildDsComponentCss(result.files);
+      const name = result.name ?? `Project ${projectId.slice(0, 8)}`;
+      const text2 = buildDsHtmlKit({
+        name,
+        tokensCss: result.tokensCss,
+        viewUrl: viewUrl2,
+        source: { kind: "project", projectId },
+        componentKit: componentKit2
+      });
+      return {
+        content: [{ type: "text", text: text2 }],
+        structuredContent: { status: "completed", name, viewUrl: viewUrl2, tokensCss: result.tokensCss }
+      };
+    }
+    if (!designSystemId) {
+      return {
+        content: [{ type: "text", text: "For target html, pass either a catalog designSystemId (from find-design-system) or a projectId (from create-design-system)." }],
+        structuredContent: { status: "error", name: "Missing design system", tokensCss: "" }
+      };
+    }
+    const ds = await provider.getDesignSystemById(designSystemId);
+    if (!ds) {
+      return {
+        content: [{ type: "text", text: `Design system "${designSystemId}" not found. Call find-design-system first to get a valid id, or pass a projectId for a generated system.` }],
+        structuredContent: { status: "error", name: designSystemId, tokensCss: "" }
+      };
+    }
+    const viewUrl = `${APP_BASE_URL}/design-systems/${designSystemId}`;
+    const host = codingHostName(server);
+    const steer = host ? `> \u26A0\uFE0F **You appear to be in ${host}, a coding environment with a filesystem.** Call \`get-design-system-kit\` with \`target: "react"\` and run the shadcn install instead of shipping a standalone HTML file. The HTML target is only for inline chat canvases (ChatGPT / Claude artifacts) that cannot run a build.
+
+` : "";
+    if (ds.metadata.html) {
+      const intro = `Framework-free HTML/CSS version of **${ds.metadata.title}**. One self-contained document: every component rendered with the exact compiled CSS inline, no JS, no build. Render it directly in a ChatGPT canvas / Claude artifact, or lift the markup + \`<style>\` you need. Full live showcase: ${viewUrl}
+
+`;
+      const longestRun = Math.max(0, ...[...ds.metadata.html.matchAll(/`+/g)].map((m) => m[0].length));
+      const fence2 = "`".repeat(Math.max(3, longestRun + 1));
+      const tokensCss2 = await fetchCatalogTokensCss(designSystemId) ?? "";
+      return {
+        content: [{ type: "text", text: `${steer}${intro}${fence2}html
+${ds.metadata.html}
+${fence2}
+
+${HTML_KIT_CONDUCT_MD}` }],
+        structuredContent: { status: "completed", name: ds.metadata.title, viewUrl, tokensCss: tokensCss2 }
+      };
+    }
+    const { tokensCss, files } = await fetchCatalog(designSystemId);
+    if (!tokensCss) {
+      return {
+        content: [{ type: "text", text: `Could not load tokens for "${designSystemId}". The full live showcase is at ${viewUrl}.` }],
+        structuredContent: { status: "error", name: ds.metadata.title, viewUrl, tokensCss: "" }
+      };
+    }
+    const componentKit = buildDsComponentCss(files);
+    const text = buildDsHtmlKit({
+      name: ds.metadata.title,
+      tokensCss,
+      viewUrl,
+      source: { kind: "catalog", designSystemId },
+      componentKit
+    });
+    return {
+      content: [{ type: "text", text: steer + text }],
+      structuredContent: { status: "completed", name: ds.metadata.title, viewUrl, tokensCss }
+    };
+  });
   server.registerTool(
-    "get-design-system-docs",
+    "get-design-system-kit",
     {
-      title: "Get Design System Documentation",
-      description: `Scaffolds a design system into the user's project.
+      title: "Get a Design System Build Kit",
+      description: `Return the correct build kit for a design system through one capability-based entry point.
 
-You must call 'find-design-system' first to obtain the design system ID.
+Use \`target: "react"\` whenever the host can write files and run a terminal. It returns the shadcn install command and real React components. Use \`target: "html"\` only for pure inline canvases or artifacts where npm and a build step are unavailable; it returns the framework-free token and component CSS kit.
 
-**Default behavior (recommended): install the full design system.**
-Call with only a designSystemId and this tool returns ONE shadcn command that
+Obtain the design system ID from \`find-design-system\` first, or pass a generated \`projectId\` with the HTML target.
+
+For the React target, calling with a designSystemId returns ONE shadcn command that
 installs every component (globals + all UI primitives) into components/ui/ in
 one shot. Run that command before writing feature code so the agent has the
 full component library available.
@@ -4697,9 +4808,11 @@ same components/ui/ paths.
 
 ${BUILD_TARGET_RULE}`,
       inputSchema: z4.object({
-        designSystemId: z4.string().describe("The design system ID from find-design-system"),
-        component: z4.union([z4.string(), z4.array(z4.string())]).optional().describe('Optional. Only pass this when the user asks to inspect specific component source code. Examples: "button", ["button", "card"]. Omit to scaffold the entire design system.'),
-        library: z4.enum(["radix", "base-ui"]).optional().describe('Optional, default "base-ui". Base UI (@base-ui/react) is the default flavor; pass "radix" to force the Radix flavor when the project already uses Radix primitives. If a design system has no Base UI port yet, the tool falls back to Radix with a note.'),
+        target: z4.enum(["react", "html"]).describe('Required build target. Use "react" for any host with filesystem + terminal; use "html" only for inline chat canvases/artifacts.'),
+        designSystemId: z4.string().min(1).optional().describe("Catalog design system ID from find-design-system. Required for target react; for target html pass this or projectId."),
+        projectId: z4.string().min(1).optional().describe('Generated project ID from create-design-system / get-design-system-status. Supported only with target "html".'),
+        component: z4.union([z4.string(), z4.array(z4.string())]).optional().describe("React target only. Pass only when the user asks to inspect specific component source code. Omit to scaffold the entire design system."),
+        library: z4.enum(["radix", "base-ui"]).optional().describe('React target only, default "base-ui". Pass "radix" when the project already uses Radix primitives.'),
         context: CONTEXT_ARG
       }),
       outputSchema: PREVIEW_OUTPUT_SCHEMA,
@@ -4710,8 +4823,17 @@ ${BUILD_TARGET_RULE}`,
         "openai/outputTemplate": DS_PREVIEW_WIDGET_URI
       }
     },
-    async ({ designSystemId, component, library, context }) => tracked("get-design-system-docs", { designSystemId, component, library, context }, async () => {
-      try {
+    async ({ target, designSystemId, projectId, component, library, context }) => {
+      if (target === "html") {
+        return getHtmlKit({ designSystemId, projectId, context });
+      }
+      if (!designSystemId) {
+        return {
+          content: [{ type: "text", text: 'For target "react", pass a catalog designSystemId from find-design-system.' }],
+          structuredContent: { status: "error", name: "Missing design system", tokensCss: "" }
+        };
+      }
+      return tracked("get-design-system-kit", { target: "react", designSystemId, component, library, context }, async () => {
         const system = await provider.getDesignSystemById(designSystemId);
         if (!system) {
           return {
@@ -4791,7 +4913,7 @@ ${BUILD_TARGET_RULE}`,
             ...header,
             "\n## Scaffold the full design system\n",
             ...baseUnavailableNote ? [baseUnavailableNote] : [],
-            "_This is the React path, the right call whenever you have a filesystem + terminal. Build real components from `components/ui/`. Only fall back to `get-design-system-html` for inline chat canvases (ChatGPT / Claude artifacts) that cannot run a build._\n",
+            '_This is the React target, the right choice whenever you have a filesystem + terminal. Build real components from `components/ui/`. Use this same tool with `target: "html"` only for inline chat canvases (ChatGPT / Claude artifacts) that cannot run a build._\n',
             REQUIREMENTS_MD,
             `Run these commands in the user's project root. The first **conditionally** runs \`shadcn init\` only when the project hasn't been set up yet (no \`components.json\`); the second installs **all ${installNames.length} pieces** (globals.css + ${allComponents.length} components) into \`components/ui/\` with a single shadcn invocation:`,
             "```bash",
@@ -4885,13 +5007,8 @@ _${installNote}_`,
             installNote
           }
         };
-      } catch (error) {
-        return {
-          content: [{ type: "text", text: `Error: ${error instanceof Error ? error.message : "Unknown error"}` }],
-          structuredContent: { status: "error", name: designSystemId, tokensCss: "" }
-        };
-      }
-    })
+      });
+    }
   );
   server.registerTool(
     "create-design-system",
@@ -4899,7 +5016,7 @@ _${installNote}_`,
       title: "Create a New Design System",
       description: `Generate a brand new design system tailored to the user's product, and return a single shadcn install command that lands the entire set of components + tokens (globals.css) into the user's Next.js project.
 
-**Use this on any "build/make me <app>" request \u2014 even when the user never mentions design or branding** (a design system IS the app's brand). But DON'T jump straight here: first call \`find-design-system\` with the app description, show the user the top ~4 matches, and ask which to start from (passed here as \`baseDesignSystemId\`) or whether to go fully custom. Then derive the \`prompt\` from the app (name, domain, vibe), generate, show it with \`get-design-system-status\`, and build with that brand. Also use it when the user explicitly wants a **custom** design system instead of installing an existing one via 'get-design-system-docs'.
+**Use this on any "build/make me <app>" request, even when the user never mentions design or branding** (a design system IS the app's brand). But DON'T jump straight here: first call \`find-design-system\` with the app description, show the user the top ~4 matches, and ask which to start from (passed here as \`baseDesignSystemId\`) or whether to go fully custom. Then derive the \`prompt\` from the app (name, domain, vibe), generate, show it with \`get-design-system-status\`, and build with that brand. Also use it when the user explicitly wants a **custom** design system instead of installing an existing one via \`get-design-system-kit\`.
 
 How it works:
 1. Sends the user's prompt to Better Design's generation pipeline (same flow the web chat input uses) and returns IMMEDIATELY with the project id + project URL.
@@ -5135,80 +5252,6 @@ Check again in ~30 seconds. Watch it live on the project page: ${projectUrl}` }]
       };
     })
   );
-  server.registerTool(
-    "get-design-system-html",
-    {
-      title: "Get a Design System as HTML/CSS",
-      description: `Export a design system as plain, framework-free HTML + CSS for building an app INLINE (ChatGPT canvas / Claude artifact) where npm and a Tailwind build are unavailable. Returns the system's real design tokens (globals.css) plus a token-driven component CSS kit (button, input, card, badge, alert, etc.) and an example to riff on.
-
-The response ends with a usage guide ("How to use"). Follow EVERY rule in it when building: paste the CSS blocks verbatim (never retype them), compose ONLY the \`ds-*\` component classes (custom classes are for layout only), and wire the few lines of JS that make controls actually work. The guide is the contract that keeps the build on-brand; never restyle the components it ships.
-
-Works for BOTH a catalog system (pass \`designSystemId\` from find-design-system) AND a custom system you just generated (pass \`projectId\` from create-design-system / get-design-system-status).
-
-${BUILD_TARGET_RULE}`,
-      inputSchema: z4.object({
-        designSystemId: z4.string().min(1).optional().describe("Catalog design system id from find-design-system, e.g. 'linear', 'editorial-warm'. Pass this OR projectId."),
-        projectId: z4.string().min(1).optional().describe("Project id from create-design-system / get-design-system-status, for a custom generated DS. Pass this OR designSystemId."),
-        context: CONTEXT_ARG
-      }),
-      annotations: {
-        readOnlyHint: true,
-        destructiveHint: false,
-        openWorldHint: false
-      }
-    },
-    async ({ designSystemId, projectId, context }) => tracked("get-design-system-html", { designSystemId, projectId, context }, async () => {
-      if (projectId) {
-        const result = await fetchProjectTokensCss(projectId, authContext);
-        const viewUrl2 = `${APP_BASE_URL}/projects/${projectId}`;
-        if (!result?.tokensCss) {
-          return {
-            content: [{ type: "text", text: `Could not load tokens for project "${projectId}". It may still be generating, or the id is wrong. Check ${viewUrl2}.` }]
-          };
-        }
-        const componentKit2 = buildDsComponentCss(result.files);
-        const text2 = buildDsHtmlKit({ name: result.name ?? `Project ${projectId.slice(0, 8)}`, tokensCss: result.tokensCss, viewUrl: viewUrl2, componentKit: componentKit2 });
-        return { content: [{ type: "text", text: text2 }] };
-      }
-      if (!designSystemId) {
-        return {
-          content: [{ type: "text", text: "Pass either a catalog designSystemId (from find-design-system) or a projectId (from create-design-system)." }]
-        };
-      }
-      const ds = await provider.getDesignSystemById(designSystemId);
-      if (!ds) {
-        return {
-          content: [{ type: "text", text: `Design system "${designSystemId}" not found. Call find-design-system first to get a valid id, or pass a projectId for a generated system.` }]
-        };
-      }
-      const viewUrl = `${APP_BASE_URL}/design-systems/${designSystemId}`;
-      const host = codingHostName(server);
-      const steer = host ? `> \u26A0\uFE0F **You appear to be in ${host}, a coding environment with a filesystem.** Build this as real React components: call \`get-design-system-docs\` and run the shadcn install instead of shipping a standalone HTML file. The kit below is only for inline chat canvases (ChatGPT / Claude artifacts) that cannot run a build.
-
-` : "";
-      if (ds.metadata.html) {
-        const intro = `Framework-free HTML/CSS version of **${ds.metadata.title}**. One self-contained document: every component rendered with the exact compiled CSS inline, no JS, no build. Render it directly in a ChatGPT canvas / Claude artifact, or lift the markup + \`<style>\` you need. Full live showcase: ${viewUrl}
-
-`;
-        const longestRun = Math.max(0, ...[...ds.metadata.html.matchAll(/`+/g)].map((m) => m[0].length));
-        const fence2 = "`".repeat(Math.max(3, longestRun + 1));
-        return { content: [{ type: "text", text: `${steer}${intro}${fence2}html
-${ds.metadata.html}
-${fence2}
-
-${HTML_KIT_CONDUCT_MD}` }] };
-      }
-      const { tokensCss, files } = await fetchCatalog(designSystemId);
-      if (!tokensCss) {
-        return {
-          content: [{ type: "text", text: `Could not load tokens for "${designSystemId}". The full live showcase is at ${viewUrl}.` }]
-        };
-      }
-      const componentKit = buildDsComponentCss(files);
-      const text = buildDsHtmlKit({ name: ds.metadata.title, tokensCss, viewUrl, componentKit });
-      return { content: [{ type: "text", text: steer + text }] };
-    })
-  );
 }
 var REGISTRY_ITEM_SCHEMA, SHADCN_INIT_IF_MISSING, SAFE_COMPONENT_NAME_RE, CATALOG_KIT_COMPONENTS, DS_INDEX_SCHEMA;
 var init_design_system_tools = __esm({