该技能以 Markdown 指令集与配套脚本的形式提供,用于给网页设计确立美术指导方向,替代模型默认产出的通用版式。
用途:在动手做页面前,先确定这个页面为何属于当前项目、而不是任意同类项目。它把“设计方向”和“概念”分开处理:方向是构图方式,概念则必须来自项目本身(名称含义、地址与街区、数字、真实产出、材料、仪式、印刷品等)。
主要流程:
- 阅读简报与项目:确认主题、受众、页面要促成的动作、技术栈、既有品牌,以及真正存在的图片素材。
- 写论证:把页面列成“主张+论据”,每节一行,没有主张的节直接删除,避免套用首屏、客户 logo、三特性、推荐语、定价、行动号召的固定顺序。
- 在 regards.design 上调研方向:从项目清单而非行业类别出发做情绪、组件、扩展三类检索;用 view_section 逐一看像素再取舍,保留五到八个参考,同一站点最多一个,并为每个参考写样本行(takes / leaves / becomes)。
- 寻找概念:写成“本页上,[属于该主题的某物] 变成 [参考所指的装置]”,并用最近的真实竞品做检验。
- 写文案:先完成纯文本文案稿,标题在每个宽度下不超过两行,内容写全,不虚构客户、评价、媒体或经营数据。
- 制作:先定设计令牌,再做首屏与各节,相邻节不得共用版式;图片优先用项目自有、生成、开放馆藏真实图片、代码绘制;页面至少四张真实图片。
- 检查:运行 lint.mjs 扫描源码禁用模式,inspect.mjs 在 1440、768、390 像素下测量并截图,修掉所有 FAIL。
- 观看:按评审清单看截图,并把成品与所用参考并排比对,最多三轮修改。
- 动效:最后加入动效层,至少八个真正移动的元素,只用 transform 与 opacity,并提供 prefers-reduced-motion 降级。
使用方式:需先接入 regards 工具(search_sections、view_section、get_section、page_sections、similar_sections),缺失时可用 claude mcp add --transport http regards https://mcp.regards.design/mcp 连接,或退回内置方向库并在报告中说明方向是抽取而非调研所得。脚本需 Node 22+ 与已安装的 Chrome、Edge 或 Chromium,无需安装依赖;assets.mjs 需联网但不需要 API 密钥。命令中的 <skill> 为技能所在目录,须在项目根目录运行,工作文件写入 .taste-skill/。
适用场景:网站与落地页的概念与视觉方向设计,尤其适合需要摆脱模板感、需要真实参考支撑的页面项目。限制:检索工具缺失时只能使用内置方向库;检索为即时搜索且按分钟限流,深度搜索消耗额度;不得复制参考的布局、文案、标志或图片,也不得使用参考的授权字体。