Open1
create.xyz入門

概要
↓create.xyzのアカウントを作成
できること
- プロンプトで自然言語のみでのwebページ・アプリ作成
- 見た目だけではなく、ちゃんとロジック実装まで行える
- create上にDBを作成(またはswagger経由で外部DBとのAPI接続)
- webサイトのスクレイピング
- 外部APIとの連携 etc...
- アプリ内でAI機能の実装
- GPT-4 Visionでの画像認識
- DALLE-3
- stable diffusion
- Command R+ やAnthropic Opusでの文章生成
- webページのデプロイ
- Reactのコードコピペ
などなど
プラン
- 簡単なページやアプリなら無料プランでも十分に作成できそう
- 商用するなら、用途に合わせて有料プランを選んだ方が良い
使い方
- Project…1つのWebサイト・アプリ。1つ以上のPageで構成されている。
- Page…Projectを構成するページ。1Pageにき1ビルダー画面がある。
- Component…Pageの構築に繰り返し使用できる要素。自由に作成できる。
プロンプト例
チャットボット | 画像認識 | LP作成 |
---|---|---|
![]() |
![]() |
![]() |
{ChatGPT}を使って、チャットボットを作って。
{GPT-4 Vision}に画像を渡して、どんな画像か日本語で説明するアプリを作って。
新しい香水商品の発売を紹介するためのアーティスティックで視覚的に魅力的なランディングページデザインを作成してください。
プライマリーカラーは淡い紫色を中心にしてください。
全体的な美観はエレガントで洗練されたものにし、モダンなタッチを加えてください。
{Leonardo AIで生成した画像}
ページは、このスクリーンショットのデザイン通りにしてください。
一般的なテーブルの実装
日本語の表を作成してください。
領収書の情報を管理する表です。
表には7カラムあります。カッコの中にはデータの型を示しています:
1. チェックボックス
2. 日付(yyyy/mm/ddのDate型)
3. 金額(number + 円)
4. 店名(文字列)
5. 購入品目(文字列)
6. 勘定科目(文字列)
7. 編集ボタン
表のデザインは、2024年のUIデザインの流行を取り入れ、{Receipt Management Table}を使用してください。
{Receipt}に、表と同じカラムを追加してください。
{Receipt}に、現在J{apanese Receipt Table}で表示しているすべてのデータを保存してください。データは前カラムで現在の{Japanese Receipt Table}通りの値を格納してください。
- テーブルの右上に「追加」ボタンを設置してください。「追加」ボタンを押すと、モーダルが表示され新たなカラムを追加することができます。
- カラムを新規追加したときに、{ChatGPT}で購入品目の内容から勘定科目を推測し、補完してください。
- 編集ボタンを押すと、モーダルが表示され現在のカラムの内容を編集することができます。
- モーダルには、「日付」「金類」「店名」「購入品目」のインプットが設置されています。
プロンプトのコツ
- 要件を明確にし、仕様を詳細に説明する
- シーンを設定して主要部分の見え方や挙動を説明する
- 構成要素に細分化し、Markdown等でAIにも分かりやすいように説明する
- 言葉で説明しにくいものは参考となるスクリーンショットなどでアップロードしてもOK(GPT-4 Visionが認識)
感想
- 結構雑なプロンプトでもアプリを一発で生成してくれる
- ちゃんと作ろうとすると、日本語でうまくプロンプトを指示するのはちょっとコツが要る、特に細かいレイアウト等を読み取ってもらうのが難しい
- 非エンジニアでも十分なアプリが生成できるが、知識はあった方が良いプロンプトが書ける(当然)
- 現時点ではまだ実務の実用には難しい(結局自分でコード書いた方が早い)が、進歩も著しいので今後の発展に期待
- とはいえ、ロジックの介入しない簡単なウェブサイトなどは事足りるのでは
- (こういうのがどんどん発展すると仕事がなくなりそうで怖い)
応用的な利用用途(試したことはない)
Galileo AIでアプリのデザインを作成
1.- webやモバイルアプリのデザインアイデアをプロンプトで生成できる
- 生成されたデザインをFgimaで編集可能
Galileo AIの使用例)香水LPのデザイン
新しい香水商品の発売を紹介するためのアーティスティックで視覚的に魅力的なランディングページデザインを作成してください。プライマリーカラーは淡い紫色を中心にしてください。全体的な美観はエレガントで洗練されたものにし、モダンなタッチを加えてください。
以下の要素を含めてください:
ヒーローセクション: 香水ボトルの大きく魅力的な画像を、淡い紫色の花の要素で囲みます。背景には薄い紫色のグラデーションを使用し、雰囲気を高めます。『エレガンスの本質を発見』というキャッチフレーズを、優雅なスクリプト風のフォントで表示します。商品説明: 香水の簡潔な説明セクションで、独自の香りのノートや高級な成分を強調します。読みやすいクリーンなサンセリフ体フォントを使用し、視覚的な興味を引くために繊細なラベンダーのアイコンや仕切りを組み込みます。
香りのノート: 香水の主要な香りのノートを紹介する視覚的に魅力的なセクションです。ラベンダーの花、柑橘類のスライス、バニラポッドなどのアーティスティックなイラストやアイコンを使用し、美的に配置します。
カスタマーレビュー: 顧客のレビューセクションを設け、ライトパープルの吹き出しスタイルで引用を表示します。このセクションを穏やかなライトグレーの背景にして、レビューを際立たせます。
CTA: 『香りを体験する』というメッセージを持つ、少し濃いラベンダー色の目立つ行動喚起ボタンを作成します。商品説明の下に戦略的に配置して最大の効果を狙います。
フッター: ソーシャルメディアのリンク、連絡先情報、ニュースレターの購読フォームを含むミニマリストなフッターを作成します。
全体のカラーテーマを維持するために、控えめなラベンダーのアクセントを使用します。デザインはバランスが取れた調和の取れたレイアウトで、アーティスティックな要素を強調し、ラグジュアリーで排他的な感覚を作り出すために十分な余白を確保してください。
2. デザインのスクショをCreateで読み込み、ページを作成
- Createにはプロンプトで画像を読み込む機能もある
3. Tailwindなどでスタイル修正
- AIで作りきれなかったところなどを、手作業で微調整
4. Next.jsで、バックエンド実装
- 複雑なDB設計などはcreateでは限界があるので、バックエンドをNextで構築
- CreateはReactベースなので、Next.jsで実装すれば何かとやりやすい