用途:用于落地页、营销站、仪表盘、应用界面或组件的 UI 构建、改版与润色,也用于在宣布前端工作完成前做“举证”检查。它把工作分成四步:先写一句方向定义(页面类型、受众、风格、字体搭配、色板与一个标志性细节),再用工艺底线约束排版、配色、布局、图标、文案、状态、动效与移动端适配,然后运行门禁在真实浏览器中验证,最后由人工查看截图判断页面是否仍显得平庸。
主要能力:门禁脚本 scripts/gate.py 用无头 Chromium 在 390x844 与 1440x900 两个视口渲染页面,打印每条发现及其规则、视口和元素,保存整页截图,并在存在 fail 级发现时以退出码 1 结束。工艺底线涵盖字体、对比度 4.5:1、避免紫色到蓝色渐变与渐变文字、每节使用不同布局、真实 SVG 图标、自带文案、各控件状态、尊重 prefers-reduced-motion、触控目标至少 44px、不得横向滚动等。
使用方式:先安装依赖 pip install playwright && python3 -m playwright install chromium,然后运行 python3 skills/tastegate/scripts/gate.py <path/to/index.html 或 http://localhost:3000> --out .tastegate;批量修复所有 fail 发现后重跑,再人工打开 .tastegate/desktop.png 与 .tastegate/mobile.png 复看。
限制:门禁只检查机械问题,无法判断页面是否无聊、偏离品牌或不适合受众,因此第四步不可省略;需要 Playwright 和无头 Chromium,以及可访问的文件路径或本地服务器;若简报指定字体、颜色或年代,则以简报优先;不能替代人工无障碍审计或真实用户测试。脚本对项目只读,只渲染、测量并输出截图与发现,不修改源文件;请仅在本地或已授权的测试环境运行。