Communitygithub.com

petrkry/figma-build-design-skill

Figma画面をデザインシステム経由で構築するエージェントスキル。手動での再描画ではなく、Figma MCP経由でライブラリファーストに構築します。Claude、Codex、Cursorで動作します。

figma-build-design-skill とは?

このスキルは、Figma MCP(Model Context Protocol)を活用して、デザインシステムのコンポーネントやスタイルを使用しながらFigma画面を自動構築するためのエージェントスキルです。手動での再描画やスクリーンショットベースの再現ではなく、既存のライブラリコンポーネント、カラートークン、テキストスタイル、オートレイアウトをFigma API経由で直接操作することで、高速かつ正確な画面構築を実現します。主にClaude Code、Codex CLI、CursorといったAIエージェントとの連携を想定しており、開発者がデザインシステムを維持しながらUIのプロトタイピングや実装を効率化できます。また、このスキールは一貫性のあるデザインと迅速なイテレーションを促進し、Figma内でのコラボレーションを強化します。

対応✓Claude Code✓Codex CLI✓Cursor
npx skills add petrkry/figma-build-design-skill

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

figma-build-design-skill は何をしますか?

Figma画面をデザインシステム経由で構築するエージェントスキル — 手動での再描画ではなく、Figma MCP経由でライブラリファーストに構築します。Claude、Codex、Cursorで動作します。

関連スキル