Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
生成AI時代のコンポーネントライブラリの作り方
Search
touyou
July 04, 2025
Programming
1
390
生成AI時代のコンポーネントライブラリの作り方
Sparkle Designのコンポーネントライブラリ開発を進める中で考えていたことなどを紹介します。
touyou
July 04, 2025
Tweet
Share
More Decks by touyou
See All by touyou
Liquid GlassとApp Intents
touyou
0
140
生成AI活用プロダクトが目指してほしい未来
touyou
0
2k
メンター百物語 紡ぎ続けられる確かな情熱
touyou
0
310
これからの時代の『クリエイター』の生き方
touyou
0
74
しくじり先生〜とうようがLeaders7期生からL4S7期講師になるまでのプログラミング半生を振り返る
touyou
0
110
AWSサーバーレスが支える劇団ノーミーツのオンライン劇場ZA / AWS Dev Day Online 2021 C-5
touyou
0
1.5k
3年A組から学ぶ体験の作り方
touyou
0
2.2k
學問のすすめ
touyou
0
1.2k
粒子法について その1
touyou
0
160
Other Decks in Programming
See All in Programming
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
110
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.3k
Build your own WebP codec in Swift
kishikawakatsumi
2
830
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
130
クラシルを支える技術と組織
rakutek
0
190
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
700
Repenser les filtres API Platform: une nouvelle syntaxe
vinceamstoutz
2
150
Platformに“ちょうどいい”責務ってどこ? 関心の熱さにあわせて考える、責務分担のプラクティス
estie
2
510
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
140
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
640
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
630
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
2
1.1k
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Thoughts on Productivity
jonyablonski
70
4.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
The Pragmatic Product Professional
lauravandoore
36
6.9k
The World Runs on Bad Software
bkeepers
PRO
71
11k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Facilitating Awesome Meetings
lara
56
6.6k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How STYLIGHT went responsive
nonsquared
100
5.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Transcript
生成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