01
このSkillでできること
- ✓ページ、機能、画面、フローのデザイン案作成
- ✓複数モデルによるデザイン案の比較
- ✓デザインシステムや再利用可能なコンポーネントの設計
- ✓プレゼンテーションやポスターなどのグラフィック作成
02
使い方
01
STEP 1
作りたい画面や成果物の種類を指定する
02
STEP 2
既存UIや参照URL、コードベースがあれば共有する
03
STEP 3
比較したい方向性やモデル、デザイン制約を伝える
04
STEP 4
既存案の継続、置換、分岐などの編集方針を指定する
03
Skillのインストール
初心者におすすめ
AIにこのSkillを追加してもらう
GitHub URLごとCodexやClaude Codeへ渡し、現在の環境に合う方法を判断してもらいます。
このGitHubリポジトリにあるSkillを確認し、現在の環境に適した方法でインストールしてください。
インストール後、正常に利用できることを確認し、基本的な使い方も簡潔に説明してください。
Repository:
https://github.com/superdesigndev/superdesign-skill手動でインストールする
README / SKILL.mdから機械抽出できたコマンドのみ表示しています。推測したコマンドではありません。
npm install -g @superdesign/cli@latest
superdesign login04
このSkillを使うプロンプト例
Skill名を明示すると、意図したSkillを使わせやすくなります。自動発動型では必須とは限りません。
SaaS管理画面のダッシュボードを設計してください。既存サイトの配色を参考にし、再利用可能なコンポーネントとレスポンシブな複数画面を含めてください。出力例を見る
キャンバス上のデザイン案、画面構成、デザインシステム、コンポーネント案、必要に応じた画像・動画アセット。05
安全性チェック
自動解析による参考情報です。Skillの安全性を保証するものではありません。
外部API通信検出あり
Shellコマンド実行明確な記述なし
ファイル読み取り明確な記述なし
ファイル書き込み明確な記述なし
ネットワークアクセス検出あり
認証情報明確な記述なし
検出根拠を見る
- network: omitted] --- ## Links - Web app: [superdesign.dev](https://superdesign.dev) - Prompt library: [superdesign.dev/library](https://superdesign.dev/libra
- network: esign.dev) - Prompt library: [superdesign.dev/library](https://superdesign.dev/library) - Design system convention: [DESIGN.md](./DESIGN.md) - Skill inst
06