はじめに
株式会社ネクストスケープ Chief Technology Office所属の小野塚です。
ここ最近Xや社内においてSuperpowersというプラグインが良いという意見がチラホラありまして、ちょっと試してみました。
設定
まずは設定から。
以下、Claude Codeでの操作になりますが、まずマーケットプレイスを登録する必要があります。
/plugin marketplace add obra/superpowers-marketplace
次に、このマーケットプレイスからプラグインをインストールします。
/plugin install superpowers@superpowers-marketplace
インストール自体はこれで終了。
では、Claude Codeを起動し、/pluginでインストール・有効になっていることを確認してみます。
上記スクリーンショットでわかる通り「superpowers」がenabled＝有効になっていることが確認できます。
実行
では、早速実装してみましょう。
以下、非常に簡単ではありますがプロンプトをなげてみます。
「Todoアプリを作ってください
すると質問が始まります。
次に以下の質問。
Todoの項目として管理したい情報はどれですか？
A) タイトルのみ（シンプル）
B) タイトル + 期限日
C) タイトル + 期限日 + 優先度（高/中/低）
D) その他（教えてください）
更に次の質問。
UIのスタイルはどうしますか？
A) Bootstrap（既存のRazor Pagesテンプレートに含まれている）
B) Tailwind CSS（モダンなユーティリティファースト）
C) シンプルなCSS（外部ライブラリなし）
そして、ユーザー認証、Todoの表示・フィルタリング機能といった形で質問が続きます。
一通り質問が終わって要件が揃ったということでアプローチについての質問になります。AJAXにするかEF Coreにするか。
すると設計内容についての確認へと進みます。
まずは「セクション１：アーキテクチャ概要」。
そして「セクション２：データモデル」。
「セクション３：ページ構成とＵＩ」
「セクション４：エラーハンドリングとセキュリティ」
以上の内容に問題が無ければ以下の場所に設計書が作成されます。
\docs\superpowers\specs
次に実装方針がプロジェクト内の以下の場所に作成されます。
docs\superpowers\plans\2026-04-18-todo-implementation.md
内容は割愛しますが、具体的な実装内容まで書かれており、1000行以上の内容になります。
今までのAIツールで作成される仕様書の中で一番データ量は多いかもしれません。
次に実装方法について相談されます。
文字が小さいと思いますので以下に転記します。
サブエージェント駆動（推奨） —
タスクごとに新しいサブエージェントを起動し、各タスク完了後にレビュー。高速で並列処理可能。
インライン実行 — このセッション内で executing-plans スキルを使って順番に実行。チェックポイントでレビュー。
サブエージェントもAIツールを使いこなしている人達が使っている印象かと思いますが、Superpowersを使えば使い方がわからなくてもこのタイミングで提案してくれます。
そしてここ最近よく使われているGit Worktree。話には聞くけど使っていないという方もいらっしゃるかと思いますが、これも設定して使用してくれます。
そしてタスクリストを作成し、それに沿って作業が進められます。
TDDに従ってテストプロジェクト、テストコードも作成され、テストが通っていることも確認できます。
visual-companionスキル
あとはブレインストーミングの中のvisual-companionというスキル。こちらが個人的に一番面白い機能でした。
実際に起動してみると以下のような文言が表示されます。
「UIの見直しをしているので、ビジュアルで確認できると便利なことがあると思います。モックアップ、レイアウト比較、
ワイヤーフレームなどをブラウザで表示しながら進めることができます。この機能はまだ新しく、トークンを多く使う場合があります。試してみますか？(ローカルURLを開く必要があります)」
そしてlocalhostで以下の画面になります。
次に以下のようにUIに関する質問があり、
最初の質問です。今回のUI見直しの主な目的はどれに近いですか？
- A — アプリ全体のビジュアルデザインを刷新したい（カラー、フォント、スタイル）
- B — ナビゲーション・ページ構成を改善したい（ログイン/Todo機能含む）
- C — Todoページなど特定のページにフォーカスして改善したい
- D — 上記の複数またはそれ以外
場合によっては先ほどの画面に以下のようにビジュアルを実際に確認・選択できます。
以下はカラーパレット。
そして最終的にモックアップを見せてくれました。
その場でデザインの比較・確認ができるので非常に良いです。
いかがでしょうか。ここ最近のAIツールのトレンドになっている仕様駆動開発、Git Worktree、サブエージョンといった様々な機能を使ってくれます。
では、改めてこのSuperpowersのreadmeを見てみましょう。
基本的なワークフローとして採用しているのが
・設計時におけるブレインストーミング
・GitWorktreeの使用
・サブエージェント駆動開発
・テスト駆動開発
等で実際に謳われているのがわかります。
次にスキルライブラリとして以下のようなものが設定されています。
■テスト駆動開発
レッド・グリーン・リファクタリングサイクル（テストアンチパターンのリファレンスを含む）
■デバッグ
体系的なデバッグ- 4段階の根本原因分析プロセス（根本原因追跡、多層防御、条件付き待機手法を含む）
■ブレインストーミング
ソクラテス式デザイン洗練法
■計画書作成
詳細な実施計画
また、Philosophy（哲学）として以下のように書かれています。これらも普段AIでコーディングを行っている人にとっては必要性が感じられるのではないでしょうか。
・テスト駆動開発- 常に最初にテストを書く
・場当たり的ではなく体系的に、推測ではなくプロセスに基づいて行動する
・複雑性の低減- シンプルさを第一の目標とする
・主張よりも証拠を重視する- 成功を宣言する前に検証する
最後に
いかがでしょうか。一言でいえば「至れり尽くせり」もしくは「全部盛り」という印象です。
サブエージェントやGit Worktreeを使っていない方はこのプラグインを入れて試してみてはいかがでしょうか。
当社ネクストスケープはこのように生成AIをはじめとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。
（以下当社お問合せフォーム）
当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。
