MCPで変わる Amebaデザインシステム「Spindle」の開発

この資料は、**Amebaのデザインシステム「Spindle」**と、その開発を加速させる**「Spindle MCP」**について説明しています。Spindle MCPは、**コンポーネント情報、デザインに関するルール、アイコン、アクセシビリティチェックリスト、Design Docテンプレート**などを提供するツール群です。資料では、**Spindle MCP**を活用することで、**UI開発の時間短縮**（職人の27分が2分半に短縮された例）や、**デザインレビュー、Design Docの作成、コード生成、UIへの置き換え**といった開発プロセスがどのように改善されるかを示しています。また、**Figma Dev Mode MCPとの併用**によるさらなる効率化の可能性にも触れています。

Transcript

1. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle MCPで変わる Amebaデザインシステム 「Spindle」の開発 原 一成 (@herablog)
2. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle 本日のテーマ MCPがあればUI開発は爆速ですか？
3. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle 検証 使うとどれぐらい早くなる？ このUIを作ってみます Spindle MCP C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Offers DeepDive 2025.9.4
4. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle M C P 職 人 2 7 分 2 分 半
5. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle 夜 明 け 前 . . . ！ ？
6. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle Contents Spindleについて Spindle MCPについて MCPで変わるSpindleの開発
7. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle About Spindle Spindleについて
8. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle デ ザ イ ン 原 則 ブ ラ ン ド ガ イ ド ラ イ ン ビ ジ ュ アル ア イ デ ン テ ィ テ ィ ア ク セ シ ビ リ テ ィ ガ イ ド ラ イ ン イ ラ ス ト シス テム U X ラ イ テ ィ ン グ ガ イ ド ラ イ ン パ フ ォ ー マ ン ス ガ イ ド ラ イ ン ス タ イ ル ガ イ ド パ タ ー ン ラ イ ブ ラ リ ボ イ ス & ト ー ン A m e b a ら し さ
9. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle About Spindle MCP Spindle MCPについて
10. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle Spindle MCP 提供ツール例 get_components get_design_tokens get_icons get_accessibility_docs get_component_design_doc_templete : コンポーネント情報 (Design Doc, 実装, サンプルコード, Storybook) : デザイントークン情報 : アイコン情報 : アクセシビリティチェックリスト : Design Docテンプレート
11. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle @ o p e n a m e b a / s p i n d l e / p a c k a g e s / s p i n d l e - m c p - s e r v e r 詳 細 は G i t H u b で 公 開 し て い ま す
12. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle Spindle Development with MCP MCPで変わるSpindleの開発
13. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle Publish 現場で利用 Spindle.ameba.design 公開 Develop SpindlerなEngineerが 開発 Storybook&App Document SpindlerなDesignerとEngineerが Design Docsを書く GitHub Design SpindlerなDesignerが Figma 要件定義とスタイリング Suggest 提案 Spindler or 現場から アウトプット
14. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle Publish 現場で利用 Spindle.ameba.design 公開 Develop SpindlerなEngineerが 開発 Storybook&App Document SpindlerなDesignerとEngineerが Design Docsを書く GitHub Design SpindlerなDesignerが Figma 要件定義とスタイリング Suggest 提案 Spindler or 現場から アウトプット
15. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle Spindle MCP 利用例 足りていない機能やコンポーネン トを洗い出し 例: 「Spindleでまだ実装されていなくて、あると良い コンポーネントは？」
16. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle 構想中... 要望から提案・仮実装作成 例: 「ボタンのVariant増やしたい」 「Modalのアニメーションをゆっくりにしたい」 ど う 使 って も ら う か な
17. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle Publish 現場で利用 Spindle.ameba.design 公開 Develop SpindlerなEngineerが 開発 Storybook&App Document SpindlerなDesignerとEngineerが Design Docsを書く GitHub Design SpindlerなDesignerが Figma 要件定義とスタイリング Suggest 提案 Spindler or 現場から アウトプット
18. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle Publish 現場で利用 Spindle.ameba.design 公開 Develop SpindlerなEngineerが 開発 Storybook&App Document SpindlerなDesignerとEngineerが Design Docsを書く GitHub Design SpindlerなDesignerが Figma&Cursor 要件定義とスタイリング Suggest 提案 Spindler or 現場から アウトプット
19. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle Spindle MCP 利用例 過去の実装やデザイントークンを 洗い出し 例: 「Ratingコンポーネント用のオレンジ色 #ee7b00 を命名して」 「実装で使われている余白をグルーピングして」
20. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle 作成中... デザインレビュー with MCPs Figma Dev Mode MCPと併用 例: 「/spindle-design-review @https://figma.com... 」
21. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle Publish 現場で利用 Spindle.ameba.design 公開 Develop SpindlerなEngineerが 開発 Storybook&App Document SpindlerなDesignerとEngineerが Design Docsを書く GitHub Design SpindlerなDesignerが Figma&Cursor 要件定義とスタイリング Suggest 提案 Spindler or 現場から アウトプット
22. C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . A m e b a D e s i g n S y s t e m ｜ S p i n d l e Spindle MCP 利用例 D e s i g n D o c の 作 成 例 : 「 Ta b l e コ ン ポ ー ネ ン ト の D e s i g n D o c を 作 成 し て 」 # コ ン ポ ー ネ ン ト 名 # # 背 景 ・ 概 要 # # ス ク リ ー ン シ ョ ッ ト # # 使 用 例 # # デ ザ イ ン ト ー ク ン # # プ ロ パ テ ィ # # 実 装 例 # # 関 連 リ ン ク < ! - - コ ン ポ ー ネ ン ト で 利 用 す る デ ザ イ ン ト ー ク ン ( 色 ・ ア ニ メ ー シ ョ ン な ど ) を リ ス ト ア ッ プ し ま す 。 ( 例 ) - S u r f a c e P r i m a r y ( 背 景 色 ) - T e x t M e d i u m E m p h a s i s ( 本 文 テ キ ス ト 色 ) - - > # # ア ク セ シ ビ リ テ ィ O ff e r s D e e p D i v e 2 0 2 5 . 9 . 4
23. C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . A m e b a D e s i g n S y s t e m ｜ S p i n d l e Spindle MCP 利用例 D e s i g n D o c の 作 成 O ff e r s D e e p D i v e 2 0 2 5 . 9 . 4 ド キ ュ メ ン ト 作 成 の 精 度 と 効 率 が 向 上
24. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle Publish 現場で利用 Spindle.ameba.design 公開 Develop SpindlerなEngineerが 開発 Storybook&App Document SpindlerなDesignerとEngineerが Design Docsを書く GitHub Design SpindlerなDesignerが Figma&Cursor 要件定義とスタイリング Suggest 提案 Spindler or 現場から アウトプット
25. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle Spindle MCP 利用例 Design Docからコード生成 例: 「TableコンポーネントのDesign Docから実装し て」 現 状 は 6 割 く ら い の 完 成 度 で 生 成 さ れ ま す
26. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle Spindle MCP 利用例 Spindle UIへの置き換え 例: 「ページ内のボタンをSpindleに置き換えて」
27. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle Spindle MCP 利用例 Figma Dev Mode MCPを併用 したUI実装 例: 「Spindleで実装して @https://figma.com...」 「(この実装の)デザイントークンが合っているか Figmaのデータと比較して @https://figma.com...」
28. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle ぜ ひ 使 って み て く だ さ い
29. Offers DeepDive 2025.9.4 C o p y r i g h t @ 2 0 2 5 C y b e r A g e n t A l l R i g h t s R e s e r v e d . Ameba Design System ｜ Spindle より詳細は CyberAgent Developers Blog にて 『Spindle MCP で変わるデザインシステムの開発』 『Figma MCP Serverで変わるWeb開発』