用 Claude Code 做第一個網站
本機資料夾中有一個可運作的 HTML/CSS 網站。
第一個成果
網站在瀏覽器中開啟。
需要： Mac, Claude 帳號
不知道從哪裡開始？
開始引導式工作階段。
從現成專案開始，或帶著自己的目標開始。工作時，mouseover 會引導下一個命令、提示、連結或檢查清單。
這些是起點，不是限制。你也可以在 Mouseover 裡定義自己的專案，學任何你想完成、理解或練習的事情。
從這裡開始
快速得到看得見的成果，尤其適合第一次使用引導式工作階段。
把 LinkedIn 變成個人網站
以 LinkedIn、履歷或個人資料建立的本機個人首頁。
第一個成果
你的首頁開啟，包含姓名、背景與連結。
需要： Mac, Claude 帳號, LinkedIn 或個人資料
建立 AI 客戶洞察分析器
本機客戶洞察 App，可把訪談筆記轉成創辦人可用的摘要。
第一個成果
範例訪談顯示痛點、人物誌、反對理由、定位與下一步問題。
需要： Mac, Claude 帳號, 可選客戶筆記
製作畢業回憶冊網站
像數位剪貼簿一樣的本機畢業回憶冊網站。
第一個成果
回憶冊開啟，包含封面、時間軸、回憶卡、語錄與照片佔位。
需要： Mac, Claude 帳號, 可選回憶素材
在 Mac 設定 Claude Code
Claude Code 已安裝、登入，並可在專案資料夾中使用。
第一個成果
Claude Code 在 Terminal 中開啟。
需要： Mac, Claude 帳號
AI 程式工具
設定程式代理工具，並在真實專案中安全開始。
執行第一個 Cursor Agent 任務
Cursor 已為專案設定好，並完成一個已審查的 Agent 工作流程。
第一個成果
Cursor Agent 提出範圍明確的第一個變更。
需要： Mac, Cursor 帳號, 專案資料夾
在 Mac 設定 Codex
Codex CLI 已登入，具備專案指示與安全沙盒預設。
第一個成果
Codex 印出版本與登入狀態。
需要： Mac, ChatGPT 或 API 存取權, Node 或 Homebrew
連接開發者工具
連接資料庫、瀏覽器與測試工具，讓代理能檢查真實狀態。
安全連接 Supabase MCP
一個有範圍限制的 Supabase MCP 連線，可安全檢查 schema。
第一個成果
Agent 以唯讀方式列出資料表。
需要： Supabase 專案, AI 程式工具
連接 Playwright MCP
可探索流程並建立測試的瀏覽器自動化設定。
第一個成果
Agent 在可見瀏覽器中控制 TodoMVC。
需要： Node 20+, AI 程式工具
Automate Work
把每日工作來源連成可檢查、可批准的流程。
Build a daily briefing workflow with Claude Code
A daily brief that pulls agenda, inbox, and Notion context into one reviewable page.
第一個成果
A Today Brief draft appears with source-backed calendar, inbox, and Notion sections.
需要： Claude Code, Google account, Notion workspace
工作自動化
把日常工作來源轉成可檢查、需要核准的流程。
建立會議行動追蹤器
本機行動追蹤器，包含決策、負責人確認、期限，以及可轉成 Notion 看板的 CSV。
第一個成果
會議筆記變成可檢查的看板與可匯入 Notion 的 CSV。
需要： Claude Code, 會議筆記, 可選 Notion
創作媒體
把產品故事變成可以預覽的創作成果。
用 Claude Code 製作發表影片
一個可反覆調整的 Remotion 產品發表影片專案。
第一個成果
影片預覽在 Remotion Studio 中開啟。
需要： Mac, Claude Code, Node
用 Codex 製作發表影片
一個可反覆調整的 Remotion 產品發表影片專案。
第一個成果
影片預覽在 Remotion Studio 中開啟。
需要： Mac, Codex CLI, Node
規劃 YouTube 與 Podcast 短片
本機短片規劃看板，包含時間碼、開場、字幕、標題選項、縮圖概念與剪輯交接。
第一個成果
一個強片段有時間碼、開場鉤子、字幕、標題選項與縮圖概念。
需要： Claude Code, 逐字稿, 自有或可使用內容
用 Rive 做動畫圖示微互動
本機網頁帶有由 state machine 驅動的互動 Rive 圖示。
第一個成果
Rive 圖示在瀏覽器中對 hover 與點擊播放動畫。
需要： Claude Code, Rive Community 檔案, 瀏覽器
用 Rive 做互動吉祥物 Hero
本機落地頁 Hero，由游標與點擊輸入驅動 Rive 吉祥物。
第一個成果
吉祥物在瀏覽器中跟著游標移動，並對點擊作出反應。
需要： Claude Code, Rive Community 吉祥物, 瀏覽器
用 GSAP 與 SplitText 做 Hero 進場動畫
本機 Hero 頁面，包含協調的 GSAP 進場動畫與 reduced-motion 後備。
第一個成果
重新整理頁面時，瀏覽器播放乾淨的 GSAP 進場動畫。
需要： Claude Code, 瀏覽器, 可選 Hero 文案
用 GSAP ScrollTrigger 做捲動故事
本機落地頁，包含釘選 Hero、捲動觸發顯示、視差與 reduced-motion 後備。
第一個成果
捲動頁面時 Hero 會被釘選、故事節拍交叉淡入，後續區塊也會顯示。
需要： Claude Code, 瀏覽器, 簡短故事想法
Create Media
mouseover 可以逐步引導的專注工作流程。
Generate article covers from Figma context
A local HTML cover generator that exports a polished PNG for articles or newsletters.
第一個成果
One 1200x630 cover image previews in the browser and exports to PNG.
需要： Claude Code, Figma access, Node
Make a cinematic launch video with Higgsfield
An exported MP4 product launch video built from 2-4 Higgsfield Cinema Studio shots.
第一個成果
One shot returns with a camera move that lands and a clean composition.
需要： Higgsfield account, Web browser, Product hero image
Generate UGC ad variants with Higgsfield Marketing Studio
3+ UGC ad MP4s at the target aspect ratio, named for Meta Ads Manager or TikTok Ads upload.
第一個成果
One finished UGC variant lands the hook in the first 2 seconds with believable lip-sync.
需要： Higgsfield account, Web browser, Product URL or 5 images
Generate GTM hero images with Higgsfield Soul
A downloaded hero image at the right aspect ratio with brand-consistent style and compliance checks done.
第一個成果
One rendered image meets the brief on the first batch.
需要： Higgsfield account, Web browser, Brand reference image
Build an avatar spokesperson video with Higgsfield
A 30-60s spokesperson MP4 at 1080p with clean lip-sync, captions, and an end-card CTA.
第一個成果
A 5-10s preview render shows natural lip-sync and head motion.
需要： Higgsfield account, Web browser, Script (30-60s)
Grade your first clip in DaVinci Resolve
A corrected and lightly graded clip exported as an H.264 file.
第一個成果
The corrected clip shows healthy scopes and skin tones on the I-line.
需要： Mac, DaVinci Resolve 20, One short clip
Grade log footage with a cinematic look
A managed log clip graded into Rec.709 with a subtle Film Look Creator pass, exported as a master.
第一個成果
The log clip shows healthy contrast and saturation after color management is applied.
需要： Mac, DaVinci Resolve 20, Log or RAW clip
Match shots and build a LUT in DaVinci Resolve
Matched clips, a saved PowerGrade, and a .cube LUT in the user LUT folder.
第一個成果
A target clip matches the reference cleanly under a wipe.
需要： Mac, DaVinci Resolve 20, 2-5 clips to match
Color skin and add a beauty pass in DaVinci Resolve
A portrait or UGC clip with corrected skin tones and a subtle beauty pass.
第一個成果
A clean skin matte previews with the High-light overlay.
需要： Mac, DaVinci Resolve 20, Portrait or UGC clip
AI 藝術與視覺
用節點式工具與擴散模型，做出能看見、聽見、互動的作品。
用 TouchDesigner 做音訊反應視覺
一個 TouchDesigner 專案，畫面明顯隨音樂或麥克風輸入變化。
第一個成果
幾何體在 Render TOP 中隨聲音脈動、移動或變色。
需要： Mac 或 PC, TouchDesigner, 音訊來源
在 TouchDesigner 寫第一個 GLSL Shader
一個 TouchDesigner 專案，含可動畫的像素 shader 與自訂 uniform。
第一個成果
會動的程序紋理充滿 GLSL TOP 預覽。
需要： Mac 或 PC, TouchDesigner
用 StreamDiffusionTD 做即時 AI 藝術
一個 TouchDesigner 專案，webcam、Render 或 shader 會被即時風格化。
第一個成果
TouchDesigner 預覽即時顯示經擴散風格化的影像。
需要： TouchDesigner, NVIDIA RTX 或 Apple Silicon
在 Mac 上用 ComfyUI 產生第一張圖
ComfyUI Desktop 已安裝並可運作，輸出資料夾有一張產生的圖。
第一個成果
提示詞渲染成圖片並儲存到 ComfyUI 輸出資料夾。
需要： Apple Silicon Mac, 建議 16+ GB 統一記憶體
用 ComfyUI ControlNet 做姿勢控制角色藝術
一個 ComfyUI 工作流，會渲染出符合參考姿勢的角色圖。
第一個成果
產生的角色出現在從參考圖擷取的姿勢中。
需要： ComfyUI 已安裝, SDXL Base 模型, 姿勢參考圖
用 ComfyUI IPAdapter 做風格轉換
一個 ComfyUI 工作流，結合你的內容構圖與風格參考的外觀。
第一個成果
渲染結果明顯結合你的內容構圖與風格圖的色彩與質感。
需要： ComfyUI 已安裝, SDXL Base 模型, 風格與內容參考圖
Build Business Tools
建立本機商務工具，先檢查資料、計算與範本。
Create a quote and agreement generator
A reviewable quote and agreement draft that stays local until the user chooses to send it.
第一個成果
A sample client quote opens with correct totals and matching agreement sections.
需要： Claude Code, Node, Approved terms
建立商務工具
建立本機商務工具，先檢查資料、計算與範本。
建立 Gmail 跟進 CRM
本機 CRM，整理聯絡人、階段、期限、下一步、風險與回覆草稿。
第一個成果
重要信件變成可檢查的跟進列表。
需要： Claude Code, Gmail 帳號, 需跟進的信件
建立客服分流助手
本機分流儀表板，包含優先級理由、建議回覆、Bug 報告與回饋匯出。
第一個成果
一批凌亂工單變成可檢查的分流清單。
需要： Claude Code, 工單匯出, 可選範例工單
建立競品研究摘要產生器
本機競品摘要儀表板，包含來源連結、信心程度、影響解讀與每週策略建議。
第一個成果
範例競品訊號變成有來源依據的每週策略摘要。
需要： Claude Code, 公開競品 URL, 可選來源筆記
整理支出收據
本機收據台帳，包含供應商總額、類別總額、缺漏欄位旗標、重複檢查與 CSV 匯出。
第一個成果
範例收據變成可匯入試算表的列，並顯示總額與檢查旗標。
需要： Claude Code, 收據檔案或筆記, 試算表 App
起草投資人更新
本機投資人更新產生器，包含有來源檢查的指標、旗標與可貼到 email 的 Markdown 輸出。
第一個成果
可檢查的月度更新草稿顯示指標、進展、阻礙、請求與優先事項。
需要： Claude Code, 月度指標, 創辦人筆記
整理知識
建立本機筆記與 wiki 工作流程，並保有清楚的 AI 編輯邊界。
用 Claude Code 整理 Obsidian
有結構、模板與安全 AI 編輯規則的本機 vault。
第一個成果
新的 vault 開啟，包含入門筆記結構。
需要： Obsidian, Claude Code
用 Codex 整理 Obsidian
有結構、模板與安全 AI 編輯規則的本機 vault。
第一個成果
新的 vault 開啟，包含入門筆記結構。
需要： Obsidian, Codex CLI
建立課程或工作坊
本機課程規劃工作區，包含學習目標、課程、投影片、練習、對齊檢查與匯出。
第一個成果
一份課程計畫有可衡量目標、練習活動、練習提示與學生檢查項目。
需要： Claude Code, 專業筆記, 課程想法
建立個人知識電子報
本機電子報工作區，包含有來源的草稿、主旨選項、連結清單與寄送檢查表。
第一個成果
範例收藏筆記變成精簡的每週電子報草稿。
需要： Claude Code, 收藏文章或筆記, 可選連結
建立 Karpathy 風格 wiki
包含原始資料夾與編譯 wiki 資料夾，並有互相連結的實體筆記。
第一個成果
一份原始資料變成互相連結的 wiki 頁面。
需要： Obsidian, Claude Code, 來源素材
Organize Knowledge
mouseover 可以逐步引導的專注工作流程。
Search your articles and notes with RAG
A scoped local index plus a cited answer workflow for articles and notes.
第一個成果
One question is answered with citations back to your indexed files.
需要： Claude Code, Node, Notes folder
System design interview
mouseover 可以逐步引導的專注工作流程。
Design a URL shortener (warm-up)
A complete 45-minute mock interview covering requirements, API, high-level design, deep dives, and tradeoffs.
第一個成果
You hit every framework phase out loud, with concrete numbers.
需要： Mac, Microphone, Whiteboard tool (Excalidraw, Figma, etc.)
Design YouTube
A complete 45-minute mock covering upload, transcoding, playback, and the CDN deep dive.
第一個成果
You walk an end-to-end upload-to-playback request through your design.
需要： Mac, Microphone, Whiteboard tool (Excalidraw, Figma, etc.)
Design TicketMaster
A complete 45-minute mock covering seat locking, virtual waiting queues, and payment idempotency.
第一個成果
You can defend a concurrency model under 1M QPS on-sale load.
需要： Mac, Microphone, Whiteboard tool (Excalidraw, Figma, etc.)
Design Twitter / X home feed
A complete 45-minute mock covering write fanout, celebrity carve-out, and feed storage.
第一個成果
You can defend push vs. pull vs. hybrid fanout with concrete thresholds.
需要： Mac, Microphone, Whiteboard tool (Excalidraw, Figma, etc.)
Design Uber
A complete 45-minute mock covering H3 / S2 indexing, driver-rider matching, and live tracking.
第一個成果
You can find the nearest drivers to a rider in under 100ms with the right index.
需要： Mac, Microphone, Whiteboard tool (Excalidraw, Figma, etc.)
Design WhatsApp
A complete 45-minute mock covering WebSocket gateways, message ordering, and offline delivery.
第一個成果
You can defend per-conversation ordering and multi-device fanout.
需要： Mac, Microphone, Whiteboard tool (Excalidraw, Figma, etc.)
Design a RAG-powered LLM application
A complete 45-minute mock covering retrieval, cost/latency tradeoffs, and quality guardrails.
第一個成果
You can quote the dollars-per-query cost of your design.
需要： Mac, Microphone, Whiteboard tool (Excalidraw, Figma, etc.)
職涯工作流程
把求職資料整理成可檢查、可重複使用的申請流程。
建立求職申請 Copilot
本機求職工作區，包含真實客製草稿、履歷證據對照與申請追蹤表。
第一個成果
範例個人資料與職缺變成履歷草稿、求職信、作品集簡介與追蹤列。
需要： Claude Code, 履歷或個人資料筆記, 職缺內容
Thinking Lenses
mouseover 可以逐步引導的專注工作流程。
Run the taste critic lens
Mouseover reviews the visible work for clarity, hierarchy, trust, proof, polish, and the next best edit.
第一個成果
Ask for a review and get the main taste problem, why it weakens the work, and one concrete edit.
需要： Mouseover Live Session, Visible design, page, app, or deck
Teardown a conversion page
Mouseover reviews landing pages, pricing pages, product pages, forms, and checkout flows for conversion leaks.
第一個成果
Ask for a teardown and get the main conversion leak, why it blocks action, and one fix to test.
需要： Mouseover Live Session, Visible page, form, or checkout flow
Run a founder reality check
Mouseover critiques ideas, pages, pitches, MVP plans, and roadmaps against customer evidence and real demand.
第一個成果
Ask for a check and get the biggest unproven assumption, why it matters, and a reality test.
需要： Mouseover Live Session, Startup idea, pitch, roadmap, or landing page
Use the senior PM lens
Mouseover reviews specs, tickets, roadmaps, experiment plans, and launch docs with senior product judgment.
第一個成果
Ask for a review and get the main product risk, why it matters, and one next PM move.
需要： Mouseover Live Session, Spec, ticket, roadmap, or product doc
Review data like a skeptic
Mouseover reviews charts, dashboards, spreadsheets, reports, experiments, and KPIs for decision risk.
第一個成果
Ask for a data review and get the main data risk, why it matters, and one next check.
需要： Mouseover Live Session, Visible chart, dashboard, report, or spreadsheet
Use the staff engineer review lens
Mouseover gives senior engineering review feedback focused on the highest-risk issue and a concrete fix.
第一個成果
Ask for a review and get the top issue, impact, and the code, test, or rollout change to make next.
需要： Mouseover Live Session, Code, diff, design doc, or PR
Review an AI feature for risk
Mouseover reviews prompts, RAG flows, agents, AI UX, evals, and launch plans for practical safety gaps.
第一個成果
Ask for an AI safety review and get the highest risk, why it matters, and one mitigation.
需要： Mouseover Live Session, Prompt, AI app, agent, or launch plan
Unblock a debugging session
Mouseover guides terminal, browser, API, test, setup, permission, and logic debugging one safe step at a time.
第一個成果
Ask for help and get the current hypothesis, next observation, and stop condition.
需要： Mouseover Live Session, Visible error, failure, or stuck workflow
Review privacy and trust risk
Mouseover reviews product screens, permissions, analytics, AI workflows, support processes, and privacy copy.
第一個成果
Ask for a privacy review and get the biggest trust risk, why it matters, and one safer change.
需要： Mouseover Live Session, Screen, flow, doc, or data plan touching user data
Prep a negotiation
Mouseover helps review emails, offers, proposals, pricing, renewals, and difficult stakeholder conversations.
第一個成果
Ask for prep and get the leverage issue, why it matters, and one next move or rewrite.
需要： Mouseover Live Session, Message, offer, proposal, or negotiation notes
Edit for writing clarity
Mouseover reviews docs, emails, posts, support articles, scripts, proposals, and product copy for clarity.
第一個成果
Ask for a writing review and get the main clarity problem, why it matters, and one best edit.
需要： Mouseover Live Session, Visible draft or copy
Make a decision memo sharper
Mouseover reviews visible docs for decision, recommendation, options, evidence, tradeoffs, owner, and next step.
第一個成果
Ask for a memo review and get the decision gap, why it matters, and one best edit.
需要： Mouseover Live Session, Memo, plan, update, proposal, or strategy doc
Use the Munger decision lens
Mouseover quietly reviews your work through models like inversion, incentives, opportunity cost, and margin of safety.
第一個成果
Ask for feedback and get one high-leverage risk, model, and next action.
需要： Mouseover Live Session
Run a misjudgment checklist
A focused bias and incentive review that surfaces the few judgment traps most likely to matter.
第一個成果
Ask for a review and get the biggest distortion, why it matters, and one countermeasure.
需要： Mouseover Live Session