superdesign-skill について
IDEエージェント向けのデザインスキルです。SuperDesign CLI経由でブラウザーキャンバスに接続し、プロンプト検索、既存素材からのブランド抽出、デザイン案の反復を行えます。
主な機能
- 01SuperDesignのブラウザーキャンバスに接続
- 02デザインプロンプトライブラリを検索
- 03既存素材からブランドアイデンティティを抽出
- 04プロジェクト作成とデザイン案の反復
活用シーン
- 01キャンバスでデザイン案を探索
- 02複数のデザイン案を整理・比較
- 03既存素材からブランドスタイルを抽出
- 04デザイン案への即時な視覚フィードバック
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/superdesign-skillを入力して読み込まれたか確認します。
同梱ファイルstub.yaml
詳細
superdesign-skill
カタログの概要 — プラットフォームの全容はこちら：superdesigndev/superdesign-skill
アカウント／環境要件
@superdesign/cli をグローバルにインストールする必要があります。 このスキルは CLI ブリッジ経由で SuperDesign キャンバスと通信するため、インストールされていないとスキルの呼び出しに失敗します。
インストール方法
| 手順 | コマンド |
|---|---|
| 1. SuperDesign CLI をインストール | npm install -g @superdesign/cli@latest |
| 2. Claude スキルをインストール | npx skills add superdesigndev/superdesign-skill |
| 3. キャンバスを起動 | superdesign （ブラウザーのキャンバスを開きます） |
判断フロー
- @superdesign/cli はインストールされていますか？
superdesign --versionを実行します。- いいえ → インストールします：
npm install -g @superdesign/cli@latest - はい → 手順 2 に進みます。
- いいえ → インストールします：
- スキルはインストールされていますか？
~/.design-agent-skills/skills/superdesign-skill/SKILL.mdを確認します。- いいえ →
npx skills add superdesigndev/superdesign-skill - はい →
superdesign-skillを呼び出して続行します。
- いいえ →
- キャンバスは起動していますか？ まだ起動していない場合は、ターミナルで
superdesignを開きます。
機能
無限キャンバスのデザインワークスペースを IDE エージェントのループに直接取り込みます。エージェントはデザインプロンプトのライブラリを検索したり、既存のアセットからブランドアイデンティティを抽出したり、新しいデザインプロジェクトを作成したり、ブラウザーキャンバスですぐに視覚的なフィードバックを得ながらデザイン案を反復したりできます。デザイン案の空間的な整理が重要となる、自由なアイデア出しのセッションに適しています。
使用しない場合
- SuperDesign CLI がインストールされていない場合 — このスキルには代替のレンダリング手段がありません
- アイデア出しを伴わない標準的な UI コード生成の場合 — 代わりにコンポーネント生成スキルを使用してください
- ブラウザーのないヘッドレス環境またはサーバー環境
コメント
Markdown 対応