feat: enhance instructions for get_code tool with detailed usage guidelines and layout handling

Author: Justineo

packages/mcp-server/src/instructions.md

@@ -1,11 +1,12 @@
 You are connected to a Figma design file via the MCP server. Convert design elements into production code, preserving design intent while fitting the user’s codebase conventions.
 
-- Start from `get_code` as the baseline, then refactor to match project conventions (components, styling system, file structure, naming).
+- Start from `get_code` as the baseline (omit `nodeId` to use the current single selection), then refactor to match project conventions (components, styling system, file structure, naming). Treat `get_code` as authoritative.
+- If `get_code` returns a `depth-cap` warning, call `get_code` again once per listed `nodeId` to fetch each omitted subtree.
 - Layout confidence:
-  - If `get_code` contains no `data-hint-auto-layout`, it likely indicates the layout is explicit. You can be more confident implementing directly from `get_code`.
-  - If any `data-hint-auto-layout` is `none` or `inferred`, the corresponding layout may be uncertain. If you feel ambiguity or uncertainty, consult `get_structure` (hierarchy + geometry) and `get_screenshot` (visual intent such as layering/overlap/masks/shadows/translucency).
-- If `data-hint-component` plus repetition supports it, extract reusable components/variants aligned with project patterns. Do not preserve hint strings in output.
+  - If `data-hint-auto-layout="inferred"` appears, layout may be less certain. You can call `get_structure` or `get_screenshot` with a specific `nodeId` (both accept `nodeId`, otherwise they use the current single selection) to improve layout understanding, but keep `get_code` as the baseline.
+  - Otherwise, assume layout is explicit and implement directly from `get_code`.
+- If `data-hint-design-component` plus repetition supports it, extract reusable components/variants aligned with project patterns. Do not preserve hint strings in output.
 - Tokens: `get_code.tokens` is a single map keyed by canonical token name. Multi‑mode values use `${collectionName}:${modeName}` keys. Nodes with explicit overrides include `data-hint-variable-mode="Collection=Mode;Collection=Mode"`; use this to pick the correct mode for a given node. Collection names are assumed unique.
 - Assets: follow the project’s existing conventions/practices (icon system, asset pipeline, import/path rules, optimization) to decide how to represent and reference assets. If `get_code` uses resource URIs, you may replace them with the project’s canonical references when appropriate without changing rendering.
-- Do not output any `data-*` attributes returned by `get_code`.
+- Do not output any `data-*` attributes returned by `get_code` (they are hints only).
 - For SVG/vector assets: use the exact provided asset, preserving `path` data, `viewBox`, and full SVG structure. Never redraw or approximate vectors.

packages/mcp-server/src/tools.ts

@@ -71,7 +71,7 @@ export const TOOL_DEFS = [
   extTool({
     name: 'get_code',
     description:
-      'Get a high-fidelity code snapshot for a nodeId/current selection, including assets/tokens and codegen plugin/config. Start here, then refactor into your component/styling/file/naming conventions; strip any data-* hints. If no data-hint-auto-layout is present, layout is explicit; if any hint is none/inferred, pair with get_structure/get_screenshot to confirm hierarchy/overlap. Use data-hint-component plus repetition to decide on reusable components. Replace resource URIs with your canonical asset system as needed. Tokens: get_code.tokens is a single map keyed by canonical token name; multi-mode values use `${collectionName}:${modeName}` keys. Nodes with explicit mode overrides include data-hint-variable-mode="Collection=Mode;Collection=Mode". Collection names are assumed unique.',
+      'Get a high-fidelity code snapshot for a nodeId/current selection (omit nodeId to use the current single selection), including assets/tokens and codegen plugin/config. Start here, then refactor into your component/styling/file/naming conventions; strip any data-* hints. Treat get_code as authoritative. If warnings include depth-cap, call get_code again once per listed nodeId to fetch each omitted subtree. If any data-hint-auto-layout="inferred" appears, you may call get_structure or get_screenshot with a nodeId (both accept nodeId; omit it to use the current single selection) to confirm hierarchy/overlap, but keep get_code as the baseline. Use data-hint-design-component plus repetition to decide on reusable components. Replace resource URIs with your canonical asset system as needed. Tokens: get_code.tokens is a single map keyed by canonical token name; multi-mode values use `${collectionName}:${modeName}` keys. Nodes with explicit mode overrides include data-hint-variable-mode="Collection=Mode;Collection=Mode". Collection names are assumed unique.',
     parameters: GetCodeParametersSchema,
     target: 'extension',
     format: createCodeToolResponse