Codex + Figma Toolchain (Steps and Skills for Installing Figma Skill/MCP · Generating Chart Component Library Slides · Converting Prototypes to Figma · Automatic SVG Icon Replacement)
A complete operation manual compiled by Will (will-ai-note) on "using the Codex Agent to write real designs directly to the Figma canvas via Figma MCP". It covers three parts: ① Environment setup — installing the Figma remote/desktop MCP server for Codex (to grant Codex permission to operate Figma) + installing/managing the official Figma Skill; ② Uses and prompts for seven core skills — figma-use (directly modify the canvas: create Frames/components/variables/Auto Layout), figma-use-slides (generate PPT inner pages), figma-generate-diagram (text → editable flowcharts/sequence diagrams/ER diagrams), figma-generate-design (code/HTML → Figma UI), figma-generate-library (codebase → design system Library), prototype-to-figma (running prototype → frame-by-frame Figma state drafts), Community skills; ③ Combined workflows — two-way sync between code prototypes and Figma, direct interface output from base screenshots, interaction framework → new interface, scanning local SVG icons for automatic semantic matching and replacement. Each section provides the Why/when to use/reusable prompts/pitfalls (e.g., figma-use requires a paid Full/Dev seat, Dev seats can only write in drafts, prototype-to-figma has spacing bugs but can split pages frame by frame). Division of labor with [[newtype-ai-coding]]: that article covers AI Coding tool stack selection and core mindsets, while this article focuses on the concrete implementation down to skills and prompts for the "design/prototype engineering" segment.