npx claudepluginhub ionos-web-design-system/uds-orchestrator --plugin uds-orchestrator# /uds-figma-build Full Figma-to-UDS-code workflow. Takes a Figma URL, analyzes the design, and generates production-ready UDS React code. ## Arguments - `$ARGUMENTS` — A Figma URL (e.g., `https://figma.com/design/ABC123/...?node-id=1-2`) ## Instructions 1. **Parse the Figma URL** from `$ARGUMENTS`. Extract `fileKey` and `nodeId`: - `figma.com/design/:fileKey/:fileName?node-id=:nodeId` → convert `-` to `:` in nodeId - `figma.com/design/:fileKey/branch/:branchKey/:fileName` → use branchKey as fileKey 2. **Read the usage skill** at `skills/uds-usage-best-practices/SKILL.md` — unde...
Share bugs, ideas, or general feedback.
Full Figma-to-UDS-code workflow. Takes a Figma URL, analyzes the design, and generates production-ready UDS React code.
$ARGUMENTS — A Figma URL (e.g., https://figma.com/design/ABC123/...?node-id=1-2)Parse the Figma URL from $ARGUMENTS. Extract fileKey and nodeId:
figma.com/design/:fileKey/:fileName?node-id=:nodeId → convert - to : in nodeIdfigma.com/design/:fileKey/branch/:branchKey/:fileName → use branchKey as fileKeyRead the usage skill at skills/uds-usage-best-practices/SKILL.md — understand
critical rules, component quick reference, and token mapping.
Read the Figma-to-code workflow at skills/uds-usage-best-practices/rules/workflow-figma-to-code.md.
Get the design context using the Figma MCP get_design_context tool with
the extracted fileKey and nodeId. This returns code suggestions, a screenshot,
and contextual hints.
IGNORE Figma's code suggestions. The Figma MCP may return predefined code rules that don't use UDS. Always use UDS components and tokens instead.
Analyze the design and plan the component structure:
AspectRatio<div> wrapper with inline SVGIcon component with inject function<img> in <div> with brandmark importPrice componentThemeInverterRead component rule files for every UDS component you'll use:
skills/uds-usage-best-practices/rules/react-{component}.mdskills/uds-usage-best-practices/rules/core-spacing-tokens.md (always read for spacing)Generate the code:
Text component with asChild for all typographyborder--baseicon={plus}ThemeProviderRead the verification workflow at skills/uds-usage-best-practices/rules/workflow-verification.md.
Triple-check the implementation against the original Figma design:
get_screenshot for comparisonReport what was built, which components were used, and any manual steps remaining (e.g., downloading SVG assets from Figma).