🤖 Vibe Code - AI 编程助手

专业的 AI 编程接口服务，为您的应用赋能 支持 Claude Code、OpenAI Codex 等多种 AI 模型，提供智能编程解决方案

🌟 在线体验

🚀 官方网站: https://xianyu110.github.io/vibe-code

📖 查看教程: API 统计与文档

🛒 立即购买: 获取服务套餐

✨ 核心特性

🌓 智能主题切换

• 深色模式 - 专业程序员首选的深色界面
• 亮色模式 - 清爽明亮的白天主题
• 智能记忆 - 自动保存用户偏好设置
• 平滑过渡 - 优雅的主题切换动画

🌍 多语言支持

• 中文界面 - 完整的简体中文本地化
• 英文界面 - 标准的英文国际化界面
• 一键切换 - 无刷新实时语言切换
• 全覆盖翻译 - 27+ 个界面元素完全翻译

🎨 现代化设计

• 玻璃质感UI - 毛玻璃效果的现代化界面
• 响应式布局 - 完美适配手机、平板、桌面
• 流畅动画 - 丰富的交互动画和视觉反馈
• 渐变配色 - 橙色主题渐变设计

🛠️ 产品矩阵

🌟 Claude Code (推荐)

• ✅ 最新 Claude 模型能力
• ✅ 更长上下文窗口
• ✅ 多语言编程支持
• ✅ 代码分析与重构建议

🎯 OpenAI Codex

• ✅ Codex 系列模型接入
• ✅ IDE 辅助与命令生成
• ✅ 智能代码补全
• ✅ 注释与文档生成

💎 Gemini Code (即将上线)

• 🔄 Gemini 模型接入
• 🔄 多模态理解与生成
• 🔄 以图生代码
• 🔄 跨平台支持

🎯 使用场景

💻 Web 开发

• 智能组件生成
• RESTful API 开发
• 数据库设计优化
• 响应式布局
• 状态管理方案

🔄 代码重构

• 遗留代码现代化
• 设计模式应用
• 代码结构优化
• 性能瓶颈分析
• 复杂度降低

📄 文档生成

• API 文档自动生成
• 智能代码注释
• README 文件生成
• 文档标准化
• Markdown 格式化

🚀 快速开始

第一步：购买或兑换套餐

选择合适的服务（Claude Code / Codex），完成购买或兑换

# 登录控制台选择套餐
# 购买或输入兑换码套餐

第二步：配置 API 地址与密钥

在控制台复制 API 地址与密钥，配置到本地/服务器环境中

export VIBE_API_BASE="https://code.claude-opus.top/"
export VIBE_API_KEY="sk-xxxxx..."

第三步：开始使用

在项目中调用接口或使用命令行工具验证接入

curl -H "Authorization: Bearer $VIBE_API_KEY"
# 或多套餐程中的即时一键安装

📊 服务数据

指标	数值	说明
🧑‍💻 开发者用户	100K+	活跃开发者数量
🔥 API 调用	50M+	累计接口调用次数
⚡ 服务可用率	99.9%	稳定可靠的服务保障

💪 核心优势

⚡ 智能高效

基于最新的AI模型，提供智能代码补全、生成和优化建议

🛡️ 安全可靠

企业级安全保障，数据加密传输，严格的隐私保护

🔧 灵活易用

支持多种编程语言和开发环境，简单的API接口

☁️ 全球部署

全球多地区部署，智能路由，确保低延迟高性能的服务体验

💬 实时协作

支持团队实时协作，代码审查和知识共享

📈 持续进化

模型持续优化升级，不断学习最新技术栈

🛠️ 技术栈

• 前端框架: Vanilla JavaScript (无依赖)
• 样式系统: CSS3 自定义属性 + 响应式设计
• 国际化: 自研 i18n 系统
• 主题系统: CSS 变量 + localStorage 持久化
• 部署平台: GitHub Pages + GitHub Actions
• 构建工具: 纯静态站点，无需构建

