# Tastemaker Tastemaker 是一项面向编程智能体的工作流技能，可将产品背景和视觉参考转化为 UI 界面、素材、经过对比度检查的配色系统，以及本地设计决策。适用于 Claude Code、Windsurf 和 Gemini CLI 等智能体。 - Findings24: - 网站: - 价格: Freemium - 分类: AI编程助手, AI设计助手, AI开发者工具 ## 什么是 Tastemaker？ Tastemaker 是面向编码代理的工作流技能，可帮助它们以更一致的视觉系统构建界面。它会接收产品上下文和参考资料，然后将其转化为界面、素材、检查项以及可被代理在后续工作中复用的设计决策。 它并不要求代理“拥有更好的品味”，而是聚焦于一系列具体步骤：界定界面范围、确定配色基础、验证对比度、整理素材、构建界面，并将决策本地保存。首页将其定位为适用于 Claude Code、Windsurf 和 Gemini CLI 等代理，输出内容保留在项目旁边，而不是托管服务之后。 ## Tastemaker 能做什么？ ### 基于简报进行界面范围界定 该工作流会先根据产品简报对界面进行范围界定，然后再决定颜色或排版，因此布局系统从结构而不是猜测开始。 ### 带有对比度检查的生成式配色 它可以从源图像中读取参考像素，或为项目氛围生成新的配色方案，然后用对比度计算检查所有合法的颜色搭配。 ### 构建视觉素材 Tastemaker 会输出一套连贯的素材集：图标、需要时的图像、构建出来的标志以及 favicon，而不是表情符号占位符或不完整的视觉系统。 ### 可渲染的证据，而非纯文本说明 同一轮流程还能产出 UI 线框图、流程、图表、前后状态和 GSAP 动效，因此界面是作为证据被构建出来，而不是仅仅作为描述性文案。 ### 本地文件中的项目记忆 已确定的项目偏好会保存在本地文件中，开发者决策会作为个人资料保留到后续工作里。 ### 适合仓库检查的输出 网站展示的是一种纯文本、基于文件的输出模型，使用 Markdown、Python、SVG、CSS 和 JavaScript，使结果可以在仓库中直接检查。 ## 使用场景 ### 营销页和产品着陆页 当你希望编码代理产出具有连贯配色、合适字体搭配、真实图标和动效的着陆页，而不是通用初稿时使用。 ### 应用 UI 状态 用于需要基于一致视觉系统构建空状态、加载状态和已填充状态的产品或应用外壳。 ### 基于参考的重设计 当参考图像、情绪板或现有品牌方向需要转化为代理可以据此构建的实际 token 和素材时使用。 ### 安装前后提示对比 用于对比工作，想查看同一个提示在安装该技能前后表现如何时使用。 ### 设计系统连续性 当项目需要本地样式记忆，以便后续界面保持相同视觉决策而不是在不同会话之间漂移时使用。 ## 常见问题 ### 如何安装并开始使用 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 任务。 ## 快速信息 - **类别**: 开发者工具 - **主要用途**: 面向编码代理的 UI 与设计工作流 - **支持的代理**: Claude Code、Windsurf、Gemini CLI - **安装**: \`npx skills add codeswithroh/tastemaker\` - **输出**: Markdown、Python、SVG、CSS、JavaScript 以及本地项目文件 - **价格形态**: 免费核心功能，赞助者专享模式每月 8 美元