生成AI時代のコンポーネントライブラリの作り方

生成AI時代のコンポーネントライブラリの作り方 2025/7/4 touyou@Goodpatch

Fujii Yosuke @touyou Design Engineer 2021年グッドパッチに新卒入社したエンジニア。クライアントワークとして、iOS / Webフロントエンド /
Flutterなどの実装を幅広くしつつ、新卒開発案件研修の制作・運営なども行っていました。現在はサブプロジェクトとしてグッドパッチ発のデザインシステムである「Sparkle Design」チームのエンジニアとして活動中。いかにいいデザインを最高の形で実装するかを日々考えています！ 2

本日お話しすること 1. Sparkle Designの中で試してきたこと 2. 生成AI時代のライブラリ設計の視点 3

Sparkle Designの中で試してきたこと Sparkle Designとは？ 4

Sparkle Designの中で試してきたこと Sparkle Designの開発体制 touyou Design Engineer nori UI Desiner
エンジニアコンポーネント開発やライブラリ周りを主に担当 QM 元エンジニアでSparkle Design全般のクオリティを管理 5

Sparkle Designの強み「いいデフォルト」を維持しながらも高い柔軟性を実現していること 6 新しいタスク close タイトル必須タイトルメモ
メモを入力日付年/月/日 Calendar info 日付を1週間以内に設定すると達成できる確率がアップします！キャンセル保存保存新しいタスク close タイトル必須タイトルメモメモを入力 0/100 日付年/月/日 Calendar info 日付を1週間以内に設定すると達成できる確率がアップします！キャンセル保存保存新しいタスク close タイトル必須タイトルメモメモを入力 0/100 日付年/月/日 Calendar info 日付を1週間以内に設定すると達成できる確率がアップします！キャンセル保存保存 Sparkle Designの中で試してきたこと Sparkle Designの強み

Sparkle Designの強み「いいデフォルト」を維持しながらも高い柔軟性を実現していること一部だけを導入反映しやすいできること、カスタマイズ結果をこと 7 Sparkle Designの中で試してきたこと
Sparkle Designの強み

Sparkle Designの中で試してきたこと採用技術 shadcn/uiの採用・コンポーネント単体での導入が可能・TailwindCSSベースでカスタマイズしやすい https://ui.shadcn.com/ より 8

Sparkle Designの中で試してきたこと採用技術 shadcn/uiの採用・コンポーネント単体での導入が可能・TailwindCSSベースでカスタマイズしやすい ↓ 全てをshadcn/uiに寄せるとそれはあくまで shadcn/uiでしかない https://ui.shadcn.com/
より 9

shadcn/ui活用のカナメー「shadcn/ui registry」自分のコードをshadcn CLIで配信できてしまう仕組み 10 https://ui.shadcn.com/ より Sparkle
Designの中で試してきたこと shadcn/uiの活用方法

Sparkle Designの中で試してきたこと shadcn/ui registryは基本機能だけでも有能ですがで真価を発揮します生成AIに活用すること shadcn/ui registryのさらなる可能性 11

Sparkle Designの中で試してきたこと shadcn/ui registryのさらなる可能性 12 v0への統合・コンポーネント単位で読み込むことが可能・CSS変数などは対応していないので　独自スタイルを読み込ませるのは少し大変・画像のような形で始められるので
　組み合わせコンポーネントに特に有効そう

Sparkle Designの中で試してきたこと shadcn/ui registryのさらなる可能性 13 shadcn/ui registry MCP ・レジストリさえあればMCPにできてしまう・shadcnの環境構築がなくとも導入まで
　AI経由で可能・Cursorのルールファイルなども配信可能 https://x.com/shadcn/status/1917597228513853603 より

Sparkle Designの中で試してきたこと shadcn/ui registryのさらなる可能性 14 shadcn/uiのAI親和性・ほとんどのシステムプロンプトにshadcn/uiを　使えという指示が含まれている・shadcn/uiに近ければ近いほど後からの　置き換えが容易になる
https://x.com/shadcn/status/1927051270184943917 より

Sparkle Designの中で試してきたこと shadcn/ui registryはの良いガードレールとして活用できる生成AI shadcn/ui registryのさらなる可能性 15

生成AI時代のライブラリ設計の視点問い「生成AI時代に、コンポーネントライブラリというは何を意識するべきか？」コンテンツを提供する人私たちはどう生きるか 15

生成AI時代のライブラリ設計の視点「生成AIによってあらゆるものは便利になるはず！ ...なのになんでわざわざになっているの？」新しいテクニックが必要私たちはどう生きるか 16

生成AI時代のライブラリ設計の視点生成AIも結局はでしかない機械学習の一種生成AIの本質 17

生成AI時代のライブラリ設計の視点生成AIも結局はでしかない機械学習の一種生成AIの本質 18 膨大なパターンマッチングでしかない

生成AI時代のライブラリ設計の視点「AIにとってわかりやすいが人にはわかりにくい」「人にはわかりやすいがAIにわかりにくい」生成AIの本質 19

生成AI時代のライブラリ設計の視点「AIにとってわかりやすいが人にはわかりにくい」「人にはわかりやすいがAIにわかりにくい」 △ 「UIの構造に依存しすぎていてAIにはわかりにくい」生成AIの本質 20

生成AI時代のライブラリ設計の視点 AI向け＝人間向け 21 OpenAI公式AGENTS.md ・openai-agents-jsのAGENTS.md ・Codexへの指示書だがほぼコントリビューター　ガイドそのままになっている・つまりCodexを人間に見立てて指示をしている https://github.com/openai/openai-agents-js/blob/main/AGENTS.md

生成AI時代のライブラリ設計の視点意識すべきは「区別」ではなく AIと人間、ということ双方にとってわかりやすい私たちが大切にしたいこと 22

まとめコンテンツがどう使われても耐えうるさまざまな場所で利用できる AIと人間の両方にとってコンテンツ柔軟性汎用性わかりやすい生成AI時代のコンポーネントライブラリの作り方 23

One more thing...

One more thing... Sparkle Design for React Sparkle Design for
React がOSSになります 26

One more thing... Sparkle Design for React Sparkle Design for
React がOSSになります This Summer 27

生成AI時代のコンポーネントライブラリの作り方

生成AI時代のコンポーネントライブラリの作り方

touyou

More Decks by touyou

Other Decks in Programming

Featured

Transcript