Findings24Findings24
Tastemaker logo

Tastemaker

認領

Tastemaker 是專為程式代理設計的工作流程技能，能將產品脈絡與視覺參考轉化為 UI 畫面、素材、經對比檢查的配色系統與在地設計決策，適用於 Claude Code、Windsurf、Gemini CLI 等代理。

AI設計助手AI代理開發AI開發者工具
訪問網站
Tastemaker preview

Tastemaker 是什麼

Tastemaker 是專為程式代理設計的工作流程技能，能幫助它們以更一致的視覺系統來建立介面。它會接收產品脈絡與參考素材，並將其轉化為畫面、素材、檢查項目，以及代理可在後續工作中重複使用的設計決策。

與其要求代理「有更好的品味」，這個產品更著重於具體步驟：界定畫面範圍、奠定配色基礎、驗證對比、整合素材、建立介面，並將決策儲存在本地。首頁將其定位給 Claude Code、Windsurf 與 Gemini CLI 等代理，輸出內容會保留在專案旁，而不是依附於託管服務。

功能

根據簡報進行畫面界定

工作流程會先根據產品簡報界定畫面範圍，之後才進行色彩或排版選擇，因此版面系統是從結構開始，而非憑空猜測。

具對比檢查的配色方案生成

它可以從來源影像讀取參考像素，或為專案氛圍生成新的配色方案，接著以對比計算檢查所有合法的色彩配對。

建立視覺素材

Tastemaker 會輸出一致的素材組合：圖示、必要時的影像、構建出的標誌，以及 favicon，而不是 emoji 佔位符或不完整的視覺系統。

可渲染的證據，而非純文字主張

同一次流程也能產生 UI 模擬稿、流程圖、圖表、前後對照狀態與 GSAP 動畫，因此畫面是以證據形式建立，而不只是描述性文字。

以本地檔案保存專案記憶

已定案的專案偏好會保存在本地檔案中，開發決策也會作為設定檔延續到後續工作。

適合儲存庫的輸出

網站展示的是純文字、以檔案為基礎的輸出模型，使用 Markdown、Python、SVG、CSS 與 JavaScript，讓結果可在儲存庫中直接檢視。

Tastemaker 的適用情境

  • 行銷與產品登入頁

    當你希望程式代理產生具有一致配色、適當字體搭配、真實圖示與動態效果，而不是一般初稿的登入頁時，就可使用它。

  • 應用程式 UI 狀態

    適用於需要由一致視覺系統構建空白、載入中與已填入狀態的產品或應用程式外殼。

  • 以參考為基礎的重新設計

    當參考圖片、情緒板或既有品牌方向需要轉換成代理可實作的實際 token 與素材時，就可使用它。

  • 前後提示比較

    適用於你想檢視同一提示在安裝此技能前後表現差異的比較工作。

  • 設計系統延續性

    當專案需要本地風格記憶，讓後續畫面維持相同視覺決策，而不是在不同工作階段之間漂移時，就可使用它。

Pros and Cons

Pros

  • 採用具體且有明確步驟的工作流程，而不是依賴含糊的提示。
  • 產生可檢視的專案檔案與素材，且都保留在儲存庫中。
  • 以數學方式檢查對比，而不是只靠目測決定色彩。
  • 支援以參考資料進行視覺錨定，包括讀取來源影像像素。
  • 決策會本地保存，讓後續工作可重用已核准的選項。

Cons

  • 定價頁面回傳 404，因此可取得的定價資訊只能來自首頁文字。
  • 來源未提供完整的整合或團隊層級工作流程文件，因此這些產品面向只能部分佐證。
  • 它看起來更聚焦於 UI 與設計輸出，而非更廣泛的應用邏輯或後端工作。

FAQ

如何安裝並開始使用 Tastemaker？

Tastemaker 會透過像 `npx skills add codeswithroh/tastemaker` 這樣的指令，安裝到程式代理的工作流程中。首頁也說明，當你請代理建立、調整樣式或改進 UI 時，它就能觸發，不需要特殊關鍵字或託管 API。

Tastemaker 支援哪些程式代理？

它是為 Claude Code、Windsurf 和 Gemini CLI 等程式代理所設計。首頁也提到 Claude Code 外掛市集與手動安裝路徑。

Tastemaker 是免費還是付費？

來源顯示有免費核心功能，另有贊助者專屬的 Aesthetic Modes，價格為每月 $8。網站上沒有獨立的定價頁面可用。

Tastemaker 會在專案中留下什麼？

這個工作流程會產生具體的專案檔案與素材，例如 `.tastemaker/style-lock.md`、`decisions.log`、`profile.md`、`design/assets`，以及實際畫面的實作檔案。

Tastemaker 主要用於哪些 UI 工作？

它適用於像登入頁、應用程式外殼、產品畫面與比較頁等 UI 工作，在這些情境中，代理需要參考導向的視覺、經檢查的色彩對比、素材與動態效果。

Quick Facts

類別
開發者工具
主要用途
適用於程式代理的 UI 與設計工作流程
支援的代理
Claude Code、Windsurf、Gemini CLI
安裝
`npx skills add codeswithroh/tastemaker`
輸出
Markdown、Python、SVG、CSS、JavaScript，以及本地專案檔案
定價形式
免費核心功能，另有每月 $8 的贊助者專屬模式