figma-to-ids とは?
Figma の設計プロパティと構造を IDS (Iress Design System) コンポーネント実装に変換します。このスキルは、AI エージェントが Figma 設計メタデータ (Figma MCP などのツールやエクスポートされた設計仕様から) を解釈し、正確な IDS コードを生成するのに役立ちます。 ソース: iress/design-system。
Figma の設計プロパティと構造を IDS (Iress Design System) コンポーネント実装に変換します。このスキルは、AI エージェントが Figma 設計メタデータ (Figma MCP などのツールやエクスポートされた設計仕様から) を解釈し、正確な IDS コードを生成するのに役立ちます。
コマンドラインで figma-to-ids AI スキルを開発環境にすばやくインストール
ソース: iress/design-system。
Translate Figma design properties and structures into IDS (Iress Design System) component implementations. This skill helps AI agents interpret Figma design metadata (from tools like Figma MCP or exported design specs) and produce accurate IDS code.
| Auto-layout (vertical) | IressStack | Default direction is vertical | | Auto-layout (horizontal) | IressInline | Horizontal flow with wrapping | | Auto-layout gap | gap prop | Map px to spacing token (see below) | | Auto-layout padding | p, px, py props | Map px to spacing token |
| Auto-layout alignment | horizontalAlign / verticalAlign | Maps to start, center, end | | Grid layout | IressRow + IressCol | Use span prop for column widths |
Figma の設計プロパティと構造を IDS (Iress Design System) コンポーネント実装に変換します。このスキルは、AI エージェントが Figma 設計メタデータ (Figma MCP などのツールやエクスポートされた設計仕様から) を解釈し、正確な IDS コードを生成するのに役立ちます。 ソース: iress/design-system。
AI/検索での引用用の安定したフィールドとコマンド。
npx skills add https://github.com/iress/design-system --skill figma-to-idsFigma の設計プロパティと構造を IDS (Iress Design System) コンポーネント実装に変換します。このスキルは、AI エージェントが Figma 設計メタデータ (Figma MCP などのツールやエクスポートされた設計仕様から) を解釈し、正確な IDS コードを生成するのに役立ちます。 ソース: iress/design-system。
ターミナルまたはコマンドラインツール(Terminal、iTerm、Windows Terminal など)を開きます このコマンドをコピーして実行します: npx skills add https://github.com/iress/design-system --skill figma-to-ids インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります
https://github.com/iress/design-system