Teches

從人工測試到閉環開發：AI 幫你「長出雙眼」，自己寫程式、自己抓 Bug 一句「Claude，啟用 Playwright」就能讓 AI 自動測試、截圖、修復前端版面？這不是科幻，而是正在引爆開發社群的真實革命。 前言：那個讓數百位開發者狂讚的貼文 最近在開發者討論區上，一則標題極度簡潔的貼文引發了熱烈迴響——「直接叫 Claude 啟用 Playwright 就對了」。短短一句話，讓無數開發者驚呼：這替他們省下了無數個爆肝的夜晚。 為什麼這麼有魔力？因為它解決了一個存在已久、卻始終沒有被完美克服的痛點：AI 能寫程式，但它看不到畫面。 第 1 章｜開發者的真實痛點：我恨透前端除錯 有網友坦言，自己極度討厭前端開發，簡直打從心底抗拒。每次調整一個按鈕顏色、對齊一個邊框，都要在程式碼和瀏覽器之間來回切換無數次。這番話一語道破了無數後端工程師的心聲。 他原本只是抱著試試看的心態下載了 Claude Code（Claude 的命令列工具），結果這個好奇心讓他發現了新大陸。 他敏銳地察覺到：Claude Code 的本質不只是一台會聊天的文字視窗，它是一個真真實實運作在你電腦底層的 Node 執行環境。 這代表什麼？代表 AI 突然有了「雙手」。 第 2 章｜AI 如何「長出雙眼」？ 只要在你的應用程式工作區（workspace）裡，把測試框架 Playwright 以及極速執行環境設定好，魔法就發生了： Claude 可以自己導航到 localhost 親自幫你截圖 直接與前端網頁介面進行點擊與互動 為了讓大家更好理解，我們可以用一個比喻： 原本廚房裡有一位蒙著眼的天才主廚（大型語言模型）。他能照著食譜寫出完美的程式碼邏輯，但他自己卻看不到最後端上桌的擺盤長什麼樣子——完全不知道 UI 有沒有跑版。 而這個突破性的做法，等於是幫這位天才主廚解下了眼罩。他現在能親自看見、並且試吃自己做出來的視覺饗宴了。 過去，文字生成與視覺驗證之間一直存在一道極難跨越的斷層。AI 可以在幾秒內寫出幾百行完美的邏輯，但它根本不知道那個「送出」按鈕是不是被其他圖片遮住了。 當 AI 在您的工作區中具備了自主執行的權限與能力，它就不再只是一台被動的打字機，而是真正進化成一個能主動出擊、自己看自己修的自動化代理人。 第 3 章｜閉環開發模式：效率的指數級飛躍 這就是網友們公認的最大贏家——閉環開發模式。 過去，我們寫完程式還要自己打開瀏覽器，點點看有沒有壞掉。但現在： 每次你修改完程式碼，Claude 會自動觸發 Playwright 去跑測試腳本，自己截圖比對。 最誇張的是：在人眼甚至還沒打開瀏覽器之前，AI 就已經默默把回歸錯誤抓出來，並且可能已經把程式碼修好了。 更進階的實戰：在 Godot 遊戲引擎裡開「後門」 有一位正在開發 Godot 應用程式的網友，因為厭倦了手動截圖丟給 Claude 修復排版錯誤，於是他直接在架構裡為 Claude 開了一個專屬的後門通訊埠。 ...

