Use figma-generate-design to reverse-generate pages from code into Figma

This article introduces the `figma-generate-design` Skill in the OpenAI curated and Figma MCP ecosystems: on the premise that Figma MCP is connected and the target file has a design system, it writes application pages or multi-block layouts into Figma in the form of component instances and Tokens, and forcibly cooperates with `figma-use`. The article verifies official processes including plugin installation (Cursor / Claude Code / Codex), npx skills installation method, block assembly and parallel calibration of `generate_figma_design`, as well as the boundaries between adjacent Skills such as `figma-implement-design` and Code Connect.

Read More