A keynote投影片

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 creative direction, or an explanation of why the current version doesn’t read right. Sometimes with a screenshot. 寫意圖 — 可能是精準修正、給個方向、或解釋為什麼現在這版不對。有時候會附截圖。

~30 sec約 30 秒

02 · AI02 · AI

Reads the brief, writes the code, pushes to dev. Dev preview auto-deploys. 讀懂、寫 code、push 到 dev。CF 自動部署到 dev preview。

~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 從 v2 到 v8

  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 + self-healing photos. Next-chapter CTAs, accordion drawer with ≤5 groups, Portfolio split-header. Stale iCloud URLs auto-refresh client-side — cron is no longer load-bearing. 導引 + 自癒的照片。下一章 CTA、抽屜 ≤ 5 分組 accordion、Portfolio split-header。過期的 iCloud URL 在前端自動換新 — cron 不再是 load-bearing。

By the numbers數字側寫

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

1

HTML fileHTML 檔案

~7k

Lines of code行程式碼

74+

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. Tightened all four caches first; v8.6 then made the static JSON a fast-path cache and taught the client to refetch fresh URLs on expiry. Cron stopping no longer breaks the site. 每天有一半時間，每張照片回的都是 HTTP 403。先把四層 cache 都對齊；v8.6 再把靜態 JSON 降級成 fast-path cache，讓前端自己在過期時重抓。Cron 停了網站也不會壞。

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 Photos live in David’s iPhone (iCloud Shared Albums), not on a server. 照片放在 David 的 iPhone（iCloud Shared Albums），不在伺服器上。
  • ·03 Cloudflare Pages is the CDN, the host, and the API proxy in one. Cloudflare Pages 同時是 CDN、host、API 代理。
  • ·04 The author writes prompts, not code. The AI does the typing. 作者寫的是 prompt，不是 code。打字的是 AI。
  • ·05 Every change goes to dev first; master is branch-protected. AI cannot push directly. 每個改動先進 dev；master 有 branch protection。AI 沒辦法直接 push 正式版。

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