
Pinch Checkout
Eコマースチェックアウトモジュール
Claude Sonnet 5.5
5 · デザイン事例
チェックアウト、オンボーディング、スペース予約、ファイルアップロードの完全なフローを紹介します。整然と並んだ入力欄だけでなく、項目のグループ化、ステップの遷移、入力検証、エラーからの復帰まで参考にできます。
実際に近い内容を入力して各フローを完了し、必須項目を空のままにしてエラーも発生させます。ラベルが常に見えるか、エラーが該当項目の近くに表示されるか、前のステップに戻っても入力が残るか、完了状態が明確かを確認します。
インストール・使用ガイド →
Eコマースチェックアウトモジュール
Claude Sonnet 5.5

サインイン・オンボーディング
GPT 6.1 Sol

レコーディングスタジオ予約ウェブサイト
GPT 6.1 Sol

キャビン詳細・予約
GPT 6.1 Sol

ファイルアップロードモジュール
Claude Fable 5.1
モバイルアプリを「幅を狭めたデスクトップWebページ」にしない方法を解説します。390×844の実ビューポートと複数画面ページscreens.htmlを使い、サーフ予報、配車、デジタルバンキング、瞑想などのモバイルUIを設計します。
エージェントガイド · Claude CodeClaude CodeにOil UI Skillをインストールし、実際のタスクプロンプト、複数方向の比較ページ、ブラウザーのスクリーンショットレビューを使って、Webサイト、モバイルアプリ、UIコンポーネントをデザインする方法を解説します。
デザイン手法 · 実際のスクリーンショットとブラインドレビューJSXとCSSを見るだけでは、文字の切り詰め、くすんだコントラスト、レイアウトの重心の偏りを見つけられません。Oil UIが1440px / 390pxの実ブラウザースクリーンショット、200%の部分拡大、色面構造図、コンテキストなしのサブエージェントレビューで品質を確認する方法を解説します。