受夠了複雜的應用？我動手做了一款絲滑、無廣告的極簡待辦 Web App（含詳細教程）

前言

大家好，呢度係Silk嘅AI創業計劃。最近創業期間，事情比較多，需要一個可以記錄我代辦事項嘅App，但係睇咗市面上嘅App，大多數都有好多廣告，成日唔小心㩒到就跳轉，所以我決定自己整一個屬於自己嘅「待辦清單」Web App。

於是，我決定用最輕量嘅技術方案，整一款真正好用、乾淨嘅效率工具：Silk Plan（絲綢計劃）。

Web App 技術方案

1. 前端：React + Tailwind CSS（極速回應，啱曬所有機型）

2. 後端：Supabase（雲端數據即時同步）

3. 安裝方式：瀏覽器打開連結 -> 加到主畫面 -> 開啟高效生活

製作流程：前端

首先歡迎我哋嘅老朋友：前端大神Gemini。

前端提示詞如下：

Role
你是一位精通 Next.js 生態、UI/UX 設計以及 Serverless 部署的資深全棧工程師。

Goal
請幫我開發一個名為 "Silk Plan" 的 Progressive Web App (PWA) 個人計劃應用。 該應用需要具有極其優雅、絲滑的交互體驗，支持日曆視圖與列表視圖切換，中英文雙語，數據持久化存儲在 Supabase，併為 Zeabur 部署做好配置準備。

Tech Stack
1.Framework: Next.js 14+ (App Router)
2.Language: TypeScript
3.Styling: Tailwind CSS + Framer Motion (用於頁面切換和選中日期的絲滑動畫) + Shadcn/UI (組件庫)
4.Date Handling: date-fns (日期處理)
5.State Management: Zustand (管理選中日期和全局狀態)
6.Database & Auth: Supabase
7.Internationalization: next-intl 或 react-i18next
8.PWA: next-pwa
9.Deployment: Zeabur

Design Requirements (UI/UX)
1.風格: "Silk" (絲綢) 風格。界面應極簡、柔和，使用高斯模糊 (Glassmorphism) 元素，配色以柔和的莫蘭迪色系為主。
2.日曆設計: 不要使用傳統的網格線日曆。使用現代的、極簡的月視圖。有任務的日期下方顯示一個柔和的小圓點。
3.交互: (1) 點擊日曆上的日期，下方平滑過渡顯示當天的任務列表。 (2) 所有的添加、刪除、完成操作都應該有4.流暢的微交互動畫。
5.響應式: 完美適配移動端（手機）和桌面端。

Core Features
1.多語言支持: 頂部導航欄包含中/EN 切換按鈕。
2.日曆系統 (Calendar System):
3.月視圖: 展示當前月份，支持左右滑動切換月份。
4.任務指示: 如果某天有任務，在日期下方顯示指示點（不同優先級顏色不同）。
5.快速跳轉: 點擊 "今天" 按鈕快速回到當前日期。
6.任務管理 (Todo Management):
7.基於日期的任務: 默認創建的任務歸屬於當前選中的日期。
8.任務列表: 展示選中日期的所有任務。
9.狀態管理: 待辦/已完成狀態切換，支持拖拽排序（可選）。
10.Supabase 集成: 請提供創建 todos 表的 SQL 代碼，必須包含 "日期" 字段。實現根據日期範圍查詢任務（用於渲染日曆上的小圓點）。
11.PWA 配置: 生成 manifest.json，確保應用可安裝。

如果你想整其他應用，可以將我嘅提示詞複製畀Gemini，然後叫佢跟住呢個模版生成你想整嘅App。

經過幾次迭代，例如叫Gemini修改主題風格同埋增加制定月度同年度計劃嘅功能，基本嘅互動頁面就完成咗：

製作流程：後端

經過部分微調，我哋完成咗前端嘅設計，但係淨得前端仲唔得，我哋需要有一個儲存數據嘅後端。後端我哋揀咗Supabase，佢嘅核心優勢係以PostgreSQL做底層，提供開源、一站式嘅Firebase替代方案，支援即時數據庫、身份驗證、儲存等功能，唔使額外配置就可以快速搭建後端服務。

連結數據庫嘅流程如下：

1. 註冊同創建項目

• 訪問Supabase官網：supabase.com，並註冊帳號。

• 㩒「New Project」。

• 填寫 Name（例如 SilkPlan，或者自己嘅應用名稱），然後設定 Database Password（一定要記住呢個密碼），Region建議揀離你最近嘅（例如新加坡或東京）。

• 㩒「Create new project」，等幾分鐘直到項目變綠（Setup complete）。

2. 獲取 API 密鑰

• 喺項目面板左下角，㩒 Project Settings（齒輪圖示），然後揾到Data API。

