見出し画像

AIで30分でアプリを作った話

マイハンドメーカーというランダムに2枚のトランプを表示するアプリを作りました。

作り方は
①Claudeで仕様を作成する
②Createに仕様を入力する
③Publishして公開する。

たったこれだけで、アプリが作れました。

①Claudeで仕様を作成する
まずはアプリの仕様を作ります。

仕様はAIに作成してもらいます。
Claude3を使いました。

#指示
ボタンを押すとランダムに2枚のトランプを表示する

仕様で書き直して。

#出力
もちろんです。スマホアプリの仕様を以下のようにまとめました。

アプリ名:ランダムトランプピッカー

目的:ユーザーがボタンを押すと、ランダムに選ばれた2枚のトランプを表示する。


機能:メイン画面:
アプリ名とアプリの説明が表示される。
中央に「カードを引く」ボタンが配置されている。
ボタンの下には、選ばれたカードを表示するスペースがある。
「カードを引く」ボタン:
ユーザーがこのボタンをタップすると、2枚のトランプがランダムに選ばれる。
選ばれたカードは、スート(ハート、ダイヤ、クラブ、スペード)とランク(A, 2, ..., Q, K)の組み合わせで表される。
カード表示:
選ばれた2枚のカードは、「カードを引く」ボタンの下に表示される。
各カードは、スートとランクを組み合わせた文字列で表現される(例:「ハートのA」、「スペードの10」)。
オプション:カードの視覚的な表現(画像や絵柄)を追加することで、よりユーザーフレンドリーなインターフェースを提供できる。
エラーハンドリング:
アプリは、予期しないエラーが発生した場合でも、クラッシュせずに適切にエラーをハンドリングする。
エラーメッセージをユーザーに分かりやすく表示し、アプリを継続して使用できるようにする。
ユーザーインターフェース:
アプリのデザインは、シンプルで直感的なものにする。
ボタンのサイズは十分に大きくし、タップしやすいようにする。
カード表示のテキストは、読みやすいフォントとサイズで表示する。

createに英語で指示をしたいので英語にしてもらいます。

英語で書いて

Sure! Here's the specification for the smartphone app in English:

App Name: Random Card Picker

Purpose:When the user taps a button, the app displays two randomly selected playing cards.


Features:Main Screen:
Displays the app name and a brief description of the app.
A "Draw Cards" button is placed in the center of the screen.
Below the button, there is a space to display the selected cards.
"Draw Cards" Button:
When the user taps this button, two playing cards are randomly selected.
The selected cards are represented by a combination of suit (Hearts, Diamonds, Clubs, Spades) and rank (A, 2, ..., Q, K).
Card Display:
The two selected cards are displayed below the "Draw Cards" button.
Each card is represented as a string combining the suit and rank (e.g., "Ace of Hearts", "10 of Spades").
Optional: Add visual representations of the cards (images or symbols) to provide a more user-friendly interface.
Error Handling:
The app should handle unexpected errors gracefully without crashing.
Display user-friendly error messages and allow the user to continue using the app.
User Interface:
The app design should be simple and intuitive.
Ensure the button size is large enough for easy tapping.
Display the card text using a readable font and size.
Supported Platforms:
The app should be compatible with both iOS and Android.
Follow the design guidelines of each platform to provide a native look and feel.
Extensibility:
The app's codebase should be modular and structured to accommodate future enhancements and modifications.
For example, it should be easy to extend the code to add new game modes (e.g., poker, blackjack) in the future.


Based on this specification, you can develop a simple smartphone app that displays two randomly selected playing cards when a button is tapped. Feel free to elaborate on the specifications or add more features as needed.

②Createに仕様を入力する


ログインしてダッシュボードが出てきたら右側の指示を入力するテキストボックスに先ほどの指示をCopy&PasteしてGenerateを押します。



テキストは直接編集できるので、日本語で編集します。



Demoで動作を確認




右上のPublishボタンを押す



Publish all pageを押して完成!


また何か作ってみたいと思います。

この記事が気に入ったらサポートをしてみませんか?