Calicat：自然言語からハイファイプロトタイプを生成するプロダクト・デザイン・開発の協業プラットフォーム

Calicat は、ProcessOn チームが提供するプロダクト・デザイン・開発のためのワンストップ協業プラットフォームです。中心にあるのは「デザインが分からない人でもハイファイプロトタイプを描けるようにする」という命題です。その方法は、「要件を記述する—画面を生成する—反復して修正する」という一連の流れを同じエディタの中に移すことにあります。ユーザーが自然言語で作りたいものを説明すると、まず AI が初稿を出し、その後に人がコンポーネントライブラリ、自動レイアウト、スタイル置換を使って何度も磨き上げていきます。プロダクト、デザイン、開発の三者は、それぞれ別フォーマットの成果物を抱え込むのではなく、同じファイルの中で対話できるわけです。

解決する課題

プロトタイプ段階の本当のコストは、多くの場合「描くこと」ではなく「何度も確認し合うこと」にあります。プロダクトマネージャーが文章で要件を書き、デザイナーは別の意味に解釈し、開発はさらに自分なりの想像で実装する。ここから手戻りが生まれます。Calicat はこの三つの工程を一つのキャンバスに圧縮しようとします。要件の記述がそのまま可視ページになり、ページはコンポーネントと納品に直結し、その間に何層もの伝言が介在しません。個人開発者や小さなチームにとって、この圧縮はさらに現実的です。複雑なデザインツールを先に覚えなくても、アイデアを人の前に出して検証できるからです。

主な機能

• AI デザインアシスタント：自然言語で要件を入力すれば初稿が生成され、生成済みのページに対してそのまま反復編集を続けられます。空白のキャンバスから始める必要はありません。
• マルチモーダルなデザイン入力：スケッチからプロトタイプへの変換に対応し、手描きの写真をアップロードすると AI が要素と構造を認識します。ブラウザ拡張機能で既存 Web ページのデザインを抽出し、編集可能なデータに変換することもできます。
• 要件ドキュメントの生成：デザインの過程で要件ドキュメントのカードが自動生成され、口頭の曖昧なアイデアを PRD に近い構造化されたモジュールへ整理します。
• コンポーネントライブラリとスタイル：幅広いシーンをカバーする組み込みコンポーネントライブラリ（TDesign などを含む）を備え、スタイル置換と自動レイアウトに対応します。サイズや余白を変えるときに、すべての要素を手作業でそろえる必要はありません。
• AI によるストリーミング生成：単一ページからデザイン全体へと展開でき、複数ページで統一したスタイルを保ちたい場面に向いています。
• 多様なシーンへの対応：プロダクトの画面だけでなく、SNS のカバー画像、図解レイアウト、PPT ページのデザインにも使えます。
• ワンストップ協業：メンバーは同じプロジェクトでリアルタイムに協業でき、完成後はデザインファイルとして書き出すか、開発チームへ直接送れます。

使い方

1. 登録とログイン：Calicat の公式サイト https://www.calicat.cn/ にアクセスし、アカウントを作成します。
2. プロジェクトの作成：プロジェクト名と概要を入力し、デザインファイルを作成します。
3. 要件の記述：入力欄に希望するページを自然言語で説明すると、AI がそれを基に初期デザインを生成します。
4. デザインの作り込み：コンポーネントライブラリから適切なものを選び、自動レイアウト、スタイル置換、画像ライブラリ、アイコンライブラリで細部を仕上げます。
5. 入力方法の追加：手元にスケッチがあればアップロードまたは撮影し、AI に認識させてハイファイページに変換します。既存サイトを参考にしたい場合は、ブラウザ拡張機能でワンクリック抽出できます。
6. 要件ドキュメントの蓄積：自動生成されるドキュメントカードを使い、デザイン意図を納品可能な説明として記録します。
7. 協業と納品：チームメンバーを招待してリアルタイムにやり取りし、完成後はファイルを書き出すか開発へ直接送ります。公式は開発工程をつなぐ MCP Server も構想しています。

適したシーン

• プロダクト原型の検証：プロダクトマネージャーが要件を説明文として書けば、数分で議論できるページが手に入ります。デザイン資源を投じる前に方向性を確かめられます。
• 画面設計の効率化：デザイナーは AI に初稿を作らせ、基礎的な枠組みの繰り返し構築ではなく、アイデアと細部の作り込みに力を注げます。
• SNS コンテンツ制作：カバー画像や図解レイアウトを直接生成でき、高い頻度でビジュアルを出す運用に向いています。
• ドキュメントとプレゼンのレイアウト：自動レイアウトにより、長い文書や PPT ページの見栄えを一定に保て、手作業の調整を減らせます。
• 役割をまたぐ協業：プロダクト、デザイン、開発が一つのプロジェクトファイルを共有するため、形式変換や情報の欠落を抑えられます。

制限と注意点

AI が生成したプロトタイプは、やはり人のレビューが必要です。説明を妥当なページ構造に変えるのは得意ですが、業務ロジックが成立するか、情報の優先順位が適切かまでは判断できません。複雑なインタラクション状態、権限分岐、例外フローについては、通常は手作業で補う必要があります。コンポーネントライブラリがカバーするのは一般的なシーンであり、高度にカスタマイズしたビジュアル体系は自分で設計する必要があります。また、AI は自然言語の記述を誤解することがあり、説明が曖昧なほど手戻りが増えます。要件を明確に書くほうが、AI に何度も推測させるより時間を節約できます。具体的なプラン、利用枠、協業人数の制限については、公式サイトの最新の案内をご確認ください。

よくある質問

デザインの基礎がまったくない人でも Calicat は使えますか？

使えます。入口が自然言語の記述であり、コンポーネントライブラリと自動レイアウトを組み合わせれば、絵を描かなくても構造の整ったページが得られます。ただし精細なビジュアルに仕上げるには、ある程度の美意識が求められます。

手描きのスケッチを編集可能なプロトタイプにできますか？

できます。スケッチ画像をアップロードするか撮影してアップロードすると、AI が要素とレイアウトを認識してハイファイページに変換し、その後もエディタで編集を続けられます。

生成したプロトタイプは開発に渡せますか？

デザインファイルとして書き出すか、開発チームへ直接送れます。公式は開発への納品工程をつなぐため、MCP Server をまもなく公開すると言及しています。

従来のプロトタイピングツールとの違いは何ですか？

従来のツールは手作業の描画が中心で、効率は操作の習熟度に左右されます。Calicat は生成を前に置き、判断と修正を人に任せるため、アイデアを素早く検証したい段階に適しています。