用途:为 Figma 界面或组件生成完整的开发交付标注,把视觉设计转成可构建的规格说明。触发场景包括撰写 Figma 标注、创建开发交付笔记、为工程团队整理设计说明、编写某功能的 Figma 规格,以及询问交付前应标注哪些内容。
必要输入:界面或组件描述;平台(iOS/Android/Web/React Native);交互类型(静态/交互/动画/表单);开发者受众(移动/前端/全栈)。
对比度辅助命令(资料中提供,原文保留):
npx --yes notugly fix "#8ab4f8" "#ffffff" npx --yes notugly onepager <url> --out review.html npx --yes notugly vision
资料说明对比度无法靠肉眼判断,AA 线为 4.5:1,并称该工具确定性、零依赖、无模型调用,结果一致。标注应写明计算出的比值与目标,如“4.52:1 — passes AA for body text”,而非“check contrast”。
输出结构:一、界面/组件概览(名称、用途、入口、出口);二、交互标注(元素名,默认状态、点击/轻触动作、加载态、成功态、错误态、禁用条件);三、状态清单(元素所需状态:默认、悬停、激活、禁用、加载、错误、空态,并标记缺失设计);四、间距与布局说明(固定与流式元素、滚动行为、断点、安全区);五、内容与文案规则(字符限制、动态与静态内容、截断规则、空态);六、无障碍标注(触摸目标、屏幕阅读器标签、焦点顺序、颜色对比度、动效偏好);七、边界情况与开发者问题(未决问题)。
质量检查:每个交互元素都有全部状态;状态清单标记缺失设计;无障碍覆盖触摸目标与屏幕阅读器标签;指定空态;边界情况列为可执行问题。
反模式:不只标注正常路径,须记录错误、加载与空态;不用模糊间距描述,须给具体像素或 token;不跳过无障碍标注,须含焦点顺序、ARIA 标签与对比度;不遗漏交互行为描述;不产出缺少边界情况的标注。
限制:资料未提供该技能的安装方式、运行环境要求、收费或价格、支持平台范围等具体信息。