SuperAPI AI 工具集

ui-styling

前端与建站

查看项目

更新于 10-16 05:07

技能介绍

用途:在构建 React 系框架界面时提供 UI 样式指导,涵盖 shadcn/ui 组件、Tailwind CSS 工具类、响应式布局、暗色模式与设计系统。适用框架包括 Next.js、Vite、Remix、Astro。

主要能力:组件层采用基于 Radix UI 原语的 shadcn/ui,复制式分发、TypeScript 优先、可组合;样式层采用 Tailwind CSS 工具类,构建时处理、移动优先、设计令牌统一;视觉层提供基于 Canvas 的设计方法,强调视觉表达与系统化构图。覆盖表单与输入、布局与导航、浮层与对话框、反馈与状态、表格与数据显示等组件,以及主题配置、CSS 变量、暗色模式、可访问性(键盘导航、焦点管理、屏幕阅读器)与响应式断点。

使用方式:初始化执行 npx shadcn@latest init,添加组件执行 npx shadcn@latest add button card dialog form。纯 Tailwind 方案可执行 npm install -D tailwindcss @tailwindcss/vite,并在配置中引入插件与 @import "tailwindcss"。脚本方面有 python scripts/shadcn_add.py button card dialog 与 python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter。

限制:资料未提供收费、价格、平台可用性或效果相关说明,暂未提供;具体能力以官方文档与所引参考文件为准。