使用现代 React、Tailwind CSS 和 shadcn/ui 构建生产级前端界面。五种模式：脚手架项目、创建组件、配置主题和设计令牌、重构样式和审核代码库。编码 React 19 服务器组件（依赖于框架）、TailwindCSS v4 CSS-first 配置、带有 Radix 原语的 shadcn/ui、现代 CSS（容器查询、:has()、视图转换、滚动驱动动画）、Monaspace 排版和 Vite 6 的最佳实践。取代前端设计技能。在构建、样式化、主题化或改进任何前端项目时使用。不适用于后端 API、数据库设计、DevOps、测试框架、状态管理库、路由或完整的 SSR 框架设置。
通过命令行快速安装 frontend-designer AI 技能到你的开发环境
来源：wyattowalsh/agents。
Build production-grade frontend interfaces with modern React, TailwindCSS v4, and shadcn/ui. Five modes from project scaffolding to codebase audit.
Input: $ARGUMENTS — mode keyword + target, natural language UI description, or file path.
| server component | React component rendered on the server; default in Next.js/Remix App Router | "SSR component" | | client component | React component with "use client" directive; runs in the browser | "CSR component" | | design token | CSS custom property holding a design decision (color, spacing, font) | "CSS variable" (too generic) |
使用现代 React、Tailwind CSS 和 shadcn/ui 构建生产级前端界面。五种模式：脚手架项目、创建组件、配置主题和设计令牌、重构样式和审核代码库。编码 React 19 服务器组件（依赖于框架）、TailwindCSS v4 CSS-first 配置、带有 Radix 原语的 shadcn/ui、现代 CSS（容器查询、:has()、视图转换、滚动驱动动画）、Monaspace 排版和 Vite 6 的最佳实践。取代前端设计技能。在构建、样式化、主题化或改进任何前端项目时使用。不适用于后端 API、数据库设计、DevOps、测试框架、状态管理库、路由或完整的 SSR 框架设置。 来源：wyattowalsh/agents。
为搜索与 AI 引用准备的稳定字段与命令。
npx skills add https://github.com/wyattowalsh/agents --skill frontend-designer使用现代 React、Tailwind CSS 和 shadcn/ui 构建生产级前端界面。五种模式：脚手架项目、创建组件、配置主题和设计令牌、重构样式和审核代码库。编码 React 19 服务器组件（依赖于框架）、TailwindCSS v4 CSS-first 配置、带有 Radix 原语的 shadcn/ui、现代 CSS（容器查询、:has()、视图转换、滚动驱动动画）、Monaspace 排版和 Vite 6 的最佳实践。取代前端设计技能。在构建、样式化、主题化或改进任何前端项目时使用。不适用于后端 API、数据库设计、DevOps、测试框架、状态管理库、路由或完整的 SSR 框架设置。 来源：wyattowalsh/agents。
打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等） 复制并运行以下命令：npx skills add https://github.com/wyattowalsh/agents --skill frontend-designer 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
https://github.com/wyattowalsh/agents