スティッチ
Stitch
の使い方・機能・解決する業務課題

使い方

1. アカウントを作成する

   公式サイトで「Try Stitch」ボタンをクリックし、Googleアカウントでサインインします。

2. プロンプトまたは画像を入力する

   作成したいUIの概要を英語で入力するか、手書きのスケッチやスクリーンショットなどの参考画像をアップロードします。

3. デザインのバリエーションを確認する

   Stitchが生成した複数のUIデザイン案をプレビューし、目的に合ったものを選択します。

4. デザインを微調整する

   テーマやカラーパレット、レイアウトなどを調整し、必要に応じて再生成を行います。

5. コードやデザインファイルをエクスポートする

   完成したデザインをHTML/CSSコードとしてエクスポートするか、Figmaに貼り付けてさらなる編集を行います。

6. プロジェクトに統合する

   エクスポートしたコードやデザインを既存のプロジェクトに統合し、開発を進めます。

---

機能

• 自然言語によるUI生成

  英語のテキストプロンプトから、モバイルやウェブ向けのUIデザインと対応するフロントエンドコードを自動生成します。

• 画像ベースのUI生成

  手書きのスケッチや既存のUIのスクリーンショットをアップロードすることで、対応するデザインとコードを生成します。

• 複数のデザインバリエーション生成

  異なるレイアウトやスタイルのデザイン案を複数生成し、比較・選択が可能です。

• テーマとスタイルのカスタマイズ

  カラーパレットやフォント、コンポーネントのスタイルを調整し、ブランドやプロジェクトに合ったデザインを作成できます。

• Figmaへのエクスポート

  生成したデザインをFigmaに直接貼り付け、チームでの共同編集や既存のデザインシステムとの統合が可能です。

• HTML/CSSコードのエクスポート

  生成されたUIに対応するクリーンなHTML/CSSコードをエクスポートし、開発に活用できます。

• Gemini 2.5 ProによるAI生成

  Googleの最新AIモデル「Gemini 2.5 Pro」を活用し、高度なUIデザインとコード生成を実現しています。

• 今後の機能追加予定

  スクリーンショットに注釈を加えてUIを編集する機能や、モバイルとウェブの両方に対応したデザイン生成機能が追加予定です。

---

料金