こんにちは、エンジニアの egurinko です。今回は、Claude Code を使ってデザインシステムの CSS IntelliSense を数時間で開発した体験を共有します。
背景にある課題
ギフティのデザインシステムは、React, Vue, Svelte, Rails など様々な技術に対応するため CSS フレームワークを提供しています。社内で利用の多い React 向けには特化でコンポーネントライブラリも提供していますが、その場合も CSS フレームワークの提供する Utility Class を利用する形を取っており、デザインシステムを導入すると必ずといって良いほど CSS フレームワークと対峙することになります。
すでにデザインシステム用の MCP Server なども用意していますが、依然として人が CSS フレームワークを触れる機会は多くあり、実際に使う開発者の視点では以下のような課題がありました。
- クラス名を覚えられない: Abukuma には数百のクラスがあり、すべてを暗記するのは現実的ではない
- ドキュメント参照の手間: クラスの CSS 定義を確認するためにブラウザでドキュメントサイトを開く必要がある
- タイポに気づきにくい:
ab-flexをab-fleと書いても、実行時まで気づかない - カラーが分からない:
ab-text-brand-secondaryがどんな色なのか、コードを見ただけでは分からない
これらの課題を解決するために、Tailwind CSS IntelliSense のような VS Code 拡張機能を Claude Code で作成しました。
作ったもの
ギフティのデザインシステムの CSS フレームワークである @giftee/abukuma-css 向けの CSS IntelliSense 拡張機能です。
主に 5 つの機能を備えています。
- クラス名補完:
ab-と入力すると候補を情報と共に表示
- クラス名にホバーで CSS 定義や関連クラスを表示
- Diagnostics: 存在しないクラスを警告し、類似クラスを提案
- クラス名を Cmd⌘ + クリックでドキュメントサイトへ遷移
- Color Decorations: カラー関連クラスに色インジケーター表示
対応しているファイル形式は HTML, JSX, TSX, Vue, Svelte, Rails ERB, Rails Slim となっています。
Claude Code での開発フロー
今回の開発は Claude Code を使って数時間で完了しました。実際には別の開発を並行していたので、凝縮すると 1 時間くらいだと思います。そこで、その開発フローもご紹介したいと思います。
0. 開発環境の準備
Claude Code に効率良く情報を渡すため、作業するディレクトリを以下のように整備しました。
- root - [design-system repository](https://github.com/giftee/design-system) - ドキュメント repository（現状は非公開） - [Tailwind CSS Intellisense repository](https://github.com/tailwindlabs/tailwindcss-intellisense) - ここに作成するコードを入れる
デザインシステムのコードをいつでも参照できるようにしつつ、ドキュメントの構成/内容なども全て参照可能にすることで、拡張機能が表示する内容がドキュメントに沿った内容になります。また、参考として Tailwind CSS Intellisense のコードも用意しています。
1. 計画を練ってもらう
まだ機能も固まっていなかったので、Plan Mode を利用します。以下のようなプロンプトを用いて、デザインシステムを分析してもらいつつ、Tailwind CSS Intellisense を参考に CSS Intellisense を作りたいことを伝えています。
> @design-system/ にはギフティのデザインシステムがあり、デザイントークン、CSS フレームワーク、React コンポーネントライブラリの 3 つがあります。ここから、 @tailwindcss-intellisense/ のような CSS Intellisense を作りたいので、計画して。
このとき数度やり取りはしましたが、以下のようなかなり良い計画（※一部抜粋）ができました。
# Abukuma CSS IntelliSense 拡張機能 実装計画 ## 概要 Tailwind CSS IntelliSense に類似した VSCode 拡張機能を Abukuma CSS 向けに新規作成する。 **決定事項:** - 構成: 新規拡張機能 (`abukuma-css-intellisense`) - データソース: ビルド時に静的 JSON を生成 - MVP 機能: クラス名補完 + ホバー情報表示 ## ディレクトリ構成 ./abukuma-css-intellisense/ ├── src/ │ ├── client.ts # Language Client (VSCode 拡張エントリ) │ ├── server.ts # Language Server (補完・ホバーロジック) .... ## 実装ステップ ### Step 1: プロジェクト初期化 ### Step 2: メタデータ生成スクリプト ### Step 3: Language Server 基本実装 ### Step 4: クラス属性位置検出 ### Step 5: 補完機能 ### Step 6: ホバー機能 ### Step 7: パッケージング・テスト ## 対応ファイルタイプ | 言語 | language ID | |------|-------------| | HTML | `html` | | JSX | `javascriptreact` | | TSX | `typescriptreact` | | Vue | `vue` | | ERB | `erb` |
2. 計画を渡して MVP を生成
「あとはよろしく」と Claude Code にお願いすれば、10 分後には MVP が完成しました。
3. バグ修正
手元で検証すると、いくつかのバグがありました。
例えば、Rails の Slim テンプレートで動かない問題がありました。しかし実際のコードを見せると、Slim の記法を理解しパーサーを拡張し、すぐに修正してくれました。
> Rails の slim は class や className といった表記がなく、以下のような View になっています。これに対応するにはどうしたら良いですか？ ------------- h2.ab-text-headline-l.ab-font-bold ユーザ一覧 .ab-flex.ab-items-center
ここまでで 1 時間くらいだと思います。
4. 機能のアイデアを相談して実装
MVP が安定したので、さらなる機能を相談しました。
> 他にデザインシステムを用いた開発の生産性が上がる機能のアイデアがあれば教えて。
結果として Diagnostics、Document Links、Color Decorations などを優先度付きで提案してもらい、必要なものから順番に実装をしてもらいました。
ポイント
必要な情報を参照しやすくする
参照したい情報は複数の repository にありましたが、それを横断する形で Claude Code を起動しています。また、Tailwind CSS Intellisense などはあえて local に落とすことで、参照範囲は上がり、参照スピードも上がります。
計画を先に作る
「VSCode 拡張機能を作って」だけでは曖昧すぎます。MVP の範囲、ディレクトリ構成、使用技術をある程度決めてから渡すと、期待通りのものが出てきます。
具体的なコードを見せる
「Slim に対応して」より「このコードで動くようにして」の方が精度が高いです。実際の View ファイルを貼り付けることで、Claude Code は Slim 特有の書き方を理解できました。
所感
実は CSS Intellisense はずっと開発したいと思っており、半年くらい前にもチャレンジしていました。その時は全くうまくいかなかったのですが、今回は数時間でできてしまいました。やはり Claude Opus 4.5 の精度は恐るべきものです。
一方で、生成されたコードの動作確認は必要です。今回も何度かバグが発生し、その度に報告して修正してもらいました。
さいごに
Claude Code を使うことで、数時間で実用的な VS Code 拡張機能を開発できました。ギフティでは AI ツールを活用した開発効率化を進めています。興味のある方はぜひお声がけください。
