Skip to Content
@anker-in/headless-ui 2.0 is released 🎉
AI生成🤖提示模板库提示模板库

AI 提示模板库

这里收集了经过验证的 AI 提示模板，帮助您与 Claude、ChatGPT、Cursor 等 AI 工具更高效地协作。

🚧

(WIP) 逐步完善中

🎨 组件生成模板

基础 UI 组件

# Anker UI 组件生成提示

你是一个专业的 React + TypeScript 开发者，使用 Anker Headless UI 组件库。

## 技术栈要求
- React 18+
- TypeScript (严格类型检查)
- Tailwind CSS 3+ (使用原子化类名)
- @anker-in/headless-ui 组件库

## 设计规范
- 响应式断点: tablet(768px), laptop(1025px), desktop(1440px), lg-desktop(1920px)
- 移动优先设计原则
- 完整的无障碍支持 (ARIA 标签、键盘导航)
- 语义化 HTML 结构

## 可用组件
原子组件: Button, Text, Heading, Input, InputNumber, Checkbox, Radio, Card, Container, Grid, Picture, Avatar, Badge, Alert, Dialog, Drawer, Popover, DropDown, Tabs, Link, Skeleton, LoadingDots, Carousel, Board

## 代码规范
1. 始终定义 TypeScript 接口
2. 使用 React.FC 类型
3. 支持 className 和 children props
4. 遵循组合模式
5. 包含 JSDoc 注释

## 请求
请生成一个 {组件描述} 组件，要求：
- [具体需求描述]

请提供：
1. 完整的 TypeScript 组件代码
2. Props 接口定义
3. 使用示例
4. 响应式行为说明

业务组件模板

# Anker 业务组件生成提示

## 上下文
你正在为 Anker 电商平台开发业务组件，需要处理复杂的产品数据和用户交互。

## 技术要求
- 使用 @anker-in/headless-ui/biz 业务组件
- 集成国际化 (i18n) 支持
- GSAP 动画效果 (如需要)
- 性能优化 (懒加载、虚拟列表等)

## 可用业务组件
HeroBanner, ProductCard, Marquee, SearchPage, AiuiProvider, Tabs, CreativeModule, HeroBanner, FooterNavigation, HeaderNavigation, Faq, FeatureCards, FeatureShowcase, ProductCompare, Ksp, ImageTextFeature 等

## 数据结构
- 产品数据: { id, title, price, images, description, specs, variants }
- 用户数据: { id, name, avatar, preferences }
- 页面数据: { meta, content, tracking }

## 请求
创建一个 {业务场景} 页面/组件，包含：
- [功能需求列表]

请提供：
1. 组件架构设计
2. 数据流设计
3. 完整实现代码
4. 性能优化方案

页面布局模板

# 响应式页面布局提示

## 目标
创建一个现代化、响应式的页面布局，支持多设备和无障碍访问。

## 布局要求
- 使用 Container, Grid 组件作为基础
- 支持嵌套网格布局
- 实现移动优先的响应式设计
- 语义化的 HTML 结构 (header, main, section, aside, footer)

## 响应式规则
```css
mobile: < 768px (默认)
tablet: 768px - 1024px
laptop: 1025px - 1439px
desktop: 1440px - 1919px
lg-desktop: ≥ 1920px

组件组合

  • 页眉: HeaderNavigation
  • 主内容: HeroBanner + 内容区域
  • 侧边栏: 筛选器/导航
  • 页脚: FooterNavigation

请求

设计一个 [页面类型] 页面，要求：

  • [具体布局需求]

请提供：

  1. 页面结构设计
  2. 响应式断点规划
  3. 完整布局代码
  4. 无障碍性说明

## 🔧 调试和优化模板

### 性能优化提示

```plaintext copy
# React 性能优化提示

## 现有代码
[粘贴您的组件代码]

## 优化目标
请帮我优化这个组件的性能，重点关注：

1. **渲染优化**
   - 使用 React.memo 防止不必要的重渲染
   - 优化 useEffect 依赖项
   - 实现虚拟化 (如果是列表组件)

2. **代码分割**
   - 使用 React.lazy 进行组件懒加载
   - 添加适当的 Suspense 边界

3. **状态管理**
   - 优化 useState 使用
   - 避免状态提升过度

4. **网络优化**
   - 实现数据预取
   - 添加错误边界
   - 优化图片加载

请提供优化后的代码和性能改进说明。

测试生成模板

# 组件测试用例生成

## 组件代码
[粘贴组件代码]

## 测试要求
请为这个组件生成完整的测试套件，包括：

1. **单元测试**
   - 基本渲染测试
   - Props 传递测试
   - 事件处理测试
   - 条件渲染测试

2. **集成测试**
   - 用户交互流程
   - 表单提交流程
   - 错误处理流程

3. **可访问性测试**
   - ARIA 标签检查
   - 键盘导航测试
   - 焦点管理测试

## 工具链
- Jest + Testing Library
- @testing-library/react
- @testing-library/jest-dom
- @testing-library/user-event

请提供完整的测试文件和覆盖率报告建议。

🎯 专业场景模板

# 电商产品组件生成

基于 Anker 电商平台需求，生成一个产品展示组件：

## 业务需求
- 产品多媒体展示 (图片、视频、3D)
- 规格参数对比
- 价格和促销信息
- 购买和加购物车功能
- 用户评价展示
- 相关推荐

## 数据结构
```typescript
interface Product {
  id: string
  title: string
  price: {
    current: number
    original?: number
    currency: string
  }
  images: Array<{url: string, alt: string}>
  specs: Record<string, any>
  variants: Array<{id: string, name: string, options: any[]}>
  reviews: {average: number, count: number}
  availability: 'in-stock' | 'out-of-stock' | 'pre-order'
}

交互要求

  • 图片缩放和切换
  • 规格选择器
  • 数量选择器
  • 一键购买/加购物车
  • 收藏功能
  • 分享功能

请生成完整的产品详情组件。

</Tabs.Tab>

<Tabs.Tab>
```plaintext copy
# CMS 内容组件生成

为 Anker 内容管理系统创建动态内容组件：

## 内容类型
- 文章/博客
- 产品说明书
- FAQ 问答
- 视频教程
- 图片画廊

## 编辑器功能
- 富文本编辑
- 媒体上传和管理
- SEO 优化
- 多语言支持
- 版本控制
- 协作编辑

## 组件需求
使用 CreativeModule, Tabs, MediaPlayer 等组件构建：
- 内容渲染器
- 编辑器界面
- 预览模式
- 发布流程

请创建一个灵活的内容管理组件系统。

📝 使用建议

1. 提示优化技巧

💡

具体化需求: 提供详细的功能需求、数据结构和交互说明，AI 能生成更精确的代码。

❌ 不好的提示: "创建一个产品卡片"
✅ 好的提示: "创建一个电商产品卡片，包含产品图片、标题、价格、规格选择器和购买按钮，支持横竖两种布局"

2. 迭代改进策略

1. 先生成基础版本
2. 测试核心功能
3. 逐步添加特性
4. 性能和体验优化
5. 无障碍和测试完善

3. 代码审查清单

在使用 AI 生成的代码前，请检查：

  • TypeScript 类型定义完整
  • 响应式断点正确使用
  • 无障碍属性完整 (aria-*, role)
  • 错误边界和加载状态
  • 性能优化 (memo, lazy loading)
  • 测试用例覆盖
🚀

这些模板是活跃文档，会根据社区反馈持续更新。如果您有更好的提示模板，欢迎贡献！

Last updated on
AI生成系统