The brief那些對話

Eleven briefs. One website. 十一段對話。一個網站。

David doesn’t write code. He writes intent — sometimes a one-line correction, sometimes a creative direction the AI wouldn’t have arrived at on its own. He explains when context is needed; says “no” when something doesn’t read right. Every page on this site started as one of these messages. David 不寫程式。他寫意圖 — 有時是一句精準修正,有時是個 AI 自己想不到的方向。需要背景時他會解釋;沒到位時他會說「不行」。網站上每一頁,都是從這些訊息開始的。

Left side: what he sent — mostly in Chinese. Right side: what came out the other side a few hours later. 左邊是他送出的內容 — 大部分是中文。右邊是幾小時後從 dev preview 出來的東西。

2026A 99 % AI-made portfolio一個 99 % AI 做的作品集

David

Build me a website. 幫我做個網站

6 chars6 字

AI

Built the entire portfolio from scratch — single HTML file, Cloudflare Pages, iCloud Shared Album proxy, dark mode, lightbox, the whole thing. 從零做了整個 portfolio:單檔 HTML、Cloudflare Pages、iCloud 相簿代理、深色模式、燈箱,全部。

→ The site→ 主站

David

On the bilingual layout:關於中英雙語的排版:

  1. Mixing Chinese and English in the same line wrecks the layout.中英文混雜會破壞版面。
  2. Add an EN / 中 toggle top-right of the nav.右上角加個中 / EN 切換。
  3. Default to English.預設用英文。

AI

Reverted the hero and section headings to English-only. Kept bilingual content in the essays and About bio. Added a 中/EN toggle pill in the nav. Default English so the layout reads cleanly. 把 hero 跟章節標題改回純英文,散文跟自介保留雙語。導覽列加了個中/EN 切換按鈕,預設英文,版面看起來乾淨。

David

Keep building on dev. Add another page in keynote-slide format — good for flow diagrams that explain how you and I work. Dev 持續開發 多一頁 做成像投影片的格式 很適合畫流程圖 說明我跟你的合作方式

40 chars40 字

AI

Made /keynote — a 10-slide, scroll-snap deck telling the whole build story: the loop, the timeline, the 99 %, the bug days. ~5 min runtime with a play button at the top. 做了 /keynote,10 張投影片講整個 build 的故事:合作流程、時間軸、99%、bug 那幾天。約 5 分鐘,有播放鈕。

→ Keynote→ 投影片

David

Do more on your own — eight-plus hours is fine. Animation unit is five minutes. 你自己多做一點 可以八小時以上 ⋯ 5 分鐘動畫唯一單位

23 chars23 字

AI

Took it as a brief to keep inventing. The 5-min unit became the budget for /keynote, then /journey, then this page. Each one is something you can finish on a coffee break. 收到。把 5 分鐘當成單位,做了 /keynote、再做 /journey、再做這頁。每個都是「一杯咖啡時間看得完」的尺寸。

David

For the keynote voiceover:關於 keynote 的配音:

  1. Both English and Chinese.中英文都要有。
  2. Subtitles too, in both.字幕也是。
  3. Switchable.要可以切換。
  4. As natural as possible — don't sound like AI.越自然越好,不要一聽就是 AI。

AI

Picked the most natural-sounding local voice per language (preferring on-device enhanced/premium), expanded abbreviations so “AI” reads as “A I” not “Ay”, swapped em-dashes for commas so it pauses naturally. Captions track the same text, switchable in one tap. 每種語言挑那個聽起來最像真人的本機語音(優先 on-device enhanced/premium),把縮寫展開(AI 讀成 A I 不是 Ay),破折號換成逗號讓它停頓自然。字幕跟聲音同一份,一鍵切換。

David

Avoid services or approaches that require paid plans. 避免需要額外付費的網站或做法

13 chars13 字

AI

Constraint accepted. No ElevenLabs, no Lottie cloud, no fonts hosted on a paid CDN. Everything runs in the browser the visitor already has: Web Speech for voice, CSS keyframes for motion, free Google Fonts for type. 收到。沒有 ElevenLabs,沒有 Lottie 雲端,沒有付費 CDN。所有東西都跑在訪客自己的瀏覽器:Web Speech、CSS keyframes、免費的 Google Fonts。

David

Skip YouTube for the video for now — I'll ask you how to set it up later. Just put the video on the page. 你影片先別做 YT 等我之後有時間再問你怎麼弄 目前影片先放到網頁

29 chars29 字

AI

Parked the YouTube pipeline. Kept the 5-min units alive as on-page experiences. The result: /journey — five places, photo backgrounds pulled live from iCloud, auto-advancing or scroll-driven. Same minute count, no upload step. YT 那邊先擱著。5 分鐘單位繼續活,改放在網頁上:/journey,五個地方,背景照從 iCloud 即時抓,會自動跑也可以自己滑。一樣 5 分鐘,少了上傳那步。

→ Journey→ 旅程

David

My iPhone hearts curate. Reel at the top picks from those. 我在 iPhone 上點愛心的就放最前面 Reel 從那挑

20 chars17 字

AI