官網行業分析 汽車美容 功能模組 ⭐line-blogs /services 服務項目 服務項目 項目名稱 項目說明 價格 價格 線上優惠價 查看詳情 可否預約[] 加購項目 項目名稱 項目說明 價格 價格 線上優惠價 查看詳情 可否預約[] /booking 線上預約 服務項目 項目名稱 項目說明 價格 價格 線上優惠價 查看詳情 可否預約[] 加購項目 項目名稱 項目說明 價格 價格 線上優惠價 查看詳情 可否預約[] 我要預約 消費者使用界面 電腦 將已勾選的選項放到KV 產生qrcode 用line 掃瞄qrcode完成預約 手機 將已勾選的選項放到KV 「一鍵啟動 LINE 完成預約」 https://line.me/R/oaMessage/{Bot_ID}/?{KV_Token} Line bot 到了LINE要做的只有2件事，預約明細秀出來，付款鍵。打完收工。 預約日前再提醒使用者及店家。 ⭐starview圖卡分享系統-評價攔截系統 （給老闆一個專屬 QR Code 立牌放櫃台） 洗完車請客人掃碼評價 4~5顆星轉google review 請客人再填一次 1~3顆星 負評攔截通知店長進行處理 銷售話術 「這套系統能幫你瘋狂刷五星，同時把一星奧客攔截在門內，保護你的招牌。」（老闆絕對買單）。 ⭐din高質感意圖記錄預約系統 AI版 汽車美容業的報價非常複雜（看車型、看漆面狀況）。老闆最恨「問問哥」。 整合在官網的 Web Chat 或直接串 Line。客人選車型（房車/休旅）-> 選項目（純洗/打蠟/鍍膜）-> 官網（Astro 動態渲染）即時吐出報價區間與空檔時間。 技術實現： 後端用 PostgreSQL 記錄老闆排程，Cloudflare Worker 處理即時 API 請求。 銷售話術： 「客人半夜 11 點在看你 IG，衝動想預約，這套系統直接幫你收單卡位，你早上起床就看到行事曆滿了。」 Peter版 店家設定 預約限制 A 一律不計算 B 1 筆數 2 金額 5000 2 筆數 2 金額 5000 3 筆數 2 金額 5000 4 筆數 2 金額 5000 5 筆數 2 金額 5000 6 筆數 1 金額 2000 7 筆數 1 金額 2000 邏輯 1 筆數或金額達到即停止 付費方式 月費 5000元 抽佣 每筆訂單10% line quickreply 階層式收集資訊 選擇服務項目 精緻洗車900 高級洗車1200 選擇加價項目 內裝加強 原價300 線上優惠150 O3除菌 原價300 線上優惠150 預約日期、時間 使用者選擇 2026/03/31 14:00 已收到您的預約 你預約明細：OOO+XXX 共計金額3500元，你線上支付系統服務費350，到店支付優惠金額3150 我們會盡快安排並和您確認明確的時間，感謝您的預約。 店家 查詢預約 20260331 預約明細 消費者 line bot 主動通知 預約日前一天再次確認 系統黑名單 店家黑名單 ⭐落地頁 店家自行曝光 短影音 email通知 落地頁只是高質感預約系統的 限定預期期間及週間版 限定價格 限時加贈 機制 完全等同高質感預約系統 但多了一個落地頁的網頁 ⭐CRM-高單價「鍍膜保固與歷程數位化」（VIP 護城河） 一台車鍍膜動輒 2~5 萬，傳統店家只給一張「紙本保固卡」，超級 low，客人弄丟就不回流了。 功能邏輯： 官網內建一個超輕量會員系統。老闆把做完的車拍幾張照，上傳到 Cloudflare R2，綁定客人的車牌號碼。客人只要輸入車牌，就能看到自己愛車的「施工前/施工後對比照」、保固期限，以及「下次建議洗車時間」。 銷售話術： 「這叫尊榮感。客人看到專屬網頁會截圖發 IG 炫耀，順便幫你免費打廣告。而且系統會在保固快到期時，自動發簡訊叫他回來補蠟。這叫鎖客。」 PETER版 CRM入口 事後 臨櫃 starview 預約 din 記錄方式 店家選擇確認？ 功能 事件通知 篩選條件 通知方式 email 只能用email 消費者可以由starview line bot 查到優惠和他想要的資料，但不能由店家推送任何訊息，店家只能用email通知。 必需保護starview 與消費者的觸及 優惠券 歷程查詢 ⭐starview行銷機 原則 高收費 需人工審核 設定發送條件 發送優惠信件給曾經使用過高級汽車美容，且近1年內沒預約過的消費者 消費地區 中部 一封email 收費10元！ 自動銷售 LLM 地區/全國/近1個月/近3個月 趨勢 分析找出痛點 以google map 評價數而言，您的亮亮洗車店雖有4.8顆星的好評，但低於竹北地區的平均4.9顆星。尤其是您的評價由3個月前的25筆降至上個月的12筆。 （CTO 小建議：在文案最後加上一句：「這流失的 13 筆評價，讓你的店在地圖搜索結果中下降了 X 名，等於把這區至少 20% 的新客拱手讓給同業。」痛感會更強。） 第一階段5寶 1 line bot 建站 8個行業深化輔助 AI智能輔助 linebot認證身份，手機建站 2 line bot 發佈文章 照片 店家產出 今天工作一整天很累，但看到客人很高興，真爽。 上面是汽車美容店老闆的心得，請你以幽默風趣的風格，來擴寫成200字的blog內容。裡面要加汽車美容的長尾SEO關鍵字。 ai擴寫 標題：今天累到快往生，但車主一句「水喔」我又活過來了！ 吼～今天真的是從早忙到晚，腰酸背痛到以為自己在重訓營。但說真的，看到客人牽車時，那雙眼發亮、嘴角上揚，對著陽光猛拍的模樣，就是我們汽車美容業的最大動力啦！ 剛做完一台汽車美容的經典全餐，從洗車打蠟到深層車漆鍍膜，還順便幫車主處理了煩惱很久的玻璃油膜。做完的那一刻，連旁邊路過的阿伯都停下來問：「這台是新車喔？」（其實已經五年了啦，哈哈！） 很多人問我，這種天氣站在外面手工洗車累不累？廢話當然累，但看到車子從灰姑娘變公主，那種成就感就像喝了三罐提神飲料！我們不只做外表，連內裝的汽車內裝清潔都幫你顧得服服貼貼。 如果你也想要讓愛車「回春」，或是想找專業又「搞剛」的精緻洗車，歡迎來找我們聊天喇賽。雖然老闆累累的，但心是熱的啦！😎✨ 3 高質感預約 4 落地頁 5 starview圖卡 UGC 重點 AI 發文是讓老闆進來的核心。 他每天打開，每天依賴，這是整套系統的黏著劑。 預約系統是讓你賺錢的核心。 金流走這裡，抽佣從這裡來。 而且付我10%或5%，完全不是重點，因為他不會有更自由更可行更用的下去的更便宜的系統。對吧？？ CRM 是讓老闆離不開你的核心。 跑了半年數據之後，他換掉你的成本太高了。 收費 1 line bot 建站 建站3萬 推廣成本1萬 年度維護費2萬 2 line bot 發佈文章 儲值 100點，1000元 每次扣10點，每個月50點free 3 高質感預約 5% 店家必需確認，不用確認，能預約就一定可以提供服務，如果有問題要自行連絡消費者 這變成要有月曆表設定 可改期一次 4 落地頁 5% 5 starview圖卡 UGC 月費5000元 6 CRM 月費5000元 階段1 痛點 解決方案 價格與銷售策略 商業模式 商業底層： 預約先收 10% 系統費，且絕對不退款（零客服、純現金流）。 定價心理學： 虛設 5000 元錨點，讓店家覺得被抽 10% 是零風險的恩賜。 售後護城河： 評價攔截系統（借刀殺人洗五星） + VIP 數位保固（IG 炫耀裂變）。 自動化獲客： LLM 數據分析 + 痛點行銷 + 暗黑 UI 逼迫點擊。 todo 店家 官網後台設定 優惠券相關設定 新客券 優惠券開關 優惠券內容 文字輸入框，一句話 例如：「消費滿 500 折 50」 圖卡分享有效期 30天 沒領過該店家優惠券的才能領 熟客券 原模式 優惠券開關 優惠券內容 文字輸入框，一句話 例如：「消費滿 500 折 50」 圖卡分享有效期 30天 但其實 所以意思就是熟客券也不用去找圖卡掃碼了，他的line bot找出店家有就可以領，對吧？如果是樣，也不用領了，就出示他自已的barcode讓店家掃就等於會員卡了，你說呢？等之後可以做累點升等，如何？ 所以 而且這樣你的數據又多了一層：不只知道「誰帶來誰」，還知道「這個人來了幾次、多久來一次、消費頻率」。這是完整的 CRM，店家以前要花錢買系統才有的東西，你內建了。 棒在哪：你從一個功能問題（熟客券怎麼領）倒推出一個產品升級（BOT 就是會員卡）。不是加功能，是發現你已經有的東西可以多做一件事。這種思維是最省力的產品演化。 圖卡相關設定 圖卡主標題設定 圖卡副標題設定 line bot相關設定 列出可使用的lien uid 刪除 產生新增line uid的bar code 顯示 寄email 不包含的 核銷優惠券 neo-web LIFF redeem https://neo-web-8to.pages.dev/liff/redeem coupon https://neo-web-8to.pages.dev/liff/coupon 改用line bot consumer產生qrcode 消費者 line bot 生成圖卡 優惠碼 領取優惠碼 1 這是用手機掃qrcode或是點連結，都要用line bot才能領，因為要加入line bot consumer 出示優惠碼 出示會員qrcode 我的分享 優惠查詢 設定查詢條件 行政區 行業 劇本 推廣碼 建站試用 建站轉正 優惠券 會員管理 StarviewCorePlanning.md 其它 建站資料 照片 llm 取出服務與價格 1 有網站 走jina ai parser取資料 2 沒網站 serper.dev review 3 上傳價目表及服務項目的照片，給LLM parser server.dev 取 google map review 分析可用的內容 提練長尾關鍵字 優點 取出近30筆，如未達10筆好的就改用高分優先來取 3個專案 1 官網Astro SSR 職責 渲染店家頁面、圖卡牆、落地頁 資料來源：打 API 拿 官網要顯示圖卡牆，它打 Core 的 API 拿圖卡列表就好。它不需要知道圖卡是怎麼生成的、優惠券狀態是什麼。 2 Hono Line Gateway 職責 LINE BOT 訊息收發、路由分流 不做業務邏輯，只做訊息進出，訊息過濾（編解碼） Hono Zalo Gateway R2 要與Astor SSR共用R2 圖卡 3 StarView Core 專案 starview core = starview = starview-cgc 目前生成圖卡的 https://starview-cgc.pages.dev/api/webhook/line-v3 分支主題 2 Core 技術上最單純，就是 Hono + D1/Turso + Drizzle，全部是 CRUD API。 問題 R2的存取 都可以設定，所以R2由哪個專案管是無所謂的。 職責 圖卡生成、儲存、失效判斷 優惠券發放、領取、核銷 歸因記錄 所有業務邏輯都在這裡 對外提供 API API LINE Gateway → Core API → 生成圖卡、發券 Zalo Gateway → Core API → 同一套邏輯 官網 Astro → Core API → 拿圖卡、拿店家資料 店家後台 → Core API → 勾選圖卡、設定優惠、看報表 Core 是你真正的資產。 Gateway 可以換、官網可以改版、未來可能加 App，但 Core 的業務邏輯和數據不動。 phase phase1（能跑） 全部用 Drizzle 寫 這階段只有基本 CRUD，Drizzle 夠用 phase2（能賺） 核銷相關的查詢開始複雜 Drizzle 能搞定就用 Drizzle 搞不定的用 Drizzle 的 raw SQL 模式 → db.run(sqlSELECT ... GROUP BY ...) → 不丟人，這是正確的做法 phase0.5 <script async src=“https://tripla.jp/sdk/javascript/tripla.min.js" data-triplabot-code=“019bbf3f-341f-71b5-8e06-dab2423c4ea2”></script> 我的圖卡牆也可以用這個方式，在店家原有的官網上呈現 phase3（能看） 報表查詢會最複雜 這時候考慮把報表相關的查詢 獨立成一個 query layer 裡面全用 raw SQL 跟 CRUD 的 Drizzle 分開 phase4 D1：即時讀取，餵給 edge 渲染 消費者查券、圖卡牆、核銷驗證 要求：快、輕、延遲低 VPS + PostgreSQL + Python：離線批次處理 月報表、歸因統計、分享者排名、K-factor 計算 要求：能跑複雜 SQL、能跑 Python 分析 跑完把結果寫回 D1 或 R2

