superdesign Claude Code プラグイン
Claude Code プラグインClaude Codeデザインデザイン・メディア制作Web・アプリ開発以下の解説は生成 AI によるものです。出典と照らし合わせてご確認ください。
Superdesignは、フロントエンドUIやマーケティング用グラフィックの新規デザインおよびリデザインを支援するClaude Code向けプラグイン（スキル）です。README によると、ユーザーのコードベースを読み込んで文脈を把握し、デザインシステムファイルを作成または更新した上で、外部サービスであるsuperdesign.devが提供する無限キャンバス上でUIドラフトを生成します。利用にあたっては付属のCLI（@superdesign/cli）をインストールし、superdesign.devへログインする必要があります。オンラインのプロンプトライブラリからスタイル参考を取得したり、外部サイトのURLからデザイン要素を抽出したりする機能も備えています。README では、開発者やインディーハッカー、UI・プロダクトデザイナーがコーディングエージェントを離れずにアイデアから実用的なUIドラフトへ進めることを想定していると述べられています。
連携サービスについて
superdesign.devは、README においてAIプロダクトデザインエージェントと説明されている外部サービスで、本プラグインが接続する先です。付属のCLIからログインすることでこのサービスに接続し、デザインドラフトを作成する無限キャンバスや、スタイル・コンポーネントの参考となるプロンプトライブラリを利用できます。ローカルのコードベースから作成したデザインシステムファイルやHTMLテンプレートは、CLIコマンドを通じてこのサービスに送られ、ドラフトの生成や反復に用いられます。
superdesign でできること
- コードベースを読み込み、デザインの判断材料となる文脈情報を収集する
- トークンやタイポグラフィ、コンポーネントを記載したデザインシステムファイルを作成または更新する
- オンラインのプロンプトライブラリからスタイル参考を検索・取得する
- 外部サイトのURLからスタイルガイドやトークン、コンテンツ構造などのデザイン要素を抽出する
- 現在のUIを再現したHTMLテンプレートを使ってプロジェクトを作成する
- 無限キャンバス上でデザインドラフトを生成し、replaceモードやbranchモードで反復する
- 複数ページにわたるユーザージャーニー全体のデザインフローを計画・実行する
- 完成したドラフトをHTMLファイルとして取得する
出典
superdesign の変更履歴
- Claude Code プラグイン superdesign が追加