絵ではなく、プロダクトをデザインする

スクリーンショットを添付するか、画面を説明してください。Mythexが本物のデータと状態を備えた動くアプリとして作り、共有できるライブリンクを用意します。

アイデアから始める

4ステップのオンボーディングフローを作ってください。進捗バー、入力中にチェックするプロフィールフォーム、スキップの選択肢、完了画面を入れてください。

色、文字サイズの体系、ボタン、入力欄、カード、アラートを、それぞれ通常・ホバー・無効・エラーの状態で見せる、生きたスタイルガイドを作ってください。

ケーススタディをグリッドで並べ、それぞれに大きな画像と短い説明のページがあり、お問い合わせフォームも付いたポートフォリオサイトを作ってください。

サイドバー、期間選択、4つの数値カード、グラフを備え、リアルなサンプルデータを入れたクリックできる分析ダッシュボードを作ってください。

動くプロダクトは、静的な画面では見せられないものを見せてくれます。作って、クリックして、本物を共有しましょう。

入力中にチェックするフォーム、本物のデータベースから読み込むリスト、ちゃんと動くボタン。

空の状態、読み込み中、エラー、再試行。プロダクトが壊れやすいのはここです。ひとつずつ頼んで、動く様子を確認しましょう。

管理者に見える画面とメンバーに見える画面を、本物のログインとロールで並べて見せられます。

ステップの順番、初期値、何を任意にするかで、オンボーディングを完了してもらえるかが決まります。画像ではなく実際のフローで試しましょう。

プレビューリンクを共有するか公開するだけ。エンジニアは動くリファレンスを、Proならコードも受け取れます。

空・読み込み中・エラーの状態、入力チェックするフォーム、本物のデータベースから読み込むリスト。静的な画面では見せられないものを試せます。

スクリーンショットやモックアップを画像として添付し、その通りに作るよう頼めます。ヒーロー画像やイラストも必要に応じてチャットで生成できます。

プレビューリンクを共有するか、アプリを公開。スマホサイズのプレビューで全画面を確認でき、ProならCSSやコンポーネントを自分で調整できます。

必要なものを普段の言葉で伝えるか、テンプレートから始めます。

Mythexがコードを書き、データベースを用意し、ライブプレビューを表示します。

ワンクリックで公開URLに。チーム内だけで使うこともできます。

Google Sheets、Gmail、Slack、Notion、HubSpotなど数百のツールを一度つなげば、あとはチャットで頼むだけ。アプリがデータを読み書きし、キーがコードに入ることはありません。

直接はできません。フレームを画像として書き出してチャットに添付すれば、Mythexがそこから画面を作ります。画像からわからない部分は説明してください。

かなり近づけられ、チャットでさらに詰められます。余白、色、フォントのずれを指摘してください。Proならコードを自分で編集することもできます。

Mythexが作るWebアプリはスマホのブラウザで動作します。プレビューにはスマホサイズの枠があり、その幅で全画面を確認できます。

無料で始めてスクリーンショットを添付すれば、数分でデザインが動き出します。