Yosegi

Yosegi手元のコンポーネントから画面を組む

Storybook に登録済みのコンポーネントから画面 UI を組み立て、Story として書き出し、その Story を実装へ転換します。使い手はコーディングエージェントで、入口は CLI・MCP サーバ・Agent Skill の 3 つです。GUI はありません。

型から作られる Registry

ホストのソースの TypeScript の型が、そのままコンポーネントのカタログになります。props、slots、enum の選択肢、実際に書く import specifier のすべてが型から決まり、手書きするものはありません。

成果物は Story

エージェントはその事実を元に .stories.tsx を書きます。静的な画面なら、先に Screen JSON を通して機械可読な検証（自力で直せるエラー）を得てもかまいません。

レビューはホストの Storybook で

Story はホストの Storybook に置かれ、そこで目視します。その前にホスト自身の型検査が JSX を実物の型と突き合わせます。Yosegi は独自の描画環境を持ちません。

そして実ページになる

承認された Story は実装コンテキストを伴います。貼れる import 文、使用 props、slot 構造、残っている結線。

実運用のデザインシステムでの実測

120 ファイルから 278 コンポーネントを約 4 秒、98.9% は props まで型から取得、出力は決定的です。型がカタログになる仕組みと数値の詳細は Component Registry にあります。

さらに 4 つの UI ライブラリでベンチマークしました。コンポーネントの API をソース、パッケージの .d.ts、Registry のどれで渡しても、エージェントは同じクリーンな画面を出します。デザインシステム規模では、Registry がその中で最小の読解量になります。ソースの 5 分の 1、パッケージ同梱の .d.ts の 3 分の 1。同じ出力を、最小のコンテキストで: ベンチマーク。

インストール

Node.js 22 以上。パッケージマネージャは何でもかまいません。

# npm
npm i -D @yosegi/yosegi
# pnpm
pnpm add -D @yosegi/yosegi
# yarn
yarn add -D @yosegi/yosegi
# bun
bun add -d @yosegi/yosegi

主な使い方である Agent Skill を入れます。

npx skills add yosegi-dev/yosegi

あとは「既存のコンポーネントで画面案を作って」と頼みます。

寄木細工（yosegi）は、小さな木片を寄せ集めて一つの模様を作る日本の木工技法です。デザインシステムのコンポーネントを寄せて画面を組む、というこのツールの営みになぞらえています。