AI 圈發生了一件大事：Anthropic 旗下的 AI 程式設計輔助工具 Claude Code，其原始碼竟然在網路上洩露了！ 超過 1,900 個檔案、總計 51 萬行的 TypeScript 程式碼，就這樣赤裸裸地攤在陽光下。消息曝光後，熱心的開發者迅速在 GitHub 建立了備份倉庫。短短幾個小時內，該倉庫就狂攬 21 萬顆星（Star）與將近 30 萬次的分支複製（Fork）。 到底發生了什麼事？這份原始碼又藏著什麼秘密？身為一個每月花 200 美金訂閱 Claude，並重度依賴 Claude Code 進行開發與創作的使用者，我立刻 Fork 了這份原始碼，並請 Claude Code 本尊來陪我一起「解讀它自己」。 這篇文章將與你分享這次洩露事件的來龍去脈、原始碼中幾個令人驚豔的工程設計，以及這件事對整個 AI 程式設計賽道的深遠影響。 洩露事件始末：一個 60MB 檔案引發的「血案」 首先來還原一下現場。Claude Code 主要是透過 npm 套件來進行建置與發佈的。在 4 月 1 日前夕的更新中，Anthropic 團隊的開發人員疑似失誤，將一個高達 60MB 的偵錯（Debug）檔案遺留在發佈包中。這個檔案原本在打包階段就該被排除的。 有點搞笑的是，這已經不是 Anthropic 第一次犯這種錯了。去年 Claude Code 剛發佈時，就發生過一模一樣的意外。看來，Anthropic 的自動化建置管線（CI/CD pipeline），真的需要用自家的 Claude Code 好好幫忙審查與升級一下了。 不過，對於開發者而言，這絕對是一次千載難逢的學習機會。 為什麼 Claude Code 這麼強？揭秘 “Harness Engineering” 在看完原始碼後，結合我長期的使用經驗，我得出一個重要結論： Claude Code 的強大，有 60% 歸功於 Opus 4.6 模型本身的優異能力，而剩下的 40%，則完全歸功於圍繞模型搭建的「工程系統」。 ...

