⬡ Rork 開発/2026-06-15中級
再生成のたびに色と余白が崩れる問題を、デザイントークンの単一情報源で止める
Rorkに画面を再生成させるたびにボタンの色や余白が少しずつ変わる問題を、デザイントークンの単一情報源で止める設計です。トークンを1か所に固定して生成物に参照させる方法、CIでの逸脱検出、複数アプリで一貫性を保つ注意点まで、本番で効いた数値とともにまとめます。
⬡ Rork 開発/2026-04-28初級
DESIGN.mdでモバイルアプリのデザインルールをAIに伝える
Googleが公開したDESIGN.md形式で、色・フォント・余白のルールをマークダウンに記述し、RorkなどのAIツールへ正確に伝える方法です。シンプルな実装例、AIがファイルを読む仕組み、CLIでの検証、生成UIのBefore/Afterまで具体的に確認できます。
⬡ Rork 開発/2026-04-27上級
Rorkで生成したUIを壊さずに育てる — Storybook × Chromatic で進める視覚回帰テスト実践ガイド
Rorkが自動生成するUIを安心して育てるために、Storybook for React NativeとChromaticで構築する視覚回帰テストの実装手順、AI生成コード特有の落とし穴、レビュー運用までを通しで解説します。
⬡ Rork 開発/2026-03-17中級
Rork × Google Stitch — デザインから React Native アプリまで AI で一貫開発
Google Stitchで生成したUIデザインをRork Maxへ取り込み、React Nativeアプリを最短で仕上げるワークフローです。基本の連携手順、MCPによる効率化、タスク管理アプリでの実践例、効果的なケースと注意点までを一通り解説します。デザインから実装への変換コストを下げます。
⬡ Rork 開発/2026-03-10中級
Rork と Figma をつなぐ — デザインからプロトタイプまでの実務フロー
Figmaで作ったUIコンポーネントをRorkのプロトタイプへ落とし込む実務フローです。命名規則の揃え方、コンポーネントライブラリの構築、デザインシステムの維持、大量のコンポーネントを扱うときの注意点まで、デザインと実装の手戻りを減らす手順を解説します。