Dessnで実際の画面を使ったAI UIデザインとプロトタイピング

Dessnとは？何ができるサービス？

Dessnは、今あるWebサイトやアプリの画面を使ってUIの変更案を試せるサービスです。たとえば設定画面を見直すとき、画面をコピーし、製品にあるボタンや入力欄を使った別案をAIに作らせます。チームでその案を開いてクリックし、次の画面に進めるか、エラー時にどう見えるかを確認できます。担当の開発者は画面の変更に対応するコードも見られます。

既存画面から操作できる試作品を作る

1. 承認済みのGitHubまたはGitLabのリポジトリを接続し、基準ブランチを選びます。モノレポでは、対象アプリやサブディレクトリを指定します。
2. ビルド後にLibraryから対象画面を開き、フレームを複製します。たとえば既存のフォーム部品を使い、住所を編集する操作を目立たせるよう指示します。
3. Playで編集から保存まで試します。郵便番号が空欄のときの案内や、入力画面へ戻ったときの表示も確認します。レビューしたい案を共有し、画面上の変更にコメントをもらいます。

非公開パッケージや独自のビルド手順がある場合は、開発者の対応が必要になることがあります。 リポジトリ接続の手順

Libraryには画面の基になったコミットが記録されます。リリースをまたいで画面を見比べる場合は、既存のプロトタイプがいつのコードから複製されたかを確認できます。

デザインシステムとのずれを探す

関連画面を並べ、古いボタンや異なる余白が使われている箇所を探せます。部品の入れ替えは複製で試し、通常表示に加えて空欄やエラー時の見え方も確認すると、移行時のレビューに役立ちます。 デザインシステム移行ガイド

リポジトリの権限とプレビュー用データ

承認したリポジトリへの接続は読み取り専用で、フロントエンドのコピーを隔離されたクラウド環境に構築します。ログインやサービスの応答などはプレビュー内で模擬できます。Dessnは顧客のコード、プロンプト、出力をモデル学習に使わないとしています。 Dessnのプライバシーポリシー

変更コードを開発チームに渡す

ローカルのコーディングエージェントを使う手順では、変更をパッチ、コミット、バンドルとして持ち帰れます。ProにはClaude Code、Codex、Cursor向けのMCP連携が掲載されています。チームの環境で差分を確認し、テストを行ってから取り込みます。 MCPの導入手順

Dessnのよくある質問

無料でどこまで使えますか？

2026年11月6日の掲載内容では、Freeは月20クレジットです。Proは編集者1人あたり月額$30と表示され、月100クレジットと追加購入の選択肢があります。Enterpriseは個別見積もりです。デザインエージェントの実行でクレジットを消費します。通貨や税は購入時に確認してください。 Dessnの料金ページ

プロトタイプの変更コードを取り出せますか？

はい。公式のローカルエージェント向け手順では、選んだフレームの変更をパッチなどで取得し、適用前に確認できます。

非公開リポジトリに書き込みますか？

接続は承認したリポジトリの読み取り専用です。画面の変更はコピーに適用され、元のリポジトリに反映する作業はチームが行います。