Gemini Cli 和 Claude Code 助我“抄袭” Starlight 的设计

国庆前，我们将英文站点背后的主题 MonaKit 发布到了 Astro 官方主题站点。

接下来的问题就是：如何给 MonaKit 加新的特性。我不打算把所有东西都硬编码到其中，而是打算按可重用且可组合的包的方式来组织这些特性。

考虑设计期间，我突发奇想：“何不借鉴其他成功的设计？”，于是乎，我打算研究一下 Starlight。

使用 Gemini 进行高层分析

我 git clone 了仓库，将下面的 prompt 传给了 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 分析完代码后生成的架构图如下：

graph TD
    subgraph User's Astro Project
        A[astro.config.mjs] -->|imports| B(Starlight Integration);
    end

    subgraph Starlight Package
        B --> C{astro:config:setup hook};
        C --> D[Process Plugins & i18n];
        C --> E[Inject Routes];
        C --> F[Add Built-in Integrations];
        C --> G[Configure Vite];
        C --> H[Setup Remark/Rehype Plugins];
    end

    subgraph Vite
        G --> I{Virtual Modules};
        I -->|`virtual:starlight/user-config`| J[Starlight Components];
        I -->|`virtual:starlight/project-context`| J;
    end

    subgraph Astro
        E --> K["Renders `routes/[...slug].astro`"];
        K --> L[Renders `components/Page.astro`];
        L --> J;
    end

    subgraph Content
        M["Docs Content (.md, .mdx)"] -->|astro:content| K;
    end

显然，这是一个标准的 Astro integration。在其中，我找到两个有意思的东西：

• Vite Virtual Modules，负责将 Starlight 配置和其他项目的 context 暴露给 Astro 组件。
• Inject Routes，注入 Starlight 文档相关 route。

序列图

按照我的 prompt 要求，它也生成了两个序列图。

构建过程

sequenceDiagram
    participant Developer
    participant Astro
    participant Starlight

    Developer->>Astro: Runs `astro build`
    Astro->>Starlight: Executes `astro:config:setup` hook
    Starlight->>Starlight: Processes config, plugins, and integrations
    Starlight->>Astro: Updates Astro config
    Astro->>Astro: Builds all pages and assets
    Astro->>Starlight: Executes `astro:build:done` hook
    Starlight->>Starlight: Runs Pagefind to index content

页面渲染

sequenceDiagram
    participant User
    participant Astro
    participant Starlight
    participant Vite

    User->>Astro: Requests a page
    Astro->>Starlight: Finds matching route (`[...slug].astro`)
    Starlight->>Astro: Renders `routes/common.astro`
    Astro->>Starlight: Renders `components/Page.astro`
    Starlight->>Vite: Accesses virtual modules for config
    Vite-->>Starlight: Returns config
    Starlight->>Astro: Renders UI components
    Astro-->>User: Returns HTML page

这不难理解：

1. 构建过程负责注入 route 和其他配置设置。
2. 在页面渲染阶段，这些 route 即可被消费。

有点意思！读完代码和 Astro 文档，我确信 Injection 功能和 Vite Virtual Modules 就是我需要的：将每个特性集构建称为一个 Astro Integration，然后用 Injection 和 Virtual Modules 将它们暴露给 MonaKit。

实验

阔是，为了完全理解和验证我的想法，我还需做些实验。

这次，我决定使用 Claude Code。启动 Cli，传入如下 prompt：

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 参考。

经过“讨论 -> 设计 -> 评审 -> 实现”循环后，我得到了一个 Astro Integration 和一个使用它来演示 injection 特性的 Astro 项目。

工作完全符合我的预期！

收获

凭借 Gemini 和 Claude，我得以在短时间内学习优秀的设计并验证想法。而且，我也打算在未来的 MonaKit 中采用类似的设计。

整个过程的一个重要的收获便是：它给我打开了一种新的软件设计和实现方式。与其从零开始，不如一开始好好理解需求并寻找相似的设计；然后，借助 AI 快速学习并针对自己的需求进行剪裁。

附：这里就不浪费时间来粘贴报告和示例代码了，使用以上的 prompts 你也可以快速生成你自己的 copy。😄