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
3
200
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
4.5k
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
7
1.9k
複雑なフォームと複雑な状態管理にどう向き合うか / #newt_techtalk vol. 15
izumin5210
4
4.2k
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
9
5.3k
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.8k
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
1k
コンパウンドプロダクト開発の質とスピードを支える Protobuf と Connect #アーキテクチャ_findy / Boosting Compound Product Development Efficiency with Protobuf and Connect
izumin5210
12
4.1k
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
バイラテラルアップサンプリング
fadis
3
660
Proxmoxをまとめて管理できるコンソール作ってみました
karugamo
1
360
Storybookの情報をMCPサーバー化する
shota_tech
3
1.5k
インプロセスQAにおいて大事にしていること / In-process QA Meetup
medley
0
190
JVM の仕組みを理解して PHP で実装してみよう
m3m0r7
PRO
1
190
TSConfigからTypeScriptの世界を覗く
light_planck
2
1.1k
型安全なDrag and Dropの設計を考える
yudppp
5
550
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ~他言語変換の仕組み~ / cdk-language-transformation
gotok365
6
300
バランスを見極めよう!実装の意味を明示するための型定義 TSKaigi 2025 Day2 (5/24)
whatasoda
2
530
Doma で目指す ORM 最適解
nakamura_to
1
140
iOSアプリ開発もLLMで自動運転する
hiragram
1
670
AI時代のリアーキテクチャ戦略 / Re-architecture Strategy in the AI Era
dachi023
0
170
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
49
7.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
The Language of Interfaces
destraynor
158
25k
Rails Girls Zürich Keynote
gr2m
94
13k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
A better future with KSS
kneath
239
17k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Embracing the Ebb and Flow
colly
85
4.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Art, The Web, and Tiny UX
lynnandtonic
298
21k
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