Open1

create.xyz入門

りゅうのりゅうの

概要

↓create.xyzのアカウントを作成
https://www.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が認識)

感想

  • 結構雑なプロンプトでもアプリを一発で生成してくれる
  • ちゃんと作ろうとすると、日本語でうまくプロンプトを指示するのはちょっとコツが要る、特に細かいレイアウト等を読み取ってもらうのが難しい
  • 非エンジニアでも十分なアプリが生成できるが、知識はあった方が良いプロンプトが書ける(当然)
  • 現時点ではまだ実務の実用には難しい(結局自分でコード書いた方が早い)が、進歩も著しいので今後の発展に期待
  • とはいえ、ロジックの介入しない簡単なウェブサイトなどは事足りるのでは
  • (こういうのがどんどん発展すると仕事がなくなりそうで怖い)

応用的な利用用途(試したことはない)

1. Galileo AIでアプリのデザインを作成

  • webやモバイルアプリのデザインアイデアをプロンプトで生成できる
  • 生成されたデザインをFgimaで編集可能
Galileo AIの使用例)香水LPのデザイン

新しい香水商品の発売を紹介するためのアーティスティックで視覚的に魅力的なランディングページデザインを作成してください。プライマリーカラーは淡い紫色を中心にしてください。全体的な美観はエレガントで洗練されたものにし、モダンなタッチを加えてください。

以下の要素を含めてください:

ヒーローセクション: 香水ボトルの大きく魅力的な画像を、淡い紫色の花の要素で囲みます。背景には薄い紫色のグラデーションを使用し、雰囲気を高めます。『エレガンスの本質を発見』というキャッチフレーズを、優雅なスクリプト風のフォントで表示します。商品説明: 香水の簡潔な説明セクションで、独自の香りのノートや高級な成分を強調します。読みやすいクリーンなサンセリフ体フォントを使用し、視覚的な興味を引くために繊細なラベンダーのアイコンや仕切りを組み込みます。
香りのノート: 香水の主要な香りのノートを紹介する視覚的に魅力的なセクションです。ラベンダーの花、柑橘類のスライス、バニラポッドなどのアーティスティックなイラストやアイコンを使用し、美的に配置します。
カスタマーレビュー: 顧客のレビューセクションを設け、ライトパープルの吹き出しスタイルで引用を表示します。このセクションを穏やかなライトグレーの背景にして、レビューを際立たせます。
CTA: 『香りを体験する』というメッセージを持つ、少し濃いラベンダー色の目立つ行動喚起ボタンを作成します。商品説明の下に戦略的に配置して最大の効果を狙います。
フッター: ソーシャルメディアのリンク、連絡先情報、ニュースレターの購読フォームを含むミニマリストなフッターを作成します。
全体のカラーテーマを維持するために、控えめなラベンダーのアクセントを使用します。デザインはバランスが取れた調和の取れたレイアウトで、アーティスティックな要素を強調し、ラグジュアリーで排他的な感覚を作り出すために十分な余白を確保してください。

2. デザインのスクショをCreateで読み込み、ページを作成

  • Createにはプロンプトで画像を読み込む機能もある

3. Tailwindなどでスタイル修正

  • AIで作りきれなかったところなどを、手作業で微調整

4. Next.jsで、バックエンド実装

  • 複雑なDB設計などはcreateでは限界があるので、バックエンドをNextで構築
  • CreateはReactベースなので、Next.jsで実装すれば何かとやりやすい