generating-components

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Generating Components

生成组件

Agent Workflow (MANDATORY)

Agent工作流（强制执行）

Before ANY component generation, use

TeamCreate

to spawn 3 agents:

fuse-ai-pilot:explore-codebase - Analyze existing UI patterns, colors, typography
fuse-ai-pilot:research-expert - Verify latest component patterns via Context7
mcp__magic__21st_magic_component_inspiration - Search 21st.dev for inspiration

After implementation, run fuse-ai-pilot:sniper for validation.

在任何组件生成操作之前，使用

TeamCreate

生成3个Agent：

fuse-ai-pilot:explore-codebase - 分析现有UI模式、配色、排版
fuse-ai-pilot:research-expert - 通过Context7验证最新组件模式
mcp__magic__21st_magic_component_inspiration - 在21st.dev搜索灵感

实现完成后，运行fuse-ai-pilot:sniper进行验证。

Overview

概述

Feature	Description
Gemini Design MCP	AI-powered frontend generation (create, modify, snippet)
21st.dev	Component inspiration and builder
shadcn/ui	Copy-paste component library
Anti-AI-Slop	Mandatory rules against generic designs

功能	说明
Gemini Design MCP	AI驱动的前端生成（创建、修改、代码片段）
21st.dev	组件灵感与构建工具
shadcn/ui	可直接复制粘贴的组件库
Anti-AI-Slop	针对通用设计的强制规范

Critical Rules

核心规则

ALWAYS use Gemini Design - Never write UI code manually
Search inspiration first - 21st.dev before coding
Match existing tokens - Analyze codebase before generating
No forbidden fonts - Inter, Roboto, Arial are BANNED
Framer Motion required - Every component needs animations

必须使用Gemini Design - 禁止手动编写UI代码
先搜索灵感 - 编码前先参考21st.dev
匹配现有设计令牌 - 生成前先分析代码库
禁用指定字体 - Inter、Roboto、Arial均被禁止使用
必须使用Framer Motion - 所有组件都需要添加动画

Architecture

架构

components/
├── ui/
│   ├── Button.tsx        (~40 lines)
│   ├── Card.tsx          (~50 lines)
│   └── HeroSection.tsx   (~80 lines)
└── sections/
    ├── HeroBackground.tsx (~30 lines)
    └── FeatureGrid.tsx    (~60 lines)

→ See hero-section.md for complete example

components/
├── ui/
│   ├── Button.tsx        (~40 lines)
│   ├── Card.tsx          (~50 lines)
│   └── HeroSection.tsx   (~80 lines)
└── sections/
    ├── HeroBackground.tsx (~30 lines)
    └── FeatureGrid.tsx    (~60 lines)

→ 完整示例请查看hero-section.md

Reference Guide

参考指南

Concepts

概念

Topic	Reference	When to Consult
Gemini Workflow	gemini-design-workflow.md	MANDATORY - Read first
21st.dev	21st-dev.md	Component inspiration
shadcn/ui	shadcn.md	Component library
Buttons	buttons-guide.md	Button states, sizing
Forms	forms-guide.md	Validation, layout
Cards	cards-guide.md	Card patterns
Icons	icons-guide.md	Icon usage
UI Design	ui-visual-design.md	2026 trends, animations
Grids	grids-layout.md	Layout system
Patterns	design-patterns.md	Common patterns

主题	参考文档	适用场景
Gemini工作流	gemini-design-workflow.md	强制执行 - 请先阅读
21st.dev	21st-dev.md	组件灵感获取
shadcn/ui	shadcn.md	组件库使用
按钮	buttons-guide.md	按钮状态、尺寸设置
表单	forms-guide.md	表单验证、布局
卡片	cards-guide.md	卡片设计模式
图标	icons-guide.md	图标使用规范
UI设计	ui-visual-design.md	2026设计趋势、动画
栅格系统	grids-layout.md	布局系统使用
设计模式	design-patterns.md	通用设计模式参考

Templates

模板

Template	When to Use
hero-section.md	Landing page hero
hero-glassmorphism.md	Glassmorphism hero
feature-grid.md	Features showcase
pricing-card.md	Pricing tiers
contact-form.md	Contact forms
testimonial-card.md	Reviews/testimonials
stats-section.md	Stats with counters
faq-accordion.md	FAQ sections

模板	适用场景
hero-section.md	落地页Hero区块
hero-glassmorphism.md	毛玻璃效果Hero区块
feature-grid.md	功能展示栅格
pricing-card.md	定价套餐卡片
contact-form.md	联系表单
testimonial-card.md	用户评价/推荐卡片
stats-section.md	带计数器的数据统计区块
faq-accordion.md	FAQ折叠面板

