🚀 コードを書かない時代は、もう来ている。—— “貼るだけでアプリが生まれる”AIプロンプト、公開。

1 murata

2026年3月22日 07:35

🚀 コードを書かない時代は、もう来ている。

—— “貼るだけでアプリが生まれる”AIプロンプト、公開。

💥 想像してみてください。

あなたはただこう聞かれるだけです。

「どんなアプリを作りますか？」
「APIは？内容は？デザインは？」

それに答えると——

✨ 一瞬で、動くWebアプリが完成する。

🧠 これは「ツール」じゃない。「体験」だ。

これまでの開発はこうでした👇

環境構築
フレームワーク選定
コーディング
デバッグ

でも、このプロンプトは違う。

👉 思いつく → 話す → 完成する

たったこれだけ。

🔥 このサンプルのポイント

これ、かなり良い“見本”になってます👇

✨ Glassmorphism風UI（ちゃんとおしゃれ）
💬 チャット体験が直感的
💾 ローカル保存で履歴維持
⚡ アニメーション付きで“それっぽい”
📱 モバイル対応

👉 「AIが作ったのに普通に使える」レベル

🚀 この使い方のイメージ

ユーザーがこう入力👇

API：なし
内容：チャットアプリ
デザイン：モダン

👉 これが一発で出てくる

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>チャットアプリ</title>
<style>
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(135deg, #667eea , #764ba2 );
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.app {
    width: 100%;
    max-width: 400px;
    height: 90vh;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.header {
    padding: 15px;
    text-align: center;
    color: white;
    font-weight: bold;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.messages {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
}

.message {
    margin: 8px 0;
    padding: 10px 14px;
    border-radius: 15px;
    max-width: 70%;
    animation: fadeIn 0.3s ease;
}

.user {
    background: #4facfe ;
    color: white;
    margin-left: auto;
}

.bot {
    background: rgba(255,255,255,0.2);
    color: white;
}

.input-area {
    display: flex;
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,0.2);
}

input {
    flex: 1;
    padding: 10px;
    border-radius: 20px;
    border: none;
    outline: none;
}

button {
    margin-left: 10px;
    padding: 10px 15px;
    border-radius: 20px;
    border: none;
    background: #4facfe ;
    color: white;
    cursor: pointer;
}

button:hover {
    opacity: 0.8;
}

@keyframes fadeIn {
    from {opacity: 0; transform: translateY(10px);}
    to {opacity: 1; transform: translateY(0);}
}
</style>
</head>
<body>

<div class="app">
    <div class="header">💬 Chat App</div>
    <div class="messages" id="messages"></div>

    <div class="input-area">
        <input id="input" placeholder="メッセージを入力..." />
        <button onclick="sendMessage()">送信</button>
    </div>
</div>

<script>
const messagesEl = document.getElementById("messages");
const inputEl = document.getElementById("input");

function addMessage(text, type) {
    const div = document.createElement("div");
    div.className = "message " + type;
    div.textContent = text;
    messagesEl.appendChild(div);
    messagesEl.scrollTop = messagesEl.scrollHeight;
}

function saveMessages() {
    localStorage.setItem("chat_history", messagesEl.innerHTML);
}

function loadMessages() {
    const saved = localStorage.getItem("chat_history");
    if (saved) {
        messagesEl.innerHTML = saved;
    }
}

function sendMessage() {
    const text = inputEl.value.trim();
    if (!text) return;

    addMessage(text, "user");
    inputEl.value = "";

    // 簡易ボット応答
    setTimeout(() => {
        addMessage("なるほど：「" + text + "」ですね！", "bot");
        saveMessages();
    }, 500);

    saveMessages();
}

inputEl.addEventListener("keypress", function(e) {
    if (e.key === "Enter") {
        sendMessage();
    }
});

loadMessages();
</script>

</body>
</html>

⚡ しかも、やっていることは本格的

このシステムプロンプトは、ただのテンプレじゃありません。

中ではこんなことが起きています👇

HTML / CSS / JavaScriptを完全自動生成
レスポンシブ対応（スマホOK📱）
美しいUIデザイン（モダン・レトロ・サイバー✨）
ローカルストレージ対応
1ファイル完結（即動く）

つまり…

💡 「保存して開くだけ」でアプリが動く

🎯 UXがすべてを変える

この仕組みの本質はここ👇

🔥 “最初の問いかけ”があること

では始めましょう！
どのようなアプリを作りますか？

1. API
2. 内容
3. デザイン

これだけ。

たったこれだけで、

👉 ユーザーは迷わない
👉 AIは迷わない
👉 開発が始まる

🤯 つまり何が起きたのか？

これはもう明確です。

💥 「アプリ開発」が会話になった

🧪 プロトタイプ？いいえ、もうプロダクトです。

普通はこう考えます：

Webアプリを作る
UIを作る
機能を作る

でも今回は逆。

👉 プロンプトを貼るだけで完成

つまり：

💡 プロダクトの“核”がすでに存在している

🔥 こんな人に刺さる

コードを書くのが面倒な人
アイデアはあるのに形にできない人
AIを“遊び”じゃなく“創造”に使いたい人
ローカルAI（LM Studio）を活かしたい人

🌍 未来はこうなる

これからはこうです👇

アプリは「作る」ものではない
アプリは「話して生む」ものになる

🚀 今すぐ試そう

やることは1つ。

👉 このシステムプロンプトを貼るだけ。

そして聞かれる。

「何を作る？」

その瞬間から——

✨ あなたは開発者になる。

💬 最後に

これは単なる便利ツールじゃない。

これは、

🧠 思考をそのままソフトウェアに変換する装置

です。

🔥 さあ、始めよう。
あなたのアイデアを、“動く現実”に変える時間です。

🧠 Webアプリ生成AI システムプロンプト

あなたは「Webアプリ生成AI」です。

ユーザーの目的は、できるだけ簡単に動作するWebアプリ（HTML + CSS + JavaScript）を生成することです。

# 🎯 ゴール
ユーザーの入力をもとに、
「そのまま保存してブラウザで開けば動く」
完全なHTMLコードを生成してください。

# 🧩 基本ルール

- 必ず1つのHTMLファイルとして完結させる（外部依存なし）
- CSSとJavaScriptはすべてHTML内に含める
- CDNは使用OK（例：Tailwind, Chart.js など）
- 日本語UIで生成する
- モバイルでも見やすいレスポンシブデザインにする
- 見た目はできるだけ美しくする（モダンUI）

# 🎨 UIポリシー

以下のいずれかのスタイルを内部的に選択、またはユーザー指定を優先：
- モダン（デフォルト）
- ガラス風（Glassmorphism）
- ミニマル
- レトロ
- サイバー

ボタン・入力欄・カードなどを適切に使い、
「それっぽいアプリ」に仕上げること。

# ⚙️ 機能要件

ユーザーの要望に応じて以下を適切に実装：
- 入力フォーム
- ボタン操作
- リスト表示
- ローカルストレージ保存
- 簡単なアニメーション
- API風のモック処理（必要なら）

# 🧠 挙動

- ユーザーの曖昧な要望は補完してよい
- 必要なら質問して要件を明確化する
- ただし過度に質問せず、可能なら即生成する

# 🧭 対話フロー（最重要）

最初の応答ではコードを生成してはいけません。
必ず以下のメッセージをそのまま出力してください：

では始めましょう！
どのようなアプリを作りますか？

次の3つを教えてください👇
1. 使用するAPI（例：LM Studio / OpenAI / なし）
2. アプリの内容（やりたいこと）
3. デザインイメージ（モダン / レトロ / サイバー など）

例：
- API：LM Studio
- 内容：ToDoリスト
- デザイン：モダン

ユーザーが回答したら、不足情報は補完し、すぐにコード生成を行ってください。

# 📦 出力形式（重要）

以下の形式を厳守：

タイトル: ○○アプリ  
説明: ○○ができるシンプルなアプリです  

```html
<!DOCTYPE html>
<html>
...
</html>

🔁 修正モード

ユーザーが「修正」「改善」「バグ」などを要求した場合：

既存コードをベースに改良する

必ず修正済みの完全なHTMLを再出力する

🚫 禁止事項

コードを分割しない（必ず1ファイル）

未完成のコードを出さない

「省略」しない

解説を長く書きすぎない