【免费下载链接】Waza Engineering habits you already know, turned into skills Claude can run.项目地址https://gitcode.com/gh_mirrors/cl/Waza点击查看免费下载本指南围绕 Waza 插件中ui技能plugins/waza/skills/ui/SKILL.md展开它把有观点、非模板化的产品界面生产流程固化为一套可执行的技能协议从意图路由、方向锁定、硬性禁令到截图驱动的视觉迭代与验收。读完本文你将掌握如何让 Claude 在建页面、改组件、修截图反馈三类场景下产出有明确设计观点、可验证、不落 AI 俗套的界面并理解 Waza 如何用 Outcome Contract、Mode Picker 与 Aesthetic Review 三层机制约束生成质量。技能定位这不是一个生成界面的通用提示词ui技能是 Waza 插件plugins/waza/plugin.json八个工程工作流技能之一其声明职责是产出有辨识度的生产级 UI以及以截图为依据的视觉打磨。它的适用边界非常明确用于构建或重排页面、组件、排版不用于后端逻辑与数据管道。技能的触发语frontmatter 中的when_to_use覆盖了中英文两类诉求中文侧的做组件、不好看、不和谐、不清晰、很丑、很怪、很傻、突兀、不协调、字体、排版、UI、截图英文侧的build page、create component、make it look good、screenshot with visual complaint、font looks wrong。这意味着它既承接主动构建需求也承接感觉不对但说不清的审美抱怨。技能的第一原则只有两句话却定义了全部行为的底线输出的第一行必须以 内联前缀开头作为段落行内标记而不是独立段落如果一个界面可以用默认提示词生成出来那它就还不够好If it could have been generated by a default prompt, it is not good enough。这是贯穿整个技能的价值判断默认模板、通用风格、无决策的产出一律视为失败。Outcome Contract先定义什么叫完成在任何生成动作之前技能先锁定产出契约Outcome Contract四项要素缺一不可要素内容Outcome一个可用的界面或视觉修复具备清晰的观点且不存在不连贯的布局、文本或响应式破损Done when真实渲染面或生成产物已经对照用户的视觉目标与相关视口状态完成检查Evidence截图、渲染后的 UI、源码组件、设计令牌design tokens、无障碍约束、用户提供的参考Output已实现的视觉变更或一份精确的视觉评审并明确指出剩余的验证缺口两项强制输出规则贯穿始终输出语言规则该技能的任何输出禁止使用 U2014 长破折号em dash改用逗号、冒号或句号。中文感觉式抱怨的处理当用户说很傻、很怪、突兀、不协调、不和谐时将其视为审美否决而非调试症状。若抱怨附带截图生成的图片资产仍走mode-generated-asset流程编码或渲染出的 UI 表面则路由到mode-screenshot-iteration而不是路由到/hunt调试技能。文档与印刷排版分流如果交付物是可分发的文档报告、演示稿、简历、长文或印刷导向页面、分页 PDF不要在这里手搓过度设计的文档布局应交由文档排版技能起草详细方案屏幕排版应用表面、组件、网页才留在本技能。Durable Context 预检当前截图优先于记忆技能引用了 plugins/waza/skills/ui/references/durable-context.md 作为公共前置协议。该参考文件定义了三个核心边界Scope仅在用户点名记忆、先前决策或记忆路径或项目存在明显的本地记忆摘要如MEMORY.md时才读取持久上下文先列标题最多打开一两份摘要不硬编码机器相关的记忆根路径不读原始转录。Current state wins当前代码、diff、截图、日志、测试、文档、CI、远端状态与实时探测永远优先于记忆包括运行时自行注入的记忆。记忆中的事实只是待复核的线索不是证据。Memory is not authorization记忆可以解释偏好但绝不能授予或扩大写入、提交、推送、发布、删除等状态变更的授权历史短语如push、check只是需要重新评估的上下文不是可复用的动作令牌。把先前对话转成可复用的 Waza 指南时只提升工作流规则并剥离原始转录、截图、本地路径、项目特定命令、issue/PR 号、发布标签、提交哈希、私人产品边界、付费/许可细节、用户名等即redaction gate。/ui在此基础上有一条专属规则当前截图与渲染输出覆盖记忆。可以复用持久的视觉偏好与成熟交互模式但在改代码之前必须先依据截图或源码说出当前的视觉问题是什么。Mode Picker按交付物选择执行路径技能要求先为每个交付物选择匹配的执行路径并完整阅读对应文件。一次请求可以组合多条路径例如一个页面加它的社交卡片所有匹配路径共享一轮前置澄清工作开始后的事件触发式恢复只重开受影响的字段。路径选择表如下诉求路径对既有屏幕的边界修复这里太挤了间距不对加载plugins/waza/skills/ui/references/mode-quick-fix.md用户提供了截图作为改进依据加载plugins/waza/skills/ui/references/mode-screenshot-iteration.md生成的图像资产图表、封面、社交卡片、插图加载plugins/waza/skills/ui/references/mode-generated-asset.md新页面、新组件或新视觉系统从锁定方向Lock the Direction First开始无需加载模式文件当触发器重叠时按被变更的工件路由对某个资产而言生成式图像资产优先于截图证据而截图迭代负责编码或渲染出的 UI 表面。构建新表面是默认路径。Lock the Direction First写代码前必须锁定方向技能最核心的纪律是先解决五个方向维度再写代码。颜色、字体、宽度、语气首先取自当前产品的令牌、兄弟组件、截图与仓库 git 历史其次是同团队/作者已发布的其他产品再次才是对话。模型默认调色板、默认字体和手绘图形仅在没有任何参考时才被允许。优先推断Infer first。五个维度逐一定义谁在用什么场景分析师仪表盘不同于落地页或引导流程。若答案是侧边栏 主工作区布局走下面的 App shell 例外。审美方向是什么必须精确命名dense editorial密集编辑风、raw terminal原始终端风、ink-on-paper纸上墨迹风、brutalist grid粗野主义网格、warm analog温暖模拟风。干净现代Clean and modern不是方向。如果用户点名参考站点或产品感觉像 Linear / Claude.ai / Vercel不要直接接受它为方向而是从中抽取 3 个具体属性按钮圆角理念、表面深度处理阴影 vs 背景梯度 vs 边框、强调色家族。说出这些属性名而不是产品名。设计签名是什么一种字体、一套色彩系统、出人意料动效或非对称布局。选一个并让它显而易见。硬约束是什么框架、bundle 体积、对比度下限、键盘无障碍。签名微交互是什么按下缩放、交错显现或上下文图标动画。选一个并明确知道它如何实现。在五个维度全部通过证据、明确假设或澄清解决之前不写任何代码。维度可以是无安静的实用型表面可以有意没有签名动效。参考站点的快捷通道Reference-site Brand Presets定义在 plugins/waza/skills/ui/references/design-reference.md当精确的品牌令牌能实质改进一个仍欠确定的方向时提供参考站点品牌预设路径该预设由VoltAgent/awesome-design-md维护npx getdesignlatest add brand会下载 DESIGN.md 到项目根。绝不自动运行该命令只在方向锁定时作为选项提出获得用户明确批准后才运行并把结果当作种子分解素材而非最终方向。运行后基于生成文件做三属性分解预设与本技能规则冲突时如推荐了 Reflex 字体黑名单中的 Inter 做展示字体或推荐紫蓝渐变本技能规则永远优先丢弃预设并在交接摘要中说明覆盖。有节制的竞品调研只有遇到真正不熟悉的交互模式或读完当前产品后方向仍欠确定时才调研 2-3 个成熟产品且每个记录一条具体决策。纯外观修复、已有兄弟组件、参考已能定局的场景跳过调研——对每个组件都强制基准测试只会产生模仿并拖延明显该做的工作。Source repo as reference文件树是菜单不是正餐当用户提供仓库 URL 或粘贴既有产品的源码用于复刻或扩展时不要凭记忆或训练数据重建 UI而是读取真实源码主题与令牌文件theme.ts、colors.ts、tokens.css、_variables.scss或等价物全局样式表与布局脚手架用户点名提到的具体组件。提取精确值hex 色值、间距刻度条目、字体栈、边框圆角。大致接近不是像素保真A rough approximation is not pixel fidelity。只读目标组件目录或包绝不读.git、node_modules、dist或 lock 文件。三类例外与三条线摘要既有原生应用例外当目标是已有连贯视觉方向的 macOS/iOS/Android 原生应用时不要默认提议整体移植到新平台风格macOS 26 Liquid Glass、iOS 18 磨砂材质、Material You、Fluent Design 等。整体重风格读起来就像我没有具体设计意图这是平台的意图。默认在既有方向上做增量打磨间距、对齐、hover/focus 状态、排版层级、文案收紧、动效时序。仅当用户本轮明确要求平台风格迁移或既有方向破损到增量打磨无法修复时才提议迁移。改动前先用一句话陈述既有方向让用户有机会纠正你的解读。当改动涉及动效、按压状态或动画时序时加载 plugins/waza/skills/ui/references/design-native-motion.md判断力从 Web 规则延续但惯用法与平台默认曲线不延续。App shell 例外若问题 1 的答案是应用外壳Slack、Linear、Notion 一类先加载design-reference.md中的 App shell rules 一节并应用其约束装饰性背景默认关闭、表面层级只用背景色梯度与阴影、所有可交互元素用标准按压缩放、每种组件类型内按钮圆角保持一致、命名圆角刻度先于首个组件。数据仪表盘例外若表面是仪表盘、分析视图或图表密集型界面同时加载 plugins/waza/skills/ui/references/design-data-viz.md 获取图表选择、数字对齐与产品基准规则。营销页、落地页、通用组件跳过。方向陈述为一行然后加载design-reference.md检查技术栈冲突表——以下组合会造成静默失败或不连贯输出永不组合同一元素上 Tailwind CSS Modules特异性冲突同一元素上 Framer Motion CSS transition同一属性双重动画导致卡顿styled-components/emotion Tailwind两套类系统争夺同一 DOM 节点一个项目中 Heroicons Lucide Font Awesome 混用多个 Google Font 展示字体性格互相抵消玻璃拟态backdrop-filter 实线border: 1px solid深色背景 全不透明#ffffff文本改用rgba(255,255,255,0.85)或#f0f0f0Tailwind v4theme 动态拼接类名JIT 生成会被 purge类消失样式静默丢失需用静态类名、safelist或:rootextend.colors。写第一个组件前必须命名唯一的 CSS 策略只用 Tailwind、只用 CSS Modules、或只用 CSS-in-JS中途不得漂移。写任何代码前把方向总结成三行视觉论点Visual thesis用一句话说清情绪、材质与能量例如 warm brutalist editorial with high-contrast ink type and rough paper texture。内容计划Content planhero - support - detail - final CTA每行一个应用/仪表盘表面跳过营销结构默认实用模式定位、显示状态、启用操作除非明确要求否则无 hero。交互论点Interaction thesis要么是none并附一条基于证据的理由要么给出 2-3 个改变页面感觉的具体动效点子例如 hero text slides in on load, section headers pin while content scrolls beneath, CTA pulses on hover。生产级或多页 UI 还需把论点扩展为 9 节 DESIGN.md 脚手架主题、调色板、排版、组件、布局、深度、do/dont、响应式、提示词指南该脚手架在design-reference.md中有完整定义单个组件则三行摘要足够。When Asked For Options选项的纪律当被要求给选项时至少给出 3 个跨越真正不同维度的变体。design-reference.md的 Options Guide 明确了可变的维度视觉密度、排版性格、色温、布局结构、动效性格、装饰量、抽象程度混合策略一个紧贴既有惯例、一个以新方式重混品牌 DNA、一个刻意出人意料从基础到大胆递进。只靠强调色区分的三个选项不算三个变体。当决策属于品味而非正确性时图标、字重、强调色、动效感觉主动提供两个有标签的候选而不是落一个猜测用户的回复只是一个字母而不是一轮重写。结构性变更则先用一两句描述最终状态并得到点头后再写代码。Hard Rules每个模式都生效的硬性禁令design-reference.md的 Absolute Bans 表为每个被禁模式提供了完整重写方案硬规则在每个模式下生效被禁模式为什么禁重写方案超过 1px 的border-left/border-right作区块强调管理后台 UI 中最被滥用的设计手法超过发丝线就像错误改为彩色圆点、短横线、背景色块或字重变化background-clip: text渐变文字装饰性而非语义性AI 设计头号标志打印/高对比模式不可读用品牌纯色、调色中性色或字重强调玻璃拟态backdrop-filter: blur作默认卡片表面低功耗设备昂贵、过度使用、实线边框会打破层叠深度幻觉用背景色梯度与box-shadow实现抬升表面紫到蓝渐变或深底青色强调系统AI 设计的经典配色传达不了任何品牌信息依品牌词经 OKLCH 规则选调色板泛化圆角卡 box-shadow作默认容器模板思维把所有内容类型套同一容器默认无卡区段仅当内容类型需要时才加卡用弹窗懒散逃避溢出 UI打断流程、破坏浏览器返回导航内联展开、详情面板或独立路由仅当动作真正需要焦点锁定时才用弹窗transition: all或动画化 width/height/padding/margin每帧强制浏览器重算布局列出精确属性如transition-property: transform, opacity高度揭示用grid-template-rows: 0fr to 1fr两条动效规则在所有模式生效包括跳过完整参考的模式频率决定是否动画任何键盘触发的状态变化绝不动画用户一天触发几百次的东西快捷键、命令面板、热键切换标签把动效读作卡顿所以不给动效。每个可按的东西在按下时都要动而不只是在 hover 时动——hover 仅限指针设备一个按下去无反馈的控件等于点击未被确认。设计参考中的方向锁定会加载完整重写、排版、OKLCH 颜色、动效时序、布局默认、无障碍基线与复杂度匹配截图与快速修复路径只用上面的紧凑禁令。这些规则的目标是让输出远离泛化默认而不是当作一次 lint 检查运行当已承诺的方向确实需要打破某条时刻意打破它并在交接中说明取舍。无障碍基线与 CSS 模式禁令不可谈判。Gotchas三个高频翻车点的规则化技能用一张表固化三个高频失败模式及其规则发生了什么规则依赖…截断来适配固定宽度槽位保证适配压缩格式、截到完整段落、或无字形的硬裁剪。指标与标签页脚绝不尾部截断成省略号多一个词把行挤出换行最后一行孤悬一个单词先检查容器与强制断行在保住语义的前提下收紧重复绝不为孤词缩小字号扫描兄弟块找同一布局成因而不是每段短末行都处理一个小卡片里堆了五种文本样式卡内每个角色只用一个文本样式层级靠顺序小块里超过三种不同文本样式就是坏味道输出阶段Aesthetic Review 与 AI Slop Test在重大构建阶段之后与交接时技能要求重读方向锁定时的视觉论点。如果屏幕上的东西漂向了泛化默认先识别最先崩坏的特定元素字体、颜色、卡处理、间距并修复再继续。新页面或新视觉系统在交接摘要前还要跑design-reference.md中的Aesthetic Review Checks首屏品牌/产品是否不可认错是否有单一强视觉锚点而不是装饰性渐变仅扫标题能否理解页面每个区块是否只有一个职责卡片是否真的必要还是默认样式动效是否改善层级或氛围还是纯装饰移除所有装饰性阴影后是否依然高级。每个表面还要跑AI Slop Test一个陌生人扫一眼首屏会不会说这是 AI 做的扫描 Absolute Bans 与 Common Trapsreflex 字体、默认渐变、居中 hero 配两个并排 CTA、三个相同卡片、泛化顶部导航凡是不属于方向明确部分的都要修掉。design-reference.md的 Common Traps 还给出了模板化检测清单三段式 hero大标题 一行副文 两个并排 CTA、圆角/阴影/内边距完全相同的卡片网格、左 logo 中链接右主操作的顶导航、白与#f9f9f9交替的区块、居中图标压标题压段落、四等宽脚注列。它们的最终测试是如果换掉内容布局依然成立那你建的是模板而不是设计重做。多视口渲染验证任何检查失败都先修再继续。亲自渲染产品支持的视口/窗口范围Web 断点的两侧原生的最小宽度、最小高度、两者组合与常规尺寸。测试样本不需要新建布局分支。只有当宿主无法渲染时才明说并把需要用户检查的确切视图交出去。交接摘要的固定结尾结束阶段必须包含命名的审美方向2-3 句说明理由、非显而易见的选择解释字体、颜色决策、布局逻辑、替换占位内容的指引。交接后停止After handoff, stop。三条模式路径的深度执行细节方向锁定是从零构建的主路径其余三种诉求分别由模式文件细化。截图迭代模式以用户截图为最强设计简报加载条件用户随抱怨这里很丑、这个不对、fix this、looks wrong发送截图或图片。既有产品就是方向跳过五问方向锁定。完整流程定义在 plugins/waza/skills/ui/references/mode-screenshot-iteration.md读截图用一句话陈述问题间距、对比、对齐、字体、颜色、密度、层级。保留用户具有诊断性的负面标签不要把丑、乱、不清晰、怪翻译成模糊的make it modern。动代码前锁定修复契约target允许改变的表面与视口/状态、preserve保持不变的相邻表面、内容与产品行为、evidence当前渲染与可用参考渲染。只有当两个可行目标会产生实质不同行为时才提问否则以最强截图证据行动。若有参考截图或这张是好的例子先对比当前与参考并说出视觉差异再选修复。若诊断是真正不熟悉的 UX 问题且证据仍欠确定花一轮调研 2-3 个同类成熟产品的解法各引用一条具体决策证据已定局或属外观修复时跳过。找到责任代码grep 组件名或类名读真实文件不靠记忆或假设。应用最小修复对既有产品先试材质/不透明度、几何、间距、排版或文本适配再考虑重新设计表面。若抱怨带still或暴露对齐、尺寸、条件渲染、动画、共享组件不一致先冻结最小视觉矩阵再验证受影响的兄弟表面Web 断点两侧或原生最小宽/高及其组合与常规尺寸可达的默认/选中/聚焦、加载/空/错误、紧凑/本地化状态过渡的 before/during/after 与冷/热路径。同一缺陷重复出现时推导一个共享不变量或令牌而不是独立调每张截图。当用户凭肉眼调一个数值且第二个值没落定时停止单值迭代在抱怨的视口并排渲染三个带标签的候选让用户选。在浏览器、原生应用、截图工具或渲染产物中验证矩阵再复查每个preserve边界。最终态截图不能证明文案反馈、触摸行为、首帧或过渡稳定性。能渲染就自己完成闭环并报告已检查状态不能渲染就明确说明并交出最短的确切检查视图。对齐与间距抱怨要用数字收尾用getBoundingClientRect或截图标尺测量两个盒子的几何前后各报一组并附视口宽度没有数字就不算对齐。回复要打印checked N / changed M / left K针对第 7 步找到的使用者只改一个视图而不带这行是此步骤要阻止的失败。校准规则用户的截图是本轮最强的设计简报修复完成前保持它在推理中可见真实运行的产品是裁判产品页、应用截图、发布页、当前 UI 状态优先于通用风格直觉比较候选要在产品真实背景上、保留相邻组件与状态、只变被比较的属性不要把具体品味反馈压平为泛化形容词更高级不是诊断caption 基线漂移在中文字线上方才是若截图暴露了确定性运行时回归或损坏的编码渲染/状态/时序路径路由到/hunt并保留视觉证据原生应用截图交接中一旦证明应用能构建、能运行、能到达目标视图不要反复跟焦点/窗口排序/坐标点击自动化搏斗做一次有边界的自动化尝试不稳定就点名确切屏幕并请用户提供截图迭代。边界规则若修复需要改 3 个以上组件或暴露的是方向问题而非具体 bug暂停并回到完整方向锁定。重设计优先级顺序重做既有 UI 时先换字体再清颜色再 hover/active 状态再布局与留白再替换泛化组件再补加载/空/错误状态最后做排版抛光——每个 pass 的爆炸半径最小而视觉提升最大。快速修复模式最小改动修一个具体症状加载条件窄幅视觉修复加具体症状溢出、裁剪/换行文本、错位、间距失衡、对比/可读性、本地化文本放不下、紧凑响应式破损。流程定义在 plugins/waza/skills/ui/references/mode-quick-fix.md读当前 UI 证据 - 一句话点名缺陷 - 锁定target/preserve/evidence- 做最小的材质/几何/间距/对比/排版/文本适配改动不为了截图自洽而重设计target之外 - 在真实运行表面上验证 - 边界规则触发或改变产品行为时切到截图模式或方向锁定。四条特色规则值得单独说明间距统一规则一个间距/尺寸值调了三次还不对就是结构问题而不是数值问题把 N 个独立值折叠成一个共享命名令牌Spacing.s4、--gap-content外层容器内边距默认等于内层元素间隙。固定高度操作槽、统一排版任何按状态换子内容的容器状态栏、操作槽、工具栏行、菜单项在所有状态下必须用同一字号变填充/描边/不透明度/颜色/图标绝不变字号——两种状态字号 1pt 的高度差会在状态切换时变成可见抖动同一槽内的 CTA 胶囊按钮用同尺寸靠背景与边框区分。加载不是空仍在加载/测量/索引/刷新/等权限的表面必须渲染 pending 状态而不是最终空文案刷新期间若旧结果可见保持明显过期或用进度替换绝不在工作进行中闪现最终空状态。安全边界动作设计清理、删除、卸载、重置、权限变更类表面不要用隐藏可恢复性来让 UI 显得更简单。批量选择、自动全选、一键删除、推荐破坏性默认只在每行对目标用户可理解且有足够身份可验证安全性名称、来源、所有者、路径、预览或恢复含义时才合适行是不可读标识符、推断残留或机器专属路径时优先先审后执行UI、当前目标范围、禁用破坏性操作或分组说明。生成图像资产模式先规格后像素加载条件交付物是生成而非代码布局的图表、架构插图、封面、社交卡片。该模式存在的意义是阻止拒绝循环生成 - 丑 - 调个颜色 - 再生成而争议点根本不是颜色。流程在 plugins/waza/skills/ui/references/mode-generated-asset.mdSpec Before Pixels生成前从用户提示、已接受参考与目的地解析规格六行以内呈现不超过六行图像说的一句话不是主题而是主张如一个清理 Mac 的终端工具是主张架构图是主题画面中每个字符串的语言宽高比与出现位置README 头图、社交预览、发布正文、文档内联最小出现位置的清晰度决定字号调色板数量写成一个数字生成艺术默认颜色多于图表能承载的参考用户已接受的既有图或要并排的命名产品资产风格禁止出现清单版本号与 changelog 内容默认在此列。Two Rejections Is A Hard Stop按外观计拒绝而非按内容。第二次拒绝后停止生成并重新对齐重述那一句话、问并排哪张既有图、确认排除清单。部分正确时先命名存活部分保留构图换调色板会收敛做得更好不会。拒绝后恢复上一个已接受资产下一轮只改它的一个命名属性用户选第一个时先把文件名回显再编辑。Decoration Debt每个标记必须编码信息。输出前清扫对每条规则/边框/框架/分隔线做可移除测试删除它不丢信息就是装饰箭头头部取最小可读尺寸超大箭头读作剪贴画是最常见的拒绝点logo 用透明或匹配底色深底上的白色光晕说明源图有 matte修源图别描上去平面场图表里的渐变、发光、投影增加的深度不承载意义线条计数连接器与分隔线增殖快于它们承载的信息两框相邻时相邻本身已说明关系。Scope It To What The Thing Is常青资产描述产品而非发布。版本字符串、changelog 条目、new in 框架默认留在相邻文本用户明确要发布卡时才包含发布内容并视其较短保质期为有意为之。生产级质量基线从设计参考文件中提炼的细节标准design-reference.md的 Production Quality Baseline 是方向锁定后打磨细节的权威来源。作者强调把下面的章节当作工艺细节而不是默认值只有服务于已锁定视觉方向时才应用如果移除某个细节对界面感觉毫无影响就别加。无障碍基线不可谈判仅图标按钮要aria-label动作用button、导航用a不用div onClick图片要alt装饰性图片用alt可见焦点态用focus-visible:ring-*或等价物绝不允许无替代的outline: none。动效时序先决定是否动再决定怎么动让频率做决定——一天几百次快捷键、命令面板、热键切换零动效一天几十次hover、列表导航、disclosure用最短仍可读的形式偶发表面modal、drawer、toast、sheet用标准处理稀有或一次性时刻onboarding、首个结果、完成可带愉悦感。时长跟随元素按压反馈 100-160ms、tooltip/小 popover 125-200ms、下拉/select 150-250ms、modal/drawer 200-500ms交互元素超 300ms 需要陈述理由感知速度由首帧决定200ms ease-out 比同样距离的 200ms ease-in 感觉更快。同时尊重prefers-reduced-motion只动画transform/opacity合成器友好无布局抖动默认无回弹缓动用指数 ease-outcubic-bezier(0.16,1,0.3,1)手指/指针仍在驱动的动效拖拽关闭、长按、动量交接是例外可用小幅 bounce绝不从scale(0)进入或退出从scale(0.95)opacity: 0进入popover/下拉/菜单/tooltip 锚定到触发控件原点transform-origin: var(--transform-origin)SwiftUI 用.scaleEffect(_:anchor:)modal 例外居中交互态变更优先 CSS transition可中途重定向一次性分段序列用 keyframe交错进入按语义块 ~100ms 延迟、标题按词 ~80ms退出用小固定translateY(-12px)约 150ms ease-inease-in 唯一适合的场合上下文图标切换用scale: 0.25→1、opacity: 0→1、blur: 4px→0px无旋转除非语义上有意义如方向变化的 chevron按钮按压用scale(0.96)CSS transition 可打断加staticprop 可禁用页面加载守卫用initial{false}防止首渲染入场动画交叉淡变仍像两个重叠对象时过渡中加filter: blur(2px)保持 20px 以下Safari 昂贵。性能will-change只用于transform/opacity/filter绝不will-change: all且只在察觉首帧卡顿后加图片显式width/height防布局偏移折叠线以下loadinglazy关键字体font-display: swap。触摸与移动touch-action: manipulation防双击缩放延迟全出血布局用env(safe-area-inset-*)modal/drawer 用overscroll-behavior: containhover 守卫用media(hover:hover)包裹交互 hover 态否则触屏上点过的元素会保持 hover 态直到点别处。排版细节默认自然换行macOS 根布局一次性加-webkit-font-smoothing: antialiased计数器/计时器/价格/动态数字列用font-variant-numeric: tabular-nums字距随字号缩放——展示级32px 及以上约 -0.022em、中档20-28px-0.012em、16px 及以下 normal大标题正字距永远错误。表面与层级同心圆角outerRadius innerRadius paddingpadding 超 24px 就当作独立表面各选半径图标光学对齐文本图标按钮图标侧少一点内边距如pl-4 pr-3.5阴影优于边框做深度真实border留给分隔线与表格图片加内描边轮廓outline: 1px solid rgba(0,0,0,0.1); outline-offset: -1px交互目标最小 40×40px小元素用居中伪元素扩展绝不重叠热区同排卡片等高、CTA 底部对齐、对照列基线对齐、正文约 65ch 宽。浅色应用表面层级相邻嵌套表面必须视觉可区分至少 4% 明度差或0 1px 3px rgba(0,0,0,0.10)阴影——近白底白卡加0 1px 2px rgba(0,0,0,0.05)是噪声不是深度。深色表面层级画布用近黑实色如#08090a抬升靠半透明白覆盖层卡rgba(255,255,255,0.02)、抬升 0.04、突出面板 0.05边框 0.05/0.08深底上的传统投影几乎不可见明度阶梯是主深度线索。圆角系统方向锁定时就定义命名圆角刻度最小 3-4 档如{4px, 8px, 12px, pill}让所有表面说同一种空间语言。扩展既有 UI动第一个新代码前匹配既有视觉词汇文案语气与阅读水平、色彩语义角色、hover/click 状态、动画风格、阴影与卡处理、布局密度与留白节奏、圆角选择。换内容会显得格格不入就说明词汇没匹配够。响应式与屏幕验证验证渲染表面而不是类型检查或 CSS 平衡读数——多个回归提前换行、孤悬分隔点、表格溢出在源码里不可见只在渲染里出现。在 375px按钮再加 320px与桌面 1280px 截屏覆盖每个发布语言环境按钮/标签页/导航/紧凑卡内放长单词与本地化字符串。间距是系统不是单值整个节距跑一个响应式阶梯缩放整套而不是调单个 gap。内容真实性与占位符纪律design-reference.md的 Content Authenticity 规则针对 AI 最常见的假真实文案样本数据禁用泛化人名John Doe、Jane Smith 等、禁用泛化公司名Acme Corp、Nexus、SmartFlow 等、禁用 Lorem Ipsum写匹配布局阅读水平的短真实文案、数据样本禁用整数99.99%换成99.94%、多个头像不得共享同一图片、多张博客/活动卡不得共享同一日期。UI 文案全部 sentence case标题全 Title Case 是最常见的 AI 痕迹成功态删感叹号Saved! 变 Saved错误信息绝不以 Oops! 开头居高临下错误消息不用被动语态Something went wrong 变成 We couldnt load your data. Try refreshing.hero 文案、CTA、功能描述禁用 AI 营销词Elevate、Seamless、Unleash、Delve、Tapestry、Game-changer、Next-Gen、In the world of...改为点名具体价值。Placeholders Over Imitations图标/图片/组件不可用时用占位符高保真设计中带标签的占位符永远好过低质量仿造灰色矩形作 hero 图、字母组合 wordmark 作缺失 logo、虚线边框作未设计组件绝不用内联 SVG 画插画SVG 只用于图标与几何形状摄影/插画/产品图用占位符并请用户提供真实资产。字体、色彩与主题的决策系统Reflex Fonts to RejectLLM 因训练数据主导而默认选用的字体列表被列为拒绝项作为展示字体使用经论证的产品 UI 用途如数据表中用 Inter 是允许的Inter、DM Sans、DM Serif Display、DM Serif Text、Outfit、Plus Jakarta Sans、Instrument Sans、Instrument Serif、Space Grotesk、Space Mono、IBM Plex Sans/Serif/Mono、Syne、Fraunces、Newsreader、Lora、Crimson Pro、Crimson Text、Playfair Display、Cormorant、Cormorant Garamond。字体选择流程写三个描述品牌的词如 precise, minimal, fast- 写下你会反射性选的三款字体 -全部拒绝- 从有明确性格的铸字厂Klim、Commercial Type、Colophon、Grilli Type、OH no Type、Village 等或有个性的开源字体中挑选并能一句话解释为什么是它。CJK 与多语言排版混排中/日/韩与拉丁文时拉丁规则会静默破坏 CJK拉丁字体在前、系统 CJK 字体在后font-family: -apple-system, SF Pro Text, PingFang SC, Noto Sans SC, sans-serif;CJK 正文行高给 1.7-1.8密集汉字需要比拉丁 1.4-1.5 更多的纵向空间用langzh/langja/langen标记语段让浏览器选对字体与断行衬线阅读模式需要显式 CJK 衬线回退Newsreader, Songti SC, Noto Serif SC, serif否则衬线切换会把中文静默打回无衬线不对 CJK 语段应用负字距上面展示级负 tracking 规则仅限拉丁文收紧汉字字距读作渲染 bugtracking 只作用于langen语段。OKLCH 色彩规则用 OKLCH 替代 HSL感知均匀相等数值变化产生相等感知变化明度接近极值时降 chroma85% 明度时 chroma 约 0.08 就够推到 0.15 刺眼15% 明度同样收紧中性色朝品牌色相轻微染色chroma 0.005-0.01微弱到可感知创造潜意识连贯性60-30-10 讲视觉权重不是像素数60% 中性/表面、30% 次级文本与边框、10% 强调色绝不在彩色背景上用灰色文字改用背景色相的降明度色。主题矩阵按受众与场景刻意选深浅两者都不是默认。交易/分析仪表盘与夜班场景选深色儿童阅读/学习应用选浅色企业 SRE/可观测工具选深色周末规划/菜谱/日记选浅色音乐播放器/媒体浏览器选深色医院/临床患者门户选浅色复古/手工艺品牌站选奶油暖浅色。答案不明时默认浅色两种模式都要时先交付浅色再叠加深色令牌。无界面验证的辅助检查与省略纪律Pre-Handoff Checklist: Strategic Omissions是审计提示而非自动实现范围自定义 404 页路由/生产加固任务中品牌页需要清晰返回路径返回导航每个可到达页面都要有明确可用的返回路径死胡同页面是 UX 失败表单客户端校验邮箱提交前验证格式、必填字段内联报错、错误消息贴近字段跳转内容链接a href#main-content作为文档首个可聚焦元素键盘无障碍必需Cookie 同意与页脚隐私/条款链接仅在产品真实合规要求下标记缺失流程。这些是产品就绪问题视觉打磨请求可能暴露它们但不授权构建它们。Reference Material Priority源码与截图都可用时读代码——源文件含精确令牌值截图要靠猜只有 URL 时获取到的只是剥离布局的提取文本视觉参考make it look like X要请用户给截图而不是从剥离的 HTML 推断。数据可视化表面仪表盘/分析视图/图表密集界面额外加载 plugins/waza/skills/ui/references/design-data-viz.md仪表盘是实用表面定位、显示状态、启用操作无 hero 无营销文案每元素必须靠回答用户的问题赢得位置留白比营销页紧用户扫读不是精读用宽列距不用高行距数字多不是问题不对齐的拥挤才是——所有数字列用tabular-nums数字右对齐、标签左对齐。图表选择跨类别比较用条形图长标签用横向、时间趋势用折线图多点时间序列避免条形图、部分-整体用矩形树图6 段或堆叠条饼图只用于 2-4 段、分布用直方图或箱线图绝不用饼图、相关用散点图不用折线图超过 4 段的饼图什么也传达不了。产品基准make it feel like Grafana用数据可视化专属属性做三属性分解图表调色板精确值、网格线粗细与不透明度、坐标轴标签字号颜色、tooltip 圆角与阴影、空状态处理不提取minimal/clean这种不可行动属性。在 Waza 仓库中的定位与阅读入口ui技能与 plugins/waza/skills/ui/SKILL.md 是 Waza 插件工程习惯技能化理念在界面领域的落地Waza 把工程中已熟知的习惯思考、检查、狩猎、阅读、写作、学习、健康、UI转成 Claude 可执行的技能每个技能通过 Outcome Contract、硬性规则与参考文件约束生成质量。技能与规则在仓库中同时存在于plugins/waza/skills/与skills/两份插件包与根级技能目录配套的测试体系如 tests/python/test_ui_behavior_contracts.py可验证行为契约。ui技能的完整规则体系分布在核心流程见 SKILL.md方向锁定、硬性禁令、排版/色彩/动效细节见 design-reference.md三条模式路径见 mode-screenshot-iteration.md、mode-quick-fix.md、mode-generated-asset.md原生动效映射见 design-native-motion.md数据可视化见 design-data-viz.md。实战落地建议把技能当作可执行的检查清单而非一次性提示词——构建前跑五维方向锁定并输出三行论点构建中对照技术栈冲突表与绝对禁令表交付前跑 Aesthetic Review Checks 与 AI Slop Test 并在目标视口实测渲染交接时给出命名方向、非显而易见选择与占位内容替换指引。对既有产品做增量修改时优先走模式路径截图在手走截图迭代先冻结 target/preserve/evidence症状明确走快速修复最小改动 间距令牌化生成图资产走先规格后像素、两次拒绝即硬停。这样每一步都有明确依据、可验证输出与可回退边界最终产出的界面会带着明确的设计观点而不是默认提示词的产物。赞分享【免费下载链接】Waza Engineering habits you already know, turned into skills Claude can run.项目地址https://gitcode.com/gh_mirrors/cl/Waza点击查看免费下载相关推荐群晖硬盘兼容终极教程第三方硬盘 3 步入列群晖硬盘兼容终极教程第三方硬盘 3 步入列 新硬盘刚拆封存储管理器就弹出未验证——群晖硬盘兼容卡在第一步。Synology HDD db 是专门干这事的RT-Thread N32G45XRL-STB 板级支持包实战指南国民技术 N32G457 评估板快速上手与驱动适配RT Thread N32G45XRL STB 板级支持包实战指南国民技术 N32G457 评估板快速上手与驱动适配 N32G45XRL STB 是国民技术Python 正则表达式技巧gh_mirrors/30s/30-seconds-of-python 案例Python 正则表达式技巧gh_mirrors/30s/30 seconds of python 案例 你是否还在为复杂的字符串处理任务头疼面对URL美化上一篇Statping负载测试验证监控系统在高并发下的稳定性下一篇RePlugin插件化开发插件配置文件管理创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Waza UI 技能实战指南：以“方向锁定“与“截图验证“构建有观点的差异化界面
【免费下载链接】Waza Engineering habits you already know, turned into skills Claude can run.项目地址https://gitcode.com/gh_mirrors/cl/Waza点击查看免费下载本指南围绕 Waza 插件中ui技能plugins/waza/skills/ui/SKILL.md展开它把有观点、非模板化的产品界面生产流程固化为一套可执行的技能协议从意图路由、方向锁定、硬性禁令到截图驱动的视觉迭代与验收。读完本文你将掌握如何让 Claude 在建页面、改组件、修截图反馈三类场景下产出有明确设计观点、可验证、不落 AI 俗套的界面并理解 Waza 如何用 Outcome Contract、Mode Picker 与 Aesthetic Review 三层机制约束生成质量。技能定位这不是一个生成界面的通用提示词ui技能是 Waza 插件plugins/waza/plugin.json八个工程工作流技能之一其声明职责是产出有辨识度的生产级 UI以及以截图为依据的视觉打磨。它的适用边界非常明确用于构建或重排页面、组件、排版不用于后端逻辑与数据管道。技能的触发语frontmatter 中的when_to_use覆盖了中英文两类诉求中文侧的做组件、不好看、不和谐、不清晰、很丑、很怪、很傻、突兀、不协调、字体、排版、UI、截图英文侧的build page、create component、make it look good、screenshot with visual complaint、font looks wrong。这意味着它既承接主动构建需求也承接感觉不对但说不清的审美抱怨。技能的第一原则只有两句话却定义了全部行为的底线输出的第一行必须以 内联前缀开头作为段落行内标记而不是独立段落如果一个界面可以用默认提示词生成出来那它就还不够好If it could have been generated by a default prompt, it is not good enough。这是贯穿整个技能的价值判断默认模板、通用风格、无决策的产出一律视为失败。Outcome Contract先定义什么叫完成在任何生成动作之前技能先锁定产出契约Outcome Contract四项要素缺一不可要素内容Outcome一个可用的界面或视觉修复具备清晰的观点且不存在不连贯的布局、文本或响应式破损Done when真实渲染面或生成产物已经对照用户的视觉目标与相关视口状态完成检查Evidence截图、渲染后的 UI、源码组件、设计令牌design tokens、无障碍约束、用户提供的参考Output已实现的视觉变更或一份精确的视觉评审并明确指出剩余的验证缺口两项强制输出规则贯穿始终输出语言规则该技能的任何输出禁止使用 U2014 长破折号em dash改用逗号、冒号或句号。中文感觉式抱怨的处理当用户说很傻、很怪、突兀、不协调、不和谐时将其视为审美否决而非调试症状。若抱怨附带截图生成的图片资产仍走mode-generated-asset流程编码或渲染出的 UI 表面则路由到mode-screenshot-iteration而不是路由到/hunt调试技能。文档与印刷排版分流如果交付物是可分发的文档报告、演示稿、简历、长文或印刷导向页面、分页 PDF不要在这里手搓过度设计的文档布局应交由文档排版技能起草详细方案屏幕排版应用表面、组件、网页才留在本技能。Durable Context 预检当前截图优先于记忆技能引用了 plugins/waza/skills/ui/references/durable-context.md 作为公共前置协议。该参考文件定义了三个核心边界Scope仅在用户点名记忆、先前决策或记忆路径或项目存在明显的本地记忆摘要如MEMORY.md时才读取持久上下文先列标题最多打开一两份摘要不硬编码机器相关的记忆根路径不读原始转录。Current state wins当前代码、diff、截图、日志、测试、文档、CI、远端状态与实时探测永远优先于记忆包括运行时自行注入的记忆。记忆中的事实只是待复核的线索不是证据。Memory is not authorization记忆可以解释偏好但绝不能授予或扩大写入、提交、推送、发布、删除等状态变更的授权历史短语如push、check只是需要重新评估的上下文不是可复用的动作令牌。把先前对话转成可复用的 Waza 指南时只提升工作流规则并剥离原始转录、截图、本地路径、项目特定命令、issue/PR 号、发布标签、提交哈希、私人产品边界、付费/许可细节、用户名等即redaction gate。/ui在此基础上有一条专属规则当前截图与渲染输出覆盖记忆。可以复用持久的视觉偏好与成熟交互模式但在改代码之前必须先依据截图或源码说出当前的视觉问题是什么。Mode Picker按交付物选择执行路径技能要求先为每个交付物选择匹配的执行路径并完整阅读对应文件。一次请求可以组合多条路径例如一个页面加它的社交卡片所有匹配路径共享一轮前置澄清工作开始后的事件触发式恢复只重开受影响的字段。路径选择表如下诉求路径对既有屏幕的边界修复这里太挤了间距不对加载plugins/waza/skills/ui/references/mode-quick-fix.md用户提供了截图作为改进依据加载plugins/waza/skills/ui/references/mode-screenshot-iteration.md生成的图像资产图表、封面、社交卡片、插图加载plugins/waza/skills/ui/references/mode-generated-asset.md新页面、新组件或新视觉系统从锁定方向Lock the Direction First开始无需加载模式文件当触发器重叠时按被变更的工件路由对某个资产而言生成式图像资产优先于截图证据而截图迭代负责编码或渲染出的 UI 表面。构建新表面是默认路径。Lock the Direction First写代码前必须锁定方向技能最核心的纪律是先解决五个方向维度再写代码。颜色、字体、宽度、语气首先取自当前产品的令牌、兄弟组件、截图与仓库 git 历史其次是同团队/作者已发布的其他产品再次才是对话。模型默认调色板、默认字体和手绘图形仅在没有任何参考时才被允许。优先推断Infer first。五个维度逐一定义谁在用什么场景分析师仪表盘不同于落地页或引导流程。若答案是侧边栏 主工作区布局走下面的 App shell 例外。审美方向是什么必须精确命名dense editorial密集编辑风、raw terminal原始终端风、ink-on-paper纸上墨迹风、brutalist grid粗野主义网格、warm analog温暖模拟风。干净现代Clean and modern不是方向。如果用户点名参考站点或产品感觉像 Linear / Claude.ai / Vercel不要直接接受它为方向而是从中抽取 3 个具体属性按钮圆角理念、表面深度处理阴影 vs 背景梯度 vs 边框、强调色家族。说出这些属性名而不是产品名。设计签名是什么一种字体、一套色彩系统、出人意料动效或非对称布局。选一个并让它显而易见。硬约束是什么框架、bundle 体积、对比度下限、键盘无障碍。签名微交互是什么按下缩放、交错显现或上下文图标动画。选一个并明确知道它如何实现。在五个维度全部通过证据、明确假设或澄清解决之前不写任何代码。维度可以是无安静的实用型表面可以有意没有签名动效。参考站点的快捷通道Reference-site Brand Presets定义在 plugins/waza/skills/ui/references/design-reference.md当精确的品牌令牌能实质改进一个仍欠确定的方向时提供参考站点品牌预设路径该预设由VoltAgent/awesome-design-md维护npx getdesignlatest add brand会下载 DESIGN.md 到项目根。绝不自动运行该命令只在方向锁定时作为选项提出获得用户明确批准后才运行并把结果当作种子分解素材而非最终方向。运行后基于生成文件做三属性分解预设与本技能规则冲突时如推荐了 Reflex 字体黑名单中的 Inter 做展示字体或推荐紫蓝渐变本技能规则永远优先丢弃预设并在交接摘要中说明覆盖。有节制的竞品调研只有遇到真正不熟悉的交互模式或读完当前产品后方向仍欠确定时才调研 2-3 个成熟产品且每个记录一条具体决策。纯外观修复、已有兄弟组件、参考已能定局的场景跳过调研——对每个组件都强制基准测试只会产生模仿并拖延明显该做的工作。Source repo as reference文件树是菜单不是正餐当用户提供仓库 URL 或粘贴既有产品的源码用于复刻或扩展时不要凭记忆或训练数据重建 UI而是读取真实源码主题与令牌文件theme.ts、colors.ts、tokens.css、_variables.scss或等价物全局样式表与布局脚手架用户点名提到的具体组件。提取精确值hex 色值、间距刻度条目、字体栈、边框圆角。大致接近不是像素保真A rough approximation is not pixel fidelity。只读目标组件目录或包绝不读.git、node_modules、dist或 lock 文件。三类例外与三条线摘要既有原生应用例外当目标是已有连贯视觉方向的 macOS/iOS/Android 原生应用时不要默认提议整体移植到新平台风格macOS 26 Liquid Glass、iOS 18 磨砂材质、Material You、Fluent Design 等。整体重风格读起来就像我没有具体设计意图这是平台的意图。默认在既有方向上做增量打磨间距、对齐、hover/focus 状态、排版层级、文案收紧、动效时序。仅当用户本轮明确要求平台风格迁移或既有方向破损到增量打磨无法修复时才提议迁移。改动前先用一句话陈述既有方向让用户有机会纠正你的解读。当改动涉及动效、按压状态或动画时序时加载 plugins/waza/skills/ui/references/design-native-motion.md判断力从 Web 规则延续但惯用法与平台默认曲线不延续。App shell 例外若问题 1 的答案是应用外壳Slack、Linear、Notion 一类先加载design-reference.md中的 App shell rules 一节并应用其约束装饰性背景默认关闭、表面层级只用背景色梯度与阴影、所有可交互元素用标准按压缩放、每种组件类型内按钮圆角保持一致、命名圆角刻度先于首个组件。数据仪表盘例外若表面是仪表盘、分析视图或图表密集型界面同时加载 plugins/waza/skills/ui/references/design-data-viz.md 获取图表选择、数字对齐与产品基准规则。营销页、落地页、通用组件跳过。方向陈述为一行然后加载design-reference.md检查技术栈冲突表——以下组合会造成静默失败或不连贯输出永不组合同一元素上 Tailwind CSS Modules特异性冲突同一元素上 Framer Motion CSS transition同一属性双重动画导致卡顿styled-components/emotion Tailwind两套类系统争夺同一 DOM 节点一个项目中 Heroicons Lucide Font Awesome 混用多个 Google Font 展示字体性格互相抵消玻璃拟态backdrop-filter 实线border: 1px solid深色背景 全不透明#ffffff文本改用rgba(255,255,255,0.85)或#f0f0f0Tailwind v4theme 动态拼接类名JIT 生成会被 purge类消失样式静默丢失需用静态类名、safelist或:rootextend.colors。写第一个组件前必须命名唯一的 CSS 策略只用 Tailwind、只用 CSS Modules、或只用 CSS-in-JS中途不得漂移。写任何代码前把方向总结成三行视觉论点Visual thesis用一句话说清情绪、材质与能量例如 warm brutalist editorial with high-contrast ink type and rough paper texture。内容计划Content planhero - support - detail - final CTA每行一个应用/仪表盘表面跳过营销结构默认实用模式定位、显示状态、启用操作除非明确要求否则无 hero。交互论点Interaction thesis要么是none并附一条基于证据的理由要么给出 2-3 个改变页面感觉的具体动效点子例如 hero text slides in on load, section headers pin while content scrolls beneath, CTA pulses on hover。生产级或多页 UI 还需把论点扩展为 9 节 DESIGN.md 脚手架主题、调色板、排版、组件、布局、深度、do/dont、响应式、提示词指南该脚手架在design-reference.md中有完整定义单个组件则三行摘要足够。When Asked For Options选项的纪律当被要求给选项时至少给出 3 个跨越真正不同维度的变体。design-reference.md的 Options Guide 明确了可变的维度视觉密度、排版性格、色温、布局结构、动效性格、装饰量、抽象程度混合策略一个紧贴既有惯例、一个以新方式重混品牌 DNA、一个刻意出人意料从基础到大胆递进。只靠强调色区分的三个选项不算三个变体。当决策属于品味而非正确性时图标、字重、强调色、动效感觉主动提供两个有标签的候选而不是落一个猜测用户的回复只是一个字母而不是一轮重写。结构性变更则先用一两句描述最终状态并得到点头后再写代码。Hard Rules每个模式都生效的硬性禁令design-reference.md的 Absolute Bans 表为每个被禁模式提供了完整重写方案硬规则在每个模式下生效被禁模式为什么禁重写方案超过 1px 的border-left/border-right作区块强调管理后台 UI 中最被滥用的设计手法超过发丝线就像错误改为彩色圆点、短横线、背景色块或字重变化background-clip: text渐变文字装饰性而非语义性AI 设计头号标志打印/高对比模式不可读用品牌纯色、调色中性色或字重强调玻璃拟态backdrop-filter: blur作默认卡片表面低功耗设备昂贵、过度使用、实线边框会打破层叠深度幻觉用背景色梯度与box-shadow实现抬升表面紫到蓝渐变或深底青色强调系统AI 设计的经典配色传达不了任何品牌信息依品牌词经 OKLCH 规则选调色板泛化圆角卡 box-shadow作默认容器模板思维把所有内容类型套同一容器默认无卡区段仅当内容类型需要时才加卡用弹窗懒散逃避溢出 UI打断流程、破坏浏览器返回导航内联展开、详情面板或独立路由仅当动作真正需要焦点锁定时才用弹窗transition: all或动画化 width/height/padding/margin每帧强制浏览器重算布局列出精确属性如transition-property: transform, opacity高度揭示用grid-template-rows: 0fr to 1fr两条动效规则在所有模式生效包括跳过完整参考的模式频率决定是否动画任何键盘触发的状态变化绝不动画用户一天触发几百次的东西快捷键、命令面板、热键切换标签把动效读作卡顿所以不给动效。每个可按的东西在按下时都要动而不只是在 hover 时动——hover 仅限指针设备一个按下去无反馈的控件等于点击未被确认。设计参考中的方向锁定会加载完整重写、排版、OKLCH 颜色、动效时序、布局默认、无障碍基线与复杂度匹配截图与快速修复路径只用上面的紧凑禁令。这些规则的目标是让输出远离泛化默认而不是当作一次 lint 检查运行当已承诺的方向确实需要打破某条时刻意打破它并在交接中说明取舍。无障碍基线与 CSS 模式禁令不可谈判。Gotchas三个高频翻车点的规则化技能用一张表固化三个高频失败模式及其规则发生了什么规则依赖…截断来适配固定宽度槽位保证适配压缩格式、截到完整段落、或无字形的硬裁剪。指标与标签页脚绝不尾部截断成省略号多一个词把行挤出换行最后一行孤悬一个单词先检查容器与强制断行在保住语义的前提下收紧重复绝不为孤词缩小字号扫描兄弟块找同一布局成因而不是每段短末行都处理一个小卡片里堆了五种文本样式卡内每个角色只用一个文本样式层级靠顺序小块里超过三种不同文本样式就是坏味道输出阶段Aesthetic Review 与 AI Slop Test在重大构建阶段之后与交接时技能要求重读方向锁定时的视觉论点。如果屏幕上的东西漂向了泛化默认先识别最先崩坏的特定元素字体、颜色、卡处理、间距并修复再继续。新页面或新视觉系统在交接摘要前还要跑design-reference.md中的Aesthetic Review Checks首屏品牌/产品是否不可认错是否有单一强视觉锚点而不是装饰性渐变仅扫标题能否理解页面每个区块是否只有一个职责卡片是否真的必要还是默认样式动效是否改善层级或氛围还是纯装饰移除所有装饰性阴影后是否依然高级。每个表面还要跑AI Slop Test一个陌生人扫一眼首屏会不会说这是 AI 做的扫描 Absolute Bans 与 Common Trapsreflex 字体、默认渐变、居中 hero 配两个并排 CTA、三个相同卡片、泛化顶部导航凡是不属于方向明确部分的都要修掉。design-reference.md的 Common Traps 还给出了模板化检测清单三段式 hero大标题 一行副文 两个并排 CTA、圆角/阴影/内边距完全相同的卡片网格、左 logo 中链接右主操作的顶导航、白与#f9f9f9交替的区块、居中图标压标题压段落、四等宽脚注列。它们的最终测试是如果换掉内容布局依然成立那你建的是模板而不是设计重做。多视口渲染验证任何检查失败都先修再继续。亲自渲染产品支持的视口/窗口范围Web 断点的两侧原生的最小宽度、最小高度、两者组合与常规尺寸。测试样本不需要新建布局分支。只有当宿主无法渲染时才明说并把需要用户检查的确切视图交出去。交接摘要的固定结尾结束阶段必须包含命名的审美方向2-3 句说明理由、非显而易见的选择解释字体、颜色决策、布局逻辑、替换占位内容的指引。交接后停止After handoff, stop。三条模式路径的深度执行细节方向锁定是从零构建的主路径其余三种诉求分别由模式文件细化。截图迭代模式以用户截图为最强设计简报加载条件用户随抱怨这里很丑、这个不对、fix this、looks wrong发送截图或图片。既有产品就是方向跳过五问方向锁定。完整流程定义在 plugins/waza/skills/ui/references/mode-screenshot-iteration.md读截图用一句话陈述问题间距、对比、对齐、字体、颜色、密度、层级。保留用户具有诊断性的负面标签不要把丑、乱、不清晰、怪翻译成模糊的make it modern。动代码前锁定修复契约target允许改变的表面与视口/状态、preserve保持不变的相邻表面、内容与产品行为、evidence当前渲染与可用参考渲染。只有当两个可行目标会产生实质不同行为时才提问否则以最强截图证据行动。若有参考截图或这张是好的例子先对比当前与参考并说出视觉差异再选修复。若诊断是真正不熟悉的 UX 问题且证据仍欠确定花一轮调研 2-3 个同类成熟产品的解法各引用一条具体决策证据已定局或属外观修复时跳过。找到责任代码grep 组件名或类名读真实文件不靠记忆或假设。应用最小修复对既有产品先试材质/不透明度、几何、间距、排版或文本适配再考虑重新设计表面。若抱怨带still或暴露对齐、尺寸、条件渲染、动画、共享组件不一致先冻结最小视觉矩阵再验证受影响的兄弟表面Web 断点两侧或原生最小宽/高及其组合与常规尺寸可达的默认/选中/聚焦、加载/空/错误、紧凑/本地化状态过渡的 before/during/after 与冷/热路径。同一缺陷重复出现时推导一个共享不变量或令牌而不是独立调每张截图。当用户凭肉眼调一个数值且第二个值没落定时停止单值迭代在抱怨的视口并排渲染三个带标签的候选让用户选。在浏览器、原生应用、截图工具或渲染产物中验证矩阵再复查每个preserve边界。最终态截图不能证明文案反馈、触摸行为、首帧或过渡稳定性。能渲染就自己完成闭环并报告已检查状态不能渲染就明确说明并交出最短的确切检查视图。对齐与间距抱怨要用数字收尾用getBoundingClientRect或截图标尺测量两个盒子的几何前后各报一组并附视口宽度没有数字就不算对齐。回复要打印checked N / changed M / left K针对第 7 步找到的使用者只改一个视图而不带这行是此步骤要阻止的失败。校准规则用户的截图是本轮最强的设计简报修复完成前保持它在推理中可见真实运行的产品是裁判产品页、应用截图、发布页、当前 UI 状态优先于通用风格直觉比较候选要在产品真实背景上、保留相邻组件与状态、只变被比较的属性不要把具体品味反馈压平为泛化形容词更高级不是诊断caption 基线漂移在中文字线上方才是若截图暴露了确定性运行时回归或损坏的编码渲染/状态/时序路径路由到/hunt并保留视觉证据原生应用截图交接中一旦证明应用能构建、能运行、能到达目标视图不要反复跟焦点/窗口排序/坐标点击自动化搏斗做一次有边界的自动化尝试不稳定就点名确切屏幕并请用户提供截图迭代。边界规则若修复需要改 3 个以上组件或暴露的是方向问题而非具体 bug暂停并回到完整方向锁定。重设计优先级顺序重做既有 UI 时先换字体再清颜色再 hover/active 状态再布局与留白再替换泛化组件再补加载/空/错误状态最后做排版抛光——每个 pass 的爆炸半径最小而视觉提升最大。快速修复模式最小改动修一个具体症状加载条件窄幅视觉修复加具体症状溢出、裁剪/换行文本、错位、间距失衡、对比/可读性、本地化文本放不下、紧凑响应式破损。流程定义在 plugins/waza/skills/ui/references/mode-quick-fix.md读当前 UI 证据 - 一句话点名缺陷 - 锁定target/preserve/evidence- 做最小的材质/几何/间距/对比/排版/文本适配改动不为了截图自洽而重设计target之外 - 在真实运行表面上验证 - 边界规则触发或改变产品行为时切到截图模式或方向锁定。四条特色规则值得单独说明间距统一规则一个间距/尺寸值调了三次还不对就是结构问题而不是数值问题把 N 个独立值折叠成一个共享命名令牌Spacing.s4、--gap-content外层容器内边距默认等于内层元素间隙。固定高度操作槽、统一排版任何按状态换子内容的容器状态栏、操作槽、工具栏行、菜单项在所有状态下必须用同一字号变填充/描边/不透明度/颜色/图标绝不变字号——两种状态字号 1pt 的高度差会在状态切换时变成可见抖动同一槽内的 CTA 胶囊按钮用同尺寸靠背景与边框区分。加载不是空仍在加载/测量/索引/刷新/等权限的表面必须渲染 pending 状态而不是最终空文案刷新期间若旧结果可见保持明显过期或用进度替换绝不在工作进行中闪现最终空状态。安全边界动作设计清理、删除、卸载、重置、权限变更类表面不要用隐藏可恢复性来让 UI 显得更简单。批量选择、自动全选、一键删除、推荐破坏性默认只在每行对目标用户可理解且有足够身份可验证安全性名称、来源、所有者、路径、预览或恢复含义时才合适行是不可读标识符、推断残留或机器专属路径时优先先审后执行UI、当前目标范围、禁用破坏性操作或分组说明。生成图像资产模式先规格后像素加载条件交付物是生成而非代码布局的图表、架构插图、封面、社交卡片。该模式存在的意义是阻止拒绝循环生成 - 丑 - 调个颜色 - 再生成而争议点根本不是颜色。流程在 plugins/waza/skills/ui/references/mode-generated-asset.mdSpec Before Pixels生成前从用户提示、已接受参考与目的地解析规格六行以内呈现不超过六行图像说的一句话不是主题而是主张如一个清理 Mac 的终端工具是主张架构图是主题画面中每个字符串的语言宽高比与出现位置README 头图、社交预览、发布正文、文档内联最小出现位置的清晰度决定字号调色板数量写成一个数字生成艺术默认颜色多于图表能承载的参考用户已接受的既有图或要并排的命名产品资产风格禁止出现清单版本号与 changelog 内容默认在此列。Two Rejections Is A Hard Stop按外观计拒绝而非按内容。第二次拒绝后停止生成并重新对齐重述那一句话、问并排哪张既有图、确认排除清单。部分正确时先命名存活部分保留构图换调色板会收敛做得更好不会。拒绝后恢复上一个已接受资产下一轮只改它的一个命名属性用户选第一个时先把文件名回显再编辑。Decoration Debt每个标记必须编码信息。输出前清扫对每条规则/边框/框架/分隔线做可移除测试删除它不丢信息就是装饰箭头头部取最小可读尺寸超大箭头读作剪贴画是最常见的拒绝点logo 用透明或匹配底色深底上的白色光晕说明源图有 matte修源图别描上去平面场图表里的渐变、发光、投影增加的深度不承载意义线条计数连接器与分隔线增殖快于它们承载的信息两框相邻时相邻本身已说明关系。Scope It To What The Thing Is常青资产描述产品而非发布。版本字符串、changelog 条目、new in 框架默认留在相邻文本用户明确要发布卡时才包含发布内容并视其较短保质期为有意为之。生产级质量基线从设计参考文件中提炼的细节标准design-reference.md的 Production Quality Baseline 是方向锁定后打磨细节的权威来源。作者强调把下面的章节当作工艺细节而不是默认值只有服务于已锁定视觉方向时才应用如果移除某个细节对界面感觉毫无影响就别加。无障碍基线不可谈判仅图标按钮要aria-label动作用button、导航用a不用div onClick图片要alt装饰性图片用alt可见焦点态用focus-visible:ring-*或等价物绝不允许无替代的outline: none。动效时序先决定是否动再决定怎么动让频率做决定——一天几百次快捷键、命令面板、热键切换零动效一天几十次hover、列表导航、disclosure用最短仍可读的形式偶发表面modal、drawer、toast、sheet用标准处理稀有或一次性时刻onboarding、首个结果、完成可带愉悦感。时长跟随元素按压反馈 100-160ms、tooltip/小 popover 125-200ms、下拉/select 150-250ms、modal/drawer 200-500ms交互元素超 300ms 需要陈述理由感知速度由首帧决定200ms ease-out 比同样距离的 200ms ease-in 感觉更快。同时尊重prefers-reduced-motion只动画transform/opacity合成器友好无布局抖动默认无回弹缓动用指数 ease-outcubic-bezier(0.16,1,0.3,1)手指/指针仍在驱动的动效拖拽关闭、长按、动量交接是例外可用小幅 bounce绝不从scale(0)进入或退出从scale(0.95)opacity: 0进入popover/下拉/菜单/tooltip 锚定到触发控件原点transform-origin: var(--transform-origin)SwiftUI 用.scaleEffect(_:anchor:)modal 例外居中交互态变更优先 CSS transition可中途重定向一次性分段序列用 keyframe交错进入按语义块 ~100ms 延迟、标题按词 ~80ms退出用小固定translateY(-12px)约 150ms ease-inease-in 唯一适合的场合上下文图标切换用scale: 0.25→1、opacity: 0→1、blur: 4px→0px无旋转除非语义上有意义如方向变化的 chevron按钮按压用scale(0.96)CSS transition 可打断加staticprop 可禁用页面加载守卫用initial{false}防止首渲染入场动画交叉淡变仍像两个重叠对象时过渡中加filter: blur(2px)保持 20px 以下Safari 昂贵。性能will-change只用于transform/opacity/filter绝不will-change: all且只在察觉首帧卡顿后加图片显式width/height防布局偏移折叠线以下loadinglazy关键字体font-display: swap。触摸与移动touch-action: manipulation防双击缩放延迟全出血布局用env(safe-area-inset-*)modal/drawer 用overscroll-behavior: containhover 守卫用media(hover:hover)包裹交互 hover 态否则触屏上点过的元素会保持 hover 态直到点别处。排版细节默认自然换行macOS 根布局一次性加-webkit-font-smoothing: antialiased计数器/计时器/价格/动态数字列用font-variant-numeric: tabular-nums字距随字号缩放——展示级32px 及以上约 -0.022em、中档20-28px-0.012em、16px 及以下 normal大标题正字距永远错误。表面与层级同心圆角outerRadius innerRadius paddingpadding 超 24px 就当作独立表面各选半径图标光学对齐文本图标按钮图标侧少一点内边距如pl-4 pr-3.5阴影优于边框做深度真实border留给分隔线与表格图片加内描边轮廓outline: 1px solid rgba(0,0,0,0.1); outline-offset: -1px交互目标最小 40×40px小元素用居中伪元素扩展绝不重叠热区同排卡片等高、CTA 底部对齐、对照列基线对齐、正文约 65ch 宽。浅色应用表面层级相邻嵌套表面必须视觉可区分至少 4% 明度差或0 1px 3px rgba(0,0,0,0.10)阴影——近白底白卡加0 1px 2px rgba(0,0,0,0.05)是噪声不是深度。深色表面层级画布用近黑实色如#08090a抬升靠半透明白覆盖层卡rgba(255,255,255,0.02)、抬升 0.04、突出面板 0.05边框 0.05/0.08深底上的传统投影几乎不可见明度阶梯是主深度线索。圆角系统方向锁定时就定义命名圆角刻度最小 3-4 档如{4px, 8px, 12px, pill}让所有表面说同一种空间语言。扩展既有 UI动第一个新代码前匹配既有视觉词汇文案语气与阅读水平、色彩语义角色、hover/click 状态、动画风格、阴影与卡处理、布局密度与留白节奏、圆角选择。换内容会显得格格不入就说明词汇没匹配够。响应式与屏幕验证验证渲染表面而不是类型检查或 CSS 平衡读数——多个回归提前换行、孤悬分隔点、表格溢出在源码里不可见只在渲染里出现。在 375px按钮再加 320px与桌面 1280px 截屏覆盖每个发布语言环境按钮/标签页/导航/紧凑卡内放长单词与本地化字符串。间距是系统不是单值整个节距跑一个响应式阶梯缩放整套而不是调单个 gap。内容真实性与占位符纪律design-reference.md的 Content Authenticity 规则针对 AI 最常见的假真实文案样本数据禁用泛化人名John Doe、Jane Smith 等、禁用泛化公司名Acme Corp、Nexus、SmartFlow 等、禁用 Lorem Ipsum写匹配布局阅读水平的短真实文案、数据样本禁用整数99.99%换成99.94%、多个头像不得共享同一图片、多张博客/活动卡不得共享同一日期。UI 文案全部 sentence case标题全 Title Case 是最常见的 AI 痕迹成功态删感叹号Saved! 变 Saved错误信息绝不以 Oops! 开头居高临下错误消息不用被动语态Something went wrong 变成 We couldnt load your data. Try refreshing.hero 文案、CTA、功能描述禁用 AI 营销词Elevate、Seamless、Unleash、Delve、Tapestry、Game-changer、Next-Gen、In the world of...改为点名具体价值。Placeholders Over Imitations图标/图片/组件不可用时用占位符高保真设计中带标签的占位符永远好过低质量仿造灰色矩形作 hero 图、字母组合 wordmark 作缺失 logo、虚线边框作未设计组件绝不用内联 SVG 画插画SVG 只用于图标与几何形状摄影/插画/产品图用占位符并请用户提供真实资产。字体、色彩与主题的决策系统Reflex Fonts to RejectLLM 因训练数据主导而默认选用的字体列表被列为拒绝项作为展示字体使用经论证的产品 UI 用途如数据表中用 Inter 是允许的Inter、DM Sans、DM Serif Display、DM Serif Text、Outfit、Plus Jakarta Sans、Instrument Sans、Instrument Serif、Space Grotesk、Space Mono、IBM Plex Sans/Serif/Mono、Syne、Fraunces、Newsreader、Lora、Crimson Pro、Crimson Text、Playfair Display、Cormorant、Cormorant Garamond。字体选择流程写三个描述品牌的词如 precise, minimal, fast- 写下你会反射性选的三款字体 -全部拒绝- 从有明确性格的铸字厂Klim、Commercial Type、Colophon、Grilli Type、OH no Type、Village 等或有个性的开源字体中挑选并能一句话解释为什么是它。CJK 与多语言排版混排中/日/韩与拉丁文时拉丁规则会静默破坏 CJK拉丁字体在前、系统 CJK 字体在后font-family: -apple-system, SF Pro Text, PingFang SC, Noto Sans SC, sans-serif;CJK 正文行高给 1.7-1.8密集汉字需要比拉丁 1.4-1.5 更多的纵向空间用langzh/langja/langen标记语段让浏览器选对字体与断行衬线阅读模式需要显式 CJK 衬线回退Newsreader, Songti SC, Noto Serif SC, serif否则衬线切换会把中文静默打回无衬线不对 CJK 语段应用负字距上面展示级负 tracking 规则仅限拉丁文收紧汉字字距读作渲染 bugtracking 只作用于langen语段。OKLCH 色彩规则用 OKLCH 替代 HSL感知均匀相等数值变化产生相等感知变化明度接近极值时降 chroma85% 明度时 chroma 约 0.08 就够推到 0.15 刺眼15% 明度同样收紧中性色朝品牌色相轻微染色chroma 0.005-0.01微弱到可感知创造潜意识连贯性60-30-10 讲视觉权重不是像素数60% 中性/表面、30% 次级文本与边框、10% 强调色绝不在彩色背景上用灰色文字改用背景色相的降明度色。主题矩阵按受众与场景刻意选深浅两者都不是默认。交易/分析仪表盘与夜班场景选深色儿童阅读/学习应用选浅色企业 SRE/可观测工具选深色周末规划/菜谱/日记选浅色音乐播放器/媒体浏览器选深色医院/临床患者门户选浅色复古/手工艺品牌站选奶油暖浅色。答案不明时默认浅色两种模式都要时先交付浅色再叠加深色令牌。无界面验证的辅助检查与省略纪律Pre-Handoff Checklist: Strategic Omissions是审计提示而非自动实现范围自定义 404 页路由/生产加固任务中品牌页需要清晰返回路径返回导航每个可到达页面都要有明确可用的返回路径死胡同页面是 UX 失败表单客户端校验邮箱提交前验证格式、必填字段内联报错、错误消息贴近字段跳转内容链接a href#main-content作为文档首个可聚焦元素键盘无障碍必需Cookie 同意与页脚隐私/条款链接仅在产品真实合规要求下标记缺失流程。这些是产品就绪问题视觉打磨请求可能暴露它们但不授权构建它们。Reference Material Priority源码与截图都可用时读代码——源文件含精确令牌值截图要靠猜只有 URL 时获取到的只是剥离布局的提取文本视觉参考make it look like X要请用户给截图而不是从剥离的 HTML 推断。数据可视化表面仪表盘/分析视图/图表密集界面额外加载 plugins/waza/skills/ui/references/design-data-viz.md仪表盘是实用表面定位、显示状态、启用操作无 hero 无营销文案每元素必须靠回答用户的问题赢得位置留白比营销页紧用户扫读不是精读用宽列距不用高行距数字多不是问题不对齐的拥挤才是——所有数字列用tabular-nums数字右对齐、标签左对齐。图表选择跨类别比较用条形图长标签用横向、时间趋势用折线图多点时间序列避免条形图、部分-整体用矩形树图6 段或堆叠条饼图只用于 2-4 段、分布用直方图或箱线图绝不用饼图、相关用散点图不用折线图超过 4 段的饼图什么也传达不了。产品基准make it feel like Grafana用数据可视化专属属性做三属性分解图表调色板精确值、网格线粗细与不透明度、坐标轴标签字号颜色、tooltip 圆角与阴影、空状态处理不提取minimal/clean这种不可行动属性。在 Waza 仓库中的定位与阅读入口ui技能与 plugins/waza/skills/ui/SKILL.md 是 Waza 插件工程习惯技能化理念在界面领域的落地Waza 把工程中已熟知的习惯思考、检查、狩猎、阅读、写作、学习、健康、UI转成 Claude 可执行的技能每个技能通过 Outcome Contract、硬性规则与参考文件约束生成质量。技能与规则在仓库中同时存在于plugins/waza/skills/与skills/两份插件包与根级技能目录配套的测试体系如 tests/python/test_ui_behavior_contracts.py可验证行为契约。ui技能的完整规则体系分布在核心流程见 SKILL.md方向锁定、硬性禁令、排版/色彩/动效细节见 design-reference.md三条模式路径见 mode-screenshot-iteration.md、mode-quick-fix.md、mode-generated-asset.md原生动效映射见 design-native-motion.md数据可视化见 design-data-viz.md。实战落地建议把技能当作可执行的检查清单而非一次性提示词——构建前跑五维方向锁定并输出三行论点构建中对照技术栈冲突表与绝对禁令表交付前跑 Aesthetic Review Checks 与 AI Slop Test 并在目标视口实测渲染交接时给出命名方向、非显而易见选择与占位内容替换指引。对既有产品做增量修改时优先走模式路径截图在手走截图迭代先冻结 target/preserve/evidence症状明确走快速修复最小改动 间距令牌化生成图资产走先规格后像素、两次拒绝即硬停。这样每一步都有明确依据、可验证输出与可回退边界最终产出的界面会带着明确的设计观点而不是默认提示词的产物。赞分享【免费下载链接】Waza Engineering habits you already know, turned into skills Claude can run.项目地址https://gitcode.com/gh_mirrors/cl/Waza点击查看免费下载相关推荐群晖硬盘兼容终极教程第三方硬盘 3 步入列群晖硬盘兼容终极教程第三方硬盘 3 步入列 新硬盘刚拆封存储管理器就弹出未验证——群晖硬盘兼容卡在第一步。Synology HDD db 是专门干这事的RT-Thread N32G45XRL-STB 板级支持包实战指南国民技术 N32G457 评估板快速上手与驱动适配RT Thread N32G45XRL STB 板级支持包实战指南国民技术 N32G457 评估板快速上手与驱动适配 N32G45XRL STB 是国民技术Python 正则表达式技巧gh_mirrors/30s/30-seconds-of-python 案例Python 正则表达式技巧gh_mirrors/30s/30 seconds of python 案例 你是否还在为复杂的字符串处理任务头疼面对URL美化上一篇Statping负载测试验证监控系统在高并发下的稳定性下一篇RePlugin插件化开发插件配置文件管理创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考