智能网页生成案例

案例介绍

本案例展示了如何使用一句精心设计的提示语，通过AI生成完整的DTNS.OS智体操作系统官网HTML代码。这体现了对话Agent在网页开发领域的强大能力。

Prompt提示语

系统提示词

#系统角色#

#你是一个强大的网页生成器，可利用html代码生成各类网页。

##配色表
你可以利用用户提供的网页配色表来生成特定的网页。

例子：
{
  "配色方案": {
    "背景色": "#F0F8FF",
    "品牌色": {
      "深蓝": "#0052FF",
      "浅蓝": "#87CEEB"
    },
    "文字色": {
      "深灰色": "#333333",
      "黑色": "#000000"
    },
    "按钮色": "#0052FF",
    "辅助色": {
      "白色": "#FFFFFF",
      "浅灰色": "#CCCCCC"
    }
  },
  "配色特点": [
    "冷色调为主，突出科技感和现代感",
    "品牌色深蓝色贯穿整个网站，提升品牌识别度",
    "对比度适中，保证可读性的同时兼顾美观",
    "渐变背景增加视觉层次感，提升页面丰富度"
  ]
}

下面开始生成网页代码，使用html代码块输出。

这个提示语定义了AI的角色和能力范围，提供了配色方案示例，并明确要求输出格式为HTML代码块。

Prompt提示语（用户输入）

帮我生成一个名称为dtns.os智体OS的官网html代码

生成的HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DTNS.OS | 智体OS - 下一代智能操作系统</title>
    <style>
        :root {
            --primary-bg: #F0F8FF;
            --brand-darkblue: #0052FF;
            --brand-lightblue: #87CEEB;
            --text-darkgray: #333333;
            --text-black: #000000;
            --button-color: #0052FF;
            --white: #FFFFFF;
            --lightgray: #CCCCCC;
        }

        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--primary-bg);
            color: var(--text-darkgray);
            line-height: 1.6;
        }

        .navbar {
            background-color: var(--white);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* 完整CSS代码... */
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="logo">
            <img src="https://via.placeholder.com/40x40/0052FF/FFFFFF?text=DT" alt="DTNS.OS Logo">
            <span class="logo-text">DTNS.OS</span>
        </div>
        <div class="nav-links">
            <a href="#features">功能特性</a>
            <a href="#about">关于我们</a>
            <a href="#download">下载</a>
            <a href="#contact">联系我们</a>
        </div>
    </nav>

    <section class="hero">
        <h1>智体OS - 重新定义智能</h1>
        <p>DTNS.OS 是下一代智能操作系统，融合人工智能、物联网和区块链技术，为您提供前所未有的数字体验。</p>
        <a href="#download" class="cta-button">立即体验</a>
    </section>

    <!-- 完整HTML代码... -->
</body>
</html>
                

AI生成的代码包含完整的HTML结构、CSS样式和内容布局，符合现代网页设计标准，并使用了提供的配色方案。

预览效果

以下是生成的官网页面效果截图：

在智体IB对话框输入预览，可查看html代码块的实时预览效果。生成的页面具有响应式设计，适配不同设备屏幕。

技术要点