<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloudBase AI Toolkit 2.0 - 三大核心能力</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Serif+Display&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--neon-green: #00FF88;
--neon-orange: #FF6B35;
--neon-cyan: #00D4FF;
--dark-bg: #0A0E27;
--dark-surface: #141B2D;
--text-primary: #E8EAED;
--text-secondary: #9AA0A6;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Space Mono', monospace;
background: var(--dark-bg);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
position: relative;
}
/* Animated Grid Background */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(0, 255, 136, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 255, 136, 0.03) 1px, transparent 1px);
background-size: 50px 50px;
animation: gridMove 20s linear infinite;
pointer-events: none;
z-index: 0;
}
@keyframes gridMove {
0% { transform: translate(0, 0); }
100% { transform: translate(50px, 50px); }
}
/* Hero Section */
.hero {
min-height: 100vh;
padding: 6rem 4rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
z-index: 1;
background: radial-gradient(ellipse at center, rgba(0, 255, 136, 0.05) 0%, transparent 70%);
}
.hero h1 {
font-family: 'DM Serif Display', serif;
font-size: 5rem;
font-weight: 400;
line-height: 1.1;
margin-bottom: 2rem;
color: var(--text-primary);
text-shadow: 0 0 30px rgba(0, 255, 136, 0.3);
}
.hero-subtitle {
font-size: 1.5rem;
color: var(--text-secondary);
margin-bottom: 3rem;
max-width: 800px;
line-height: 1.8;
}
.version-badge {
display: inline-block;
padding: 0.5rem 1.5rem;
background: var(--dark-surface);
border: 2px solid var(--neon-green);
color: var(--neon-green);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 2rem;
}
/* Core Features - 3 Main Points */
.core-section {
padding: 8rem 4rem;
position: relative;
z-index: 1;
}
.core-container {
max-width: 1400px;
margin: 0 auto;
}
.section-title {
font-family: 'DM Serif Display', serif;
font-size: 4rem;
font-weight: 400;
color: var(--text-primary);
margin-bottom: 1rem;
text-align: center;
}
.section-subtitle {
font-size: 1.5rem;
color: var(--text-secondary);
text-align: center;
margin-bottom: 5rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.core-feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
align-items: center;
margin-bottom: 10rem;
position: relative;
}
.core-feature:nth-child(even) {
grid-template-columns: 1fr 1fr;
}
.core-feature:nth-child(even) .core-visual {
order: 2;
}
.core-feature:nth-child(even) .core-content {
order: 1;
}
.core-content {
position: relative;
}
.core-number {
position: absolute;
top: -3rem;
left: -2rem;
font-size: 12rem;
font-weight: 700;
color: rgba(0, 255, 136, 0.1);
font-family: 'DM Serif Display', serif;
z-index: -1;
}
.core-title {
font-family: 'DM Serif Display', serif;
font-size: 3.5rem;
color: var(--neon-green);
margin-bottom: 2rem;
line-height: 1.2;
}
.core-description {
font-size: 1.25rem;
color: var(--text-secondary);
line-height: 1.8;
margin-bottom: 2rem;
}
.core-benefits {
background: var(--dark-surface);
border-left: 4px solid var(--neon-green);
padding: 2rem;
margin-top: 2rem;
}
.benefit-item {
display: flex;
align-items: start;
margin-bottom: 1rem;
}
.benefit-item:last-child {
margin-bottom: 0;
}
.benefit-icon {
color: var(--neon-green);
font-size: 1.5rem;
margin-right: 1rem;
flex-shrink: 0;
}
.benefit-text {
color: var(--text-primary);
font-size: 1.1rem;
line-height: 1.6;
}
.core-visual {
background: var(--dark-surface);
border: 2px solid rgba(0, 255, 136, 0.2);
padding: 3rem;
border-radius: 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.875rem;
line-height: 1.8;
position: relative;
}
.core-visual::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: var(--neon-green);
box-shadow: 0 0 10px var(--neon-green);
}
.code-keyword { color: var(--neon-cyan); }
.code-string { color: var(--neon-green); }
.code-comment { color: var(--text-secondary); }
.code-function { color: var(--neon-orange); }
/* Skill System Section */
.skill-section {
padding: 8rem 4rem;
background: var(--dark-surface);
position: relative;
z-index: 1;
}
.skill-container {
max-width: 1200px;
margin: 0 auto;
}
.skill-explanation {
background: var(--dark-bg);
border: 2px solid rgba(0, 255, 136, 0.3);
padding: 4rem;
border-radius: 8px;
margin-top: 4rem;
}
.skill-title {
font-family: 'DM Serif Display', serif;
font-size: 2.5rem;
color: var(--neon-green);
margin-bottom: 2rem;
}
.skill-description {
font-size: 1.25rem;
color: var(--text-secondary);
line-height: 1.8;
margin-bottom: 2rem;
}
.skill-comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
margin-top: 3rem;
}
.comparison-item {
padding: 2rem;
background: var(--dark-surface);
border-radius: 8px;
}
.comparison-before {
border-left: 4px solid var(--neon-orange);
}
.comparison-after {
border-left: 4px solid var(--neon-green);
}
.comparison-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.comparison-before .comparison-title {
color: var(--neon-orange);
}
.comparison-after .comparison-title {
color: var(--neon-green);
}
.comparison-list {
list-style: none;
color: var(--text-secondary);
line-height: 1.8;
}
.comparison-list li {
margin-bottom: 0.75rem;
padding-left: 1.5rem;
position: relative;
}
.comparison-list li::before {
content: "•";
position: absolute;
left: 0;
color: var(--neon-green);
}
/* Stats Section */
.stats-section {
padding: 6rem 4rem;
background: linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-surface) 100%);
position: relative;
z-index: 1;
}
.stats-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4rem;
text-align: center;
}
.stat-number {
font-family: 'DM Serif Display', serif;
font-size: 5rem;
font-weight: 400;
display: block;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, var(--neon-green), var(--neon-cyan));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-label {
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--text-secondary);
}
/* CTA Section */
.cta-section {
padding: 8rem 4rem;
text-align: center;
position: relative;
z-index: 1;
}
.cta-title {
font-family: 'DM Serif Display', serif;
font-size: 3.5rem;
color: var(--text-primary);
margin-bottom: 2rem;
}
.cta-description {
font-size: 1.25rem;
color: var(--text-secondary);
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Buttons */
.btn {
display: inline-block;
padding: 1rem 2.5rem;
text-decoration: none;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
transition: all 0.3s ease;
margin: 0 0.5rem;
}
.btn-primary {
background: var(--neon-green);
color: var(--dark-bg);
border: 2px solid var(--neon-green);
}
.btn-primary:hover {
box-shadow: 0 0 30px rgba(0, 255, 136, 0.5);
transform: translateY(-2px);
}
.btn-secondary {
background: transparent;
color: var(--neon-green);
border: 2px solid var(--neon-green);
}
.btn-secondary:hover {
background: var(--neon-green);
color: var(--dark-bg);
box-shadow: 0 0 30px rgba(0, 255, 136, 0.5);
}
/* Footer */
.footer {
padding: 4rem;
background: var(--dark-bg);
border-top: 1px solid rgba(0, 255, 136, 0.2);
text-align: center;
}
.footer-links {
display: flex;
justify-content: center;
gap: 3rem;
flex-wrap: wrap;
margin-bottom: 2rem;
}
.footer-link {
color: var(--text-secondary);
text-decoration: none;
font-weight: 400;
transition: all 0.3s ease;
position: relative;
}
.footer-link::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: var(--neon-green);
transition: width 0.3s ease;
}
.footer-link:hover {
color: var(--neon-green);
}
.footer-link:hover::after {
width: 100%;
}
/* Responsive */
@media (max-width: 1024px) {
.core-feature {
grid-template-columns: 1fr !important;
gap: 4rem;
}
.core-visual {
order: -1 !important;
}
.skill-comparison {
grid-template-columns: 1fr;
}
.stats-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.hero h1 {
font-size: 3rem;
}
.section-title {
font-size: 2.5rem;
}
.core-title {
font-size: 2.5rem;
}
.stats-container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!-- Hero Section -->
<section class="hero">
<span class="version-badge">Version 2.0</span>
<h1>三大核心能力</h1>
<p class="hero-subtitle">
UI 设计 · 登录认证 · 数据库<br/>
让 AI 生成专业级应用，告别千篇一律
</p>
<div style="margin-top: 3rem;">
<a href="https://docs.cloudbase.net/ai/cloudbase-ai-toolkit/" class="btn btn-primary">立即开始</a>
<a href="https://github.com/TencentCloudBase/CloudBase-AI-ToolKit" class="btn btn-secondary">查看代码</a>
</div>
</section>
<!-- Core Features - 3 Main Points -->
<section class="core-section">
<div class="core-container">
<h2 class="section-title">三大核心能力</h2>
<p class="section-subtitle">解决 AI 编程中最关键的三个问题</p>
<!-- Feature 1: UI Design -->
<div class="core-feature">
<div class="core-content">
<div class="core-number">01</div>
<h3 class="core-title">专业级 UI 设计</h3>
<p class="core-description">
告别千篇一律的 AI 风格。AI 现在能够生成具有独特美学风格的界面，每个设计都有专业设计师的水准。
</p>
<div class="core-benefits">
<div class="benefit-item">
<span class="benefit-icon">✓</span>
<span class="benefit-text">强制设计规范输出，确保每个界面都有独特风格</span>
</div>
<div class="benefit-item">
<span class="benefit-icon">✓</span>
<span class="benefit-text">禁止通用 AI 美学（紫色渐变、系统字体、居中布局）</span>
</div>
<div class="benefit-item">
<span class="benefit-icon">✓</span>
<span class="benefit-text">提供完整的设计思维框架和最佳实践</span>
</div>
</div>
</div>
<div class="core-visual">
<div style="color: var(--text-secondary);">// AI 生成 UI 时的设计规范</div>
<div style="margin-top: 1.5rem;">
<div style="color: var(--code-keyword);">DESIGN</div>
<div style="color: var(--code-keyword); margin-top: 1rem;">SPECIFICATION</div>
<div style="margin-top: 1rem;">
<div style="color: var(--code-string);">1. Purpose: 五子棋游戏界面</div>
<div style="color: var(--code-string);">2. Aesthetic: Industrial/utilitarian</div>
<div style="color: var(--code-string);">3. Colors: #1A1A2E, #00D4FF, #FF6B35</div>
<div style="color: var(--code-string);">4. Typography: Space Mono, DM Serif</div>
<div style="color: var(--code-string);">5. Layout: Asymmetric grid</div>
</div>
<div style="color: var(--code-comment); margin-top: 1rem;">// ❌ 禁止：紫色渐变、Inter 字体、居中布局</div>
<div style="color: var(--code-comment);">// ✅ 必须：独特风格、专业设计、视觉层次</div>
</div>
</div>
</div>
<!-- Feature 2: Authentication -->
<div class="core-feature">
<div class="core-content">
<div class="core-number">02</div>
<h3 class="core-title">智能登录认证</h3>
<p class="core-description">
AI 自动识别项目类型，Web 和小程序使用不同的认证方式。你不需要了解技术细节，AI 帮你搞定一切。
</p>
<div class="core-benefits">
<div class="benefit-item">
<span class="benefit-icon">✓</span>
<span class="benefit-text">Web 项目：自动使用 CloudBase Web SDK 内置认证</span>
</div>
<div class="benefit-item">
<span class="benefit-icon">✓</span>
<span class="benefit-text">小程序项目：自然免登录，在云函数中获取 OPENID</span>
</div>
<div class="benefit-item">
<span class="benefit-icon">✓</span>
<span class="benefit-text">减少配置错误，开箱即用</span>
</div>
</div>
</div>
<div class="core-visual">
<div style="color: var(--text-secondary);">// AI 自动选择认证方式</div>
<div style="margin-top: 1.5rem;">
<div style="color: var(--code-function);">if (projectType === 'web') {</div>
<div style="padding-left: 1.5rem; color: var(--code-string);">
// 使用 Web SDK 内置认证<br/>
<span style="color: var(--code-keyword);">const</span> auth = app.auth();<br/>
auth.signInAnonymously();
</div>
<div style="color: var(--code-function);">} else if (projectType === 'miniprogram') {</div>
<div style="padding-left: 1.5rem; color: var(--code-string);">
// 小程序自然免登录<br/>
<span style="color: var(--code-keyword);">const</span> openid = cloud.getWXContext().OPENID;
</div>
<div style="color: var(--code-function);">}</div>
</div>
<div style="color: var(--code-comment); margin-top: 1rem;">// AI 自动识别，无需手动配置</div>
</div>
</div>
<!-- Feature 3: Database -->
<div class="core-feature">
<div class="core-content">
<div class="core-number">03</div>
<h3 class="core-title">完整数据库能力</h3>
<p class="core-description">
支持 MySQL 和 NoSQL 两种数据库，AI 可以帮你完成从数据建模到数据库操作的全流程。
</p>
<div class="core-benefits">
<div class="benefit-item">
<span class="benefit-icon">✓</span>
<span class="benefit-text">MySQL：查询、SQL 执行、表管理、数据建模</span>
</div>
<div class="benefit-item">
<span class="benefit-icon">✓</span>
<span class="benefit-text">NoSQL：Web 和小程序端完整支持</span>
</div>
<div class="benefit-item">
<span class="benefit-icon">✓</span>
<span class="benefit-text">智能数据建模，通过 Mermaid ER 图创建数据模型</span>
</div>
</div>
</div>
<div class="core-visual">
<div style="color: var(--text-secondary);">// AI 处理数据库操作</div>
<div style="margin-top: 1.5rem;">
<div style="color: var(--code-comment);">// MySQL 查询</div>
<div style="color: var(--code-keyword);">SELECT</div> * <div style="color: var(--code-keyword);">FROM</div> users<br/>
<div style="color: var(--code-keyword);">WHERE</div> status = 'active';
<div style="margin-top: 1.5rem; color: var(--code-comment);">// NoSQL 操作</div>
<div>
db.collection('users')<br/>
.where({ status: 'active' })<br/>
.get();
</div>
<div style="margin-top: 1.5rem; color: var(--code-comment);">// 数据建模</div>
<div style="color: var(--code-string);">通过 Mermaid ER 图智能创建数据模型</div>
</div>
</div>
</div>
</div>
</section>
<!-- Skill System Section -->
<section class="skill-section">
<div class="skill-container">
<h2 class="section-title">技术突破：Skill 体系</h2>
<p class="section-subtitle">从规则到技能，让 AI 更专业</p>
<div class="skill-explanation">
<h3 class="skill-title">为什么 Skill 体系如此重要？</h3>
<p class="skill-description">
在 1.x 版本中，我们使用规则（Rules）来指导 AI。但规则是分散的、缺乏结构的。2.0 版本引入 Skill 体系，将规则重构为结构化的技能模块，让 AI 能够像专业开发者一样思考和工作。
</p>
<div class="skill-comparison">
<div class="comparison-item comparison-before">
<div class="comparison-title">1.x 规则体系</div>
<ul class="comparison-list">
<li>分散的规则文件</li>
<li>缺乏结构化组织</li>
<li>难以组合和复用</li>
<li>AI 理解困难</li>
<li>代码质量不稳定</li>
</ul>
</div>
<div class="comparison-item comparison-after">
<div class="comparison-title">2.0 Skill 体系</div>
<ul class="comparison-list">
<li>结构化的技能模块</li>
<li>完整的知识体系</li>
<li>支持技能组合和复用</li>
<li>AI 理解更准确</li>
<li>代码质量显著提升</li>
</ul>
</div>
</div>
<div style="margin-top: 3rem; padding: 2rem; background: var(--dark-surface); border-radius: 8px;">
<div style="color: var(--neon-green); font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem;">实际效果</div>
<div style="color: var(--text-primary); line-height: 1.8;">
<div style="margin-bottom: 1rem;">✓ <strong>UI 设计</strong>：从千篇一律到专业级设计，每个界面都有独特风格</div>
<div style="margin-bottom: 1rem;">✓ <strong>登录认证</strong>：从配置错误到自动识别，减少 90% 的认证问题</div>
<div style="margin-bottom: 1rem;">✓ <strong>数据库</strong>：从基础操作到完整能力，支持 MySQL 和 NoSQL</div>
<div>✓ <strong>代码质量</strong>：从需要修改到直接可用，生成代码符合最佳实践</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="stats-section">
<div class="stats-container">
<div class="stat-item">
<span class="stat-number">3</span>
<span class="stat-label">核心能力</span>
</div>
<div class="stat-item">
<span class="stat-number">39</span>
<span class="stat-label">MCP 工具</span>
</div>
<div class="stat-item">
<span class="stat-number">15+</span>
<span class="stat-label">AI IDE 支持</span>
</div>
<div class="stat-item">
<span class="stat-number">2.0</span>
<span class="stat-label">最新版本</span>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section">
<h2 class="cta-title">准备好开始了吗？</h2>
<p class="cta-description">
一行配置，立即使用。让 AI 帮你生成专业级 UI、处理登录认证、操作数据库。
</p>
<div style="margin-top: 3rem;">
<a href="https://docs.cloudbase.net/ai/cloudbase-ai-toolkit/" class="btn btn-primary">查看文档</a>
<a href="https://github.com/TencentCloudBase/CloudBase-AI-ToolKit" class="btn btn-secondary">GitHub</a>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-links">
<a href="https://docs.cloudbase.net/ai/cloudbase-ai-toolkit/" class="footer-link">文档</a>
<a href="https://github.com/TencentCloudBase/CloudBase-AI-ToolKit" class="footer-link">GitHub</a>
<a href="https://github.com/TencentCloudBase/CloudBase-AI-ToolKit/issues" class="footer-link">问题反馈</a>
<a href="https://github.com/TencentCloudBase/CloudBase-AI-ToolKit/releases" class="footer-link">更新日志</a>
</div>
<p style="opacity: 0.7; font-size: 0.875rem; color: var(--text-secondary);">
© 2025 TencentCloudBase. MIT License.
</p>
</footer>
</body>
</html>
