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
600
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
7.9k
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
8
2.8k
複雑なフォームと複雑な状態管理にどう向き合うか / #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
NPOでのDevinの活用
codeforeveryone
0
900
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
430
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
750
ニーリーにおけるプロダクトエンジニア
nealle
0
950
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
6
2.4k
Hack Claude Code with Claude Code
choplin
7
2.5k
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
260
RailsGirls IZUMO スポンサーLT
16bitidol
0
200
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
300
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
GPUを計算資源として使おう!
primenumber
1
230
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Building an army of robots
kneath
306
45k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Agile that works and the tools we love
rasmusluckow
329
21k
Building Applications with DynamoDB
mza
95
6.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Done Done
chrislema
184
16k
Music & Morning Musume
bryan
46
6.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