概要
https://developers.cyberagent.co.jp/blog/archives/60944/
詳細内容
## Spindle 2025: AI エージェント × デザインシステムで変わる Web 開発
https://developers.cyberagent.co.jp/blog/archives/60944/
デザインシステムの資産をAIエージェントに開放する「Spindle MCP サーバー」を中核に据え、要件定義から実装、リポジトリ整備までの全工程をAIとの協業へシフトさせることで、開発効率の劇的な向上と品質管理の両立を実現する。
**Content Type**: 🛠️ Technical Reference
**Language**: ja
**Scores**: Signal:5/5 | Depth:4/5 | Unique:4/5 | Practical:4/5 | Anti-Hype:4/5
**Main Journal**: 84/100 | **Annex Potential**: 79/100 | **Overall**: 84/100
**Topics**: [[デザインシステム, MCP (Model Context Protocol), AIエージェント, フロントエンド開発, Design to Code]]
Amebaのデザインシステム「Spindle」における、AIエージェントを前提とした開発プロセスの進化を総括した記事。著者は、2024年までの「人間同士の協業」を支えるツールから、2025年には「人間とAIが共通言語として利用する基盤」へとデザインシステムの役割が再定義されたと主張している。
この変革の核となるのが、Spindleの資産（デザイントークン、コンポーネント実装、ドキュメント）をAIエージェントから利用可能にする「Spindle MCP（Model Context Protocol）サーバー」の構築である。これにより、AIがシステムの仕様を正確に理解した上で提案・実装を行う環境が整った。
具体的な成果として、著者は以下の3点を挙げている。
1. **実装速度の10倍向上**: Figma MCPサーバーとSpindle MCPを連携させることで、Figmaデザインからのコード生成を「AIへのシンプルな指示」のみで完結。手動で27分かかっていた実装が約2分半に短縮された。
2. **Design Doc生成の自動化**: 新規コンポーネント作成時の設計ドキュメント草案やテストコードの生成をコマンド化。これにより設計の属人化を排除し、AIエージェントが自律的に品質基準を満たせる体制を構築した。
3. **リポジトリ整備の高速化**: 依存ライブラリの更新やエラー修正をAIエージェントに委ねることで、3ヶ月間のマージ数を19件から123件へと激増させた。
著者は、完全な自動化（ワンクリック実装）にはまだ課題があるとしつつも、AI時代におけるデザインシステムの重要性は、AIが「何が正しいか」を判断するための基準を提供することにあると強調している。Webエンジニアにとって、デザインシステムを単なるUIライブラリではなく「AIエージェントのためのインターフェース」として再構築することの有効性を示す、極めて実践的な事例である。