SuperAPI AI 工具集

studio-develop-design-better

设计与创作

查看项目

更新于 10-15 20:09

技能介绍

用途:在用户构建或重构产品代码库的 UI、且希望得到设计师级前端代码而非仅功能可用代码时使用。它是一层“工艺”规则,风格归 docs/DESIGN.md 管,本技能负责通用 UX/UI 启发式。

主要能力:提供 50 条启发式目录,每条含编号、名称、一句话规则与代码动作,审查时按编号引用(如 H22)。涵盖视觉层级与强调、布局对齐、排版、颜色对比、交互反馈、表单、空/加载/错误/成功四态、动效、WCAG 2.2 AA 无障碍、移动与触摸、认知负荷与导航,以及 2025–2026 AI 产品模式。

使用方式:先读 docs/DESIGN.md 解析令牌目录与规则;确认界面类型及主导启发式类别;生成或审查时每项视觉决策引用令牌,缺失令牌标记为 New Pattern,禁止内联十六进制、字体名或任意像素。交付前核对检查清单:交互元素五态、异步四态、表单标签与校验、动效 150–400ms 且支持 prefers-reduced-motion、对比度与焦点环、指针目标尺寸、320px 宽度无横向滚动、主操作唯一突出等。任何视觉属性有对应令牌就按名引用。

限制:docs/DESIGN.md 为必需,缺失时停止并让用户先运行 studio-design-design-system。产品身份与 PRODUCT.md 为可选。规则随目录条目与检查清单而定,技能未提供具体代码示例、收费、价格与平台信息。