Quick Reference

快速参考

Gemini Design Tools

Gemini Design工具

typescript

// Create full view from scratch
mcp__gemini-design__create_frontend({
  prompt: "Hero section with glassmorphism",
  designSystem: "contents of design-system.md"
})

// Modify existing component
mcp__gemini-design__modify_frontend({
  existingCode: "<Button>...",
  prompt: "Add hover animation"
})

// Generate snippet
mcp__gemini-design__snippet_frontend({
  prompt: "Loading spinner"
})

→ See gemini-design-workflow.md for complete workflow

typescript

// 从零开始创建完整视图
mcp__gemini-design__create_frontend({
  prompt: "Hero section with glassmorphism",
  designSystem: "contents of design-system.md"
})

// 修改现有组件
mcp__gemini-design__modify_frontend({
  existingCode: "<Button>...",
  prompt: "Add hover animation"
})

// 生成代码片段
mcp__gemini-design__snippet_frontend({
  prompt: "Loading spinner"
})

→ 完整工作流请查看gemini-design-workflow.md

Anti-AI-Slop Table

反AI通用设计对照表

FORBIDDEN	USE INSTEAD
Inter, Roboto, Arial	Clash Display, Satoshi, Syne
Purple/pink gradients	CSS variables, sharp accents
Border-left indicators	Icon + bg-*/10 rounded
Flat backgrounds	Glassmorphism, gradient orbs
No animations	Framer Motion stagger

→ See ui-visual-design.md for 2026 trends

禁用项	替代方案
Inter, Roboto, Arial	Clash Display, Satoshi, Syne
紫/粉色渐变	CSS变量、鲜明强调色
左侧边框指示器	图标 + bg-*/10 圆角样式
纯色背景	毛玻璃效果、渐变球体
无动画	Framer Motion stagger动画

→ 2026设计趋势请查看ui-visual-design.md

Best Practices

最佳实践

DO

建议做法

Read gemini-design-workflow.md FIRST
Search 21st.dev for inspiration before coding
Match existing design tokens exactly
Use Framer Motion for all animations
Split components into <100 line files

先阅读gemini-design-workflow.md
编码前先在21st.dev搜索灵感
完全匹配现有设计令牌
所有动画均使用Framer Motion
将组件拆分为少于100行的文件

DON'T

禁止做法

Write UI code manually (use Gemini Design)
Use forbidden fonts (Inter, Roboto, Arial)
Skip inspiration search phase
Forget hover/focus states
Create components without animations

手动编写UI代码（必须使用Gemini Design）
使用禁用字体（Inter、Roboto、Arial）
跳过灵感搜索阶段
忽略 hover/focus 状态
创建无动画的组件

Framework Delegation (AFTER Gemini)

框架委托（Gemini生成后）

After generating UI, ALWAYS delegate to framework expert for SOLID validation.

生成UI后，必须委托给框架专家进行SOLID验证。

Detection → Expert

检测 → 专家分配

Project Files	Delegate To
`next.config.*`	`fuse-nextjs:nextjs-expert`
`package.json` + React	`fuse-react:react-expert`
`composer.json`	`fuse-laravel:laravel-expert`

项目文件	委托对象
`next.config.*`	`fuse-nextjs:nextjs-expert`
`package.json` + React	`fuse-react:react-expert`
`composer.json`	`fuse-laravel:laravel-expert`

Why Delegate?

为什么需要委托？

design-expert handles:

✅ Beautiful UI (Anti-AI-Slop)
✅ Animations (Framer Motion)
✅ Accessibility (WCAG 2.2)

Framework expert handles:

✅ SOLID compliance (files < 100 lines)
✅ Framework patterns (App Router, Server Components)
✅ Integration (Better Auth, Prisma, TanStack)

设计专家负责：

✅ 美观的UI（符合反AI通用设计规范）
✅ 动画效果（Framer Motion）
✅ 可访问性（WCAG 2.2标准）

框架专家负责：

✅ SOLID合规性（文件少于100行）
✅ 框架模式适配（App Router、Server Components）
✅ 集成验证（Better Auth、Prisma、TanStack）

Delegation Workflow

委托工作流

1. Generate component with Gemini Design
2. Detect framework from project files
3. Launch Task with framework expert
4. Expert validates SOLID + patterns
5. sniper runs final validation

1. 使用Gemini Design生成组件
2. 从项目文件检测框架类型
3. 向框架专家发起任务
4. 专家验证SOLID合规性与模式适配
5. sniper执行最终验证