ClawTeam 是一个展示智能化团队协作的平台，通过 7 个专业化 Agent 角色演示现代团队的协作模式。每个 Agent 都有独特的职责和能力，通过协调中心进行智能任务编排和调度。
- 🤖 专业化分工 - 每个 Agent 专注于自己擅长的领域
- 🔄 智能协作 - 自动化任务分配和流程编排
- 📊 质量保证 - 端到端的质量验证体系
- 🔒 安全隔离 - 企业级安全架构设计
- 动态 Hero Section - 吸引眼球的动画效果
- Agent Cards 滚动展示 - 流畅的卡片滚动体验
- Enterprise Features 板块 - 展示企业级特性
- 响应式设计 - 完美适配各种设备
- 7 个专业角色 - 涵盖开发、文档、调研等各个方面
- 智能任务分配 - 根据任务类型自动匹配 Agent
- 并行执行能力 - 多 Agent 并行处理提升效率
- 实时状态更新 - 可视化展示 Agent 工作状态
- 实时数据展示 - 动态更新统计数据
- 交互式图表 - 支持点击和悬停交互
- 性能监控 - 实时监控 Agent 工作状态
- 代码审查 - Verifier Agent 进行代码审查
- 测试覆盖 - 完整的自动化测试体系
- 性能优化 - 持续性能监控和优化
- 安全检查 - 自动安全漏洞扫描
- HTML5 - 语义化标签
- CSS3 - 现代 CSS 特性（Grid、Flexbox、动画）
- JavaScript ES6+ - 现代化 JavaScript
- 响应式设计 - 移动优先设计理念
- 模块化设计 - 组件独立、低耦合
- 事件驱动 - 异步消息传递
- 状态管理 - 集中式状态管理
- 性能优化 - 懒加载、虚拟滚动
- Git - 版本控制
- OpenSpec - 规范化开发流程
- 自动化部署 - CI/CD 流程
- 现代浏览器（Chrome、Firefox、Safari、Edge）
- 本地 Web 服务器（可选，用于开发）
# 克隆仓库
git clone https://github.com/your-org/clawteam-showcase.git
# 进入项目目录
cd clawteam-showcase
# 方式 1: 直接打开
open index.html
# 方式 2: 使用本地服务器（推荐）
# Python 3
python -m http.server 8000
# Node.js (需要安装 http-server)
npx http-server -p 8000
# 访问 http://localhost:8000clawteam-showcase/
├── index.html # 主页面
├── styles.css # 样式文件
├── script.js # 主脚本
├── agent-cards.js # Agent 卡片组件
├── agent-cards-styles.css
├── openspec/ # OpenSpec 规范文件
└── README.md # 本文档
ClawTeam 由 7 个专业 Agent 组成，每个都有独特的职责和能力：
| Agent | 角色 | 核心能力 | 技术栈 |
|---|---|---|---|
| Kev | 🎯 协调官 | 策略规划、资源调度、团队协调 | 项目管理、沟通协调 |
| Rex | 💻 全栈工程师 | 代码开发、系统架构、性能优化 | JavaScript、Python、架构设计 |
| Doc | 📝 文档专家 | 知识管理、文档生成、内容组织 | Markdown、技术写作 |
| Scout | 🔍 信息采集官 | 信息检索、数据采集、市场调研 | 数据分析、信息处理 |
| Morgan | 📢 发布专员 | 内容发布、媒体运营、社区管理 | 内容管理、社交媒体 |
| Sage | 💡 战略顾问 | 战略规划、决策支持、风险分析 | 业务分析、战略思维 |
| Verifier | ✅ 质量验证 | 代码审查、质量保证、测试验证 | 测试框架、代码审查 |
用户请求
↓
Kev (协调官) - 任务分析 & 分配
↓
├→ Rex (开发) - 功能实现
├→ Doc (文档) - 文档编写
├→ Scout (调研) - 信息收集
└→ Sage (顾问) - 方案评审
↓
Verifier (验证) - 质量检查
↓
Morgan (发布) - 结果发布
↓
完成交付
┌─────────────────────────────────────────────────┐
│ 用户界面层 (UI Layer) │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ HERO │ │ AGENT │ │ FEATURES │ │
│ │ SECTION │ │ CARDS │ │ SECTION │ │
│ └──────────┘ └──────────┘ └──────────┘ │
└─────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────┐
│ 业务逻辑层 (Business Layer) │
│ ┌──────────────────────────────────────────┐ │
│ │ Agent 协调中心 (Kev) │ │
│ └──────────────────────────────────────────┘ │
│ ↓ ↓ ↓ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Rex │ │ Doc │ │ Scout │ │
│ └──────────┘ └──────────┘ └──────────┘ │
└─────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────┐
│ 数据层 (Data Layer) │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ 配置数据 │ │ 状态管理 │ │ 日志记录 │ │
│ └──────────┘ └──────────┘ └──────────┘ │
└─────────────────────────────────────────────────┘
- 模块化设计 - 组件独立、低耦合
- 事件驱动 - 异步消息传递
- 状态管理 - 集中式状态管理
- 性能优化 - 懒加载、虚拟滚动
/root/projects/showcase-redesign/
├── index.html # 主页面
├── styles.css # 主样式文件
├── script.js # 主脚本文件
├── agent-cards-section.html # Agent 卡片 HTML
├── agent-cards-styles.css # Agent 卡片样式
├── agent-cards.js # Agent 卡片脚本
├── performance-patch.css # 性能优化补丁
├── openspec/ # OpenSpec 规范
│ ├── config.yaml
│ ├── schemas/
│ └── changes/
│ └── feature-showcase-redesign-20260322/
│ ├── proposal.md
│ ├── design.md
│ ├── specs.md
│ └── tasks.md
├── PROJECT-COMPLETE.md # 项目完成报告
├── TASK-SUMMARY.md # 任务总结
├── SECURITY-IMPROVEMENTS.md # 安全改进
├── OPTIMIZATION.md # 优化记录
└── README.md # 本文档
- 动态背景动画
- 标题渐变效果
- 响应式布局
- 横向滚动展示
- 悬停交互效果
- 响应式适配
- 特性图标展示
- 动画过渡效果
- 移动端优化
- ✅ 浏览器兼容性测试
- ✅ 响应式设计测试
- ✅ 性能测试
- ✅ 可访问性测试
# 打开浏览器开发者工具
# 查看 Console 确认无错误
# 测试各种屏幕尺寸- 首次内容绘制 (FCP): < 1.5s
- 最大内容绘制 (LCP): < 2.5s
- 累积布局偏移 (CLS): < 0.1
- 首次输入延迟 (FID): < 100ms
我们欢迎所有形式的贡献！
- Fork 本仓库
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 创建 Pull Request
- 遵循现有代码风格
- 添加必要的注释
- 确保代码可读性
- 测试所有更改
- ✨ 初始版本发布
- 🎨 完成 Hero Section 设计
- 🤖 实现 Agent Cards 滚动展示
- 📊 添加 Enterprise Features 板块
- 📝 创建完整文档
- Kev - 协调官
- Rex - 全栈工程师
- Doc - 文档专家
- Scout - 信息采集官
- Morgan - 发布专员
- Sage - 战略顾问
- Verifier - 质量验证
- 项目主页: GitHub Repository
- 问题反馈: GitHub Issues
- 邮箱: team@clawteam.com
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情