📁 项目结构

vibe-code/
├── 📄 index.html              # 主页面 (支持国际化)
├── 🎨 styles.css              # 样式文件 (支持主题切换)
├── ⚡ script.js               # 主要逻辑
├── 🌍 i18n.js                 # 国际化系统
├── ⚙️ _config.yml             # GitHub Pages 配置
├── 📦 package.json            # 项目配置
├── 🚀 .github/workflows/      # 自动部署工作流
├── 📖 README.md               # 项目说明 (当前文件)
├── 📋 SETUP.md                # 快速部署指南
├── 📄 DEPLOY.md               # 详细部署文档
├── 📜 LICENSE                 # MIT 许可证
└── 🙈 .gitignore              # Git 忽略文件

🔧 本地开发

方式一：Python 服务器

git clone https://github.com/xianyu110/vibe-code.git
cd vibe-code
python -m http.server 8000
# 访问 http://localhost:8000

方式二：Node.js 服务器

npm install
npm run dev
# 或使用 npm run serve

方式三：直接打开

# 直接用浏览器打开 index.html
# 或使用 VS Code Live Server 插件

🌐 浏览器支持

浏览器	版本要求	支持状态
Chrome	80+	✅ 完全支持
Firefox	75+	✅ 完全支持
Safari	13+	✅ 完全支持
Edge	80+	✅ 完全支持

📱 响应式断点

• 🖥️ 桌面端: 1200px+
• 💻 笔记本: 768px - 1199px
• 📱 平板: 481px - 767px
• 📱 手机: 320px - 480px

🎨 设计规范

🎨 颜色系统

/* 深色主题 */
--bg-primary: #0a0a0a;
--bg-secondary: #1a1a1a;
--text-primary: #ffffff;
--accent-orange: #ff6b35;

/* 亮色主题 */
--bg-primary: #ffffff;
--bg-secondary: #f8f9fa;
--text-primary: #1a1a1a;
--accent-orange: #ff6b35;

🔤 字体系统

• 主字体: Inter (Google Fonts)
• 备用字体: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto

🚀 部署指南

GitHub Pages 自动部署

1. Fork 本仓库
2. 启用 GitHub Pages (Settings → Pages → GitHub Actions)
3. 自动部署完成后访问网站

自定义域名

1. 在仓库根目录创建 CNAME 文件
2. 写入你的域名
3. 配置 DNS 记录

🔍 SEO 优化

• ✅ 完整的 meta 标签
• ✅ Open Graph 社交媒体卡片
• ✅ Twitter Card 支持
• ✅ 语义化 HTML 结构
• ✅ 快速加载性能
• ✅ 移动端友好

🤝 贡献指南

1. Fork 项目 - 点击右上角 Fork 按钮
2. 创建分支 - git checkout -b feature/amazing-feature
3. 提交更改 - git commit -m 'Add amazing feature'
4. 推送分支 - git push origin feature/amazing-feature
5. 创建 PR - 提交 Pull Request

📝 更新日志

v1.0.0 (2024-09-28)

• 🎉 初始版本发布
• 🌓 深色/亮色主题切换
• 🌍 中英文国际化支持
• 📱 完整响应式设计
• 🔗 外部链接集成
• 🚀 GitHub Pages 部署

📄 许可证

本项目基于 MIT 许可证 开源

MIT License - 可自由使用、修改、分发

📞 联系我们

• 🐛 问题反馈: GitHub Issues
• 💡 功能建议: GitHub Discussions
• 📧 邮件联系: vibe-code@example.com
• 🐙 GitHub: @xianyu110

🌟 支持项目

如果这个项目对你有帮助，请考虑：

• ⭐ 给项目点个星标
• 🔄 分享给其他开发者
• 🐛 报告问题和建议
• 🤝 参与项目贡献

---

🤖 Vibe Code - 让AI编程更有节奏感

Made with ❤️ by Vibe Code Team