• 揾到 Project URL（呢個係你嘅後端地址）。

• 然後㩒API Keys，揾到 Publishable key（呢個係你嘅公開密鑰）。

• 先複製呢兩個值備用。

3. 創建數據庫表（最重要嘅一步）

• 㩒左邊菜單嘅 SQL Editor（終端圖示）。

• 㩒「New query」。

• 將 SQL 代碼完整複製並貼入去，然後㩒右下角嘅「Run」。呢段代碼會創建你 App 需要嘅所有表同安全規則。

後端嘅SQL代碼我哋叫Gemini幫我哋生成：

-- 1. 創建 profiles 表 (存儲暱稱和密保)
create table if not exists public.profiles (
  id uuid references auth.users not null primary key,
  email text,
  nickname text,
  security_question_1 text,
  security_answer_1 text,
  security_question_2 text,
  security_answer_2 text,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null
);
-- 2. 創建 todos 表 (存儲待辦事項)
create table if not exists public.todos (
  id bigint generated by default as identity primary key,
  user_id uuid references auth.users not null,
  title text not null,
  is_completed boolean default false,
  target_date text not null, -- 格式: YYYY-MM-DD
  plan_type text not null,   -- daily, monthly, yearly
  priority text default 'normal',
  created_at timestamp with time zone default timezone('utc'::text, now()) not null
);
-- 3. 開啓 RLS (行級安全策略) - 這一步至關重要，否則前端無法讀寫
alter table public.profiles enable row level security;
alter table public.todos enable row level security;
-- 4. 設置權限策略 (Policies)
-- Profiles: 允許用戶查看和更新自己的資料
create policy "Users can view own profile" 
  on public.profiles for select 
  using (auth.uid() = id);
create policy "Users can update own profile" 
  on public.profiles for update 
  using (auth.uid() = id);
-- Todos: 允許用戶對自己的待辦事項進行增刪改查 (ALL)
create policy "Users can manage own todos" 
  on public.todos for all 
  using (auth.uid() = user_id);
-- 5. 重新建立自動創建 Profile 的觸發器 (確保註冊即創建檔案)
drop trigger if exists on_auth_user_created on auth.users;
drop function if exists public.handle_new_user();
create or replace function public.handle_new_user()
returns trigger
language plpgsql
security definer set search_path = public
as $$
begin
  insert into public.profiles (
    id, 
    email, 
    nickname, 
    security_question_1, 
    security_answer_1, 
    security_question_2, 
    security_answer_2
  )
  values (
    new.id,
    new.email,
    new.raw_user_meta_data->>'nickname',
    new.raw_user_meta_data->>'security_question_1',
    new.raw_user_meta_data->>'security_answer_1',
    new.raw_user_meta_data->>'security_question_2',
    new.raw_user_meta_data->>'security_answer_2'
  );
  return new;
end;
$$;
create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_user();

完成數據庫連接之後，我哋可以檢驗一下：

檢驗完冇問題之後，我哋叫Gemini喺前端代碼加入我哋嘅兩個API，就可以喺前端訪問數據庫喇。

製作流程：部署

Zeabur嘅部署流程可以參考我之前嘅公眾號文章嘅第三步：

十分鐘，手把手教你用 Gemini + Zeabur 做一個屬於自己嘅 APP

效果展示

完成部署之後，我哋嚟睇嚇具體嘅使用效果啦！

佢可以幫你解決啲咩問題？

Silk Plan 嘅邏輯好簡單：將時間還畀生活。佢嘅功能如下：

• 三級時間視圖：Silk Plan 提供咗「日、月、年」三個維度，令你既可以睇實今日嘅雜務，又可以睇到全年嘅進度。

• 優先級區分：任務輕重緩急分級。內置嘅 P1/P2/P3 優先級顏色標識，一眼就睇得出最應該處理邊一件。

• 離線都用到：就算喺地鐵或者信號唔好嘅地方，你都仲可以查看同編輯計劃，聯網之後會自動同步。

• 數據安全：接入咗成熟嘅 Supabase 數據庫加密方案，你嘅私隱淨係得你先睇到。

寫喺最後

工具嘅本質應該係幫我哋慳時間（Save Time），而唔係浪費時間去研究點樣用（Kill Time）。

Silk Plan 冇咩複雜嘅花臣，佢只係想喺你忙碌嘅時候，提供一個安靜、就手嘅記事本。如果你都討厭繁瑣，鍾意簡單，不妨試嚇。

訪問地址：silk-plan.zeabur.app

畢竟，我哋記錄計劃嘅初衷，係為咗將計劃完成，然後去享受生活。

