SuperAPI AI 工具集

frontend-design-system

前端与建站

查看项目

更新于 10-15 17:30

技能介绍

用途:面向需要生产级 UI 的场景,让生成结果具备一致的设计语言,并覆盖排版、布局与动效规范。

主要能力与用法:先定义设计令牌(颜色、字体、字号、字重、行高、间距 8px 基准、圆角、阴影、断点),再确定页面类型与层级(主 CTA、次级操作、信息架构、响应式断点与堆叠行为),随后按区块生成组件结构(如 hero、features、pricing、CTA)。动效通过 CSS 变量定义时长与缓动,并给出 hover、页面过渡写法。最后做无障碍校验:WCAG 2.1 AA 对比度(正文 4.5:1、大字与 UI 组件 3:1)、键盘导航与焦点可见、语义 HTML 与图片 alt、表单标签关联、正文最小 16px、行高不低于 1.5、触控目标最小 44px。交付阶段输出组件清单(组件、props、变体)、令牌摘要与文件位置。

适用场景:SaaS 落地页、管理后台仪表盘、移动优先多步表单等。也可用于多智能体协作(令牌定义、无障碍评审、代码生成)与三轮校验。

限制:资料未提供安装命令、定价、平台兼容细节与具体效果数据,暂未提供。