🦧

どうすればAIを使ってStarlightのデザインを「盗んだ」か？

に公開
Astro
Claude Code
Vibe Coding
Gemini CLI
zennfes2025ai
tech

日本へ発つ前に、MonaKit が Astro の テーマ としてリリースされました。これは、現在ご覧になっている私たちの英語版サイトに使っているテーマです。

さて、次に考えたのは、「どうすればMonaKitに新機能を追加できるか？」という点です。すべてをテーマにハードコードするのではなく、再利用可能かつ組み合わせ可能なパッケージ群 として構築したいと考えました。

設計を検討する中で、ふと「成功している他のデザインから学んでみてはどうか？」というアイデアが浮かびました。そこで、Starlight のリサーチをすることにしたのです。

Geminiによるハイレベルな分析

まずStarlightのリポジトリをgit cloneし、以下のプロンプトを Gemini CLI に渡しました。

---
description: Explain the code base to a new developer
---

## Context

- Current code base: `src/`
- Dependency management: `package.json`
- Project background: `README.md`

## Your task

1. Explain the current code base to a new developer, providing a clear understanding of its structure and functionality.
2. Highlight key components, modules, and their interactions.
3. Draw a mermaid diagram to illustrate the architecture and flow of the application.
4. Write an explanation report including your findings.

## Output

- A detailed code explanation report, including:
  - Overview of the code base structure and functionality, keeping it concise.
  - Key components and modules, their roles, and how they interact.
  - A mermaid diagram illustrating the architecture of the application.
  - A set of sequence diagrams illustrating key workflows or processes within the application.
  - Any other relevant information that would help a new developer understand the code base. Fox example:
    - Computer theory concepts or algorithms used or implemented

Note:

Write your report in `docs/code-explanation.md`:

- if the file does not exist, create it
- if the file exists, delete the file and create a new one

数分後、詳細なレポートが生成されました。

アーキテクチャ図

このレポートの中で、Geminiはコードベースに基づいた Mermaidアーキテクチャ図 を生成しました。

ご覧の通り、これは標準的な Astroインテグレーション です。この図から、私は特に興味深い2点を発見しました。

  • Vite Virtual Modules: Starlightの設定やその他のプロジェクトコンテキストをAstroコンポーネントに公開している点。
  • Inject Routes: ドキュメントページ用のStarlightルートを注入している点。

シーケンス図

私のプロンプトが要求した通り、2つのシーケンス図も生成されました。

ビルドプロセス

ページレンダリング

理解するのは難しくありません。

  1. ビルドプロセス でルートが注入され、その他の設定が行われる。
  2. ページレンダリング時 に、そのルートが消費される。

これは本当にインスピレーションになりました！コードベースとAstroのドキュメントを読み進めた結果、この Injection機能 と Vite Virtual Modules こそが、まさに私が必要としているものだと確信しました。つまり、各機能セットをAstroインテグレーションとして構築し、InjectionとVirtual Modulesを使ってその機能をMonaKitに公開できる、ということです。

実験

しかし、自分の考えを完全に理解し検証するためには、実験が必要です。

今回は Claude Code に手伝ってもらうことにしました。CLIを起動し、以下のプロンプトを入力しました。

This is a new project for demostrating astro injection feature in astro integration. 

I need you to create some example for the following scenarios:
- injectRoute
- addMiddleware
- injectScript

You can also use the Virtual Modules in vite. You can read the starlight design for reference: @code-explanation.md

Don't code, show me your ideas first

注: @code-explanation.md はGeminiが生成したレポートで、Claudeが参照できるように現在のプロジェクトにコピーしておきました。

「議論 -> 設計 -> レビュー -> 実装」というループを経て、最終的に私は Injection機能 をデモするためのAstroインテグレーションと、それに依存するAstroプロジェクトを完成させました。

すべてが期待通りに動作しました！

Takeaway（収穫）

GeminiとClaudeのおかげで、優れたデザインから学び、自分のアイデアを短時間で検証することができました。今後のMonaKitのバージョンでも、この設計思想を採用することになるでしょう。

この一連のプロセスで、ソフトウェアの設計と実装における新しいアプローチが開かれたことが重要だと考えています。ゼロから始める代わりに、最初のステップは要件を理解し、類似の実装を探す ことかもしれません。そして、そこから学び、自分のニーズに合わせて適用するのです。

P.S.: レポート全体やサンプルコードをここに貼り付けるのは時間の無駄でしょう。上に示したプロンプトを使えば、あなた自身でそれらを生成できるのですから。それでは、乾杯！🥂

Discussion