// live · generative ui

Hello!

›
// selected work

ワーク

Design System

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

Design SystemTokensTypeScriptVueStorybookFigmaClaude Code

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

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

Design Efficiency

デザインシステム導入によりデザイン工程の工数を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実装のライブデモ
// personal work

個人開発

個人開発2026.06 – present
mynekko.app →
mynekko
mynekkomynekko.app →

ねこのイラストを SVG パーツの組み合わせと色で作るイラスト生成サービス。 体のパーツをカスタマイズし、作成したイラストを画像でダウンロードできる。

ReactTypeScriptViteTailwind CSSRadix UISVGVercel
役割
企画 · イラストレーション · デザイン · 実装 · 運用
主な機能
SVG 体パーツ合成によるリアルタイムプレビューカラーパレットによるカスタムカラー設定作成したイラストを画像でダウンロードSUZURI API を利用したグッズ化展開
// 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 →