跳到主要内容

从零到一，用Tuanjie AI轻松创建你的第一个产品网页

创建项目​

新建空白项目 webapp，并使用你偏好的编辑器打开（本文以 VS Code 为例演示）。

安装 Tuanjie AI 插件并完成登录​

请参考 Tuanjie AI 官方文档的快速开始章节，完成插件的安装、激活以及账号登录操作，确保插件能正常调用功能。

设计你的网页​

没有设计师支持也无需担心！你可以借鉴优秀产品的设计思路，本文选取 Continue 官网 作为参考示例。

我们已截取官网首页的两张图片（如下），后续将以这两张图片为输入，借助 Tuanjie AI 的多模态能力，自动识别图中的元素、样式与布局结构。

Bridge Bridge

用 Tuanjie AI 一键创作网页​

我们将基于上述两张参考图片，让 Tuanjie AI 帮我们完成整个网页的制作，具体操作如下：

放置参考图片​

将两张参考图片放到webapp项目的根目录中。

Bridge

在 Tuanjie AI 输入框中输入创作提示​

复制以下提示词粘贴到 Tuanjie AI 的输入框中，确保指令清晰传递创作需求：

请参照根目录的两张图片webpage1.png和webpage1.png的元素、风格和布局帮我创作一个Tuanjie AI的产品网页，要求如下：
1. webpage1.png 是网页的上半部分，webpage2.png 是网页的下半部分
2. 图片中的内容，元素尽量保留和还原 
3. 网页创造完成，使用 npx live-server本地服务器来测试网页
Bridge

查看 Tuanjie AI 的创作结果​

提交提示词后，等待 Tuanjie AI 完成网页创作，实时查看生成过程与最终效果。

Tuanjie AI 创作流程​

收到指令后，Tuanjie AI 会自动将网页制作任务拆解为以下步骤，逐一执行完成：

  1. 解析两张参考图片的界面元素、设计风格与页面布局
  2. 创建 HTML 文件，搭建网页的整体结构框架
  3. 生成 CSS 样式文件，精准还原参考图片的视觉风格
  4. 调用 live-server 启动本地服务，完成网页效果测试

获取并查看网页源代码​

创作完成后，你可在项目目录中找到自动生成的网页源代码文件，既可以直接打开查看代码内容，也能让 Tuanjie AI 基于你的新需求进行二次修改。

