SuperAPI AI 工具集

ui-design-pipeline

设计与创作

查看项目

更新于 10-16 01:18

技能介绍

用途:把 UI 设计拆成五个必须按序执行的阶段,强制先做决策再写代码,从而避免通用化、模板化的 AI 界面。它本身是编排器,只负责顺序与交接,各阶段工艺由专用技能完成。

主要能力与流程:

  1. 方向:先写受众、目的与一种明确的美学立场,提出三种本质不同的方向并选定其一,固定字体搭配、色彩策略、密度与形状语言,输出 design/DIRECTION.md,需用户确认后才写代码。
  2. 系统:把方向落成持久化设计系统文件(默认 design-system/MASTER.md),包含字号、间距、颜色角色、圆角、阴影、断点等 token,并记录禁止项;后续页面先读该文件。
  3. 动效:最后加入,仅用于帮助理解变化;进入用 ease-out,多数动效低于 300ms,优先 transform 与 opacity,尊重 prefers-reduced-motion,输出动效表(元素、触发、时长、缓动、理由),无理由即删除。
  4. 评审:以陌生人视角检查层级、间距、排版及“太安全 vs 太吵”,输出按影响排序的发现与修复项。
  5. 验证:在真实浏览器以移动端 390×844 与桌面端 1440×900 截图,检查溢出、换行、点击目标、对比度与层级,修复后重截,直至通过;无浏览器工具时须如实说明,不得仅凭读代码判定已验证。

使用方式:先检测已安装技能(frontend-design、ui-ux-pro-max、emil-design-eng、impeccable、playwright-cli),缺失则用内置指引完成该阶段,并在阶段末告知一次安装命令,例如 npx skills add https://github.com/anthropics/skills --skill frontend-design、npx skills@latest add emilkowalski/skills、npx impeccable install、npm install -g @playwright/cli@latest。

限制:五阶段必须串行,禁止并行或同时加载多个设计技能,否则指令冲突会退化为平均值;设计系统必须落盘,不能只留在对话中;避免按“AI 特征清单”反向设计。适用场景为落地页、产品界面、仪表盘、文档、邮件等界面设计任务。