// live · generative ui

Hello!

›
// selected work

ワーク

xenoMateria

B2B SaaS xenoBrainのデザインシステム(token/components)設計、運用フロー構築、実装。

Design SystemTokensTypeScriptVueStorybookFigmaClaude Code

既存プロダクトで使用されているバラバラな仕様のコンポーネントをグルーピング。必要なコンポーネントを取捨選択し、新しいコンポーネントをデザイン。TailwindCSSを導入し、色、サイズ、タイポグラフィー、スペーシングなどのプリミティブトークンおよびセマンティックトークンを定義。

担当
デザインシステムに関わる全て（設計から実装まで）
主な成果
実装の自動化基盤の構築

Design Efficiency

xenoMateria導入によりデザイン工程の工数を1/5に削減。

Design SystemFigmaDX

旧来のFigma中心のフローからコード中心のプロトタイピングに移行することにより、アイデアを形にする時間を1/5に圧縮。また、プロトタイプはほとんどそのままフロントエンド実装に流用できるようになり、全体としては更なる効率化が実現された。

担当
デザインシステムを活用したプロトタイピングフローの構築
主な成果
プロトタイピングの時間を1/5に圧縮

Vue 2 → Vue 3 Migration

B2B SaaSプロダクトのVue 2→Vue 3移行。

VueMigrationTypeScript

Vue2からVue3への移行にあたり、既存コンポーネントを旧来のOptions APIからComposition APIへの書き換え。

担当
コンポーネントの書き換え
主な成果
Vue2からVue3への段階的移行の足がかり

GenUI Pipeline

このサイト。LLMがOpenUI Langをストリームし、デザインシステムが描画する。

OpenUIStreamingTypeScriptNext.jsGemini

このサイト自体。LLMがOpenUI Langをストリームし、デザインシステムのコンポーネントとしてリアルタイムに描画する。

担当
設計・実装すべて
主な成果
デザインシステム → AI実装のライブデモ
// built with

このサイトの使用技術

  • Next.jsApp Router · Edge Runtime
  • Reactv19 · Server Components
  • TypeScript型安全なフロントエンド
  • Gemini2.5 Flash · OpenAI互換API
  • Zodコンポーネントpropsの契約
  • pnpmパッケージ管理
  • OpenUIGenUI ストリーミングランタイム
// about
5awr

5awr / SAWADA Ryunosuke

デザインとエンジニアリングの両輪でデザインシステムを設計・構築し、AIを活用したフロントエンド実装の自動化を推進しています。

5awrBuilt with OpenUI →