スキル自身の言葉で
penpot/penpot-mcpサーバーを通じてPenpotで実際のインターフェースを設計するためのガイドです。エージェントがPenpotプラグインAPIを操作するデザイナーおよび開発者向けに書かれています。汎用的なアドバイスではなく、動作する手順を具体的に指定しています。MCPサーバーが既に起動しているかどうかを確認し、ファイルに既存する色、テキストスタイル、コンポーネントを発見し、penpotUtils.shapeStructureで階層を調べ、ボード、矩形、テキストを作成し、addFlexLayoutコンテナを適用します。
フォールバックとなる8pxのスペーシングとタイポグラフィのスケール、モバイル375x812とダッシュボード1440x900のレイアウト、ボタン・フォーム・ナビゲーションのチェックリスト、WCAGコントラストとタッチターゲットの制限、ボード配置のスペーシング、幅と高さが読み取り専用であるといったPenpot APIの落とし穴、analyzeDescendants、fontSizeフィルタリング、export_shapeによる検証を提供します。
生成されるもの
- プラグインコンテキストで実行されるJavaScriptによって作成された、新規または変更済みのPenpotデザインです。
- 推測ではなくデザインを実際に確認するために使用される、選択したシェイプのPNGまたはSVGレンダリングです。
- ハンドオフ用に、子要素を含む選択範囲から抽出されたCSSです。
仕組み
- 01サーバーが起動していることを確認する
最初のステップはpenpot_api_infoへの試行呼び出しであり、接続が既に機能している場合にインストール手順を案内されることがないようにしています。
- 02既存のデザインシステムを見つける
描画を始める前に、ブランドガイドラインについて確認し、既に使用されているコンポーネント、色、パターンを現在のファイルから読み取ります。
- 03ページ構造を調べる
shapeStructureは既存の階層を返すため、新しい要素をキャンバス上の既存要素との関係で配置できます。
- 04要素を作成する
ボード、矩形、テキストは、文章で説明されるのではなく、Penpotプラグインコンテキスト内のプラグイン呼び出しによって作成されます。
- 05エクスポートして検証する
すべての変更はエクスポートで終わります。これにより結果は画像として確認され、コードだけを信用することはありません。