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
TypeScript を活かしてデザインシステム MCP を作る / #tskaigi_aft...
Search
Masayuki Izumi
May 27, 2025
Programming
5
780
TypeScript を活かしてデザインシステム MCP を作る / #tskaigi_after_night
Masayuki Izumi
May 27, 2025
Tweet
Share
More Decks by Masayuki Izumi
See All by Masayuki Izumi
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.4k
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
630
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
izumin5210
13
9k
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
9
3.5k
複雑なフォームと複雑な状態管理にどう向き合うか / #newt_techtalk vol. 15
izumin5210
4
4.7k
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
9
5.9k
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
5
1.9k
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
1.7k
コンパウンドプロダクト開発の質とスピードを支える Protobuf と Connect #アーキテクチャ_findy / Boosting Compound Product Development Efficiency with Protobuf and Connect
izumin5210
13
4.6k
Other Decks in Programming
See All in Programming
CSC305 Lecture 08
javiergs
PRO
0
270
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
250
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
260
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
190
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
NIKKEI Tech Talk#38
cipepser
0
160
CSC509 Lecture 07
javiergs
PRO
0
240
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
630
CSC509 Lecture 06
javiergs
PRO
0
260
CSC509 Lecture 05
javiergs
PRO
0
310
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.6k
Designing Experiences People Love
moore
142
24k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
We Have a Design System, Now What?
morganepeng
53
7.8k
Typedesign – Prime Four
hannesfritz
42
2.8k
How GitHub (no longer) Works
holman
315
140k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Transcript
TypeScript を活かしてデザインシステム MCP を作る 2025-05-27 TSKaigi 2025 After Night 〜セッションおかわりの会!〜
@izumin5210
@izumin5210 © LayerX Inc. whoami LayerX バクラク事業部 (2022-09 -) Platform
Engineering 部 Enabling チーム Staff Software Engineer ISUCON14 4位 飛び入り LT だ!(イベント始まってから作り始めました)
TSKaigi 2025 でも話したよ! © LayerX Inc. 3
LayerX バクラク事業部 @shota8511_tech の発表 デザインシステムのデザイントークンと共通 UI コンポーネントの情報を返す MCP server を作っています
© LayerX Inc. 4
この MCP server の、とくに UI コンポーネントに関する情報は Storybook から抽出しています https://zenn.dev/layerx/articles/7e9f87fca65e94 ©
LayerX Inc. 5
Storybook は React コンポーネントの Props の定義をうまく輸出し、ドキュメントとして表示できます © LayerX Inc. 6
© LayerX Inc. Storybook は何を、どうやって抽出しているか Storybook の情報をどうやって MCP で利用するか 7
Button コンポーネントの props 定義 型はもちろん、その props の意味や使い方・注意点などもコメントに残しています(これはもともと人間用) この型やコメントが Storybook にも反映されています
© LayerX Inc. Storybook はどこから、何を、どうやって抽出しているか 8
Storybook における React コンポーネントの情報取得 © LayerX Inc. Storybook では react-docgen
or react-docgen-typescript を利用し、 コードから情報を抜き出してドキュメントを生成している デフォルトは react-docgen だが、 react-docgen-typescript に変更可能 react-docgen-typescript は型情報も利用してくれるが、ビルドに時間がかかる react-docgen-typescript は TSDoc(JSDoc) + 型情報を見てくれる さっきの Button の例もそうでしたね 9
react-docgen-typescript を使えばコンポーネントの情報を抜き出せるのでは? © LayerX Inc. 10
なんかそれっぽい感じで呼び出して… © LayerX Inc. 11
なんかそれっぽい感じで使ってみる © LayerX Inc. 12
できた? © LayerX Inc. 13
それっぽい © LayerX Inc. 14
雑感 © LayerX Inc. 実はコンポーネントの実装をそのまま渡すだけでもそれなりにいい感じになるらしい Storybook で必要な情報に絞ることで AI 的にはノイズが減り、精度もいいはずと信じてる 実際に
Agent に利用してもらった感じだと、 TSDoc に @example を書いているのが Few-shot prompting 的に効いてそう これも Ubie さんのブログを見て悔しくなって半日くらいで試したやつなので もっといい感じの方法もたぶんある キミだけの最強の MCP server を作ろう! 15