ui-styling

用途：用于基于 React 的框架（Next.js、Vite、Remix、Astro）构建 UI，实现无障碍组件、工具类优先样式、移动优先响应式布局、深色模式与主题定制，以及设计系统的统一令牌；也用于生成视觉设计、海报或品牌材料。主要能力分三层：组件层为 shadcn/ui（基于 Radix UI 的可访问组件、复制式分发到代码库、TypeScript 类型），样式层为 Tailwind CSS（工具类、构建期处理、自动清理无用代码），视觉设计层为 Canvas（系统化构图、少文字多视觉）。用法：安装配置可用 npx shadcn@latest init，添加组件用 npx shadcn@latest add button card dialog form；也可仅装 Tailwind，如 npm install -D tailwindcss @tailwindcss/vite，并在 CSS 中 @import "tailwindcss"。附带的 Python 脚本可自动化，如 python scripts/shadcn_add.py button card dialog 与 python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter。参考资料文件涵盖组件目录、主题定制、无障碍模式、Tailwind 工具类、响应式与自定义配置、Canvas 设计体系。适用场景包括快速原型、数据表格与图表、命令面板等复杂 UI 模式，以及主题切换和设计令牌落地。限制：资料未提供收费、价格、性能或效果的量化说明；使用需具备 React、TypeScript 与相关框架基础，画布视觉设计部分的具体产出流程暂未提供细节。