跳至主要內容

風味 · Essay

#家常#週末實作#飲食記憶

還原了嗎?設計師的這句追問,廚房裡也聽了好幾代

前端開發者把 Cursor 接上藍湖、讓 AI 直接讀設計稿的兩天實驗,被端回菜單照片與總店分店之間:從味道寫成規格表的老手藝,到復刻一道菜的走查清單與記錄家傳味的靈感。

美食生活編輯部 ·
還原了嗎?設計師的這句追問,廚房裡也聽了好幾代

麵還冒著熱氣,坐在對面的工程師朋友已經把手機螢幕轉了過來。設計師傳來的訊息只有三個字加一個問號:還原了嗎。他嘆了口氣,把筆電挪到湯碗旁邊,畫面上是一張手機頁面的設計稿,遊標卡在按鈕和文字中間。「這個間距,八像素,我量了三次。」

朋友做的是前端工程師,日常裡最磨人的一段,就是把設計稿變成真的網頁。設計師在藍湖這類工具上把版面標好,他打開標註模式量間距、核色號,切圖一張張存下來,再用程式碼把畫面拼回去。一個頁面做下來,至少三十分鐘是在「抄」設計稿。設計師改了稿,一切重頭再量一遍。

九月二十四日,一位前端開發者在工程師社羣掘金寫下他的實驗:把 AI 編輯器 Cursor 接上藍湖,讓 AI 直接讀設計資料生成程式碼。折騰了兩天,結論很短,能用,但離「一鍵還原」還遠。登入憑證會過期,樣式方案對不上,AI 偶爾還會自信地產生幻覺。

這則分享在工程師之間流傳。我們讀完,卻想把「還原了嗎」這三個字端回廚房,因為爐邊被問這句話的年資,比任何一套軟體都資深。

統計圖卡呈現前端工程師還原一頁設計稿時,光是量間距、核色號等抄寫規格的功夫就至少需要三十分鐘

菜單照片會說話,端上桌的菜會走音

菜單上那頁照片總拍得飽滿,蝦仁油亮,青蔥綠得像剛下過雨。菜端上桌,你愣了半秒:蝦仁小了一號,蔥花沉進醬汁裡,盤緣還多出一道抹出來的指紋。你想舉起菜單問,又覺得計較這半秒有點狼狽,於是低頭喫。

照片與實品的落差,跟設計稿與網頁的落差,是同一種距離:一份理想規格,交到另一雙手、另一組條件裡去實現。快門按下的那一刻,菜其實已經開始涼了;廚房每天的功課,就是拿當天的食材和有限的火力,去逼近照片裡那個狀態。把理想狀態做得讓人一眼看懂,這門功夫,櫥窗裡的假拉麵已經練了上百年,做得維妙維肖,正因為它替真的廚房扛下了「理想」這個角色。

設計師追問還原了嗎,心情跟盯著菜單照片的客人很像。他腦中有一個明確的畫面,深怕它在別人手裡變形。差別在於,廚房應對這種焦慮的辦法,比軟體古老得多,也成熟得多。

總店與分店之間,差的那一口

傳統中菜的食譜很有個性。鹽寫「適量」,醬油寫「少許」,火候寫「中火」,再補一句各家爐具自行調整。這套語言的前提是口傳身教,學徒站在師傅手邊,看手勢,嚐味道,被唸過幾輪之後,身體自己記住了那個適量。

連鎖時代一來,這套語言撐不住了。一個牌子開到第三十家分店,適量必須換算成公克,湯頭要註明溫度與時間,手搖飲的甜度冰塊切成固定刻度,中央廚房把配方寫成規格表,哪家店都照表作業。這是餐飲版的標註模式,把味道變成數據,讓不同的手做出接近的結果。

可是喫的人心裡都有數:總店就是總店。同一張規格表,換了城市,水質先變;換一口鍋,厚薄不同,蓄熱的方式跟著不同;那天的高麗菜甜一點,湯的表現就差一截。規格寫得再細,味道從一雙手搬到另一雙手,路上總會漏掉一點什麼。

那位開發者的兩天,撞上的正是這種漏。AI 讀得到圖層和數值,卻對不上他專案裡的樣式方案,好比拿到了精確到公克的配方,回家才發現自家爐火跟師傅那爐的旺法不同,秒數得重抓。他也提醒,範例用的是 Vue 搭配 SCSS,換了技術,給 AI 的約束就得重寫。這個動作老師傅太熟了:炭爐換瓦斯,什麼都要重新校一遍。

