用 OpenAI 官方 figma Skill，把 Figma 設計拉進 AI 編程工作流
介紹 OpenAI curated 的 figma Skill：它如何配合 Figma MCP（mcp.figma.com）獲取設計上下文、截圖、變量與資源，並按固定流程把節點落地爲項目代碼。文中核實了安裝方式（$skill-installer / 目錄拷貝）、Codex 的 MCP 配置（FIGMA_OAUTH_TOKEN、RMCP client）、必走工具鏈（get_design_context → get_metadata → get_screenshot）以及鏈接驅動的提示詞寫法，適合在 Codex、Cursor、Claude Code 中做設計到代碼協作的開發者。
閱讀全文figma-create-design-system-rules：給 Agent 寫一套項目專屬設計系統規則
介紹 openai/skills 策展目錄中的 figma-create-design-system-rules：在已連接 Figma MCP 的前提下，分析代碼庫並生成項目級設計系統規則，約束組件路徑、Design Token、樣式方案與 Figma-to-code 流程，分別寫入 CLAUDE.md、AGENTS.md 或 .cursor/rules/figma-design-system.mdc，緩解 AI 落地 UI 時亂用間距、硬編碼顏色、重複造組件等問題。文中核實安裝方式、五步工作流與注意事項。
閱讀全文用 figma-generate-design 把頁面從代碼反向生成到 Figma
介紹 OpenAI curated 與 Figma MCP 生態中的 figma-generate-design Skill：在已連接 Figma MCP、目標文件具備設計系統的前提下，把應用頁面或多區塊佈局按組件實例與 Token 寫入 Figma，並強制配合 figma-use。文中核實了插件安裝（Cursor / Claude Code / Codex）、npx skills 安裝方式、按區塊組裝與 generate_figma_design 並行校準等官方流程，以及與 figma-implement-design、Code Connect 等相鄰 Skill 的邊界。
閱讀全文