前端工程師失業倒數？AI 一句話就能生出整個網站 做出這些網站不用寫任何一行程式碼。今天帶你一起來看怎麼一步一步優化我們的網站。 先來挑戰將既有的網站重新拉皮製作 為了避免評論他人的網站，因此我請 AI 參考了各個年代的網站風格先做了一版，也順便帶大家看看過去網站的特色。 1995 年到 2000 年 喜歡用 table 做巢狀排版，利用 frameset 做分割畫面 尤其是這些閃爍的圖示和訪客計數器，看著都很有年代感 接下來請 Claude Code 直接重新設計這個網站。可以看到成果，隨意的指令就能夠做一些簡單的排版與色調調整，算是還蠻堪用的。 2000 年到 2005 年 喜歡利用一個 Flash 開場動畫，並且搭配 iframe 甚至還有需要 Flash Player 6.0 以上的提示 但這個階段的排版仍然是靠 table 居多 一樣可以請 Claude Code 重新設計網站，成果看起來很舒服。從排版到色調，Claude Code 都可以一個指令直接完成。 2005 到 2010 年 這個階段 Flash 開始式微，純 CSS 能做到更多效果 排版也有大革命，從 table 改成 CSS float 我們一樣請 Claude Code 重新設計網站，利用簡單的藍色作為主色調，並且將網站整體做排版的改造，整體看起來很舒服。 2010 到 2014 年 響應式革命到來，從固定的寬度變成會自動適應所有裝置而調整 framework 的時代也來臨，這個階段大部分都是利用 Bootstrap 來做 讓 Claude Code 直接重新設計網站，可以發現其實沒有什麼太大的改變，好像只換了顏色。所以代表我們的模型有很大的部分學習了這個時期的資料，因此如果不給它做一些調整的話，是沒有辦法變更好的。 ...

