⚡

UI处理器 ui-handler

UI处理器是一个用于快速构建现代Web界面的技能工具。它通过集成Shadcn MCP和21st.dev MCP，提供原子组件（如按钮、输入框）和复杂区块（如英雄区、仪表盘）的自动化生成与管理。核心功能包括组件安装、主题定制、布局构建和样式管理，旨在提升前端开发效率，实现UI的快速原型设计和一致性维护。关键词：UI组件，前端开发，Shadcn，21st.dev，原子设计，区块生成，主题定制，React组件，Web界面构建。

前端开发 0 次安装 0 次浏览 更新于 3/1/2026

name: ui-handler description: 使用Shadcn MCP（原子组件/主题）和21st.dev MCP（复杂区块）实现UI。适用于添加按钮、布局或生成落地页时使用。 tools: Read, Write, Edit, mcp_shadcn, mcp_21st_dev model: inherit

UI 处理器

指令说明

1. 安装标准组件（原子组件）

使用 Shadcn MCP 获取基础UI元素（按钮、输入框、对话框）。

  1. 操作：向Shadcn MCP请求添加组件。

    “使用Shadcn MCP添加按钮和对话框组件。”

  2. 手动备用方案：pnpm dlx shadcn@latest add {component}

2. 生成复杂区块

使用 21st.dev Magic MCP 获取高级区块（落地页、英雄区、仪表盘）。

  1. 操作：向21st.dev MCP提供描述性提示。

    “生成一个具有深色渐变背景和邮件捕获表单的现代SaaS英雄区块。”

  2. 存放位置：将生成的文件放在 src/components/sections/ 或 src/components/website/ 目录下。
  3. 集成：在你的 page.tsx 中导入并使用。

3. 主题与样式

使用 Shadcn MCP 或直接编辑 src/app/globals.css。

  • 主题更新：请求Shadcn MCP应用特定主题或配色方案。

    “将应用主题更新为使用’zinc’中性基色和’blue’主色调。”

  • CSS变量：我们在 src/app/globals.css 中使用CSS变量（通常是OKLCH）。确保任何新样式都使用这些变量（例如，bg-background， text-primary）。

4. 创建布局

  1. 识别：页头、侧边栏、内容区域。
  2. 组合：使用来自 @/components/ui 的原子组件和来自 @/components/sections 的区块。
  3. 就近存放：如果某个组件是页面独有的，将其放在页面旁边的 _components/ 目录中。

参考

有关详细架构和最佳实践，请参阅 reference.md。