Superpowers入門:AIの実装を、設計・小さな計画・検証につなぐ

AIがすぐにコードを書き始めると、目的の確認やテストが後回しになることがあるで。実装を頼む前後の作業も含めて、開発の進め方を整えるスキル集を紹介するで。

obra/superpowersは、設計の対話から実装計画、テスト、レビューまでを組み合わせるAIコーディング向けワークフローやで。この記事は公式README、導入案内、LICENSEを確認した紹介やで。実機での実行・性能比較は行ってへんで。

Superpowersでできること

AIと継続的に機能開発や修正を行う人に向いてるで。READMEは要望を質問で明らかにし、設計を確認した後、小さな実装計画とテストを起点にした作業へ進む流れを説明してるで。

今回のゴールと環境

小さなフォームの設計・計画・確認方法を整理する。

確認した範囲:2026年10月24日に公式READMEや導入資料を読み直して、以下の手順を具体化したで。この改訂でアプリのインストールから最終結果までを実機で通したわけやない。成功の目安は、手元で試すときのチェックとして使ってな。

準備

ここではWindows 11 x64とPowerShellで進めるで。スタートで「PowerShell」を検索して開いてな。Node.js公式ダウンロードで24系LTS・Windows・x64のInstaller(.msi)を選び、ダウンロードしたファイルを開いて画面に沿って入れてな。入れ終わったらPowerShellを開き直すんや。

node --version
npm.cmd --version

両方にバージョンが出たら準備OKや。以下ではWindowsのスクリプト実行ポリシーで止まりにくいnpm.cmdとnpx.cmdを使うで。インストール済みなら入れ直す必要はないで。

Git公式のWindows用ページからx64 Setupをダウンロードし、インストーラーの案内に沿って入れてな。PowerShellを開き直し、git --versionでバージョンが出ることを確認するんや。

今回はClaude Codeを使うで。使えるプランやAPIの支払いは別に必要やから、公式の準備・ログイン案内を先に確認してな。PowerShellで次を実行し、インストール後は新しいPowerShellを開いてな。

winget install Anthropic.ClaudeCode

WinGetがないときは、WindowsのMicrosoft Storeで「アプリ インストーラー」を入れるか更新してからやり直してな。次の確認でバージョンが出たら準備OKや。実際にclaudeを起動するんは、下の練習フォルダーを作ってからやで。初回起動は画面の案内でブラウザーにログインし、戻って入力欄が使えることを確かめてな。

claude --version

PowerShell用のコマンドと、Claude Codeの入力欄へ送る文は別やで。「Claude Codeで入力」と書いたブロックをPowerShellへ貼らんようにしてな。AIにファイルを読ませると、その内容が利用するサービスへ送られることがあるで。最初は以下の架空例だけで試そか。

New-Item -ItemType Directory -Force "$env:USERPROFILE\github-practice\superpowers" | Out-Null
Set-Location "$env:USERPROFILE\github-practice\superpowers"

使い方

@'
<!doctype html><html lang="ja"><meta charset="utf-8"><title>練習フォーム</title><form><label>名前 <input name="name"></label><button>確認</button></form></html>
'@ | Set-Content index.html -Encoding UTF8

練習用のindex.htmlを作ったで。プラグインの導入場所は次の案内を守ってな。

ここでPowerShellにclaudeと入力して、Claude Codeを起動してな。初回ログインを済ませたら、次はその入力欄へ1行ずつ送るで。

Claude Codeで入力:

/plugin install superpowers@claude-plugins-official

Claude Codeが開いてるときは/exitで閉じ、PowerShellで同じフォルダーからclaudeを起動し直すで。フォルダーを信頼するか聞かれたら、今作った練習用の場所か確認してな。

Claude Codeで入力:

このindex.htmlに入力内容の確認表示を加えたい。Superpowersの設計と計画の流れを使って、空欄時・入力済み・表示を消す操作を先に整理して。今回は外部送信はしない。実装前に設計を見せて。

成功の目安:設計への質問に答え、小さく分かれた計画と確認方法を読めることや。納得した範囲だけ実装を頼み、保存したHTMLで空欄・入力済みの両方を確かめてな。

仕組みとデータの流れ

自分のPCPCの外スキル・練習ファイルClaude Code利用するAIサービス入力・操作と結果通信・受け取る情報
スキルはPC内に置く作業の指示や。AIのモデルそのものをPC内に入れるわけやないで。ログインやAPIキーはClaude Code側で扱い、許可した入力やコードが利用するサービスへ送られるで。構成を単純化した独自図解で、製品の画面や実行結果やないで。細かな通信や保存形式は設定で変わる。スマートフォンでは横へスクロールしてな。

トラブルシューティング

困ったこと確認すること
導入した機能が出ないClaude Codeを再起動し、導入時に選んだ対象と保存先を確認してな。/pluginで使うプラグインの状態も確認するんや。
想定外のファイルを変えようとする実行前の提案を読み、練習フォルダーだけに対象を絞ってな。既存の仕事用ファイルにはそのまま適用せんといてな。

終了と再開

Claude Codeは入力中ならEscで作業を止め、/exitで終了できるで。続けるときは同じ練習フォルダーでclaudeを実行するんや。保存したHTMLはエクスプローラーからダブルクリックして表示を確認してな。

公式READMEと最新の導入案内も確認してな。配布版や外部サービスの変更で、手順が変わることがあるで。

使い方の流れ

実装に入る前に、進める単位をそろえる作りたいもの検索機能が欲しい対象は何か?結果をどう表示する?合意した小さな作業□ 入力を受け取る□ 検索する□ 結果と空件を確認計画の単位ごとに、実装と検証を進める
入力から作業結果までの関係をまとめた独自図解やで。製品画面や実行結果を示したもんやないで。

作業のビフォーアフター

本記事が考える使い方の比較。実測した効果やないで。
これまでの作業導入後に目指す進め方
実装を先に始め、後から要件とテストを追加する。設計と小さな作業単位を確認し、それぞれを検証しながら進める。

実装後の確認

ワークフローを導入しても、仕様の誤解や不十分なテストは残ることがあるで。外部サービスへの書き込みやコマンド実行、複数エージェントの作業は、必要な権限と対象範囲に限定するで。

計画が細かいだけで目的に合っていない状態を避けるため、利用者が何をできるようになるかを最後まで確認してな。実装後はテストが通ることに加え、画面や例外時の動作、差分の範囲も点検してな。

公式資料と利用条件

本体はMITライセンスやで。エージェント、モデル、外部サービスや入力資料の条件は別やで。

確認日:2026年10月24日。掲載対象はHysen Labsの30日間スター純増CSV(2026年9月23日〜10月23日)の上位20件から、過去掲載を除いて選定したで。Hysen Labsが追跡するリポジトリ内の順位であり、GitHub全体を網羅するランキングやないで。集計は期間末と期間初のスター数の差分。データ提供:Hysen Labs(CC BY 4.0)。機能や条件は公式資料に基づく話やけど、実際の動作や生成結果を本記事で検証したものやないで。