用途：这是一个面向 AI 代理的前端设计工作流技能，帮助 Claude 使用 React、Tailwind CSS 和 shadcn/ui 生成生产质量的前端界面，强调间距一致性、视觉层级、对齐精度、响应式布局与干净的组件组合，目标是让界面显得经过刻意设计而非自动生成。
主要能力：优先处理间距与对齐；建立清晰的视觉层级；避免过度渐变、阴影滥用、布局拥挤等“AI 味”设计；保持组件模块化、可组合、可扩展；正确使用 Tailwind 工具类；以 shadcn/ui 作为可定制基础。工作流包括定义布局结构、搭建核心布局系统、生成可复用组件、优化排版与间距、改进响应式、添加视觉润色、最终校验。
使用方式：需先安装 Node.js（https://nodejs.org），创建 Next.js 项目：npx create-next-app@latest；安装 Tailwind CSS：npm install tailwindcss @tailwindcss/postcss postcss；初始化 shadcn/ui：npx shadcn@latest init；启动开发服务器：npm run dev。输入需要 UI 需求、布局目标、品牌方向、目标平台（如 SaaS 仪表盘、落地页、管理面板、移动优先 UI、初创网站），可选设计参考、现有设计系统、品牌色、排版偏好。
适用场景：构建 React 界面、设计 SaaS 仪表盘、创建落地页、生成可复用 UI 系统、提升前端精致度、设计响应式布局、构建生产级前端体验。
限制：不适用于纯后端系统、无设计要求的原始 HTML 原型、非 React 前端技术栈、纯实验性视觉艺术项目。资料未提供具体收费、价格或效果保证信息。