Taste 是一个在编写标记前加载的设计技能,用于构建、重建或重设计整个网页、站点、应用界面或流程(如落地页、仪表盘、结账、设置等)。其核心理念是:模型的默认页面是所有见过的页面的平均值;该技能把每个默认替换为从主题中提取的选择,完整构建,并在真实浏览器中查看结果。用户指令、项目品牌和设计系统优先于技能中的一切规则。
使用方式上,它强调以少量大步完成工作,因为每次额外工具调用都会重读整个对话。加载技能后,整个任务分为五轮及最终回复:一条命令列出项目并打印源文件(各文件有截断上限,数据文件只显示前几行,可按需附加 app-screens、ux、motion、range 等参考文件);一条命令用 heredocs 整份写入所有文件并以运行截图工具结束;打开截图工具生成的单张检查表;一条命令一次应用所有修复并再次运行截图(--fails-only)及打印 git 状态;再次打开检查表。
流程分为六步:第一步读主题,从一次阅读中记录读者、其必须做的一件事、固定品牌色与字体、真实存在的图像,并列出八个只属于该主题的细节;第二步内容优先,按读者需要的顺序为每个部分写一行主张及证明,再写真实文案,首屏用大字回答读者的第一个问题,每条标题控制在两行内,不虚构客户、引言、评价、标识或统计数据;第三步方向与想法,写一句「某主题独有的细节塑造页面的布局、字体或交互」,该想法须塑造至少三个部分;系统用 CSS 自定义属性定义字体、颜色、布局、层级和动效,并列出禁止使用的元素(如全大写小字间距标签、胶囊徽章、渐变文字/按钮/背景、发光和静止阴影、磨砂导航、三张相同图标卡、全部居中、标题中强调词、01/02/03 编号、波浪分隔线、色块中的 emoji 或图标等);第四步用现有技术栈和项目 token 构建,每个文件一次写完,图像优先用项目自有图片,否则用 CSS 或 SVG 绘制主题材料,再否则仅用字体和颜色,软件功能以自身界面的小型可运行片段展示,不伪造照片,桌面每屏是一张海报,手机长列表变为紧凑行或区域内滚动,语义上只有一个 h1、真实链接和按钮、alt 文本,目标尺寸至少 24px、手机上 44px,并处理悬停、按下和焦点可见状态及减少动效偏好;第五步运行 node <skill>/scripts/look.mjs <项目文件夹或 HTML 文件> 在 390 和 1440px 宽度截图,检查表将每项检查标为 FAIL 或 WARN,需批评的是截图而非代码,在笔记中写四行:首屏五秒阅读、三个最大可见问题、想法是否延续过首屏;一次编辑修复所有 FAIL 和三个问题后重跑截图并再次打开检查表,若第二次查看后仍有 FAIL 则停止;若无法运行浏览器需说明页面未经验证;第六步回复,包含方向(想法句及字体、颜色、布局各一行说明)、构建内容(部分、状态、动效、变更文件、手机布局差异)、查看结果(宽度、最终 FAIL 与 WARN 数量、主要剩余弱点)、需替换项(每个虚构细节、推断规则和绘制替代物),且只报告最后一次编辑后运行命令的结果。文末说明若在 git 仓库中截图存于 .git/ 无需清理,否则完成前删除 .taste/。适用场景包括落地页、商店、活动页、个人站点、作品集、仪表盘、排班、队列、管理界面,以及结账、注册、设置、计算器或配置器、搜索与筛选等任务流程;限制包括需在具备项目文件的环境中使用、需能运行 Chrome(否则页面未验证)、依赖 heredocs 等 shell 写法、对虚构内容和默认模板有严格约束。