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
620
TypeScript を活かしてデザインシステム MCP を作る / #tskaigi_after_night
Masayuki Izumi
May 27, 2025
Tweet
Share
More Decks by Masayuki Izumi
See All by Masayuki Izumi
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
izumin5210
12
8.1k
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
8
3k
複雑なフォームと複雑な状態管理にどう向き合うか / #newt_techtalk vol. 15
izumin5210
4
4.5k
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
9
5.6k
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.8k
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
1.4k
コンパウンドプロダクト開発の質とスピードを支える Protobuf と Connect #アーキテクチャ_findy / Boosting Compound Product Development Efficiency with Protobuf and Connect
izumin5210
13
4.3k
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
5
1.4k
Next.js App Router を例に考える、技術選定・技術との距離感 #技術選定_findy / findy 2024-01-24
izumin5210
14
6.6k
Other Decks in Programming
See All in Programming
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
710
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
34
9.9k
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
160
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
280
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.3k
AIのメモリー
watany
11
1k
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
250
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
170
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
190
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
3
510
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
470
階層化自動テストで開発に機動力を
ickx
1
430
Featured
See All Featured
Done Done
chrislema
184
16k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Six Lessons from altMBA
skipperchong
28
3.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
GitHub's CSS Performance
jonrohan
1031
460k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Making Projects Easy
brettharned
116
6.3k
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