VSCodeのスプラッシュスクリーン的なのをAIに作ってもらった

vscode-start-board という VSCode の拡張機能を Claude Code に任せて作ってもらいました。

出来上がったのはこんな感じで、全面にクソデカアスキーアートを表示して、その下によく使うプロジェクトのリストを表示できるというものです。

拡張機能のソースコードは GitHub で公開しています。

GitHub - MatchaChoco010/vscode-start-board

Contribute to MatchaChoco010/vscode-start-board development by creating an account on GitHub.

github.com

マーケットプレースには登録していないので、GitHub Releases から.vsix ファイルをダウンロードしてインストールする形になります。

アスキーでスプラッシュスクリーンを作るのは Vim や Neovim に憧れてのことです。 Vim 系のターミナル上でエディタを動かすのはかっこいいなあと思いつつ、操作体系になれることができずたまに Neovim を試しては VSCode に戻ってくるということを繰り返していました。

アスキーアート自体は拡張機能の設定画面から好きなように差し替えが可能です。 私は次のページを使って画像からアスキーアートを生成しました。

Braille ASCII Art Generator

Generate braille ASCII art from any text or image file.You can also create rotated or flipped braille ASCII art.

lazesoftware.com

今回の拡張機能の作成は Claude Code にお願いしました。 Claude Code にタスクを投げるに当たって cc-sdd という仕様駆動開発のためのライブラリを利用しました。

GitHub - gotalab/cc-sdd: Spec-driven development (SDD) for your team's workflow. Kiro style commands that enforce structured requirements→design→tasks workflow and steering, transforming how you build with AI. Support Claude Code, Codex, Cursor, Github Copilot, Gemini CLI and Windsurf.

Spec-driven development (SDD) for your team's workflow. Kiro style commands that enforce structured requirements→design→tasks workflow and steering, transforming how you build with AI. Support ...

github.com

仕様駆動開発には有名どころだと spec-kit などもありますが、生成される仕様の長い文書を英語で読むのが厳しく、ネイティブで日本語にも対応している cc-sdd を利用しました。

SDD は仕様を作ってそれを実装してもらうという結構一方通行な感じもあり、これで全てのエンジニアリングが置き換えられるとは思えないものの、雑に AI に全部任せて適当なものを作ってもらう用途でタスクを洗い出して分割するには、この仕組みは十分役に立ちそうな感覚を得ました。 今後、Claude Code などのコーディング AI に全面的に任せて何かを作ってもらうときは、cc-sdd を使うのが良さそうだなと考えています。

AI コーディングもここ一年でだいぶ発達したため、これまでやればできることは分かっていたけど作るのが面倒でやってこなかったちょっとしたブラウザ拡張機能や VSCode 拡張機能などを色々作ってもらうの非常に良い感じだなあと思います。 この冬休みはちょっと色々作らせて遊んでみようかなあと思っています。

自分にフィットするようにカスタムした道具を作るコストが大幅に下がったのは非常に嬉しいことですね。