SuperAPI AI 工具集

modern-ui-designer

设计与创作

查看项目

更新于 10-16 01:27

技能介绍

用途:为创建专业、简洁、可访问且一致的现代 UI 提供系统化指导,覆盖 Tailwind CSS 最佳实践、shadcn/ui 组件模式、极简设计原则、8px 网格间距、移动优先响应式设计与 WCAG 无障碍合规。

主要能力:给出设计原则(去冗余、留白、内容优先、视觉层级、克制表达);规定 8px 网格体系与 Tailwind 间距刻度(如 p-4、gap-6、space-y-12);提供中性灰加单一强调色的配色策略、语义色与暗色模式写法;说明文字对比度要求(普通文本 4.5:1、大文本 3:1、UI 组件 3:1);总结 Tailwind 工具类优先、@apply 谨慎使用、响应式断点(sm 640、md 768、lg 1024、xl 1280、2xl 1536)、状态变体与类名组织顺序;讲解 shadcn/ui 的 Radix UI + Tailwind + CVA 架构、复制并拥有源码的模式、cn() 合并类名、CSS 变量主题化,以及表单、卡片、对话框等常见模式;并列出 WCAG 2.2 的 POUR 原则、键盘导航、焦点指示、触控目标(最小 44×44px)与语义化 HTML、ARIA 用法。

使用方式:作为设计/开发参考,在编写 Tailwind 与 shadcn/ui 界面时按上述规则组织类名、间距、颜色与无障碍属性;示例代码保持原样使用。

适用场景:需要统一设计规范的前端项目、组件库建设、响应式页面与可访问性改造。

限制:资料未提供安装命令、收费方式、平台支持或效果数据;具体项目配置需结合自身环境,资料中未展开的部分暂未提供。