Zenn
🤗

Claude Codeでツール全盛りでReact製グラレコを作る

に公開
React
Vite
Claude
Claude Code
stagewise
tech

@denwaya34です。😉

この記事では、私のClaude Codeでツール全盛りでReact製グラレコを作成してるやり方を共有します。

実際のグラレコ成果物

コードは以下リポジトリに置いています。

実物は以下にデプロイしてます。
この記事を読むとこんなのができます。

使用してるツール

上記リポジトリでは以下のツールを導入しています

MCP

  • context7: 最新の情報(コンテキスト)をAIに提供するMCP. 技術ドキュメントの情報取得に使用
  • playwright: テスト自動化FW: playwrightのMCP. Claude Codeにデザインレビューをさせる為に使用
  • motion: モダンアニメージョンライブラリmotionのDocument MCP
  • serena: コード検索・編集能力を強化するMCP
  • ultracite: ultracite のMCP
  • codex: OpenAI の Claude Code みたいなやつ
  • sequential-thinking: 動的で反射的な問題解決をサポートするための構造化された思考プロセスを入れてくれるらしいMCP
  • o3-search: Web Searchとして使用

Formatter

  • ultracite: Biomeベースのコード整形＆リンティングのプリセット

JavaScript ライブラリ

その他ツール

  • stagewise: ローカルで動くV0みたいなやつ。デザイン微調整用

React製グラレコ 作り方

1. 雛形として上記リポジトリを以下コマンドでダウンロードします

npx degit denwaya34/vibe-book-summary example-app

2. src/main/app.tsx 以下を最低限の状態にする。

下記をsrc/main/app.tsxにコピペする

function App() {
  return (
    <div>
      <h1>Hello</h1>
    </div>
  );
}

export default App;

3. Claude Codeのカスタム コマンド/research_reportを実行する。

リポジトリには Claude Codeのカスタムコマンド: /research_report を置いています。
引数に指示内容を指定してコマンドを実行するとグラレコが作成されます。

※コマンドの中からAgent: web-research-analyst.md も使っています

claude

/research_report '@docs/2020-Scrum-Guide-Japanese.pdf の内容を確認し、スクラム開発に関して忖度のない本質的なレポートを作成してください'

※ docs/2020-Scrum-Guide-Japanese.pdfを入手し、docs以下に配置しています。

4. 出来上がったグラレコをstagewiseで微調整する

配色や細かなデザインをstagewiseを使って修正します。
以下コマンドで開発サーバをstagewiseを有効にして起動します。

npm run dev:sw

stagewiseについてはこの記事 で解説しています

5. 完成

こんな感じのグラレコが出来上がります😃

おまけ

Genspark のAIドキュメントで同じ事やってみる

結果

さすがGenspark🎉
1000クレジット入手できるGensparkのリファラルリンクはこちらから!

おまけ Claude Code Tips

Tip1 .gitignore しているファイルを@参照する

.rgignore に!で書けば参照できる(以下参考)

https://x.com/upamune/status/1948026029240635668

Tip2 Claude Codeへの指示順を守らせる

Phase 1, Phase 2 のように書くとまもってくれる(以下より)

https://x.com/sesere115/status/1935634572450169054

Discussion