TechMoon 科技月球
WordPress、SEO 與 AI 工具實測指南
App Designer Skill：先看三個設計方向再決定介面，免費版就做得到
App Designer 是給 Claude Code 用的免費設計技能：先把概念定成具體意象，主畫面先出三個方向再承諾，每個畫面以 iPhone 解析度渲染並由獨立批評者檢查。付費 Pro 版 5 歐元一次性買的是出貨段，Android 雙平台、動態影片、文案、付費牆與商店素材。這篇逐項核對兩個官方頁面，整理兩版邊界、環境需求與時間軸。
用 AI 摘要這篇文章：
同一個支出追蹤 App、同一個模型，讓 Claude 設計兩次，會長出什麼樣的差別？作者 Tobia Donadon 在 App Designer 的官方頁面上擺了這樣一組對比：左邊是 Claude 自己發揮的版本，深色介面，可用餘額 4,382.16 歐元、本週支出的柱狀圖、雜貨外食交通的分類預算一路排下來，功能齊全但每個環節都眼熟，和你看過的千百個理財 App 首頁沒有本質差別；右邊是經過這套技能流程後的同一個 App，畫面換成一個裝硬幣的玻璃罐插畫，用「罐子裡還剩 137.60 歐元」來講餘額這件事，每日支出的呈現方式也跟著罐子的隱喻走。這組圖是作者自己做的展示，但它指出的問題是真的：模型交出來的第一版畫面，通常就會變成你收到的唯一版本，中間沒有留給設計決策介入的縫隙。
App Designer 是一套給 Claude Code 用的設計技能，作者對它的定位是設計出不像 AI 做出來的 iPhone App。技能（skill）在 Claude Code 裡是一組隨喚即用的指示檔，裝好之後模型會照裡面定義的流程做事；同樣把設計工作裝進 Claude Code 的還有 UI UX Pro Max，這類設計技能最近一個接一個出現。這套技能屬於作者網站 Construct 區的技能目錄，同一區還收著另外 29 個技能。下面看到的產出畫面都出自作者的展示；我只讀了兩個官方頁面，沒有留信箱索取技能，也沒有購買 Pro，所以判斷的依據是流程設計，以及免費與付費之間那條邊界畫在哪裡。
概念先於配色，方向先於承諾
這套技能的流程有三步，前兩步約束的是設計決策怎麼發生。它要求每個 App 先找一個具體概念。每個 App 都要從某個真實的東西出發，頁面舉的例子是一條田徑跑道、一座正要入睡的村莊、一張紙剪貼。選定的概念接著決定字型、色彩與動態。換句話說，視覺語言要從使用情境長出來，而非先從風格 prompt 庫挑一套流行配色，再把內容填進去。這個順序上的差別看起來細微，實際上決定了後續每個畫面的取捨標準：當版面塞不下所有資訊時，有概念的設計知道該犧牲什麼、保留什麼，沒有概念的設計只能平均地擺，而平均地擺正是多數 AI 生成介面看起來都同一張臉的原因。
流程再往下，約束的是承諾的時機。主畫面會先以三個不同的方向並行設計，比較之後才挑一個往下展開。頁面對這一步的說明寫得很直白：讓你不會預設就把第一個想法交付出去。對用慣生成工具的人來說，這一步改變的是對話的結構。你收到的不再是一份要逐條修正的完稿，而是三個可以並排討論的起點。修正完稿時，你的角色是校稿者，逐項回報哪裡不對；比較方向時，你的角色才是做決定的人，說清楚你要往哪裡去。後者對最終成品的影響，通常遠大於十輪微調。
挑選時值得先想清楚標準。三個方向如果只是換了三種配色，能比出來的資訊量很低；真正值得比的是每個方向對主要任務的詮釋。同樣是跑步 App，把跑道當視覺隱喻是一種立場，做成資料儀表板是另一種立場，差別在於你想讓使用者在開啟 App 的第一眼感覺到什麼。概念也會牽動動態的節奏：以入睡村莊為概念的畫面，轉場理應放慢收尾；以跑道為概念的畫面，進度推進理應帶著速度感。這些推論是我從示範概念延伸出來的判斷，技能內部是否真的這樣處理動態，頁面沒有細講，但至少概念決定動態這條規則，作者在流程說明裡寫得明明白白。方向選定後再展開其他頁面，整套介面也才守得住同一個概念，不會每加一頁就漂移一次，回頭改字級時也不會找不到依據。
每個畫面都要過批評者這一關
流程的最後一步是自我檢查。頁面寫的機制是：每個畫面以 iPhone 解析度、用 Apple 自家字型渲染，接著掃描 AI 設計的常見破綻，最後由另一個獨立的批評者評分。渲染條件寫得具體是件好事，解析度與字型都指定了，代表展示畫面和實機之間的距離有被認真對待，而不是丟一張縮圖充數。破綻指的多半是那類一眼就能認出來的通則：每個元素都置中、留白分配得太均勻、漸層與圓角用在沒有理由的地方、圖示選了最泛用的那一套。這些毛病單看都不嚴重，疊起來就是多數生成介面的塑膠感；用另一個角色逐畫面掃描，至少把「檢查」從使用者的責任變成流程的責任。至於批評者怎麼評分、通過的門檻在哪裡，頁面沒有交代，技能檔案也沒有公開的程式碼庫可以對照，這是整個流程裡唯一只能照單全收的環節。
作者用四個示範 App 展示概念的落地方式：Stride 把跑步 App 做成一條跑道，Lull 讓睡眠 App 像一座慢慢醒來的村莊，Fernly 用紙剪貼的質感呈現植物照顧，Parlo 則把義大利語課程做成一副拿坡里紙牌。這些畫面和開頭那組對比圖一樣，都屬於作者頁面上的展示。如果你之前讀過用 unslop 技能幫介面去 AI 味的做法，會發現兩套技能碰的是同一個問題的兩面：unslop 提供的是徵兆清單與事後審查，App Designer 則把檢查往前推到生成流程裡，畫面到你眼前之前先被掃過一輪。兩者能不能真的擋住面善的版型，都取決於批評規則的品質，而這部分目前都不公開，只能靠實際跑一次來驗。
免費版的取得方式也有一個值得記下的細節。頁面上的索取表單除了 email 欄位，還有一個預設未勾選的選項，問你要不要順便收到作者最新技能與實驗的 email，勾了才會訂，取消隨時可以。留信箱拿免費技能是這類個人產品常見的交換條件，把訂閱設計成主動勾選而非預設加入，算是對索取者比較誠實的做法。
免費版與 Pro 的邊界畫在哪
免費版經電子郵件索取，頁面標明 for Claude Code on a Mac，取得門檻是留下信箱而非付費。付費的 Pro 版定價 5 歐元，一次性付款、Stripe 結帳、購買後即時下載，頁面明言包含免費版全部功能再加六項：
| 項目 | 官方頁說明 | 對應的階段 |
|---|---|---|
| Android | 每個畫面在兩種手機上都是原生設計並排呈現，不是把 iOS 畫面直接貼到 Pixel 上 | 雙平台出貨 |
| 動態 | 會動的畫面錄成影片，上架當天就能發布 | 上架宣傳 |
| 文案 | 每個畫面有字數預算，AI 常用語、破折號與塞在付費牆上的長段落過不了檢查 | 內容品質 |
| 付費牆 | 引導與付費牆以轉換為目標，且留在 App Store 與 Google Play 的規則內，不做假倒數、不藏價格 | 營收畫面 |
| 更嚴的批評 | 更大膽的配色、有個性的角色，批評者連只是整齊的稿子都不放行 | 品質把關 |
| 商店素材 | App Store 與 Google Play 截圖的精確尺寸、Play 商店特色圖與雙平台圖示 | 上架素材 |
邊界從這張表看得很清楚：免費版管的是設計階段，概念、三個方向與畫面檢查都在裡面；Pro 買的是從設計推進到出貨，雙平台版本、宣傳影片、文案、付費牆與商店素材。文案那項的檢查清單還開了個小小的玩笑，頁面上被刪除線劃掉的示範正是那批最常見的空話：解鎖你的潛能、生活風格、無縫且毫不費力。用字數預算來約束每個畫面，本質上和設計階段的概念約束是同一套思路，把「寫什麼」也變成可以被檢查的對象，而不是讓模型自由發揮再祈禱它不要抒情。
環境需求也要留意：官方頁寫明需要 Mac、Google Chrome、Claude Code 與 Node.js，Windows 使用者目前不在服務範圍。安裝流程是購買後下載資料夾，在 Claude Code 輸入 hi，約一分鐘裝好，接著向 Claude 描述你的 App，一樣會先收到三個方向再往下走。
價格還有一個細節。作者的技能目錄索引上，這張 Pro 卡片同時標著 Free with Pro 與 Or €5 once，意思是已訂閱作者 Construct 會員方案（分 Pro 與 Ultimate 兩級）的人直接包含在內，非會員才需要單買 5 歐元。目錄裡其他付費技能的定價落在 5 到 15 歐元之間，這個價格帶可以當作作者自己的行情參考，也可以當作日後判斷他新技能定價的基準。
順帶釐清一件事：Pro 給的是設計與素材，不是把 App 做出來的工程。目錄裡另有一個 App Launcher 技能，負責把已經完成的 iOS App 從程式庫送上 App Store 並協助後續成長，兩者是互補關係而非包套。把 App Designer 當成設計階段的工具看，對它涵蓋範圍的預期會準確得多。
時間軸與目錄脈絡
兩個頁面都沒有發布日期標記。免費版頁面在網頁封存服務裡最早的成功快照是 2026 年 10 月 5 日，也就是說免費版至少在那之前就已經上線；Pro 頁面到 2026 年 11 月 12 日為止查無任何封存紀錄，而封存服務沒有收錄不等於頁面不存在，所以 Pro 的上架日期嚴格來說仍是未知。能確定的續作關係反而寫在頁面上：Pro 對自己的描述就是免費版 App Designer 的後續（the follow-up to the free App Designer skill）。頁面上一句 The free App Designer went viral 是作者自己的說法，規模沒有第三方數字可以佐證，當成行銷文案看待就好。本文記到的時間與價格，對的是 2026 年 11 月 12 日的兩個官方頁面。
目錄脈絡對判斷也有幫助。Construct 區的 30 個技能裡，App Designer 是免費的入口商品之一，周圍是廣告投放、影片剪輯、機器人相關等免費與付費技能混編，收費的如 Meta Ads 2.0 要 5 歐元、Video Editor Pro 要 15 歐元，再加上一層會員方案把付費內容打包。這是一個持續出貨的個人商店，免費版承擔的角色更接近展示作者流程設計能力的櫥窗。對讀者來說，這反而降低了試錯成本：留個信箱就能拿到完整的三步流程，跑起來不合用，退訂就走，沒有實質損失。
現在怎麼用這個判斷
如果你的需求是把一個主要畫面的視覺方向想清楚，免費版涵蓋的流程已經足夠。重點是拿到三個方向後認真比，別讓第一個順眼的版本直接過關；比較時盯著每個方向對主要任務的詮釋，而非配色偏好。確認概念能貫穿字型、色彩與動態再往下展開，後面的頁面才不會各走各的，回頭調整時也才有共同的依據。
如果你的 App 已經要上架，缺的是雙平台檢查、付費牆設計與商店素材，5 歐元的 Pro 才開始有理由，而且買之前值得回官方頁再核一次價格與六項內容，個人商店調整定價不需要預告。批評者的評分規則與 AI 破綻的判定標準沒有公開，這是所有品質宣稱共同的邊界，也是最後一道要自己動手驗收的關卡。比較務實的驗法是拿一個你已經很熟的 App 概念跑一次：看三個方向是否真的給出三種對主要任務的不同詮釋，看批評者攔回的理由是不是你認同的理由。兩關都過了，再讓它參與正式專案也不遲。