以上就係呢期嘅全部內容喇，睇到呢度，如果覺得唔錯，順手㩒個讚、在看、轉發三連，如果想第一時間收到Silk.AI工作室嘅推送，都可以畀我個關注同星標⭐～多謝你睇我嘅文章，See you next time！

前言

大家好，這裏是 Silk的AI創業計劃。最近在創業的過程中，事情比較多，需要一個能記錄我代辦事項的App，但是看了一下市面上的App，大多數都是有較多的廣告，經常不小心點擊跳轉，所有我下決心自己製作一個屬於自己的“待辦清單”Web App。

於是，我決定用最輕量化的技術方案，做一款真正好用、乾淨的效率工具：Silk Plan (絲綢計劃)。

Web App 技術方案

1. 前端： React + Tailwind CSS (極速響應，適配所有機型)

2. 後端： Supabase (雲端數據實時同步)

3. 安裝方式： 瀏覽器打開連結 -> 添加到主屏幕 -> 開啓高效生活

製作流程：前端

首先歡迎我們的老朋友：前端大神Gemini。

前端提示詞如下：

Role
你是一位精通 Next.js 生態、UI/UX 設計以及 Serverless 部署的資深全棧工程師。

Goal
請幫我開發一個名為 "Silk Plan" 的 Progressive Web App (PWA) 個人計劃應用。 該應用需要具有極其優雅、絲滑的交互體驗，支持日曆視圖與列表視圖切換，中英文雙語，數據持久化存儲在 Supabase，併為 Zeabur 部署做好配置準備。

Tech Stack
1.Framework: Next.js 14+ (App Router)
2.Language: TypeScript
3.Styling: Tailwind CSS + Framer Motion (用於頁面切換和選中日期的絲滑動畫) + Shadcn/UI (組件庫)
4.Date Handling: date-fns (日期處理)
5.State Management: Zustand (管理選中日期和全局狀態)
6.Database & Auth: Supabase
7.Internationalization: next-intl 或 react-i18next
8.PWA: next-pwa
9.Deployment: Zeabur

Design Requirements (UI/UX)
1.風格: "Silk" (絲綢) 風格。界面應極簡、柔和，使用高斯模糊 (Glassmorphism) 元素，配色以柔和的莫蘭迪色系為主。
2.日曆設計: 不要使用傳統的網格線日曆。使用現代的、極簡的月視圖。有任務的日期下方顯示一個柔和的小圓點。
3.交互: (1) 點擊日曆上的日期，下方平滑過渡顯示當天的任務列表。 (2) 所有的添加、刪除、完成操作都應該有4.流暢的微交互動畫。
5.響應式: 完美適配移動端（手機）和桌面端。

Core Features
1.多語言支持: 頂部導航欄包含中/EN 切換按鈕。
2.日曆系統 (Calendar System):
3.月視圖: 展示當前月份，支持左右滑動切換月份。
4.任務指示: 如果某天有任務，在日期下方顯示指示點（不同優先級顏色不同）。
5.快速跳轉: 點擊 "今天" 按鈕快速回到當前日期。
6.任務管理 (Todo Management):
7.基於日期的任務: 默認創建的任務歸屬於當前選中的日期。
8.任務列表: 展示選中日期的所有任務。
9.狀態管理: 待辦/已完成狀態切換，支持拖拽排序（可選）。
10.Supabase 集成: 請提供創建 todos 表的 SQL 代碼，必須包含 "日期" 字段。實現根據日期範圍查詢任務（用於渲染日曆上的小圓點）。
11.PWA 配置: 生成 manifest.json，確保應用可安裝。

如果你想製作其他的應用，可以把我的提示詞複製給Gemini，然後讓他按照這個模版生成你想製作的App。

經過幾次迭代，例如讓Gemini修改主題風格以及增加制定月度和年度計劃的功能，基本的交互頁面完成了：

製作流程：後端

經過部分的微調，我們完成了前端的設計，但是光有前端還不行，我們需要有一個儲存數據的後端。後端我們選擇Supabase，他的核心優勢是以 PostgreSQL 為底層，提供開源、一站式的 Firebase 替代方案，支持實時數據庫、身份驗證、存儲等功能，無需額外配置即可快速搭建後端服務。

連結數據庫的流程如下：

1. 註冊與創建項目

• 訪問Supabase官網：supabase.com，並註冊賬號。

• 點擊 "New Project"。

• 填寫 Name (例如 SilkPlan，或者自己的應用名稱)，然後設置 Database Password (一定要記住這個密碼)，Region 建議選擇離你最近的（如 Singapore 或 Tokyo）。

• 點擊 "Create new project"，等待幾分鐘直到項目變綠（Setup complete）。

2. 獲取 API 密鑰

