SuperAPI AI Directory

seed-migrate-component-docs-from-figma

Design & creation

View repository

Updated 10-15 20:30

About this skill

Migrating component documentation from Figma

Write or update the SEED Design component guide MDX based on the content and images of the Figma document layer.

Input and scope

  • Figma node URLis required. If it is not provided and cannot be confirmed from another tool or context, request only this value from the user.
  • Filenameis inferred if it can be determined from the name given by the user, the target MDX path, and the existing component ID. Request it only when it is still ambiguous.
  • The target file is docs/content/components/{file-name}.mdx. For local edits to an existing file, read only the target section and the necessary Figma nodes, and do not re-extract the entire document.

1. Extract Figma content

For each provided node URL, use get_node_info. Since it is a tool that takes the URL directly, do not use fileKey·nodeIdswhich requires a separate get_nodes_info.

Extract in parallel only when multiple URLs are independent of each other and the task of merging the results is sufficient. Otherwise, extract in order and structure the headings, body text, tables, Do/Don't, and image positions.

2. Write MDX

For new documents and new sections, read only the MDX component rules to use in references/patterns.md. For local edits to an existing document, follow only the existing patterns adjacent to the relevant component.

  • Use only the body content present in Figma. Do not arbitrarily add explanations, guidelines, or table items, or change their meaning.
  • Convert bold text in Figma to **bold**, and content that fits a table format to a Markdown table.
  • When mentioning another actual component, link to that component's page.
  • FigmaImageafter the body, not directly below the title.
  • Follow the order Anatomy → Properties → Guidelines → Comparison → V3 Changes → Specification only when the relevant section exists in Figma.
  • Use polite Korean and keep the official English notation for component names and technical terms.

Leave image IDs as empty placeholders at this step and map them in the next step.

3. Map image IDs

From the parent layer, find Document / Image children as follows.

find_nodes(name: "Document / Image", nodeId: "{parent layer ID}")

Only when the order is clear from the document flow and parent relationships, put them into the id=""·figmaId="" placeholders in order. If the mapping is ambiguous due to a count mismatch or multiple reasonable correspondences, do not assign arbitrarily; after investigating the confirmable parent and order further, ask the user only about the choices that remain.

4. Review the target scope

Check the following only for the changed MDX and new or changed elements.

  • PlatformStatusTableIf it is a component guide, it is directly after the frontmatter, and ComponentSpecBlockis under Specification only when there is an actual related Rootage spec.
  • Check Markdown syntax, official English component names, sentence/component confusion, and duplicate content.
  • Only verify newly added or changed component links and token links on the actual target page.
  • If Figma mentions platform-specific content such as Web/React, iOS, or Android, inform the user of the findings and the documentation coverage.

Notes

docs/content/components/radio.mdx의 Do/Don't·Grid·Card와 docs/content/components/action-button.mdxRefer to Properties, Guidelines, and Comparison only when the pattern requires them.