figma-guidelines
MCPツールを通じてFigmaで操作するAIエージェント向けのデザイン知識です。MCPを経由してFigmaで作業する際に活用します。レイアウト作成、コンポーネント構築、デザイントークン/変数の管理、ファイル整理、デザイン要素の操作に対応しています。コンポーネントアーキテクチャ(バリアント、プロパティ、スロット、アトミックデザイン)、オートレイアウト(方向、間隔、サイズ、折り返し、絶対配置)、変数とスタイル(トークンアーキテクチャ、モード、スコープ、エイリアシング)、コラボレーション機能(コメント、アノテーション、セクション、Dev Mode)、および重要な注意点(フォント読み込み、イミュータブルプロパティ、座標系、インスタンス制限)をカバーしています。デザインシステムの構築、レスポンシブレイアウトの作成、デザイントークンの設定、Figmaファイルの整理、コンポーネントライブラリの操作をユーザーがリクエストした場合にも活用します。Figmaに関わるあらゆるタスクで使用してください。
description の原文を見る
Figma design knowledge for AI agents operating through MCP tools. Use whenever working in Figma via MCP — creating layouts, building components, managing design tokens/variables, organizing files, or manipulating any design element. Covers component architecture (variants, properties, slots, atomic design), auto layout (direction, spacing, sizing, wrap, absolute positioning), variables and styles (token architecture, modes, scoping, aliasing), collaboration features (comments, annotations, sections, Dev Mode), and critical gotchas (font loading, immutable properties, coordinate systems, instance limitations). Also trigger when the user asks to build a design system, create responsive layouts, set up design tokens, organize a Figma file, or work with component libraries. If the task involves Figma in any way, use this skill.
SKILL.md 本文
Figma MCPエージェントスキル
FigmaプラグインAPIに接続するMCPツールを通じてFigmaを制御しています。プラグインAPIコードを直接記述することはできません—ツールを呼び出します。ただし、ツールを正しく呼び出すためにはFigmaのメンタルモデルを理解する必要があります。
Figmaの任意のタスクを実行する前に、これら5つのルールを内面化してください:
- フレームはユニバーサルコンテナです。 レイアウト、コンポーネント、ラッパーなど、すべてにフレームを使用してください。グループはほぼ必要ありません。長方形は子を持つことも、オートレイアウトを持つこともできません。
- オートレイアウトは手動配置に置き換わります。 フレームがオートレイアウトを持つと、その子のx/yはレイアウトエンジンによって制御されます。座標の代わりにサイジングプロパティ(
FILL、HUG、FIXED)を使用してください。 - フォントはテキスト変更前に読み込む必要があります。 テキストコンテンツまたはスタイルの変更には、フォントを事前に読み込む必要があります。これはエラーの最も一般的な原因です。
- プロパティはイミュータブルです。 フィル、ストロークおよびエフェクトは所定の位置で変更できません。サブプロパティを変更するのではな
...
詳細情報
- 作者
- majiayu000
- ライセンス
- unknown
- 最終更新
- 2026/5/9
Source: https://github.com/majiayu000/claude-skill-registry-data / ライセンス: unknown
関連スキル
nano-banana-2
inference.sh CLIを通じてGoogle Gemini 3.1 Flash Image Preview(Nano Banana 2)で画像を生成します。テキストから画像を生成する機能、画像編集、最大14枚の複数画像入力、Google Searchグラウンディング機能に対応しています。トリガーワード:「nano banana 2」「nanobanana 2」「gemini 3.1 flash image」「gemini 3 1 flash image preview」「google image generation」
octocode-slides
洗練されたマルチファイル形式のHTMLプレゼンテーションを生成します。6段階のフロー(概要 → リサーチ → アウトライン → デザイン → 実装 → レビュー)で構成されています。各スライドは独立したHTMLファイルとなり、iframeで読み込まれます。「スライドを作成してほしい」「プレゼンテーションを作ってほしい」「HTMLスライドを生成してほしい」「デックを構築してほしい」といった依頼や、ノート・ドキュメント・コードを洗練されたプレゼンテーションに変換する際に使用できます。
gpt-image2-ppt
OpenAIのgpt-image-2を使用して、視覚的に優れたPPTスライドを生成します。Spatial Glass、Tech Blue、Editorial Monoなど10種類のキュレーション済みスタイルに対応し、ユーザーが提供したPPTXファイルを模倣するテンプレートクローンモードも搭載しています。HTMLビューアと16:9形式のPPTXファイルを出力します。プレゼンテーション、スライド、ピッチデック、投資家向けPPT、雑誌風PPTの作成依頼などで活用してください。
nano-banana
Nano Banana PRO(Gemini 3 Pro Image)およびNano Banana(Gemini 2.5 Flash Image)を使用したAI画像生成機能です。以下の場合に活用できます:(1)テキストプロンプトからの画像生成、(2)既存画像の編集、(3)インフォグラフィックス、ロゴ、商品写真、ステッカーなどのプロフェッショナルなビジュアルアセット制作、(4)複数画像での人物キャラクターの一貫性保持、(5)正確なテキスト描画を含む画像生成、(6)AI生成ビジュアルが必要なあらゆるタスク。「画像を生成」「画像を作成」「写真を作る」「ロゴをデザイン」「インフォグラフィックスを作成」「AI画像」「nano banana」またはその他の画像生成リクエストをトリガーとして機能します。
oiloil-ui-ux-guide
モダンでクリーンなUI/UXガイダンス・レビュースキルです。新機能や既存システム(Webアプリ)に対して、実行可能なUI/UX改善提案、デザイン原則、デザインレビューチェックリストが必要な場合に活用できます。CRAP(コントラスト・反復・配置・近接)をベースに、タスクファーストなUX、情報設計、フィードバック・システムステータス、一貫性、affordances、エラー防止・復旧、認知負荷を重視します。モダンミニマルスタイル(クリーン・余白・タイポグラフィ主導)を強制し、不要なテキストを削減、アイコンとしての絵文字を禁止し、統一されたアイコンセットから直感的で洗練されたアイコンを推奨します。
axiom-hig-ref
Apple Human Interface Guidelines リファレンス — 色(セマンティックカラー、カスタムカラー、パターン)、背景(マテリアル階層、ダイナミック背景)、タイポグラフィ(標準スタイル、カスタムフォント、Dynamic Type)、SF Symbols(レンダリングモード、色、多言語対応)、ダークモード、アクセシビリティ、プラットフォーム固有の考慮事項を網羅したガイドラインです。