Wired iCloud’s comments endpoint to read your heart-taps per photo. The featured reel + first row of the grid now sort by what you liked. Backup signal: any photo whose caption contains ★ / ☆ / “featured” also surfaces. You curate the front page from the Photos app on your phone — no extra tool, no spreadsheet. 把 iCloud 的 comments 接口接起來讀每張照片的愛心數。首頁 reel 跟相片格的第一排就照你點的愛心排。備援訊號:照片 caption 帶 ★ / ☆ / 「featured」也會被挑上來。你直接在 iPhone 的「照片」App 裡策展首頁 — 沒有額外工具、沒有試算表。

David

Three more pages, each its own idea:再多幾頁,每頁一個概念:

  1. One you scroll into each place.一頁,滑進每個地方。
  2. One that auto-plays the best photos.一頁,自動播最美的那批。
  3. One where the AI does something with what visitors type.一頁,讓 AI 用訪客打的字做點什麼。

AI

/journey — five places, one fullscreen scroll-through, photos pulled live from iCloud per visit. /lookbook — 5-minute silent slideshow with iOS-Memories blur fill. /compose — type a feeling, AI pulls three photos that match the mood. /quiet — sit, breathe, watch a single line of poetry form for you. Every visit is different. /journey — 五個地方一鏡到底,照片每次從 iCloud 即時抓。/lookbook — 5 分鐘靜音幻燈片,背景是 iOS 回憶風的模糊填色。/compose — 打一個感受,AI 從相簿挑三張組成你的三幀。/quiet — 坐下、呼吸,看 AI 為你慢慢成形一行詩。每次造訪都不一樣。

→ Compose→ 組三幀

David

A friend looked at prod and said:朋友看 prod 之後說:

  1. I don’t know what to click, or how to keep reading.不知道要按哪、怎麼讀下去。
  2. The sections aren’t obvious.分區不明顯。
  3. The drawer has 10 items — I can’t tell which are the highlights.抽屜 10 個項目,一下不知道哪些是精華。

Dev — let's hold off on big new builds for now and fix this.Dev 先不用大開發了,先把這個處理好。

AI

Two changes shipped together. Every section on / now ends with a serif “Next chapter →” card that pulls you to the next surface. The drawer collapsed from 10 flat items into 4 accordion groups (Portfolio / Writing / Visual stories / AI creation), each ≤5 items, current page auto-expanded with an accent left rail. Less to scan; more obvious where you are. 兩件事一起做。/ 上每個 section 結尾都加了一張 serif「下一章 →」卡片把人拉到下一個 surface。抽屜從 10 個平鋪項目折成 4 個 accordion 分組(Portfolio / 文字 / 圖文 / AI creation),每組 ≤ 5 項,當前頁那組自動展開、左側加金線標記。掃讀少一點;知道自己在哪多一點。

David

Cleanup pass + one new thing:一輪清理加一個新東西:

  1. Lazy tour isn’t landing — pull it.Lazy tour 效果不好,先拿掉。
  2. Six Frames into Visual stories. Rewrite the 1–6 captions every visit so it doesn’t feel scripted, and add an intro paragraph that says what Six Frames is.Six Frames 放到圖文。1–6 段文字每次都要改,不然太制式化;前面要寫一下 Six Frames 是在幹嘛再開始。
  3. Rename “Others” → “AI creation / 與你互動”.「Others」改名「AI creation / 與你互動」。
  4. Making of has wrong day counts. Drop it or move it to Writing.Making of 的天數錯了。考慮拿掉,或放到 Writing。
  5. Drawer section 1 → “Portfolio”. Make the title itself clickable to take you straight home — visitors shouldn’t have to dig into a sub-chapter.Drawer section 1 名字改成「Portfolio」。標題本身可以直接按,回到首頁最上面 — 不用一定要點下面的 chapter。

AI

Lazy tour pulled — CTA, hero button, tour.js, script tag from every page. Six Frames moved into Visual stories; each frame now ships with 3 caption variants picked randomly per visit, plus an explainer paragraph up front. “Others / 其他實驗” renamed to AI creation / 與你互動 (Compose + Quiet only). Making moved into Writing with the wrong day numbers stripped. Section 1 split: label = direct link to /, chevron = expand the four chapters. Lazy tour 拆掉 — drawer CTA、hero 按鈕、tour.js、每頁的 script tag 都清了。Six Frames 移到圖文;每幀都有 3 組副標 variant 每次造訪隨機抽,前面加了一段 explainer。「Others / 其他實驗」改名 AI creation / 與你互動(只剩 Compose + Quiet)。Making 移到 Writing,錯誤的天數拿掉。Section 1 拆成兩個 hit area:label 是直接回 / 的連結,▾ 才是展開四個 chapter 的按鈕。

→ Portfolio→ 作品集

·

Eleven briefs. One website. One ongoing conversation. 十一段對話。一個網站。一場還在繼續的合作。

If you have an idea you want built but you don’t want to write the code, this is what that looks like. 如果你也有一個想做、但不想寫程式的點子——大概就長這樣。

All photos所有照片 The long version長文版 As slides投影片版 As photo essay影像版