以下是本地 Demo 生成的源码文件示例：

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tuanjie AI - 智能编程助手</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 导航栏 - webpage1.png -->
    <header class="header">
        <div class="nav-container">
            <div class="logo">
                <div class="logo-icon">⬢</div>
                <span class="logo-text">Continue</span>
            </div>
            <nav class="nav-menu">
                <a href="#pricing">Pricing</a>
                <a href="#docs">Docs</a>
                <a href="#about">About Us</a>
            </nav>
            <div class="nav-actions">
                <button class="signin-btn">Sign In</button>
                <div class="social-icons">
                    <a href="#" class="social-icon">🐙</a>
                    <a href="#" class="social-icon">😊</a>
                </div>
            </div>
        </div>
    </header>

    <!-- Hero区域 - webpage1.png -->
    <section class="hero">
        <div class="hero-content">
            <h1 class="hero-title">
                <span class="title-part1">Ship faster with</span>
                <span class="title-part2">Continuous AI</span>
            </h1>
            <p class="hero-subtitle">
                The future of coding isn't writing more code. It's delegating the boring parts, so you can build the interesting stuff
            </p>
            <div class="hero-buttons">
                <button class="btn btn-primary">
                    Get started
                    <span class="arrow">→</span>
                </button>
                <button class="btn btn-secondary">Learn more</button>
            </div>
            <div class="hero-image">
                <div class="code-editor-mock">
                    <div class="editor-header">
                        <div class="window-controls">
                            <span class="dot red"></span>
                            <span class="dot yellow"></span>
                            <span class="dot green"></span>
                        </div>
                        <div class="editor-tabs">
                            <span class="tab active">main.py</span>
                            <span class="tab">utils.py</span>
                        </div>
                    </div>
                    <div class="editor-content">
                        <div class="line-numbers">
                            <span>1</span>
                            <span>2</span>
                            <span>3</span>
                            <span>4</span>
                            <span>5</span>
                            <span>6</span>
                            <span>7</span>
                            <span>8</span>
                        </div>
                        <div class="code-content">
                            <div class="code-line">
                                <span class="keyword">def</span> <span class="function">calculate_total</span>(items):
                            </div>
                            <div class="code-line">
                                <span class="indent">    </span><span class="comment"># Calculate the total price</span>
                            </div>
                            <div class="code-line">
                                <span class="indent">    </span><span class="keyword">return</span> <span class="function">sum</span>(item.price <span class="keyword">for</span> item <span class="keyword">in</span> items)
                            </div>
                            <div class="code-line"></div>
                            <div class="code-line">
                                <span class="comment"># AI suggestion appears here</span>
                            </div>
                            <div class="code-line">
                                <span class="ai-suggestion">💡 Suggest optimization for large lists</span>
                            </div>
                            <div class="code-line">
                                <span class="keyword">def</span> <span class="function">optimized_total</span>(items):
                            </div>
                            <div class="code-line">
                                <span class="indent">    </span><span class="keyword">return</span> <span class="function">sum</span>(items, key=<span class="keyword">lambda</span> x: x.price)
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 功能卡片区域 - webpage2.png -->
    <section class="features-section">
        <h2 class="section-title">为何使用 Tuanjie AI</h2>
        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">⚡</div>
                <h3 class="feature-title">DeepSeek R1</h3>
                <p class="feature-description">集成DeepSeek R1模型，提供更智能的代码建议和优化方案</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">⚙️</div>
                <h3 class="feature-title">精细调优</h3>
                <p class="feature-description">针对您的代码库进行个性化调整，提供更精准的建议</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">🔍</div>
                <h3 class="feature-title">代码索引</h3>
                <p class="feature-description">快速索引整个项目的代码，提供全局视角的代码分析</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">🧠</div>
                <h3 class="feature-title">深度研究</h3>
                <p class="feature-description">深入理解代码逻辑，提供架构级别的优化建议</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">👁️</div>
                <h3 class="feature-title">代码审查</h3>
                <p class="feature-description">智能代码审查，发现潜在问题并提供改进建议</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">🔬</div>
                <h3 class="feature-title">上下文引擎</h3>
                <p class="feature-description">理解代码上下文，提供符合项目风格的建议</p>
            </div>
        </div>
    </section>

    <!-- 工具集成徽章 - webpage2.png -->
    <section class="integrations-section">
        <div class="integrations-container">
            <div class="integration-badge active">
                <span class="badge-icon">🆚</span>
                <span class="badge-text">VS Code</span>
            </div>
            <div class="integration-badge">
                <span class="badge-icon">🅱️</span>
                <span class="badge-text">Visual Studio</span>
            </div>
            <div class="integration-badge">
                <span class="badge-icon">🗄️</span>
                <span class="badge-text">JetBrains</span>
            </div>
            <div class="integration-badge">
                <span class="badge-icon">🐍</span>
                <span class="badge-text">Python</span>
            </div>
            <div class="integration-badge">
                <span class="badge-icon">☕</span>
                <span class="badge-text">Java</span>
            </div>
            <div class="integration-badge">
                <span class="badge-icon">🟨</span>
                <span class="badge-text">JavaScript</span>
            </div>
            <div class="integration-badge">
                <span class="badge-icon">📦</span>
                <span class="badge-text">更多工具</span>
            </div>
        </div>
    </section>
</body>
</html>

styles.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f8f8f8;
    color: #333;
    line-height: 1.6;
}

