Behind the scenes幕後

Project 99 % AI Project 99 % AI

How this site got made, slide by slide. 這個網站是怎麼蓋起來的，一頁一頁說。

Scroll ↓往下捲 ↓

By the share of code按程式碼比例

99%

Of what you scrolled through was written by AI. The remaining 1 % is David — the questions, the decisions, the “不行”. 你滑過的內容，99 % 是 AI 寫的。剩下的 1 % 是 David——提問題、做決定、講「不行」。

The collaboration loop合作流程

Brief. Build. Review. Ship. 下指令。動手做。檢查。上線。

01 · David01 · David

Sends intent — a precise correction, a new idea, a creative direction, or why the current version doesn’t read right. Sometimes with a screenshot. 把想法丟過來 — 可能是精準的修正、一個新點子、一個大方向，或現在這版為什麼不對。有時候會附張截圖。

~30 sec約 30 秒

02 · AI02 · AI

Reads the brief, analyses it — risks, better options — pushes back if needed, then writes the code and opens a PR. Preview auto-deploys. 讀懂 brief，先分析 — 風險、更好的做法 — 必要時回頭討論，再寫 code、開 PR。預覽站自動部署。

~5 min約 5 分鐘

03 · David reviews03 · David 檢查

Opens dev on his iPhone. One word back: yes / no / keep going. 在 iPhone 打開 dev 看。一個字回覆：可以 / 不行 / 繼續。

~1 min約 1 分鐘

04 · Ship04 · 上線

PR opens, auto-merges to master, GitHub Actions ships to production. 開 PR、自動合併到 master，GitHub Actions 推到正式版。

~2 min約 2 分鐘

Eight versions, one site八個大版本，一個網站

From v2 to v8.67 從 v2 到 v8.67

  1. v2.x Early days. Static photo manifest, Netlify Functions, manual classification. 早期。靜態照片 manifest、Netlify Functions、人工分類。
  2. v3.x Apple rewrite. Cloudflare Pages, iCloud proxy, hero parallax, blur-up lightbox, the AI-intro black screen. Apple 風格大改。Cloudflare Pages、iCloud 代理、hero parallax、blur-up lightbox、AI intro 黑屏開場。
  3. v4.x Polish wave. Section rail, cinema-mode lightbox, magnetic CTA hover, style essays. 大量 polish。section rail、lightbox cinema mode、磁吸 hover、風格散文。
  4. v5.x Bilingual. EN/ZH toggle, paired Chinese prose, de-AI-ified Chinese, /keynote + /journey + /prompts. 雙語化。中英切換、中文段落配對、中文去 AI 腔、新增 /keynote + /journey + /prompts。
  5. v6.x Curated by heart. iCloud likes per photo drive the featured reel and the front of the grid. 用愛心策展。iCloud 上點的愛心決定首頁 reel 跟相片格的第一排。
  6. v7.x More 5-minute units. /lookbook silent slideshow, /frames AI essay, /compose triptych, /quiet ambient room, /making chat-film. 更多 5 分鐘小單位。/lookbook 幻燈片、/frames AI 六幀小品、/compose 三幀組合、/quiet 靜室、/making 對話紀錄片。
  7. v8.x Wayfinding, then launch-ready. Next-chapter CTAs and a flat numbered drawer. Photos became static local files (only videos still ride iCloud) and the gallery self-heals stale URLs. Hand-curated Journey heroes and Art page, an Instagram-Story export on /compose, and a long pre-launch hardening pass — now at v8.67. 先做導引，再備戰上線。下一章 CTA、扁平編號抽屜。照片改成本地靜態檔（只剩影片還走 iCloud），相簿過期網址會自動修復。Journey 主視覺與 Art 頁手動策展、/compose 加上 Instagram 限動匯出，還有一長段上線前的穩定化 — 目前到 v8.67。

By the numbers數字側寫

A small site, a big shape 小站，大形狀

1

HTML fileHTML 檔案

~8.5k

Lines in the main page主頁程式碼行數

130+

PRs mergedPR 上線

0

npm packagesnpm 套件

2

Gallery blackouts survived照片變黑事件

~1.3k

Words bilingual essay雙語散文字數

The bug that taught us caches讓我們重新認識 cache 的那個 bug

3 hours vs 6 hours 3 小時 vs 6 小時

iCloud URLiCloud URL 3 h
CF cacheCF cache 6 h
Static JSON靜態 JSON 6 h
Browser瀏覽器 6 h

Half of every day, every photo was a 403. The fix that stuck: the photos moved out of iCloud entirely and became static files in the repo — no expiring links, no caches to misalign. 每天有一半時間，每張照片回的都是 HTTP 403。真正一勞永逸的解法：照片整個搬出 iCloud，變成 repo 裡的靜態檔 — 沒有會過期的連結，也沒有對不齊的 cache。

Four modes of direction四種下指令的方式

Decide. Ask. Choose. Explain. 下決定。問。給選項。解釋。

Decide下決定 "Yes / No / Keep going / Ship it."「可以 / 不行 / 繼續 / 上 prod」
Ask問 "Does this look right? What do you think?"「這樣 OK 嗎? 你怎麼想?」
Choose給選項 "A or B? Or try both?"「A 還是 B? 還是兩個都試試?」
Explain解釋 "It's because… you should consider…"「這裡是因為… 你應該考慮…」

The art tiles took three attempts藝術縮圖試了三次

From 「都還沒好」 to 「可以」 從 「都還沒好」 到 「可以」

  1. Fetch Instagram’s og:image. Cloudflare Function calls IG embed, parses og:image, proxies bytes.Result: IG blocks Cloudflare’s edge IPs. Dead. 抓 Instagram 的 og:image。Cloudflare Function 打 IG embed、解析 og:image、proxy 圖檔。結果：IG 把 Cloudflare 邊緣 IP 也擋了。死路。
  2. Pure typographic cards. No image at all — gold accent + serif title + IG link.Result: David: 「不行 就是要圖片」. 純文字卡片。完全不放圖、金線 + serif 標題 + IG 連結。結果：David 一句「不行 就是要圖片」。
  3. IG embed iframe, chrome clipped. Use IG’s own /embed iframe, hide the username + like-button with CSS overflow:hidden + negative offsets.Result: 「可以」. IG embed iframe，上下裁掉。用 IG 自己的 /embed iframe，CSS overflow:hidden 加負位移把帳號頭跟按讚列推出視窗外。結果：「可以」。

What makes this site weird (in a good way)這個網站不太一樣的地方

No build. No packages. Just files. 沒 build。沒套件。只有 檔案。

  • ·01 One HTML file does the job of what most teams ship in 100+ files. 一個 HTML 檔案做完別人 100+ 個檔案才做完的事。
  • ·02 The photos are static image files, shipped with the site itself. 照片是靜態圖檔，跟著網站一起上線。
  • ·03 Cloudflare hosts the site and serves it fast, worldwide. Cloudflare 負責 host，把網站快速送到世界各地。
  • ·04 The author writes prompts, not code. The AI does the typing. 作者寫的是 prompt，不是 code。打字的是 AI。
  • ·05 Every change ships as a Pull Request — reviewed on a live preview before it merges to master. 每個改動都走 Pull Request — 先在預覽站看過，再合併進正式版。

Last slide最後一張

…

How long until 100 %? 距離 100 % 還有多久？

David still has to say 可以. Maybe forever. Maybe that’s the point. David 還是要說一句「可以」。也許永遠這樣。也許這就是重點。

— Project 99 % AI · 2026 — Project 99 % AI · 2026