@feimacode/open-design-agent-kit-mcp 0.1.5 → 0.1.7

package/README.md

@@ -1,10 +1,17 @@
 # @feimacode/open-design-agent-kit-mcp
 
-The [OpenDesign](https://github.com/nexu-io/open-design) skill/design-system/artifact workflow as a standalone MCP server — for Claude Code, Codex, Cursor, or any other MCP-capable coding agent. Same nine tools and the same content library (163 skills, 114 design templates, 152 brand design systems, 167 remixable examples) as the [VS Code extension](https://marketplace.visualstudio.com/items?itemName=feima.open-design-agent-kit), over stdio instead of native `languageModelTools`.
+**Pro-grade design for any MCP-capable coding agent. One command, nothing else to run.**
 
-No daemon, no account, no editor required. Your agent's own selected model does the actual generation with its normal file-editing tools; this server only composes instructions and does the bookkeeping (manifests, active design system) around them.
+This is [Open Design](https://github.com/nexu-io/open-design)'s design library and workflow, packaged as a plain stdio MCP server for Claude Code, Codex, Cursor, and anything else that speaks MCP. It includes 163 skills, 114 design templates, 152 brand design systems, and 167 remixable examples. Ask your agent for a deck, a landing page, a dashboard, or a prototype, and it builds one that looks designed rather than generated, as real files in your project.
 
-## What you get
+- **No desktop app, no daemon, no account.** Your agent launches the server on demand over stdio, and it exits when the agent does.
+- **No API keys or model settings.** The server never calls a model. Your agent's own selected model does the generation with its normal file-editing tools. The server supplies the library and handles the bookkeeping (manifests, active design system).
+- **Zero config.** It works in the current project out of the box. The active design system is remembered in `.open-design/config.json`.
+- **Plain files.** Everything it produces is ordinary HTML plus small JSON sidecars in your repo, so you can diff, review, and commit it.
+
+It has the same core tools and the same content as the [VS Code extension](https://marketplace.visualstudio.com/items?itemName=feima.open-design-agent-kit), over MCP instead of native `languageModelTools`.
+
+## See what it builds
 
 Four of the ~280 vendored skills and templates, rendered exactly as-is:
 

package/out/index.js

@@ -3341,11 +3341,11 @@ var require_excerpt = __commonJS({
       if (typeof opts.excerpt === "function") {
         return opts.excerpt(file, opts);
       }
-      const sep2 = file.data.excerpt_separator || opts.excerpt_separator;
-      if (sep2 == null && (opts.excerpt === false || opts.excerpt == null)) {
+      const sep3 = file.data.excerpt_separator || opts.excerpt_separator;
+      if (sep3 == null && (opts.excerpt === false || opts.excerpt == null)) {
         return file;
       }
-      const delimiter = typeof opts.excerpt === "string" ? opts.excerpt : sep2 || opts.delimiters[0];
+      const delimiter = typeof opts.excerpt === "string" ? opts.excerpt : sep3 || opts.delimiters[0];
       const idx = file.content.indexOf(delimiter);
       if (idx !== -1) {
         file.excerpt = file.content.slice(0, idx);
@@ -3410,7 +3410,7 @@ var require_parse = __commonJS({
 var require_gray_matter = __commonJS({
   "../../node_modules/gray-matter/index.js"(exports2, module2) {
     "use strict";
-    var fs8 = require("fs");
+    var fs9 = require("fs");
     var sections = require_section_matter();
     var defaults = require_defaults();
     var stringify = require_stringify();
@@ -3494,7 +3494,7 @@ var require_gray_matter = __commonJS({
       return stringify(file, data, options2);
     };
     matter2.read = function(filepath, options2) {
-      const str2 = fs8.readFileSync(filepath, "utf8");
+      const str2 = fs9.readFileSync(filepath, "utf8");
       const file = matter2(str2, options2);
       file.path = filepath;
       return file;
@@ -3531,7 +3531,7 @@ var import_types = require("@modelcontextprotocol/sdk/types.js");
 var import_node_fs = require("node:fs");
 var path = __toESM(require("node:path"));
 var import_gray_matter = __toESM(require_gray_matter());
-var SKILL_SOURCES = ["skill", "design-template", "example"];
+var SKILL_SOURCES = ["skill", "design-template", "example", "community"];
 var SKILL_MODES = [
   "prototype",
   "deck",
@@ -3611,7 +3611,7 @@ async function loadSkillLikeDir(assetsRoot, subdir, source) {
   }
   return result;
 }
-async function loadExamples(assetsRoot) {
+async function loadExamples(assetsRoot, source = "example") {
   const dir = path.join(assetsRoot, "examples");
   const result = /* @__PURE__ */ new Map();
   if (!await pathExists(dir)) return result;
@@ -3642,7 +3642,7 @@ async function loadExamples(assetsRoot) {
       triggers: [...normalizeStringArray(data.triggers), ...normalizeStringArray(data.tags)],
       category: typeof od?.category === "string" ? od.category : typeof data.category === "string" ? data.category : void 0,
       mode: normalizeMode(od?.mode),
-      source: "example",
+      source,
       examplePrompt,
       featured: false,
       exampleArtifactPath: path.posix.join("examples", entry.name, "example.html"),
@@ -3771,9 +3771,10 @@ function mergeSkillPools(...pools) {
   return result;
 }
 var ContentIndex = class {
-  constructor(assetsRoot, getUserDesignSystemsDir) {
+  constructor(assetsRoot, getUserDesignSystemsDir, getCommunityContentDir) {
     this.assetsRoot = assetsRoot;
     this.getUserDesignSystemsDir = getUserDesignSystemsDir;
+    this.getCommunityContentDir = getCommunityContentDir;
   }
   ensureLoaded() {
     if (!this.loaded) {
@@ -3791,8 +3792,24 @@ var ContentIndex = class {
     }
     return this.loaded;
   }
-  async listSkills(query, mode, source, remixableOnly) {
+  // Merges the cached built-in skill/template/example pool with a
+  // freshly-rescanned community pool on every call — same reasoning as
+  // loadedDesignSystems()'s user-pool rescan: a sync command can replace the
+  // on-disk community cache at any moment in the session, with no reload.
+  // mergeSkillPools regroups by each entry's own `.id` (dirId) regardless of
+  // whether its input map is raw or already merged, so re-running it here
+  // against the cached (already-merged) pool plus the fresh community pool
+  // correctly re-applies collision-priority ordering (community always
+  // loses) without re-deriving anything from the cached pool.
+  async loadedSkills() {
     const { skills } = await this.ensureLoaded();
+    const communityDir = this.getCommunityContentDir?.();
+    const communitySkills = communityDir ? await loadExamples(communityDir, "community") : /* @__PURE__ */ new Map();
+    if (communitySkills.size === 0) return skills;
+    return mergeSkillPools(skills, communitySkills);
+  }
+  async listSkills(query, mode, source, remixableOnly) {
+    const skills = await this.loadedSkills();
     const wantedMode = mode?.trim().toLowerCase();
     const wantedSource = source?.trim().toLowerCase();
     const results = [];
@@ -3818,7 +3835,7 @@ var ContentIndex = class {
     return results;
   }
   async getSkill(id) {
-    const { skills } = await this.ensureLoaded();
+    const skills = await this.loadedSkills();
     const trimmed = id.trim();
     const exact = skills.get(trimmed);
     if (exact) return exact;
@@ -3829,7 +3846,7 @@ var ContentIndex = class {
     return candidates[0];
   }
   async listSkillModes() {
-    const { skills } = await this.ensureLoaded();
+    const skills = await this.loadedSkills();
     const modes = /* @__PURE__ */ new Set();
     for (const skill of skills.values()) modes.add(skill.mode);
     return [...modes].sort((a, b) => a.localeCompare(b));
@@ -3882,11 +3899,11 @@ function selectCraftSections(all, suggestedIds) {
 function composeInstructions(input) {
   const parts = [];
   parts.push(
-    `# OpenDesign generation brief
+    `# Open Design generation brief
 
-You are authoring a new design artifact using the OpenDesign skill "${input.skillName}". Follow the skill's workflow below, treat the active design system's tokens (if any) as authoritative, and author the files yourself with your own file-editing tools \u2014 do not look for any tool that writes design content on your behalf.
+You are authoring a new design artifact using the Open Design skill "${input.skillName}". Follow the skill's workflow below, treat the active design system's tokens (if any) as authoritative, and author the files yourself with your own file-editing tools \u2014 do not look for any tool that writes design content on your behalf.
 
-**Everything below is delivered to you as plain text; none of it is a file path you can open.** The skill text, craft rules, and design system notes below are copied verbatim from OpenDesign's own upstream catalog and may mention file names or source paths (e.g. "example.html", "apps/daemon/src/...", a "Resource map" of sibling files) that describe OpenDesign's own separate codebase or runtime \u2014 none of those exist in this workspace or are readable by you. Never search for, open, or navigate to any file path mentioned anywhere below; if you want reference examples, call remix_open_design_example or list_open_design_skills instead of searching the filesystem. Treat every path-looking string below as descriptive prose only.`
+**Everything below is delivered to you as plain text; none of it is a file path you can open.** The skill text, craft rules, and design system notes below are copied verbatim from Open Design's own upstream catalog and may mention file names or source paths (e.g. "example.html", "apps/daemon/src/...", a "Resource map" of sibling files) that describe Open Design's own separate codebase or runtime \u2014 none of those exist in this workspace or are readable by you. Never search for, open, or navigate to any file path mentioned anywhere below; if you want reference examples, call remix_open_design_example or list_open_design_skills instead of searching the filesystem. Treat every path-looking string below as descriptive prose only.`
   );
   parts.push(`
 
@@ -3933,6 +3950,21 @@ ${s.body.trim()}`).join("\n\n")}`
 Detected: ${input.existingAppFrameworks.join(", ")}. Before generating, consider looking at a few of its real existing components/pages for actual conventions (styling approach, layout patterns, component structure) with your own file-reading tools, so the artifact you produce is closer to how this app already looks. This does NOT change where or how you write the artifact \u2014 it's still a standalone prototype at the output path below, not a real app file; it's purely a nudge toward visual consistency, not a requirement to integrate with the app's code.`
     );
   }
+  if (input.collectionContext) {
+    const { collectionName, index, total, role, siblingScreens } = input.collectionContext;
+    const siblingsText = siblingScreens.length > 0 ? siblingScreens.map((s) => `- **${s.role}** \u2014 "${s.title}"`).join("\n") : "(none yet \u2014 this is the first screen)";
+    parts.push(
+      `
+
+## Part of a design collection
+
+This artifact is screen ${index} of ${total} in the design collection "${collectionName}" \u2014 this screen's role: **${role}**. The other screens in this collection so far:
+
+${siblingsText}
+
+Keep this screen visually and stylistically consistent with the others (same design system, same header/nav treatment, same component style) without re-reading their HTML \u2014 you already have their role and title above as context. Do not duplicate content that belongs on a different screen.`
+    );
+  }
   parts.push(
     `
 
@@ -3945,7 +3977,7 @@ Choose a short semantic filename derived from the brief, product, or artifact ty
 
 ## Output
 
-Author the artifact's entry file at \`${input.suggestedEntryPath}\` (adjust the filename to follow the semantic-naming guidance above, or the skill's own fixed-name convention, but keep it under the same directory). Write any supporting files (stylesheets, scripts, imported assets) as siblings under that directory. After writing all files, call register_open_design_artifact with the entry path, a kind, a title, and the supporting file paths (relative to the entry file's own directory) so it is recognized as an OpenDesign artifact.`
+Author the artifact's entry file at \`${input.suggestedEntryPath}\` (adjust the filename to follow the semantic-naming guidance above, or the skill's own fixed-name convention, but keep it under the same directory). Write any supporting files (stylesheets, scripts, imported assets) as siblings under that directory. After writing all files, call register_open_design_artifact with the entry path, a kind, a title, and the supporting file paths (relative to the entry file's own directory) so it is recognized as an Open Design artifact.`
   );
   return parts.join("");
 }
@@ -4043,11 +4075,17 @@ async function extractBrandEvidence(sourceUrl) {
   return synthesizeBrandEvidence(base, html, stylesheetTexts, warnings);
 }
 
+// ../core/src/generation/collectionEntryPath.ts
+var path2 = __toESM(require("node:path"));
+function suggestCollectionScreenEntryPath(outputDir, collectionId, screenSlug) {
+  return path2.posix.join(outputDir, collectionId, `${screenSlug}.html`);
+}
+
 // ../core/src/generation/customDesignSystemInstructions.ts
 function composeCustomDesignSystemInstructions(input) {
   const parts = [];
   parts.push(
-    `# Create a custom OpenDesign design system
+    `# Create a custom Open Design design system
 
 You are authoring a new, custom design system as a single \`DESIGN.md\` file. Once written, it becomes a first-class, selectable design system \u2014 the exact same mechanism as the ~150 bundled ones, just workspace-local instead of built into the extension.`
   );
@@ -4115,9 +4153,155 @@ Call \`set_active_design_system\` with designSystemId "${input.id}" so it's used
   return parts.join("");
 }
 
+// ../core/src/generation/figmaPull.ts
+var FIGMA_URL_RE = /^https?:\/\/(?:www\.)?figma\.com\/(?:file|design)\/([A-Za-z0-9]+)/i;
+function parseFigmaUrl(url) {
+  const match = FIGMA_URL_RE.exec(url.trim());
+  if (!match) return void 0;
+  const fileKey = match[1];
+  let nodeId;
+  try {
+    const parsed = new URL(url);
+    const raw = parsed.searchParams.get("node-id");
+    if (raw) nodeId = raw.replace("-", ":");
+  } catch {
+  }
+  return { fileKey, nodeId };
+}
+var FigmaApiError = class extends Error {
+};
+async function fetchFigmaNode(token, ref, fetchImpl = fetch) {
+  if (!ref.nodeId) {
+    throw new FigmaApiError(
+      `This Figma URL has no node id. Use Figma's "Copy link to selection" on the specific frame (not just the file link) and try again.`
+    );
+  }
+  const url = `https://api.figma.com/v1/files/${ref.fileKey}/nodes?ids=${encodeURIComponent(ref.nodeId)}`;
+  const response = await fetchImpl(url, { headers: { "X-Figma-Token": token } });
+  if (!response.ok) {
+    throw new FigmaApiError(`Figma API responded with HTTP ${response.status} while fetching the frame.`);
+  }
+  const body = await response.json();
+  const document = body.nodes?.[ref.nodeId]?.document;
+  if (!document) {
+    throw new FigmaApiError(`Figma API response did not include a document for node "${ref.nodeId}" \u2014 it may not exist, or the token lacks access.`);
+  }
+  return document;
+}
+async function fetchFigmaFrameImage(token, fileKey, nodeId, fetchImpl = fetch) {
+  try {
+    const url = `https://api.figma.com/v1/images/${fileKey}?ids=${encodeURIComponent(nodeId)}&format=png&scale=2`;
+    const response = await fetchImpl(url, { headers: { "X-Figma-Token": token } });
+    if (!response.ok) return void 0;
+    const body = await response.json();
+    if (body.err) return void 0;
+    return body.images?.[nodeId] ?? void 0;
+  } catch {
+    return void 0;
+  }
+}
+function toHexByte(value) {
+  return Math.round(Math.max(0, Math.min(1, value)) * 255).toString(16).padStart(2, "0");
+}
+function toHexColor(color) {
+  const hex = `#${toHexByte(color.r)}${toHexByte(color.g)}${toHexByte(color.b)}`;
+  return color.a !== void 0 && color.a < 1 ? `${hex}${toHexByte(color.a)}` : hex;
+}
+function firstSolidColor(paints) {
+  const solid = paints?.find((p) => p.type === "SOLID" && p.visible !== false && p.color);
+  if (!solid?.color) return void 0;
+  return toHexColor({ ...solid.color, a: solid.opacity ?? solid.color.a });
+}
+var DEFAULT_MAX_NODES = 500;
+function summarizeFigmaNode(node, opts = {}) {
+  const maxNodes = opts.maxNodes ?? DEFAULT_MAX_NODES;
+  let count = 0;
+  let truncated = false;
+  function walk(n) {
+    if (count >= maxNodes) {
+      truncated = true;
+      return void 0;
+    }
+    count++;
+    const summary = { id: n.id, name: n.name, type: n.type };
+    if (n.absoluteBoundingBox) summary.box = { ...n.absoluteBoundingBox };
+    const fillColor = firstSolidColor(n.fills);
+    if (fillColor) summary.fillColor = fillColor;
+    const strokeColor = firstSolidColor(n.strokes);
+    if (strokeColor) summary.strokeColor = strokeColor;
+    if (typeof n.cornerRadius === "number") summary.cornerRadius = n.cornerRadius;
+    if (typeof n.opacity === "number" && n.opacity < 1) summary.opacity = n.opacity;
+    if (n.type === "TEXT") {
+      summary.characters = n.characters;
+      summary.fontFamily = n.style?.fontFamily;
+      summary.fontSize = n.style?.fontSize;
+      summary.fontWeight = n.style?.fontWeight;
+      summary.textAlign = n.style?.textAlignHorizontal;
+    }
+    if (n.children && n.children.length > 0) {
+      const children = n.children.map(walk).filter((c) => !!c);
+      if (children.length > 0) summary.children = children;
+    }
+    return summary;
+  }
+  const root = walk(node) ?? { id: node.id, name: node.name, type: node.type };
+  return { root, nodeCount: count, truncated };
+}
+function composePullFigmaInstructions(input) {
+  const { frameSummary, frameName, imageUrl, designSystemId, suggestedEntryPath } = input;
+  const parts = [];
+  parts.push(
+    `# Translate a Figma frame into a code artifact
+
+You are translating the Figma frame "${frameName}" into a real, production-quality HTML/CSS (or React, if more appropriate) artifact with 1:1 visual fidelity \u2014 not a loose interpretation.`
+  );
+  parts.push(
+    `
+
+## Ground truth
+
+The JSON below is a deterministic, exact structural summary of the frame \u2014 positions, sizes, fill/stroke colors (hex), corner radii, and text runs (with their exact characters, font, size). Treat it as authoritative: match exact colors, relative positions/sizes, and text content precisely. Do not invent content, copy, or elements that aren't present in this data.${frameSummary.truncated ? ` NOTE: this summary was truncated at ${frameSummary.nodeCount} nodes \u2014 the frame has more content than shown; ask the user if the missing portion matters before proceeding.` : ""}
+
+\`\`\`json
+${JSON.stringify(frameSummary.root, null, 2)}
+\`\`\``
+  );
+  parts.push(
+    imageUrl ? `
+
+## Visual reference
+
+A rendered PNG export of this exact frame is available at: ${imageUrl}
+If your environment can view images from a URL, fetch and look at it to cross-check visual fidelity (layering, gradients, and other details the structural JSON above simplifies away). If it cannot, rely on the structural JSON alone.` : `
+
+## Visual reference
+
+No rendered image export was available \u2014 rely on the structural JSON alone.`
+  );
+  parts.push(
+    designSystemId ? `
+
+## Design system
+
+This frame is associated with design system "${designSystemId}" \u2014 reuse its component conventions where the frame's structure clearly matches them, but the frame's own exact colors/type from the JSON above still take precedence over the design system's generic tokens.` : `
+
+## Design system
+
+No design system was specified \u2014 implement the frame's own exact styling from the JSON above directly (inline styles or plain CSS), without inventing a design-system abstraction that wasn't requested.`
+  );
+  parts.push(
+    `
+
+## Output
+
+Write the artifact's entry file at \`${suggestedEntryPath}\` (adjust the filename if there's a clearly better one, e.g. if it collides with something already there) using your own file-editing tools, then call register_open_design_artifact.`
+  );
+  return parts.join("");
+}
+
 // ../core/src/generation/portToAppInstructions.ts
 var import_node_fs2 = require("node:fs");
-var path2 = __toESM(require("node:path"));
+var path3 = __toESM(require("node:path"));
 var CANDIDATE_COMPONENT_DIRS = ["src/components", "app/components", "components"];
 var KNOWN_COMPONENT_EXTENSIONS = [".tsx", ".jsx", ".vue", ".svelte", ".ts", ".js"];
 async function pathExists2(p) {
@@ -4134,7 +4318,7 @@ function toPascalCase(name) {
 }
 async function suggestTargetComponentPath(workspaceRoot, artifactName) {
   for (const candidateDir of CANDIDATE_COMPONENT_DIRS) {
-    const absDir = path2.join(workspaceRoot, candidateDir);
+    const absDir = path3.join(workspaceRoot, candidateDir);
     if (!await pathExists2(absDir)) continue;
     let entries = [];
     try {
@@ -4148,7 +4332,7 @@ async function suggestTargetComponentPath(workspaceRoot, artifactName) {
       if (ext) extensionCounts.set(ext, (extensionCounts.get(ext) ?? 0) + 1);
     }
     const guessedExt = [...extensionCounts.entries()].sort((a, b) => b[1] - a[1])[0]?.[0] ?? ".tsx";
-    return path2.posix.join(candidateDir, `${toPascalCase(artifactName)}${guessedExt}`);
+    return path3.posix.join(candidateDir, `${toPascalCase(artifactName)}${guessedExt}`);
   }
   return void 0;
 }
@@ -4156,9 +4340,9 @@ function composePortToAppInstructions(input) {
   const { artifactEntryPath, artifactContent, targetComponentPath, referenceComponentPath } = input;
   const parts = [];
   parts.push(
-    `# Promote an OpenDesign prototype into this app's real code
+    `# Promote an Open Design prototype into this app's real code
 
-You are porting the finished OpenDesign artifact below into this workspace's actual, existing application \u2014 reproducing its visual design as idiomatic, real production code, not copying it into the app verbatim.`
+You are porting the finished Open Design artifact below into this workspace's actual, existing application \u2014 reproducing its visual design as idiomatic, real production code, not copying it into the app verbatim.`
   );
   parts.push(`
 
@@ -4209,7 +4393,7 @@ Do NOT wire the new component into routing, navigation, or any other part of the
 }
 
 // ../core/src/vendored/artifactManifest.ts
-var path3 = __toESM(require("node:path"));
+var path4 = __toESM(require("node:path"));
 var MANIFEST_VERSION = 1;
 var MAX_TITLE_LENGTH = 200;
 var MAX_SOURCE_SKILL_ID_LENGTH = 128;
@@ -4217,6 +4401,10 @@ var MAX_DESIGN_SYSTEM_ID_LENGTH = 128;
 var MAX_SUPPORTING_FILE_LENGTH = 260;
 var MAX_SUPPORTING_FILES = 128;
 var MAX_METADATA_BYTES = 16 * 1024;
+var MAX_COLLECTION_ID_LENGTH = 100;
+var MAX_COLLECTION_NAME_LENGTH = 200;
+var MAX_SCREEN_ROLE_LENGTH = 100;
+var MAX_SCREEN_INDEX = 999;
 var ALLOWED_KINDS = /* @__PURE__ */ new Set([
   "html",
   "deck",
@@ -4337,6 +4525,29 @@ function validateArtifactManifestInput(manifest, entry, options2 = {}) {
     );
     if (dsErr) return { ok: false, error: dsErr };
   }
+  if (manifest.collectionId !== void 0 && manifest.collectionId !== null) {
+    const collectionIdErr = validateBoundedString(manifest.collectionId, "artifactManifest.collectionId", MAX_COLLECTION_ID_LENGTH, {
+      allowEmpty: true
+    });
+    if (collectionIdErr) return { ok: false, error: collectionIdErr };
+  }
+  if (manifest.collectionName !== void 0 && manifest.collectionName !== null) {
+    const collectionNameErr = validateBoundedString(manifest.collectionName, "artifactManifest.collectionName", MAX_COLLECTION_NAME_LENGTH, {
+      allowEmpty: true
+    });
+    if (collectionNameErr) return { ok: false, error: collectionNameErr };
+  }
+  if (manifest.screenRole !== void 0 && manifest.screenRole !== null) {
+    const screenRoleErr = validateBoundedString(manifest.screenRole, "artifactManifest.screenRole", MAX_SCREEN_ROLE_LENGTH, {
+      allowEmpty: true
+    });
+    if (screenRoleErr) return { ok: false, error: screenRoleErr };
+  }
+  if (manifest.screenIndex !== void 0 && manifest.screenIndex !== null) {
+    if (typeof manifest.screenIndex !== "number" || !Number.isInteger(manifest.screenIndex) || manifest.screenIndex < 0 || manifest.screenIndex > MAX_SCREEN_INDEX) {
+      return { ok: false, error: `artifactManifest.screenIndex must be an integer between 0 and ${MAX_SCREEN_INDEX}` };
+    }
+  }
   if (manifest.metadata !== void 0) {
     if (!isPlainObject(manifest.metadata)) {
       return { ok: false, error: "artifactManifest.metadata must be a plain object" };
@@ -4368,12 +4579,27 @@ function sanitizeManifest(manifest, entry, options2 = {}) {
     updatedAt: options2.preserveUpdatedAt && typeof manifest.updatedAt === "string" ? manifest.updatedAt : now,
     sourceSkillId: manifest.sourceSkillId,
     designSystemId: manifest.designSystemId ?? void 0,
+    collectionId: manifest.collectionId ?? void 0,
+    collectionName: manifest.collectionName ?? void 0,
+    screenRole: manifest.screenRole ?? void 0,
+    screenIndex: typeof manifest.screenIndex === "number" ? manifest.screenIndex : void 0,
     metadata: manifest.metadata
   };
 }
+function parsePersistedManifest(raw, fallbackEntry) {
+  try {
+    const parsed = JSON.parse(raw);
+    if (!parsed || parsed.version !== MANIFEST_VERSION) return null;
+    const entry = typeof parsed.entry === "string" && parsed.entry ? parsed.entry : fallbackEntry;
+    const result = validateArtifactManifestInput(parsed, entry, { preserveUpdatedAt: true });
+    return result.ok ? result.value : null;
+  } catch {
+    return null;
+  }
+}
 function inferLegacyManifest(entry) {
   const lower = entry.toLowerCase();
-  const ext = path3.extname(lower);
+  const ext = path4.extname(lower);
   const isDeck = ext === ".html" && (lower.includes("deck") || lower.includes("slides") || lower.includes("pitch"));
   if (ext === ".html" || ext === ".htm") {
     return {
@@ -4416,7 +4642,7 @@ function inferLegacyManifest(entry) {
 
 // ../core/src/vendored/artifactCreate.ts
 var import_node_fs3 = require("node:fs");
-var path4 = __toESM(require("node:path"));
+var path5 = __toESM(require("node:path"));
 var ArtifactManifestRequiredError = class extends Error {
   constructor(entry) {
     super(`artifactManifest is required for ${entry}; no safe default manifest can be inferred`);
@@ -4450,9 +4676,9 @@ function artifactManifestSidecarPath(entryPath) {
   return `${entryPath}.artifact.json`;
 }
 function assertWorkspaceRelative(workspaceRoot, entryPath) {
-  const abs = path4.join(workspaceRoot, entryPath);
-  const rel = path4.relative(workspaceRoot, abs);
-  if (rel.startsWith("..") || path4.isAbsolute(rel)) {
+  const abs = path5.isAbsolute(entryPath) ? entryPath : path5.join(workspaceRoot, entryPath);
+  const rel = path5.relative(workspaceRoot, abs);
+  if (rel.startsWith("..") || path5.isAbsolute(rel)) {
     throw new Error(`entryPath escapes the workspace: ${entryPath}`);
   }
   return abs;
@@ -4518,7 +4744,7 @@ async function setActiveDesignSystem(designSystemId, store, getDesignSystem) {
 
 // ../core/src/workspace/appDetection.ts
 var import_node_fs4 = require("node:fs");
-var path5 = __toESM(require("node:path"));
+var path6 = __toESM(require("node:path"));
 var FRAMEWORK_PACKAGES = {
   react: "React",
   next: "Next.js",
@@ -4533,7 +4759,7 @@ async function detectExistingApp(workspaceRoot) {
   if (!workspaceRoot) return [];
   let raw;
   try {
-    raw = await import_node_fs4.promises.readFile(path5.join(workspaceRoot, "package.json"), "utf8");
+    raw = await import_node_fs4.promises.readFile(path6.join(workspaceRoot, "package.json"), "utf8");
   } catch {
     return [];
   }
@@ -4553,14 +4779,14 @@ async function detectExistingApp(workspaceRoot) {
 
 // ../core/src/workspace/artifactComments.ts
 var import_node_fs5 = require("node:fs");
-var path6 = __toESM(require("node:path"));
+var path7 = __toESM(require("node:path"));
 function commentsSidecarPath(entryPath) {
   return `${entryPath}.comments.json`;
 }
 function assertWorkspaceRelative2(workspaceRoot, entryPath) {
-  const abs = path6.join(workspaceRoot, entryPath);
-  const rel = path6.relative(workspaceRoot, abs);
-  if (rel.startsWith("..") || path6.isAbsolute(rel)) {
+  const abs = path7.isAbsolute(entryPath) ? entryPath : path7.join(workspaceRoot, entryPath);
+  const rel = path7.relative(workspaceRoot, abs);
+  if (rel.startsWith("..") || path7.isAbsolute(rel)) {
     throw new Error(`entryPath escapes the workspace: ${entryPath}`);
   }
   return abs;
@@ -4576,39 +4802,95 @@ async function readArtifactComments(workspaceRoot, entryPath) {
   }
 }
 
-// ../core/src/workspace/remixExample.ts
+// ../core/src/workspace/collectionScan.ts
 var import_node_fs6 = require("node:fs");
-var path7 = __toESM(require("node:path"));
+var path8 = __toESM(require("node:path"));
+var ARTIFACT_SIDECAR_SUFFIX = ".artifact.json";
+async function pathExists3(p) {
+  try {
+    await import_node_fs6.promises.access(p);
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function walkArtifactSidecars(absDir, workspaceRoot, out) {
+  let entries;
+  try {
+    entries = await import_node_fs6.promises.readdir(absDir, { withFileTypes: true });
+  } catch {
+    return;
+  }
+  for (const entry of entries) {
+    const absChild = path8.join(absDir, entry.name);
+    if (entry.isDirectory()) {
+      await walkArtifactSidecars(absChild, workspaceRoot, out);
+      continue;
+    }
+    if (!entry.isFile() || !entry.name.endsWith(ARTIFACT_SIDECAR_SUFFIX)) continue;
+    const entryPath = path8.relative(workspaceRoot, absChild).slice(0, -ARTIFACT_SIDECAR_SUFFIX.length).split(path8.sep).join("/");
+    try {
+      const raw = await import_node_fs6.promises.readFile(absChild, "utf8");
+      const manifest = parsePersistedManifest(raw, entryPath);
+      if (manifest) out.push({ entryPath, manifest });
+    } catch {
+    }
+  }
+}
+function toScreen(entryPath, manifest) {
+  return {
+    entryPath,
+    title: typeof manifest.title === "string" && manifest.title ? manifest.title : entryPath,
+    screenIndex: typeof manifest.screenIndex === "number" ? manifest.screenIndex : void 0,
+    screenRole: typeof manifest.screenRole === "string" ? manifest.screenRole : void 0
+  };
+}
+function sortScreens(screens) {
+  return [...screens].sort((a, b) => (a.screenIndex ?? Number.MAX_SAFE_INTEGER) - (b.screenIndex ?? Number.MAX_SAFE_INTEGER));
+}
+async function findCollectionArtifacts(workspaceRoot, outputDir, collectionId) {
+  const absOutputDir = path8.join(workspaceRoot, outputDir);
+  if (!await pathExists3(absOutputDir)) return [];
+  const found = [];
+  await walkArtifactSidecars(absOutputDir, workspaceRoot, found);
+  return sortScreens(
+    found.filter(({ manifest }) => manifest.collectionId === collectionId).map(({ entryPath, manifest }) => toScreen(entryPath, manifest))
+  );
+}
+
+// ../core/src/workspace/remixExample.ts
+var import_node_fs7 = require("node:fs");
+var path9 = __toESM(require("node:path"));
 async function listFilesRecursive(dir, baseDir) {
   const out = [];
-  const entries = await import_node_fs6.promises.readdir(dir, { withFileTypes: true });
+  const entries = await import_node_fs7.promises.readdir(dir, { withFileTypes: true });
   for (const entry of entries) {
-    const full = path7.join(dir, entry.name);
+    const full = path9.join(dir, entry.name);
     if (entry.isDirectory()) {
       out.push(...await listFilesRecursive(full, baseDir));
     } else if (entry.isFile()) {
-      out.push(path7.relative(baseDir, full).split(path7.sep).join("/"));
+      out.push(path9.relative(baseDir, full).split(path9.sep).join("/"));
     }
   }
   return out;
 }
 async function copyExampleArtifact(options2) {
-  const sourceHtmlAbs = path7.join(options2.assetsRoot, options2.exampleArtifactPath);
-  const sourceDir = path7.dirname(sourceHtmlAbs);
-  const destHtmlAbs = path7.join(options2.workspaceRoot, options2.entryPath);
-  const destRel = path7.relative(options2.workspaceRoot, destHtmlAbs);
-  if (destRel.startsWith("..") || path7.isAbsolute(destRel)) {
+  const sourceHtmlAbs = path9.join(options2.assetsRoot, options2.exampleArtifactPath);
+  const sourceDir = path9.dirname(sourceHtmlAbs);
+  const destHtmlAbs = path9.isAbsolute(options2.entryPath) ? options2.entryPath : path9.join(options2.workspaceRoot, options2.entryPath);
+  const destRel = path9.relative(options2.workspaceRoot, destHtmlAbs);
+  if (destRel.startsWith("..") || path9.isAbsolute(destRel)) {
     throw new Error(`entryPath escapes the workspace: ${options2.entryPath}`);
   }
-  const destDir = path7.dirname(destHtmlAbs);
-  await import_node_fs6.promises.mkdir(destDir, { recursive: true });
-  await import_node_fs6.promises.copyFile(sourceHtmlAbs, destHtmlAbs);
-  const sourceAssetsDir = path7.join(sourceDir, "assets");
+  const destDir = path9.dirname(destHtmlAbs);
+  await import_node_fs7.promises.mkdir(destDir, { recursive: true });
+  await import_node_fs7.promises.copyFile(sourceHtmlAbs, destHtmlAbs);
+  const sourceAssetsDir = path9.join(sourceDir, "assets");
   let supportingFiles = [];
   try {
-    await import_node_fs6.promises.access(sourceAssetsDir);
-    const destAssetsDir = path7.join(destDir, "assets");
-    await import_node_fs6.promises.cp(sourceAssetsDir, destAssetsDir, { recursive: true });
+    await import_node_fs7.promises.access(sourceAssetsDir);
+    const destAssetsDir = path9.join(destDir, "assets");
+    await import_node_fs7.promises.cp(sourceAssetsDir, destAssetsDir, { recursive: true });
     supportingFiles = await listFilesRecursive(destAssetsDir, destDir);
   } catch {
   }
@@ -4616,7 +4898,7 @@ async function copyExampleArtifact(options2) {
 }
 
 // src/env.ts
-var path8 = __toESM(require("node:path"));
+var path10 = __toESM(require("node:path"));
 function getWorkspaceRoot() {
   return process.env.OPEN_DESIGN_WORKSPACE_ROOT?.trim() || process.cwd();
 }
@@ -4624,19 +4906,22 @@ var DEFAULT_OUTPUT_DIR = ".open-design";
 function getOutputDirectory() {
   return process.env.OPEN_DESIGN_OUTPUT_DIR?.trim() || DEFAULT_OUTPUT_DIR;
 }
+function getFigmaToken() {
+  return process.env.OPEN_DESIGN_FIGMA_TOKEN?.trim() || void 0;
+}
 function getAssetsRoot() {
   const contentPackageJson = require.resolve("@feimacode/open-design-agent-kit-content/package.json");
-  return path8.join(path8.dirname(contentPackageJson), "assets", "open-design");
+  return path10.join(path10.dirname(contentPackageJson), "assets", "open-design");
 }
 
 // src/store.ts
-var import_node_fs7 = require("node:fs");
-var path9 = __toESM(require("node:path"));
+var import_node_fs8 = require("node:fs");
+var path11 = __toESM(require("node:path"));
 function createFileActiveDesignSystemStore(workspaceRoot) {
-  const configPath = path9.join(workspaceRoot, ".open-design", "config.json");
+  const configPath = path11.join(workspaceRoot, ".open-design", "config.json");
   async function readConfig() {
     try {
-      const raw = await import_node_fs7.promises.readFile(configPath, "utf8");
+      const raw = await import_node_fs8.promises.readFile(configPath, "utf8");
       const parsed = JSON.parse(raw);
       return typeof parsed === "object" && parsed !== null ? parsed : {};
     } catch {
@@ -4656,14 +4941,14 @@ function createFileActiveDesignSystemStore(workspaceRoot) {
       } else {
         delete config.activeDesignSystemId;
       }
-      await import_node_fs7.promises.mkdir(path9.dirname(configPath), { recursive: true });
-      await import_node_fs7.promises.writeFile(configPath, JSON.stringify(config, null, 2) + "\n", "utf8");
+      await import_node_fs8.promises.mkdir(path11.dirname(configPath), { recursive: true });
+      await import_node_fs8.promises.writeFile(configPath, JSON.stringify(config, null, 2) + "\n", "utf8");
     }
   };
 }
 
 // src/tools.ts
-var path10 = __toESM(require("node:path"));
+var path12 = __toESM(require("node:path"));
 function slugify(input) {
   const slug = input.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 60);
   return slug || "artifact";
@@ -4671,7 +4956,7 @@ function slugify(input) {
 function suggestEntryPath(ctx, brief, skillName) {
   const slugSource = brief.trim().length > 0 ? brief : skillName;
   const slug = slugify(slugSource);
-  return path10.posix.join(ctx.outputDir, slug, `${slug}.html`);
+  return path12.posix.join(ctx.outputDir, slug, `${slug}.html`);
 }
 var KIND_TO_RENDERER = {
   html: "html",
@@ -4720,7 +5005,7 @@ async function listRemixablePrompts(ctx) {
 }
 function buildRemixPromptMessage(prompt) {
   const brief = prompt.examplePrompt ? ` ${prompt.examplePrompt}` : "";
-  return `Use the OpenDesign skill "${prompt.publicId}" (${prompt.displayName}).${brief}`;
+  return `Remix the Open Design example "${prompt.displayName}" \u2014 call the open-design MCP server's remix_open_design_example tool with skillId "${prompt.publicId}".${brief}`;
 }
 async function listDesignSystems(ctx, input) {
   const designSystems = await ctx.contentIndex.listDesignSystems(input.query, input.category);
@@ -4748,8 +5033,25 @@ async function prepareBrief(ctx, input) {
   const { designSystemId, designSystem } = resolution;
   const allCraftSections = await ctx.contentIndex.craftSections();
   const craftSections = selectCraftSections(allCraftSections, designSystem?.craftSuggested);
-  const suggestedEntryPath = suggestEntryPath(ctx, input.brief, skill.name);
   const existingAppFrameworks = await detectExistingApp(ctx.workspaceRoot);
+  let suggestedEntryPath;
+  let collectionContext;
+  if (input.collectionId) {
+    if (!input.screenRole) {
+      return `screenRole is required when collectionId is given \u2014 a short label for this screen's role in the flow, e.g. "splash", "value-prop", "checkout".`;
+    }
+    const siblings = await findCollectionArtifacts(ctx.workspaceRoot, ctx.outputDir, input.collectionId);
+    suggestedEntryPath = suggestCollectionScreenEntryPath(ctx.outputDir, input.collectionId, slugify(input.screenRole));
+    collectionContext = {
+      collectionName: input.collectionName ?? input.collectionId,
+      index: siblings.length + 1,
+      total: input.screenTotal ?? siblings.length + 1,
+      role: input.screenRole,
+      siblingScreens: siblings.map((s) => ({ role: s.screenRole ?? "?", title: s.title }))
+    };
+  } else {
+    suggestedEntryPath = suggestEntryPath(ctx, input.brief, skill.name);
+  }
   const instructions = composeInstructions({
     skillName: skill.name,
     skillBody: skill.body,
@@ -4758,7 +5060,8 @@ async function prepareBrief(ctx, input) {
     craftSections,
     brief: input.brief,
     suggestedEntryPath,
-    existingAppFrameworks
+    existingAppFrameworks,
+    collectionContext
   });
   const payload = {
     instructions,
@@ -4786,14 +5089,18 @@ async function registerArtifact(ctx, input) {
         title: input.title,
         supportingFiles: input.supportingFiles,
         sourceSkillId: input.sourceSkillId,
-        designSystemId: input.designSystemId
+        designSystemId: input.designSystemId,
+        collectionId: input.collectionId,
+        collectionName: input.collectionName,
+        screenIndex: input.screenIndex,
+        screenRole: input.screenRole
       }
     });
     return `Artifact registered at ${input.entryPath}.artifact.json
 
 ${JSON.stringify(manifest, null, 2)}
 
-Written to ${path10.join(ctx.workspaceRoot, input.entryPath)}. This host has no live preview editor \u2014 there is nothing further to open.`;
+Written to ${path12.join(ctx.workspaceRoot, input.entryPath)}. This host has no live preview editor \u2014 there is nothing further to open.`;
   } catch (err) {
     const message = err instanceof Error ? err.message : String(err);
     return `Failed to register artifact: ${message}`;
@@ -4816,17 +5123,17 @@ async function getArtifact(ctx, input) {
 }
 async function setActiveDesignSystemTool(ctx, input) {
   const result = await setActiveDesignSystem(input.designSystemId, ctx.store, (id) => ctx.contentIndex.getDesignSystem(id));
-  if (result.outcome === "cleared") return "Cleared the active OpenDesign design system.";
+  if (result.outcome === "cleared") return "Cleared the active Open Design design system.";
   if (result.outcome === "unknown") {
     const available = (await ctx.contentIndex.listDesignSystems()).map((d) => d.id).slice(0, 20);
     return `Unknown designSystemId "${result.unknownId}". Call list_open_design_design_systems to see available ids. A few available ids: ${available.join(", ")}`;
   }
-  return `Active OpenDesign design system set to "${input.designSystemId}" (${result.designSystem.name}).`;
+  return `Active Open Design design system set to "${input.designSystemId}" (${result.designSystem.name}).`;
 }
 async function createCustomDesignSystem(ctx, input) {
   const slug = slugify(input.name);
   const id = `user:${slug}`;
-  const suggestedEntryPath = path10.posix.join(ctx.outputDir, "design-systems", slug, "DESIGN.md");
+  const suggestedEntryPath = path12.posix.join(ctx.outputDir, "design-systems", slug, "DESIGN.md");
   const evidence = input.sourceUrl ? await extractBrandEvidence(input.sourceUrl) : void 0;
   const instructions = composeCustomDesignSystemInstructions({ name: input.name, brief: input.brief, suggestedEntryPath, id, evidence });
   return JSON.stringify({ instructions, suggestedEntryPath, id }, null, 2);
@@ -4836,7 +5143,7 @@ async function portToAppCode(ctx, input) {
   if (!artifact) {
     return `No artifact found at ${input.entryPath}. It may not have been written yet.`;
   }
-  const artifactName = typeof artifact.manifest?.title === "string" ? artifact.manifest.title : path10.basename(input.entryPath, path10.extname(input.entryPath));
+  const artifactName = typeof artifact.manifest?.title === "string" ? artifact.manifest.title : path12.basename(input.entryPath, path12.extname(input.entryPath));
   const targetComponentPath = input.targetComponentPath ?? await suggestTargetComponentPath(ctx.workspaceRoot, artifactName);
   const instructions = composePortToAppInstructions({
     artifactEntryPath: input.entryPath,
@@ -4846,6 +5153,33 @@ async function portToAppCode(ctx, input) {
   });
   return JSON.stringify({ instructions, suggestedTargetComponentPath: targetComponentPath }, null, 2);
 }
+async function pullFigmaFrame(ctx, input) {
+  if (!ctx.figmaToken) {
+    return "No Figma access token configured. Set the OPEN_DESIGN_FIGMA_TOKEN environment variable for this MCP server to a Figma personal access token (Figma \u2192 Settings \u2192 Personal access tokens) and try again.";
+  }
+  const ref = parseFigmaUrl(input.figmaUrl);
+  if (!ref) {
+    return `"${input.figmaUrl}" does not look like a Figma file/design URL.`;
+  }
+  let node;
+  try {
+    node = await fetchFigmaNode(ctx.figmaToken, ref);
+  } catch (err) {
+    return err instanceof FigmaApiError ? err.message : `Failed to fetch the Figma frame: ${err instanceof Error ? err.message : String(err)}`;
+  }
+  const frameSummary = summarizeFigmaNode(node);
+  const imageUrl = await fetchFigmaFrameImage(ctx.figmaToken, ref.fileKey, ref.nodeId);
+  const slug = slugify(node.name);
+  const suggestedEntryPath = path12.posix.join(ctx.outputDir, "figma", `${slug}.html`);
+  const instructions = composePullFigmaInstructions({
+    frameSummary,
+    frameName: node.name,
+    imageUrl,
+    designSystemId: input.designSystemId,
+    suggestedEntryPath
+  });
+  return JSON.stringify({ instructions, suggestedEntryPath }, null, 2);
+}
 async function remixExample(ctx, input) {
   const skill = await ctx.contentIndex.getSkill(input.skillId);
   if (!skill) {
@@ -4890,7 +5224,7 @@ var TOOL_DEFS = [
   {
     tool: {
       name: "list_open_design_skills",
-      description: "Lists available OpenDesign skills, design templates, and remixable examples \u2014 reusable design-task recipes, rendering styles, and (for 'example' entries) actual starting artifacts bundled with this server. Each result's id is namespaced as 'od:<mode>:<name>' (e.g. 'od:deck:guizang-ppt') \u2014 pass this full id as skillId to prepare_open_design_brief or remix_open_design_example. Each result's 'source' field is 'skill', 'design-template', or 'example'. Some results include an 'examplePrompt' \u2014 prefer it (or lightly adapt it) over inventing your own brief when it closely fits. A result with a non-empty 'exampleArtifactPath' has an actual rendered starting artifact \u2014 prefer remix_open_design_example over prepare_open_design_brief for those. Optionally filter by a free-text query, an exact mode, an exact source, and/or remixableOnly to see only entries with a rendered starting artifact.",
+      description: "Lists available Open Design skills, design templates, and remixable examples \u2014 reusable design-task recipes, rendering styles, and (for 'example' entries) actual starting artifacts bundled with this server. Each result's id is namespaced as 'od:<mode>:<name>' (e.g. 'od:deck:guizang-ppt') \u2014 pass this full id as skillId to prepare_open_design_brief or remix_open_design_example. Each result's 'source' field is 'skill', 'design-template', or 'example'. Some results include an 'examplePrompt' \u2014 prefer it (or lightly adapt it) over inventing your own brief when it closely fits. A result with a non-empty 'exampleArtifactPath' has an actual rendered starting artifact \u2014 prefer remix_open_design_example over prepare_open_design_brief for those. Optionally filter by a free-text query, an exact mode, an exact source, and/or remixableOnly to see only entries with a rendered starting artifact. If a query returns few or no results, call this tool again with a broader query or no arguments at all to browse the full catalog \u2014 do NOT search the filesystem, grep, or read any file (this catalog is not stored anywhere as a single readable file such as a content.json, index, or schema file; it exists only inside this server's own runtime and is reachable exclusively through this tool).",
       inputSchema: {
         type: "object",
         properties: {
@@ -4917,7 +5251,7 @@ var TOOL_DEFS = [
   {
     tool: {
       name: "list_open_design_design_systems",
-      description: "Lists available OpenDesign design systems \u2014 brand-inspired visual token sets (palette, typography, spacing, component rules), each with a 'category' and an 'active' flag marking the current active design system, if any. Optionally filter by a free-text query and/or an exact category.",
+      description: "Lists available Open Design design systems \u2014 brand-inspired visual token sets (palette, typography, spacing, component rules), each with a 'category' and an 'active' flag marking the current active design system, if any. Optionally filter by a free-text query and/or an exact category. If a query returns few or no results, call this tool again with a broader query or no arguments at all to browse the full catalog \u2014 do NOT search the filesystem, grep, or read any file (this catalog is not stored anywhere as a single readable file such as a content.json, index, or schema file; it exists only inside this server's own runtime and is reachable exclusively through this tool).",
       inputSchema: {
         type: "object",
         properties: {
@@ -4931,7 +5265,7 @@ var TOOL_DEFS = [
   {
     tool: {
       name: "prepare_open_design_brief",
-      description: "Composes generation instructions for an OpenDesign artifact by combining the chosen skill's workflow, an optional design system's visual tokens, universal craft rules, and the user's brief. Returns an 'instructions' string you must follow, plus a 'suggestedEntryPath'. Does NOT write any files \u2014 after calling it, author the entry file (and any supporting files) yourself with your normal file-editing tools, then call register_open_design_artifact.",
+      description: "Composes generation instructions for an Open Design artifact by combining the chosen skill's workflow, an optional design system's visual tokens, universal craft rules, and the user's brief. Returns an 'instructions' string you must follow, plus a 'suggestedEntryPath'. Does NOT write any files \u2014 after calling it, author the entry file (and any supporting files) yourself with your normal file-editing tools, then call register_open_design_artifact.",
       inputSchema: {
         type: "object",
         properties: {
@@ -4940,12 +5274,31 @@ var TOOL_DEFS = [
             type: "string",
             description: "Optional design system id from list_open_design_design_systems. If omitted, falls back to the active design system. If given explicitly, it also becomes the new active one."
           },
-          brief: { type: "string", description: "The user's design brief / request, in their own words." }
+          brief: { type: "string", description: "The user's design brief / request, in their own words." },
+          collectionId: {
+            type: "string",
+            description: 'Set this (a slug you derive once from the collection name, reused verbatim on every call) when this artifact is one screen of a multi-screen design collection \u2014 see the "design collections" guidance for the full workflow.'
+          },
+          collectionName: {
+            type: "string",
+            description: 'A short display name for the collection, e.g. "Fintech Onboarding Flow". Required together with collectionId.'
+          },
+          screenRole: {
+            type: "string",
+            description: `Required together with collectionId \u2014 this screen's short role label, e.g. "splash", "value-prop", "checkout".`
+          },
+          screenTotal: {
+            type: "number",
+            description: `Optional: the total number of screens you've planned for this collection, for an accurate "screen N of M" framing.`
+          }
         },
         required: ["skillId", "brief"]
       }
     },
-    handler: (ctx, args) => prepareBrief(ctx, args)
+    handler: (ctx, args) => prepareBrief(
+      ctx,
+      args
+    )
   },
   {
     tool: {
@@ -4967,7 +5320,11 @@ var TOOL_DEFS = [
             description: "Workspace-relative paths to sibling files the entry depends on, relative to the entry file's directory."
           },
           sourceSkillId: { type: "string", description: "The skillId used to generate this artifact, if any." },
-          designSystemId: { type: "string", description: "The designSystemId used to generate this artifact, if any." }
+          designSystemId: { type: "string", description: "The designSystemId used to generate this artifact, if any." },
+          collectionId: { type: "string", description: "The same collectionId passed to prepare_open_design_brief, if this screen is part of a design collection." },
+          collectionName: { type: "string", description: "The same collectionName passed to prepare_open_design_brief, if this screen is part of a design collection." },
+          screenIndex: { type: "number", description: "0-based position of this screen within its collection (0 for the first screen, 1 for the second, ...)." },
+          screenRole: { type: "string", description: "The same screenRole passed to prepare_open_design_brief, if this screen is part of a design collection." }
         },
         required: ["entryPath", "kind", "title"]
       }
@@ -4980,7 +5337,7 @@ var TOOL_DEFS = [
   {
     tool: {
       name: "get_open_design_artifact",
-      description: "Reads back a registered OpenDesign artifact: its manifest, entry file content, supporting file list, and any open comments. This host has no comment-authoring UI, so 'openComments' will normally be empty.",
+      description: "Reads back a registered Open Design artifact: its manifest, entry file content, supporting file list, and any open comments. This host has no comment-authoring UI, so 'openComments' will normally be empty.",
       inputSchema: {
         type: "object",
         properties: { entryPath: { type: "string", description: "Workspace-relative path to the artifact's entry file." } },
@@ -4992,7 +5349,7 @@ var TOOL_DEFS = [
   {
     tool: {
       name: "set_active_design_system",
-      description: "Sets (or clears, if designSystemId is omitted/empty) the active OpenDesign design system, persisted for this workspace. Used automatically by prepare_open_design_brief whenever called without an explicit designSystemId.",
+      description: "Sets (or clears, if designSystemId is omitted/empty) the active Open Design design system, persisted for this workspace. Used automatically by prepare_open_design_brief whenever called without an explicit designSystemId.",
       inputSchema: {
         type: "object",
         properties: {
@@ -5024,7 +5381,7 @@ var TOOL_DEFS = [
   {
     tool: {
       name: "port_open_design_artifact_to_app",
-      description: "Composes instructions for porting a finished OpenDesign artifact's design into this workspace's actual, existing application as real, idiomatic production code. Does NOT write any files. Directs the model to ground the port in a real existing component and explicitly excludes routing/navigation wiring.",
+      description: "Composes instructions for porting a finished Open Design artifact's design into this workspace's actual, existing application as real, idiomatic production code. Does NOT write any files. Directs the model to ground the port in a real existing component and explicitly excludes routing/navigation wiring.",
       inputSchema: {
         type: "object",
         properties: {
@@ -5037,10 +5394,25 @@ var TOOL_DEFS = [
     },
     handler: (ctx, args) => portToAppCode(ctx, args)
   },
+  {
+    tool: {
+      name: "pull_open_design_figma_frame",
+      description: `Composes instructions for translating a Figma frame into a real code artifact with 1:1 visual fidelity. Fetches the frame's structure via the Figma REST API (requires the OPEN_DESIGN_FIGMA_TOKEN environment variable \u2014 a Figma personal access token) and a best-effort rendered image export, then returns 'instructions' embedding a deterministic structural summary as ground truth. Does NOT write any files \u2014 after calling it, author the entry file yourself with your normal file-editing tools, then call register_open_design_artifact. figmaUrl must be a frame-scoped link (Figma's "Copy link to selection"), not a bare file link.`,
+      inputSchema: {
+        type: "object",
+        properties: {
+          figmaUrl: { type: "string", description: 'A Figma frame URL, e.g. from "Copy link to selection" \u2014 must include a node-id.' },
+          designSystemId: { type: "string", description: "Optional design system id from list_open_design_design_systems to align the translated code with." }
+        },
+        required: ["figmaUrl"]
+      }
+    },
+    handler: (ctx, args) => pullFigmaFrame(ctx, args)
+  },
   {
     tool: {
       name: "remix_open_design_example",
-      description: "Copies a curated OpenDesign example artifact (identified by its skillId, which must have a non-empty 'exampleArtifactPath') into the workspace as a starting point, registers it, and returns instructions to MODIFY the copied file rather than regenerate it from scratch.",
+      description: "Copies a curated Open Design example artifact (identified by its skillId, which must have a non-empty 'exampleArtifactPath') into the workspace as a starting point, registers it, and returns instructions to MODIFY the copied file rather than regenerate it from scratch.",
       inputSchema: {
         type: "object",
         properties: { skillId: { type: "string", description: "A skillId whose 'exampleArtifactPath' is non-empty." } },
@@ -5056,7 +5428,7 @@ function buildContext() {
   const assetsRoot = getAssetsRoot();
   const contentIndex = new ContentIndex(assetsRoot, () => `${workspaceRoot}/${outputDir}/design-systems`);
   const store = createFileActiveDesignSystemStore(workspaceRoot);
-  return { contentIndex, store, workspaceRoot, outputDir, assetsRoot };
+  return { contentIndex, store, workspaceRoot, outputDir, assetsRoot, figmaToken: getFigmaToken() };
 }
 async function main() {
   const ctx = buildContext();
@@ -5077,7 +5449,7 @@ async function main() {
   });
   server.setRequestHandler(import_types.ListPromptsRequestSchema, async () => {
     const prompts = await listRemixablePrompts(ctx);
-    return { prompts: prompts.map((p) => ({ name: p.name, description: `${p.displayName} (OpenDesign remixable example)` })) };
+    return { prompts: prompts.map((p) => ({ name: p.name, description: `${p.displayName} (Open Design remixable example)` })) };
   });
   server.setRequestHandler(import_types.GetPromptRequestSchema, async (request) => {
     const prompts = await listRemixablePrompts(ctx);
@@ -5086,7 +5458,7 @@ async function main() {
       throw new Error(`Unknown prompt: ${request.params.name}`);
     }
     return {
-      description: `${prompt.displayName} (OpenDesign remixable example)`,
+      description: `${prompt.displayName} (Open Design remixable example)`,
       messages: [{ role: "user", content: { type: "text", text: buildRemixPromptMessage(prompt) } }]
     };
   });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@feimacode/open-design-agent-kit-mcp",
-  "version": "0.1.5",
-  "description": "OpenDesign as an MCP server — the same skill/design-system/artifact tools the VS Code extension exposes, usable from any MCP-capable coding agent (Claude Code, Codex, and others).",
+  "version": "0.1.7",
+  "description": "Open Design as an MCP server — the same skill/design-system/artifact tools the VS Code extension exposes, usable from any MCP-capable coding agent (Claude Code, Codex, and others).",
   "license": "MIT",
   "engines": {
     "node": ">=18"
@@ -42,7 +42,7 @@
     "start": "node ./out/index.js"
   },
   "dependencies": {
-    "@feimacode/open-design-agent-kit-content": "^0.1.5",
+    "@feimacode/open-design-agent-kit-content": "^0.1.7",
     "@modelcontextprotocol/sdk": "^1.30.0"
   },
   "devDependencies": {