AI Deck

Dessn ─ 本番コードベースの中で直接デザイン・プロトタイピングできるAIネイティブなデザインツール

Dessnは、デザインツールとコードのあいだにある「受け渡し」の工程をなくすことを狙ったAIネイティブなデザイン環境である。GitHubのReactリポジトリを読み取り専用で接続すると、既存のコンポーネントやタイポグラフィといったデザイン言語をそのまま使える状態でクラウド上に展開し、デザイナーやプロダクトマネージャーが本番コードの文脈のなかで新機能をデザイン・プロトタイプできる。ローカル環境の構築もIDEの操作も必要なく、自然言語で指示を出すだけで、開発者がそのまま引き継げるコードが生成される。2024年にGabriella Hachem氏とNim Cheema氏が創業し、2026年5月にConnect Venturesがリードする600万ドルの資金調達を発表した。

主な特徴

  • ワンクリックでコードベースを接続: GitHubリポジトリを読み取り専用で連携するだけで、コンパイルからクラウド実行までを自動で処理する。CSSフレームワークやコンポーネントライブラリの制約はなく、既存の複雑なコードでもそのまま扱える
  • 既存のデザイン言語を自動抽出: 新しくデザインシステムを作り直す必要がない。実装済みのコンポーネント・配色・タイポグラフィをそのまま部品として使うため、プロトタイプと本番の見た目が最初から一致する
  • プロトタイプごとにライブブランチ: 作成したプロトタイプはコードベースのブランチとして分離され、隔離されたmicroVM上で動作する。他の作業に影響を与えずに複数案を並行して試せる
  • 自然言語でのAIプロトタイピング: 「この画面に絞り込みフィルターを足す」といった指示から、実際に動く高精度なプロトタイプを生成する。技術的な処理はAIが引き受けるため、コードを書けなくても操作できる
  • チーム全員が同じ環境で協働: デザイナー・PM・エンジニアが同じコードベース上で議論できる。デザインファイルからコードへ翻訳する工程が不要になり、認識のずれが起きにくい
  • セキュリティ設計: SOC2 Type II認証を取得済み。アクセスは読み取り専用で、コードの変更やpushは行わない。権限は限定的で随時取り消せ、プロジェクトのデータはAIの学習に使われない

料金

プラン月額料金主な内容
Free$0リポジトリ1件のコンパイル、週5プロンプト。本番コードベースの可視化を試せる
Starter1ユーザーあたり$39月40プロンプト、コア機能の利用
Teams1ユーザーあたり$139プロンプト無制限、複数リポジトリ対応、本番UIを取り込む「surfaces」、学習利用のオプトアウト既定、SOC2などのセキュリティ対応
Enterprise要問い合わせTeamsの全機能に加えて専任サポート、SSO、管理ダッシュボード、請求形態の個別調整

料金は2026年8月時点の情報です。年額プランの記載は公式サイトにありません。最新の料金は公式サイトをご確認ください。

メリット・デメリット

メリット

  • デザインからコードへの手戻りが減る。最初から本番のコンポーネントを使うため、実装時に「デザイン通りにならない」問題が起きにくい
  • ローカル開発環境のセットアップが不要で、非エンジニアでも本番同等の画面を触りながら検討できる
  • 読み取り専用アクセスとmicroVM分離により、既存のコードベースを壊す心配がない
  • 既存のデザインツールを捨てる必要がなく、段階的に導入できる

⚠️ デメリット

  • 主な対象はReactのWebアプリ。他のフレームワークやネイティブアプリは想定範囲外
  • ゼロからのアイデア出しには向かない。既存のコードベースがあることが前提の設計
  • Starterで月40プロンプト、Freeで週5プロンプトと、下位プランの試行回数が少なめ
  • Teamsは1ユーザーあたり月$139と、一般的なデザインツールに比べて価格帯が高い

類似サービスとの比較

比較項目DessnFigmaLovablev0 (Vercel)
主な用途既存コードベース上での機能デザインUIデザイン・共同編集アイデアからのアプリ生成UIコンポーネント・画面生成
前提条件本番のReactリポジトリなしなしなし
出力本番コードのブランチデザインファイル新規プロジェクトのコードReactコード
得意な場面既存プロダクトの改善・反復設計・意匠の検討新規プロダクトの立ち上げ単発の画面・部品作成
無料プランあり(週5プロンプト)ありありあり

こんな人におすすめ

  • すでに動いているReact製のプロダクトがあり、その改善サイクルを速めたいチーム
  • デザインファイルと実装のずれ、いわゆるハンドオフの手戻りに悩んでいるデザイナーとエンジニア
  • コードを書かないが、実際の画面を触りながら仕様を固めたいプロダクトマネージャー
  • デザインシステムを整備しきれていないが、実装済みコンポーネントは資産として揃っている組織

まとめ

Dessnは、「デザインしてからコードに落とす」という順序そのものを入れ替え、本番コードの中でデザインを始めさせるツールである。新規アイデアを試すLovableやv0とは狙いが異なり、既存プロダクトを持つチームの反復速度を上げることに特化している。無料プランは週5プロンプトと試用の域だが、コンポーネントの抽出精度と実際の操作感を確かめるには十分である。ハンドオフの手戻りが慢性化しているチームは、まず1リポジトリだけ接続して確かめてみるとよい。

関連リンク

← ブログ