Visant Design 是一套端到端 UI/UX 技能,目标是把“清理 AI 味”或“改进 UX”的请求推进到一张你亲眼看过的完成屏幕。资料指出,规则手册看不到你的产品和结果,而该流程要求同时看见两者。
用途与路径选择:技能按请求分为四条轨道。若请求是“清理 AI 味”“看起来像 AI 做的”“去掉那些痕迹”,走 Clean 轨道,保留原有设计只移除痕迹。若请求是“改进”“重新设计”“端到端 UI/UX”“这个看起来很差”,走 End to end 轨道。若请求是“审查”“评审”“这好不好”,则交给 visant-killer 且不做任何改动。若只涉及一个细节,如动效、图表、面板、组件演示,走 Single topic 轨道。
Clean 轨道:运行 node <skill-dir>/scripts/check.mjs <ui paths> --url <running app>,逐一按根因修复发现的问题,隐藏问题指向的对象不算修复。随后阅读截图,修复检测器看不到的痕迹,例如装饰性渐变、把紫色当作“AI 色”、发光、用 emoji 当图标、卡片套卡片、每个标题上方的眉标(eyebrow labels)、夸张用词、编造数字。反复运行直到干净,并报告移除了什么。
End to end 轨道:先看见。启动应用并运行上述 check.mjs,先读截图再读代码;若应用无法启动,先说明并修复。接着为每个屏幕写一行任务说明:谁会来、来做什么、哪个数字会变化。按界面类型归类:落地页、定价页、注册、引导属于获客;队列、表格、编辑器、管理后台属于工作;支付、权限、删除、金钱属于信任。然后依据截图按顺序运行 foundations.md 进行诊断,从最大的问题开始列出问题清单。之后先删减再添加:对每个元素追问它帮助哪个决策,答不上来就删掉。构建时优先使用产品自身的 token 与组件;只有当屏幕确实需要时才启用动效与数据的相关手册。文案须依据产品真实行为撰写,没有的数字保留为可见占位符。最后再看结果:重新运行 check.mjs,在每种宽度下阅读新截图并与旧截图对比,以最苛刻设计师的问题自问“我会截下什么发回去”,修复最大的问题并重复,最多三轮。报告需说明改了什么、每项改动意在推动哪个数字、删了什么及原因、查看了哪些宽度、哪些没有检查;重新设计是一个假设,要说明如何衡量。如果 check.mjs 返回 NOT VERIFIED,回答的第一行必须说明这一点,工作尚未完成,并停止启动的任何服务器。
Single topic 轨道:按具体请求查阅对应文档,动效、过渡、加载、骨架屏读 visant-motion;图表、仪表、滑块、指标块、控制面板读 visant-refine;单屏的层级或该删什么读 visant-frontend;过于杂乱、标签过多读 declutter;组件演示、库页面、模拟产品读 component-showcase;用于主视觉的假产品 UI 或光标演示读 stageshow(第三方:npx skills add benjitaylor/skills --skill stageshow)。在编写组件前,先检查仓库的基础组件,再检查 @visant/ui。
相关技能:visant-killer 审查现有内容;visant-frontend 决定应该存在什么;visant-motion 处理如何运动;visant-refine 处理数据与控件;stageshow 为主视觉或功能卡生成假产品 UI;visant-copy 处理屏幕上的文字;visant-preflight 用于大型客户项目在动任何屏幕之前。若相邻手册缺失,可运行 npx skills add pedrojaques99/visant-skills-public --skill <name> 安装。
执行原则:一直工作到结束,不要停下来提问;只问代码无法回答且会改变构建内容的问题;遵循产品自身的设计系统与组件,只有在完全不存在时才新建。
限制与未提供信息:该资料未说明收费、价格、平台支持范围、效果数据或具体检测规则清单;这些事实暂未提供。