Hello!
このサイトの仕組み
UIライブラリを構築
このサイトで使うコンポーネントをZodで型定義し、使ってよい部品の「契約」を作る。
コンポーネント仕様をプロンプトに変換
コンポーネントの定義から、AIへのシステムプロンプトを自動生成。
LLMがUIをストリーム出力
あなたの質問に応じ、許可された部品だけを使って構造化UIをリアルタイムに生成する。
このページでリアルタイムに描画
生成されたUIを上のデモエリアでそのまま表示。このページ自体がその動く実例。
ワーク
Design System
B2B SaaSプロダクトのデザインシステム(token/components)設計、運用フロー構築、実装。
既存プロダクトで使用されているバラバラな仕様のコンポーネントをグルーピング。必要なコンポーネントを取捨選択し、新しいコンポーネントをデザイン。TailwindCSSを導入し、色、サイズ、タイポグラフィー、スペーシングなどのプリミティブトークンおよびセマンティックトークンを定義。
- 担当
- コンポーネントライブラリの設計から実装まで
- 主な成果
- 実装の自動化基盤の構築
Design Efficiency
デザインシステム導入によりデザイン工程の工数を1/5に削減。
旧来のFigma中心のフローからコード中心のプロトタイピングに移行することにより、アイデアを形にする時間を1/5に圧縮。また、プロトタイプはほとんどそのままフロントエンド実装に流用できるようになり、全体としては更なる効率化が実現された。
- 担当
- デザインシステムを活用したプロトタイピングフローの構築
- 主な成果
- プロトタイピングの時間を1/5に圧縮
Vue 2 → Vue 3 Migration
B2B SaaSプロダクトのVue 2→Vue 3移行。
Vue2からVue3への移行にあたり、既存コンポーネントを旧来のOptions APIからComposition APIへの書き換え。
- 担当
- コンポーネントの書き換え
- 主な成果
- Vue2からVue3への段階的移行の足がかり
GenUI Pipeline
このサイト。LLMがOpenUI Langをストリームし、デザインシステムが描画する。
このサイト自体。LLMがOpenUI Langをストリームし、デザインシステムのコンポーネントとしてリアルタイムに描画する。
- 担当
- 設計・実装すべて
- 主な成果
- デザインシステム → AI実装のライブデモ
個人開発
ねこのイラストを SVG パーツの組み合わせと色で作るイラスト生成サービス。 体のパーツをカスタマイズし、作成したイラストを画像でダウンロードできる。
- 役割
- 企画 · イラストレーション · デザイン · 実装 · 運用
- 主な機能
- SVG 体パーツ合成によるリアルタイムプレビューカラーパレットによるカスタムカラー設定作成したイラストを画像でダウンロードSUZURI API を利用したグッズ化展開
UX の 5 段階モデルに基づいてデザイン関連書籍を分類・紹介するサイト。 戦略・要件・構造・骨格・表層の各レイヤーごとに書籍を整理し、学習パスを可視化。
- 役割
- 企画 · デザイン · 実装
- 主な機能
- UX 5 段階モデルによる書籍分類レイヤーごとの学習パス可視化デザイン関連書籍の紹介・案内
このサイトの使用技術
- Next.jsApp Router · Edge Runtime
- Reactv19 · Server Components
- TypeScript型安全なフロントエンド
- Gemini2.5 Flash · OpenAI互換API
- Zodコンポーネントpropsの契約
- pnpmパッケージ管理
- UIOpenUIGenUI ストリーミングランタイム
UI Library
トークン・コンポーネント一覧
View →