— NIGHT 03 · 第三堂 —

企劃與設計概念

Plan & Design Concept

動手製作之前,先想清楚:App 是做給誰看的?要解決什麼問題?今晚用一頁紙說清楚整個概念,為第四堂的 Vibe Coding 做好準備。

今晚帶走📄 一頁完整的 App 企劃書截圖
成人在夜間為應用程式規劃流程與設計線框
App Blueprint · 企劃四要素

做 App 之前,先回答這四個問題

想得清楚,做得快。這四個問題是 App 企劃的核心。

👤 做給誰看?

目標用戶越具體,App 越有針對性。不要說「所有人」,要說「養兔的香港媽媽」或「準備 DSE 的中五生」。

問自己:我的用戶是誰,他們有什麼特點?

❓ 解決什麼問題?

好的 App 解決一個真實問題。找到用戶最頭痛的地方,你的 App 就是解藥。

問自己:用戶現在怎樣解決這個問題?有什麼不方便?

⚡ 三個主要功能

第一版只做三件事。功能太多做不完,而且讓用戶困惑。三個功能,做好做精。

問自己:如果只能保留一個功能,是哪個?

🎨 風格與感覺

顏色、字體、語氣——決定 App 的性格。可愛?專業?活潑?給 AI 清楚的風格指示。

問自己:用戶打開 App 的第一秒,應該有什麼感覺?
90-min Flow · 課堂流程

今晚的 90 分鐘

1
10′
OPEN

回顧 + 分享 Prompt 練習

有沒有在日常生活中用過 Prompt?分享一個成功或有趣的例子。介紹今晚目標:完成企劃書。

2
15′
DEMO

用 AI 完成企劃書示範

導師示範:輸入「我想做一個______App,目標用戶是______,主要功能三個:……」給 AI,讓 AI 幫你完善企劃並生成描述。

示範用兔仔食品 Webpage
3
25′
DO

填寫自己的企劃書

完成四件事:
(1) App 名稱與簡介(一句話)
(2) 目標用戶(越具體越好)
(3) 主要功能三項
(4) 顏色風格與語氣描述

App 企劃書工作紙
4
15′
PEER

鄰座說出第一印象

聽完同學的企劃,說一句:「我聽完,你的 App 讓我想到______」。讓創作者了解旁觀者的第一印象是否符合預期。

5
15′
REMIX

用 AI 生成一段企劃描述文字

把企劃書的四個元素輸入 AI,讓它生成一段完整的 App 介紹文字。用這段文字存入截圖,第四堂直接用。

6
10′
SHARE

存好企劃截圖,預告第四堂

把企劃書截圖存到手機相簿。預告:第四堂你將用這份企劃直接生成 App 初稿!

Web Concept · 網站組成

網站是什麼?

結構、內容與風格的完美結合。透過 Wireframe,你可以將腦中的想法具象化。

bunnybite.app
BunnyBite 🐰
天然兔仔糧,健康每一天
立即購買
🌾

高纖維

🥦

天然材料

🦷

護齒健康

← 這就是第四堂的起點 →
Deployment · 部署

連結並部署你的 Webpage

從 Google AI Studio 連結 GitHub,再連接到 Pages.dev,完成你的第一次部署。

👇 點擊播放如何設置 Pages.dev
Prompt Card · 今晚帶走

App 企劃 Prompt 卡

App 企劃卡 · Night 03
我想做一個【App 名稱】。
做給【目標用戶描述】使用。
要解決的問題:【用戶的痛點】。
主要功能三個:
(1)【功能一】
(2)【功能二】
(3)【功能三】
風格:【可愛/專業/活潑】,顏色以【顏色】為主。

請幫我寫一段 80 字的 App 介紹,用繁體中文,語氣要【友善/正式】。
💡 存好這張企劃書截圖,第四堂直接貼入 POE 或 Google AI Studio 生成 App!

第三堂完成!📄

企劃書已完成並截圖儲存。下堂開始真正的 Vibe Coding——把企劃書變成真實的 App!

← 第二堂 第四堂:Vibe Coding I →