AIデモアプリコレクションは、AIコーディングのデモをする過程でできた作品をまとめたものです。 全ての作品は、Windsurfで、かんたんな日本語の指示のみで作成しました。
- Windsurf を起動します
- どんな作品を作りたいか、Windsurfに伝えます
- Windsurf がコードを書いていくので、とりあえずすべて accept します
- できあがったURLにアクセスしてブラウザで開きます
モデル : GPT-4.1
1回目
シンプルなカウンターアプリを作成してください。
・＋ボタンを押すと、数字が増える
・リセットボタンを押すと、数字がリセットされる
・ポップでかわいいUIにしてください
・ユニバーサルデザインに考慮して
モデル : Gemini 2.5 Pro, SWE-1
1回目 : Gemini 2.5 Pro
和食、洋食、中華 の人気メニューをそれぞれ5個ずつ出して
2回目 : SWE-1
この15個のメニューを、ランダムで出すように、シンプルなＷｅｂベースのおみくじアプリを作ってください。
- ボタンを押すと、5秒の待ち時間アニメーションの後で、結果を表示します
- 結果は、大吉・吉・中吉・小吉のいずれか ＋ おすすめメニューを表示します
- 見た目は、日本の神社の色をテーマに
- ありがたみのある雰囲気で
3回目 : SWE-1
- ラッキーカラーも追加して
- 大吉5割、中吉3割、吉1割、小吉1割 の割合にして
- メニューを豪華でおもしろい文言に変更して。たとえば、カレーライス→老舗洋食店の禁断のレシピを再現したカレーライス のように
モデル：SWE-1
1回目
デモアプリをまとめたページを作ります。
これは、AIコーディングで簡単にアプリが作れることを伝えるために、AIコーディングで作成した作品を紹介するサイトです。
トップページを作ってください。
- 静的なページで、初学者にもわかりやすいシンプルなHTMLとcss
- 楽しく作れることが伝わるビタミンカラー
- 視認性が落ちないよう、ユニバーサルデザインを取り入れて
- 絵文字を取り入れてもよい
コンテンツとして、以下ページへのリンクを配置してください。
リンクは別タブで開くようにしてください。
- simple-counter\ ： シンプルなカウンター
- omikuji-menu\ ： メニュー付きおみくじ
2回目
Webフォントを読み込むのをやめよう。
軽量化だね
モデル：Claudeデスクトップアプリ(Pro)
1回目
シンプルなWebアプリを作ろう
* ブラウザで動作するルーレットです
* いろんな種類のメガネのルーレットです
* スタートボタンを押すを、メガネが回り始めます
* ストップボタンを押すと、だんだん回るスピードがゆっくりになり、確定演出の後で、1つに決定します
* イベントで利用するので、遠くからでも見やすいサイズとデザイン、カラーで
2回目
扇形の境目にメガネが位置している。
メガネの配置位置を20度ほどずらして、扇形の真ん中にメガネを配置してほしいな
モデル：ClaudeCode
1回目
新しく、Zanntask というアプリを作ろうと思うので、一緒にやっていこう。
今回のアプリ開発は、全て/Zanntask ディレクトリ内に作成してね。
Zanntaskはシンプルなタスク管理ツールなんだけど、以下の特徴を持つよ。
1.「完了」にしたときのエフェクトが侍の居合斬りのようにかっこよい
2.タスクが一覧ではなく画面上のランダムな位置に表示されるんだけど、〆切が近い、または過ぎているタスクほどちゅおうに大きく表示される
プログラムは極力シンプルに。
さー、ノリよくやっていこう！
モデル：Kiro
1回目
新しいゲームを作りましょう。math ディレクトリを作成してください。2つの数字を表示して、計算するゲームです。初級編：2～19の数字、たし算のみ中級編：2～99の数字、たし算とひき算回答は、5枚のカードから選ぶ。正解すると〇、間違えると×が表示される。10問やったら終わり。 「5/10 正解！」のようにスコアを表示するまずは初級編のみ作りましょう。
copyright © 2025 みねの misakiotb/demo_app AIコーディングのデモ、承ります 🎉