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
540
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.4k
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
8
2.3k
複雑なフォームと複雑な状態管理にどう向き合うか / #newt_techtalk vol. 15
izumin5210
4
4.4k
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
9
5.5k
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.8k
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
1.3k
コンパウンドプロダクト開発の質とスピードを支える Protobuf と Connect #アーキテクチャ_findy / Boosting Compound Product Development Efficiency with Protobuf and Connect
izumin5210
12
4.2k
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
1.4k
Next.js App Router を例に考える、技術選定・技術との距離感 #技術選定_findy / findy 2024-01-24
izumin5210
14
6.5k
Other Decks in Programming
See All in Programming
Javaに鉄道指向プログラミング (Railway Oriented Pro gramming) のエッセンスを取り入れる/Bringing the Essence of Railway-Oriented Programming to Java
cocet33000
2
550
GoのGenericsによるslice操作との付き合い方
syumai
2
610
Perlで痩せる
yuukis
1
680
コード書くの好きな人向けAIコーディング活用tips #orestudy
77web
3
310
Benchmark
sysong
0
180
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
11
1.8k
ReadMoreTextView
fornewid
1
410
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
kuro_kurorrr
0
120
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
780
Blueskyのプラグインを作ってみた
hakkadaikon
1
550
イベントストーミングから始めるドメイン駆動設計
jgeem
4
840
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
360
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
910
Docker and Python
trallard
44
3.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Why Our Code Smells
bkeepers
PRO
337
57k
How to Ace a Technical Interview
jacobian
276
23k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Adopting Sorbet at Scale
ufuk
77
9.4k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
660
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