/* 导航栏样式 - webpage1.png */
.header {
    background-color: #fff;
    padding: 20px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-icon {
    width: 24px;
    height: 24px;
    background-color: #000;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
}

.logo-text {
    font-size: 18px;
    font-weight: bold;
    color: #000;
}

.nav-menu {
    display: flex;
    gap: 40px;
}

.nav-menu a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
    transition: color 0.3s;
}

.nav-menu a:hover {
    color: #000;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.signin-btn {
    background-color: #000;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
}

.signin-btn:hover {
    background-color: #333;
}

.social-icons {
    display: flex;
    gap: 10px;
}

.social-icon {
    text-decoration: none;
    font-size: 18px;
    color: #333;
    transition: color 0.3s;
}

.social-icon:hover {
    color: #000;
}

/* Hero区域样式 - webpage1.png */
.hero {
    padding: 80px 40px;
    text-align: center;
    background-color: #f8f8f8;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero-title {
    font-size: 56px;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.2;
}

.title-part1 {
    color: #333;
}

.title-part2 {
    color: #666;
}

.hero-subtitle {
    font-size: 20px;
    color: #666;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 60px;
}

.btn {
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background-color: #000;
    color: #fff;
    border: none;
}

.btn-primary:hover {
    background-color: #333;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: #fff;
    color: #666;
    border: 1px solid #e0e0e0;
}

.btn-secondary:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
}

.arrow {
    font-size: 18px;
}

/* 代码编辑器模拟 - webpage1.png */
.hero-image {
    max-width: 800px;
    margin: 0 auto;
}

.code-editor-mock {
    background-color: #1e1e1e;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.editor-header {
    background-color: #2d2d2d;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.window-controls {
    display: flex;
    gap: 8px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.dot.red { background-color: #ff5f56; }
.dot.yellow { background-color: #ffbd2e; }
.dot.green { background-color: #27ca3f; }

.editor-tabs {
    display: flex;
    gap: 10px;
}

.tab {
    color: #969696;
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 4px;
}

.tab.active {
    background-color: #1e1e1e;
    color: #fff;
}

.editor-content {
    display: flex;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 14px;
    padding: 20px 0;
}

.line-numbers {
    color: #858585;
    padding: 0 20px;
    text-align: right;
    user-select: none;
}

.line-numbers span {
    display: block;
    line-height: 1.6;
}

.code-content {
    flex: 1;
    color: #d4d4d4;
}

.code-line {
    line-height: 1.6;
}

.keyword { color: #569cd6; }
.function { color: #dcdcaa; }
.comment { color: #6a9955; }
.indent { color: transparent; }
.ai-suggestion {
    color: #f0e68c;
    font-style: italic;
}

/* 功能卡片区域样式 - webpage2.png */
.features-section {
    padding: 80px 40px;
    background-color: #f8f8f8;
}

.section-title {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    color: #000;
    margin-bottom: 60px;
}

.features-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    padding: 0 20px;
}

.feature-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid #f0f0f0;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.feature-icon {
    width: 48px;
    height: 48px;
    background-color: #f5f5f5;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.feature-title {
    font-size: 20px;
    font-weight: bold;
    color: #000;
    margin-bottom: 12px;
}

.feature-description {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
}

/* 工具集成徽章样式 - webpage2.png */
.integrations-section {
    padding: 40px 0 80px 0;
    background-color: #f8f8f8;
}

.integrations-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    padding: 0 40px;
}

.integration-badge {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    cursor: pointer;
}

.integration-badge:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
}

.integration-badge.active {
    background-color: #000;
    border-color: #000;
    color: #fff;
}

.badge-icon {
    font-size: 16px;
}

.badge-text {
    font-size: 14px;
    font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .nav-container {
        flex-direction: column;
        gap: 20px;
    }

    .nav-menu {
        gap: 20px;
    }

    .hero-title {
        font-size: 36px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .features-grid {
        grid-template-columns: 1fr;
        padding: 0;
    }

    .integrations-container {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding: 0 20px;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 60px 20px;
    }

    .nav-container {
        padding: 0 20px;
    }

    .feature-card {
        padding: 20px;
    }
}