圖卡點出餐飲與軟體共通的難題:配方與規格再精確,交到另一雙手或另一套環境,味道仍會漏掉一部分
總店如此,分店如此,AI 也如此

後廚一直在等一條看得見客人的線

前廳與後廚,自古說兩種話。服務生憑印象轉達,廚師憑經驗接單,中間靠點菜單和複寫紙,靠出菜口一聲聲叫喚與回應硬撐著。後來單子直接印在爐邊,再後來換成螢幕,改單即時同步。工具每前進一步,轉述造成的走音就少一分。

MCP 做的正是這條線。作者試的那些套件都是第三方開源工具,並非藍湖官方出品,卻能讓 AI 直接去讀設計源頭的資料。他比較了幾個,最後留下一個順手的:解析連結、看截圖、抓圖層結構、下載切圖,日常還原靠這幾步就夠。這條線也不保證永遠通著,登入狀態過期,介面開始回報錯誤,工具會自動開一個瀏覽器,請你重新登入一次。

這一段我特別有畫面。市場裡的老攤販認臉,熟客不必開口,老闆已經把該切的部位切好、包妥。幾年沒去,臉這張通行證照樣失效,得重新站到攤前寒暄,重新把交情建立起來。登入憑證之於機器,大概就是臉之於攤販。作者的資安提醒也很有味道:憑證不要帶進共用的程式倉庫,就像家傳的滷方不該隨手拍照上傳,要傳給誰、何時傳,家裡自己拿主意。

先看懂,再開火

整篇分享裡最值得抄進筆記的,是他拿兩天換來的一句提醒:不要一看到設計稿就讓 AI 直接寫程式碼。先解析連結,先看截圖,先攤開圖層結構,弄清楚這一頁到底長什麼樣,再讓 AI 動手。

法式廚房管這套叫 mise en place。開火之前,該洗的、該切的先處理好,秤和量勺擺在手邊,爐上才準有火。看起來最不瀟灑的步驟,決定後面順不順。看影片學做菜的人最明白這件事:跟著第一個畫面就下鍋,做到第七分鐘才聽見「接著冷藏醃一夜」,那盤菜註定走味。先看完再開火,這個道理在影片時代的廚房要重新教,在 AI 時代的工程師桌上也要重新學。

這套還原的方法,回家就能用在你最想再喫一次的那道菜上。先回店裡認真喫一輪,把味道拆開來看:湯色是琥珀還是淺金,入口先鹹還是先鮮,蔥是生的辛香還是炸過的焦香,麵條的彈牙撐到第幾口才開始鬆。列一張清單,回家復刻,逐項比對,哪項走音就修哪項。這跟先請熟客動筷的試菜規矩是同一門功夫:嚐過了、說得出差在哪裡,才輪得到正式上菜。

清單圖卡列出復刻料理時可逐項比對的五個檢查點,從湯色、鹹鮮順序、蔥香型態、麵條口感到上桌溫度

家裡長輩的手路菜,也值得這樣還原一次。挑個週末站在竈邊看,把她嘴裡的「鹽少許」翻成幾茶匙,把「炒到香」翻成分鐘數和火力段,抄成一張規格表。記得在表尾留一行手感註記,寫下她起鍋前那個甩鍋的弧度,和她試味道時瞇起眼的神情。數據大概能還原八成,剩下的兩成,就靠那行字提醒你:下次站近一點看。

走味的地方,才值得問

回到那句還原了嗎。它逼出來的答案通常只有兩種,還原了,或者還沒,然後對話就結束了。廚房裡的老問法更有用:哪裡走味。鹹了半分,還是香氣短了,指出走味的位置,手才知道往哪裡修。那位開發者願意把兩天踩到的坑一個個寫清楚,正是替後面的人標出走味的位置。

完美的還原大概不存在,總店自己的湯,早晚濃淡都會差半分。但每講得出一次差異,理想裡那個味道就更具體一分。今晚有空的話,復刻那道惦記很久的菜吧。喫到第三口,說說它跟記憶裡差在哪裡。能把差異講出口的那一餐,已經比單純的想念,多走了好幾步。