TasteSkill v2：給 coding agent 的網站設計 Skill，20 種設計方向、三種螢幕寬度自檢，不再產出平庸落地頁

原文：Threads（@seattle.fire，分享連結）

摘要

TasteSkill v2 是高中生 Leon Lin 做的開源 agent skill（skill = 給 AI coding agent 的一包工作流程說明與工具），
目標是讓 Claude Code、Codex 這類 coding agent 真的「設計」網站，而不是吐出一頁千篇一律的 AI 落地頁。
它的設計方向來自作者研究 247 個精選網站歸納出的 20 種風格，流程上先分析需求找出客戶獨特之處、再從三個候選方向挑一個，
做完還會開瀏覽器在三種螢幕寬度截圖自檢、最多修三輪。代價是一次要跑 30～45 分鐘、吃掉幾十萬 tokens。

重點

• 三步驟工作流：(1) 分析需求簡報（brief），找出這個客戶跟別人不一樣的地方，從 20 種設計方向裡提出三個選項；(2) 用開源圖庫（公有領域、Creative Commons）的照片與影片實作，並標註來源；(3) 在三種 viewport 寬度（桌機、平板、手機）測試，標出問題後迭代，最多三輪
• 20 種設計方向：來自對 247 個精選網站的研究，是結構化的美學指引，不是泛泛的「做得好看一點」；選定方向後會先訂一個貫穿全站的統一概念（unifying concept），再開始寫程式
• 安裝（Claude Code）：

  /plugin marketplace add Leonxlnx/taste-skill
  /plugin install taste-skill@taste-skill
  

  Codex 則是 codex plugin marketplace add Leonxlnx/taste-skill 與 codex plugin add taste-skill@taste-skill
• 環境需求：Node 22 以上、Chrome／Edge／Chromium（截圖自檢用）、網路（只用來抓圖片）；不需要任何 API key
• 成本：一次完整建置約 30～45 分鐘、「幾十萬 tokens」，不是拿來快速試水溫的工具
• 適用範圍：對外的公開頁面（官網、落地頁），不適合儀表板或應用程式畫面；框架不限（React、Vue、Svelte、純 HTML）
• 上線前注意：圖片是公有領域／CC 授權的替代素材，正式上線要換成自己的
• GitHub：https://github.com/Leonxlnx/taste-skill

個人洞見

這是「AI 網頁沒審美」系列的又一個解法，跟 設計 Skill＋老套禁用清單＋截圖自檢 的思路幾乎一樣，
差別在 TasteSkill 把「先選方向再動手」與「開瀏覽器三種寬度截圖、修三輪」做成固定流程，而不是靠一份清單提醒。
跟 impeccable、Design Skill 治 AI Slop 一起看，
可以歸納出目前的共識：要治 AI 設計的罐頭味，關鍵是給方向（不是給模板）＋讓 agent 自己看成果；
缺點是 30～45 分鐘與幾十萬 tokens 的成本，適合正式專案，不適合隨手做個頁面。