• 在項目面板左下角，點擊 Project Settings (齒輪圖標) ，接着找到Data API。

• 找到 Project URL (這是你的後端地址)。

• 接着點擊API Keys，找到 Publishable key (這是你的公開密鑰)。

• 先複製這兩個值備用。

3. 創建數據庫表 (最重要的一步)

• 點擊左側菜單的 SQL Editor (終端圖標)。

• 點擊 "New query"。

• 將 SQL 代碼完整複製並粘貼進去，然後點擊右下角的 "Run"。這段代碼會創建你 App 所需的所有表和安全規則。

後端的SQL代碼我們讓Gemini幫我們生成：

-- 1. 創建 profiles 表 (存儲暱稱和密保)
create table if not exists public.profiles (
  id uuid references auth.users not null primary key,
  email text,
  nickname text,
  security_question_1 text,
  security_answer_1 text,
  security_question_2 text,
  security_answer_2 text,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null
);
-- 2. 創建 todos 表 (存儲待辦事項)
create table if not exists public.todos (
  id bigint generated by default as identity primary key,
  user_id uuid references auth.users not null,
  title text not null,
  is_completed boolean default false,
  target_date text not null, -- 格式: YYYY-MM-DD
  plan_type text not null,   -- daily, monthly, yearly
  priority text default 'normal',
  created_at timestamp with time zone default timezone('utc'::text, now()) not null
);
-- 3. 開啓 RLS (行級安全策略) - 這一步至關重要，否則前端無法讀寫
alter table public.profiles enable row level security;
alter table public.todos enable row level security;
-- 4. 設置權限策略 (Policies)
-- Profiles: 允許用戶查看和更新自己的資料
create policy "Users can view own profile" 
  on public.profiles for select 
  using (auth.uid() = id);
create policy "Users can update own profile" 
  on public.profiles for update 
  using (auth.uid() = id);
-- Todos: 允許用戶對自己的待辦事項進行增刪改查 (ALL)
create policy "Users can manage own todos" 
  on public.todos for all 
  using (auth.uid() = user_id);
-- 5. 重新建立自動創建 Profile 的觸發器 (確保註冊即創建檔案)
drop trigger if exists on_auth_user_created on auth.users;
drop function if exists public.handle_new_user();
create or replace function public.handle_new_user()
returns trigger
language plpgsql
security definer set search_path = public
as $$
begin
  insert into public.profiles (
    id, 
    email, 
    nickname, 
    security_question_1, 
    security_answer_1, 
    security_question_2, 
    security_answer_2
  )
  values (
    new.id,
    new.email,
    new.raw_user_meta_data->>'nickname',
    new.raw_user_meta_data->>'security_question_1',
    new.raw_user_meta_data->>'security_answer_1',
    new.raw_user_meta_data->>'security_question_2',
    new.raw_user_meta_data->>'security_answer_2'
  );
  return new;
end;
$$;
create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_user();

在完成數據庫連接之後，我們可以檢驗一下：

檢驗完沒有問題之後，我們讓Gemini在前端代碼中加入我們的兩個API，就可以在前端訪問數據庫了。

製作流程：部署

Zeabur的部署流程可以參考我之前的公眾號文章的第三步：

十分鐘，手把手教你用 Gemini + Zeabur 做一個屬於自己的 APP

效果展示

完成部署之後，我們來看看具體的使用效果吧！

它能幫你解決什麼問題？

Silk Plan 的邏輯很簡單：把時間還給生活。他的功能如下：

• 三級時間視圖： Silk Plan 提供了“日、月、年”三個維度，讓你既能盯住今天的瑣事，也能看到全年的進度。

• 優先級區分： 任務輕重緩急分級。內置的 P1/P2/P3 優先級顏色標識，一眼就能看出最該處理哪一件。

• 離線也能用： 就算在地鐵或信號不好的地方，你依然能查看和編輯計劃，聯網後會自動同步。

• 數據安全： 接入了成熟的 Supabase 數據庫加密方案，你的隱私只有你自己能看到。

寫在最後

工具的本質應該是幫我們省時間（Save Time），而不是浪費時間去研究怎麼用（Kill Time）。

Silk Plan 沒有什麼複雜的花樣，它只是想在你忙碌的時候，提供一個安靜、順手的記事本。如果你也討厭繁瑣，喜歡簡單，不妨試一試。

訪問地址：silk-plan.zeabur.app

畢竟，我們記錄計劃的初衷，是為了把計劃完成，然後去享受生活。

以上就是本期的全部內容了，看到這裏了，如果覺得不錯，隨手點個贊，在看，轉發三連，如果想第一時間收到Silk.AI工作室的推送，也可以給我個關注和星標⭐～謝謝你看我的文章，See you next time！