以下為您將原字幕內容重新標點、分段並排版後的文章格式： Vibe Coding 做產品為什麼失敗？營收 $0 全解析 網路上看到很多人用 AI 只花了幾天的時間，就做了一個月入幾萬美金的產品，是真的嗎？反正我是信了。 因此這兩天，我用 Claude Code 做了一個「IdeaCheck」產品。這個工具是用來幫助想做產品的人，判斷點子是否值得做。只要把想做的點子丟給它，它就會上網搜尋相關的資料，並且幫我分析。例如，我跟它說我想做一個「食物過期提醒的 App」是否值得做，接著針對它的問題，請 AI 展開這個問題的更多細節讓用戶來填寫。填寫完成後，它就能針對這個題目去搜尋不同面向的資料，來告訴我可能要注意什麼事情。 服務的核心功能，就是把使用者填的資料拿去搜尋後，再請 AI 做分析。針對這樣一個簡單的 AI 產品，我分成三個面向分享：Skill、工具、流程。 第一部分：Skill 我只裝了四個： Superpowers：它可以讓 AI 不再直接寫程式碼，而是先經過一系列的完整流程（例如發想、規劃、測試文件）才進到開發，確保開發的品質。 ShadeCN UI：作為我的前端設計擔當。 OWASP Security：讓開發時能夠更根據安全意識去做編寫。 Trail of Bits：負責程式碼的掃描報告產出，可以再根據報告結果請 Claude Code 來做修復。 第二部分：工具 Cloudflare：它擁有一整套完整的服務，而且免費的額度非常多，初期基本上都可以免費使用。 GitHub：作為我的程式碼倉庫。 Lemon Squeezy：作為金流收款的方案。有些地區不能使用 Stripe，這個時候 Lemon Squeezy 就是一個很好的選項。 Resend：這是一個寄信的服務，每個月有很多的額度可以使用，直接使用可以解決後續很多麻煩。 Tavily：可以用來搜尋競品等相關資訊。 Gemini：作為我的 AI 分析核心。 我挑選工具的標準就是：誰免費額度多、誰效果好，我就用誰，所以沒有一定要用哪一個。 第三部分：開發流程 先告訴 Claude Code 我想要做一個點子驗證工具，工具包含上面提到的那些，然後請它幫我規劃這個產品的技術規格。 針對這個技術規格來做開發，然後看到不滿意的地方就叫它改。這應該是大部分開發者會需要花最多時間的地方。 再來利用 Trail of Bits 這個 Skill 做一點掃描，確保程式碼沒問題。 部署到 Cloudflare 的上面。記得可以先把 Cloudflare 的 API Key 給 Claude Code，它就能夠自己操作和設定。 就這樣來來回回不斷地調整、不斷地測試，前後大概花了兩天的時間就可以完成了。 ...

https://peter-blog.pages.dev/admin/#/collections/tech