ckm:ui-styling - 使用 shadcn/ui 与 Tailwind CSS 构建无障碍界面
使用 shadcn/ui 组件、Tailwind CSS 工具类样式和基于画布的视觉设计系统创建无障碍用户界面。
标签
更新于: 2026-06-30能力
典型输入
典型输出
该技能可以做什么
- 安装 shadcn/ui 组件
- 应用 Tailwind CSS 工具类
- 创建响应式布局
- 实现暗色模式主题
- 自定义主题颜色与令牌
- 构建无障碍表单组件
- 生成基于画布的视觉设计
- 配置 Tailwind 自定义令牌
输入
- React 项目
- Tailwind CSS 配置
- shadcn/ui CLI
- 组件或布局规格说明
输出
- React UI 组件
- Tailwind CSS 配置文件
- 主题配置
- 视觉设计作品
要求
- Node.js 运行环境
- 基于 React 的框架（Next.js、Vite、Remix 或 Astro）
- 已安装 Tailwind CSS
- shadcn/ui CLI
- Python 用于运行自动化脚本