Communitygithub.com

madebyjred-sudo/taste

用于审计或清理 Web 应用 UI,并生成带有对比报告的改进方案。

taste 是什么?

Taste 是一款专业的 UI 审计与清理工具,主要面向 Web 应用开发者。它能对运行中的 Web 应用进行视觉审计(按视图截图、定位问题来源、按层级评分),并自动将改进方案应用到隔离的克隆仓库中,生成详细的“前后对比”报告。该工具支持五种操作模式(修正、清理、改进、编辑、创建),并能自动检测“基线噪声”以避免误报。Taste 尤其适用于需要严格遵循设计规范或进行大规模 UI 重构的场景。它支持 Claude Code 等 AI 代理集成,也可独立运行并输出任务指令。通过 `stageshow` 子技能,Taste 还能帮助用户制作高质量的产品演示场景。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/madebyjred-sudo/taste/tree/HEAD/skill

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

taste 是做什么的?

审计一个正在运行的 Web 应用(按视图截图、定位问题来源、按层级评分),并在一个独立的克隆仓库中生成改进方案,附带前后对比报告。绝不会操作原始仓库。

何时使用

  • 当有人要求你审查、清理、修正或改进一个带有开发服务器的仓库的界面时。
  • 在进行实际仓库修改前,需要对 UI 更改进行可视化验证。

配置文件与工作空间

  • perfiles/REPO.json 文件位于 taste 仓库中:包含 mundo(shift | personal)、perfil(libre | estricto)、url、arranque、lecturas_permitidas(仅允许读取的 POST 请求列表 {metodo, ruta};其余 POST 请求将被拦截)、previo({nombre, puerto, comando}:服务器启动前的准备工作,例如到开发数据库的 SSH 隧道;如果端口关闭,taste 会尝试打开它,并且只关闭它自己打开的连接)、entorno(服务器所需的额外环境变量:用于关闭会写入数据的后台任务,例如定时清理任务)。
  • 一次运行只读取 biblioteca/externa 和其自身工作空间的库。绝不会读取另一个工作空间的库。
  • 严格模式(适用于有严格品牌要求的客户产品):绝不更改令牌或品牌标识,也不添加任何新元素。

层级 (Tiers)

A(最低要求)、AA(默认,包含 A + AA)、AAA(全部)。层级的评分会包含该层级及以下层级的所有发现。

五种模式

模式功能
correccion修复发现的问题,不改变布局或现有元素
limpieza仅移除:标语、帮助文本、次要标签、重复项、无用样式;将“vos”改为“tú”,移除长破折号
mejora在现有框架内进行优化
edicion仅执行 --pedido TEXTO 中指定的操作
creacion从库中创建新的页面或组件

完整流程

  1. taste MODO --repo RUTA --tier AA [--solo VISTA] [--agente ninguno|claude] [--pedido TEXTO] 审计应用,为每个视图生成 paquete/VISTA.md 文件,将仓库克隆到 CORRIDA/arbol 并切换到 taste/AAAAMMDD-HHMM-MODO 分支,创建 CORRIDA/TAREA.md 文件。使用 ninguno 参数将输出一条可直接粘贴到你的 AI 代理中的指令。
  2. 读取 TAREA.md 文件和每个包(截图、按规则列出的问题及其来源文件:行号、适用的规则、灵感来源及相同模式的组件)。
  3. 创建 CORRIDA/criterios.json 文件:包含每个发现或同一规则下的问题组。每个标准包含 regla(rules.json 中的 ID 或 inspo:ID)、criterio(一条祈使句)、por_que(包含问题来源文件:行号)、ux、dx、ax(改善 | 不变 | 恶化 + 5 个词的描述)、accion、componente、archivos、estado、motivo_descarte。
    • 如果任何操作会使 UX、DX 或 AX 恶化,该标准将被丢弃(由 taste 强制执行)。
    • 在清理模式下,所有非 quitar 的操作都被标记为 propuesto。
  4. 仅将状态为 aplicado 的标准应用到克隆的仓库中,每个标准或每组标准作为一个单独的提交。绝不执行 push 操作。
  5. 对克隆仓库执行类型检查(如果存在 tsconfig 文件,则运行 npx tsc --noEmit)。
  6. taste comparar --corrida CORRIDA:在原始端口 + 1 的端口上启动克隆仓库,重复截图相同的视图,将截图保存在 capturas/despues 目录,重新检测问题,运行防护检查,并生成 informe.html 报告。

基线噪声 (Ruido base)

审计会对每个视图在同一个仓库上截图两次,并计算视图自身的变化量(vista.ruido),该变化由动态数据、时钟、延迟加载等因素引起。防护检查会将对未修改视图的允许变化阈值提高该噪声量。--sin-ruido 参数会跳过此步骤(运行速度快一倍,但防护检查会更加严格,可能不够公平)。每次截图都会使用一个新的浏览器上下文:一次点击留下的状态(例如 localStorage 中折叠的侧边栏)不会影响下一次截图。

阅读报告

  • 报告顶部:整体层级评分(之前、之后及变化量);视图索引及其评分变化量。
  • 每个视图:桌面端和移动端的前后对比截图;每个标准及其规则、来源、UX/DX/AX 影响和状态。
  • 防护检查结果 no ok 或评分出现负变化:不要合并该分支。请检查原因。
  • 合并分支:git fetch CORRIDA/arbol RAMA

场景:展示产品 (Stageshow)

Taste 用于清理真实应用;而 展示产品(如落地页主视觉、功能卡片、动画演示)则需要使用 Benji Taylor 开发的 stageshow 技能,并附加 Taste 的规则。这不是一个独立命令。

  • 默认边框:金色 finder-glass(场景 860 x 440,窗口位于 40/40/780/480,底部出血;紧凑模式 400 x 340,窗口位于 20/20/460/400,右侧和底部出血;圆角半径 14;三层背景,颜色已重映射为品牌色)。几何参数和截图方式:请参考 biblioteca/externa/golds/marco-finder-glass.md。
  • 在构建演示场景前,先使用测试会话(只读)截图真实应用,并从 CSS 中提取其令牌。
  • 已审核的场景 = 每个工作空间自己的 gold 文件,位于 biblioteca/<mundo>/escenas/(或使用 TASTE_BIBLIOTECA_SHIFT 环境变量指定第二个工作空间)。
  • 彩排:Stageshow 的 film.mjs --gate 命令仅作为参考,不是最终裁决(即使对自身 gold 文件,它也有一半概率不通过)。
  • 使用 Taste 完成清理后,场景会在已清理完毕的页面上构建:首先是产品本身,然后是产品的展示方式。

故障排除 (Trampas)

  • 如果某个视图加载失败,请查看 vista.error 文件:bloqueada POST /api/... 表示一个 POST 请求未在 lecturas_permitidas 中注册(只有当你阅读过相关代码并确认它不会写入数据时,才能添加它);500 错误通常由数据库问题或隧道连接断开引起,请检查 corrida.notas 文件中 previo 的说明。
  • 克隆仓库的 node_modules 目录是原始仓库的硬链接:不要在克隆仓库中安装依赖。

相关技能