penpot-mcp は何をしますか？
AIエージェントスキル。公式Penpot MCPサーバーを介して、Penpotデザインシステム、プロトタイプ、トークンの作成、監査、保守、およびデザインからコードへのワークフローを実現します。
機能
- デザインシステム監査: コンポーネント、スタイル、トークンの一貫性とベストプラクティス準拠をチェック
- プロトタイプ管理: プロトタイプの作成、更新、リンクの検証
- デザイントークン: トークンの抽出、適用、同期
- デザインからコードへ: デザイン要素をコードスニペットやコンポーネントに変換
対応プラットフォーム
- Claude Code
- Cursor
- Codex
- MCP対応の他のAIエージェント
使用方法
- Penpot MCPサーバーを設定します。
- このスキルをAIエージェントにロードします。
- 自然言語コマンドを使用して、Penpotプロジェクトとやり取りします。
設定
# 環境変数の設定
export PENPOT_API_URL="https://your-penpot-instance.com"
export PENPOT_API_TOKEN="your-api-token"
例
- 「デザインシステムのコンポーネントを監査する」
- 「選択したフレームのプロトタイプリンクを更新する」
- 「現在のプロジェクトからデザイントークンを抽出する」
- 「このデザイン要素をReactコンポーネントに変換する」