KIMI提示词：单页网站生成器

幂简官方

253 浏览

22 试用

5 购买

Oct 17, 2025更新

工具文生文 KIMI

根据用户定义规格生成完整单页网站，包含互动与美观设计。

下面是一个完整的单页响应式网站 HTML 文件，结合了 Bootstrap 框架，具有导航栏、轮播图、服务展示、案例分享和联系我们功能模块，并包含一些互动功能（如动态文本、按钮响应）以及注释说明。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业官网平台</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 自定义样式 */
        body {
            font-family: Arial, sans-serif;
        }
        .hero {
            background: url('https://via.placeholder.com/1920x600?text=%E8%BD%AE%E6%92%AD%E5%9B%BE') no-repeat center center;
            background-size: cover;
            height: 600px;
        }
        .dynamic-text {
            font-size: 24px;
            font-weight: bold;
            color: #007bff;
            animation: fadeIn 2s infinite;
        }
        @keyframes fadeIn {
            0% { opacity: 0; }
            50% { opacity: 1; }
            100% { opacity: 0; }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">企业官网平台</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link" href="#services">服务展示</a></li>
                    <li class="nav-item"><a class="nav-link" href="#cases">案例分享</a></li>
                    <li class="nav-item"><a class="nav-link" href="#contact">联系我们</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 轮播图 -->
    <div id="carouselExampleIndicators" class="carousel slide hero" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://via.placeholder.com/1920x600?text=第一张图片" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="https://via.placeholder.com/1920x600?text=第二张图片" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="https://via.placeholder.com/1920x600?text=第三张图片" class="d-block w-100" alt="...">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>

    <!-- 服务展示 -->
    <section id="services" class="py-5">
        <div class="container text-center">
            <h2 class="mb-4">我们的服务</h2>
            <div class="row">
                <div class="col-md-4">
                    <div class="card h-100">
                        <div class="card-body">
                            <h5 class="card-title">服务一</h5>
                            <p class="card-text">提供优质可靠的技术解决方案。</p>
                            <button class="btn btn-primary">了解更多</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100">
                        <div class="card-body">
                            <h5 class="card-title">服务二</h5>
                            <p class="card-text">个性化定制设计服务。</p>
                            <button class="btn btn-primary">了解更多</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100">
                        <div class="card-body">
                            <h5 class="card-title">服务三</h5>
                            <p class="card-text">全方位的市场运营支持。</p>
                            <button class="btn btn-primary">了解更多</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 案例分享 -->
    <section id="cases" class="py-5 bg-light">
        <div class="container text-center">
            <h2 class="mb-4">案例分享</h2>
            <div class="row">
                <div class="col-md-6 mb-4">
                    <div class="card">
                        <img src="https://via.placeholder.com/600x300?text=案例一" class="card-img-top" alt="案例一">
                        <div class="card-body">
                            <h5 class="card-title">成功案例一</h5>
                            <p class="card-text">我们通过技术创新帮助客户实现业务增长。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-4">
                    <div class="card">
                        <img src="https://via.placeholder.com/600x300?text=案例二" class="card-img-top" alt="案例二">
                        <div class="card-body">
                            <h5 class="card-title">成功案例二</h5>
                            <p class="card-text">为客户设计量身定制的解决方案。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系我们 -->
    <section id="contact" class="py-5">
        <div class="container text-center">
            <h2 class="mb-4">联系我们</h2>
            <p class="mb-4">有任何问题或合作需求，请随时联系我们！</p>
            <form>
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="姓名" required>
                </div>
                <div class="mb-3">
                    <input type="email" class="form-control" placeholder="邮箱" required>
                </div>
                <div class="mb-3">
                    <textarea class="form-control" rows="5" placeholder="留言" required></textarea>
                </div>
                <button class="btn btn-primary">提交</button>
            </form>
        </div>
    </section>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 示例：在加载页面时动态更新文本内容
        document.addEventListener('DOMContentLoaded', () => {
            const dynamicText = document.createElement('p');
            dynamicText.className = 'dynamic-text';
            dynamicText.textContent = '欢迎来到企业官网平台！';
            document.querySelector('.hero').appendChild(dynamicText);
        });
    </script>
</body>
</html>

功能说明：

导航栏：使用 Bootstrap 的导航栏组件，简单清晰，包含锚点链接用于滚动到页面对应部分。
轮播图：展示多张图片，自动轮播效果，支持用户手动切换。
服务展示：展示三大服务，包含简单的文字描述和按钮交互。
案例分享：展示两大客户案例，简洁醒目。
联系我们：提供表单，用户可以填写信息提交（无后台支持）。
动态文本：通过 JavaScript 动态在页面加载时插入欢迎文本。
响应式布局：完全使用 Bootstrap 的栅格系统，支持移动端设备。

你可以直接将以上代码保存为 HTML 文件运行。

以下是一个完整的单页 HTML 文件，使用嵌入式 CSS 和 JavaScript，结合了 Tailwind CSS 设计，响应式布局和多种互动功能（如导航栏下拉菜单、动态文本、轮播图等）。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灵感展示平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      /* 添加自定义动画和额外效果 */
      @keyframes fadeIn {
        from {
          opacity: 0;
        }

        to {
          opacity: 1;
        }
      }

      .fade-in {
        animation: fadeIn 1s ease-in-out;
      }
    </style>
</head>

<body class="bg-gray-50 font-sans text-gray-800">
    <!-- 页面整体容器 -->
    <div class="flex flex-col min-h-screen">
        <!-- Header -->
        <header class="bg-white py-4 shadow-md fixed w-full z-10">
            <div class="container mx-auto flex justify-between items-center">
                <h1 class="text-2xl font-bold text-blue-600">灵感展示平台</h1>
                <!-- 导航栏 -->
                <nav class="space-x-6 hidden md:flex">
                    <a href="#home" class="hover:text-blue-500 transition">首页</a>
                    <a href="#products" class="hover:text-blue-500 transition">产品展示</a>
                    <a href="#reviews" class="hover:text-blue-500 transition">用户评论</a>
                    <a href="#team" class="hover:text-blue-500 transition">团队介绍</a>
                </nav>
                <!-- 下拉菜单 (移动端导航) -->
                <div class="md:hidden">
                    <button id="menu-toggle" class="block text-gray-600 focus:outline-none">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M4 6h16M4 12h16m-7 6h7" />
                        </svg>
                    </button>
                    <div id="menu" class="hidden absolute mt-2 bg-white shadow-lg rounded-lg w-48">
                        <a href="#home" class="block px-4 py-2 hover:bg-gray-100">首页</a>
                        <a href="#products" class="block px-4 py-2 hover:bg-gray-100">产品展示</a>
                        <a href="#reviews" class="block px-4 py-2 hover:bg-gray-100">用户评论</a>
                        <a href="#team" class="block px-4 py-2 hover:bg-gray-100">团队介绍</a>
                    </div>
                </div>
            </div>
        </header>

        <!-- Hero Section -->
        <section id="home" class="bg-blue-500 text-white h-screen flex items-center justify-center">
            <div class="text-center">
                <h2 class="text-4xl font-bold fade-in">欢迎来到灵感展示平台！</h2>
                <p class="text-2xl mt-4 fade-in">发现创意，成就灵感。</p>
                <button
                    class="mt-6 px-6 py-2 bg-white text-blue-500 font-semibold rounded-lg shadow hover:bg-gray-100 transition">
                    探索更多
                </button>
            </div>
        </section>

        <!-- 产品展示 -->
        <section id="products" class="container mx-auto py-16">
            <h2 class="text-3xl font-bold text-center mb-8">我们的产品</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- 示例产品卡片 -->
                <div
                    class="bg-white p-4 rounded-lg shadow hover:shadow-lg transition duration-300 transform hover:scale-105">
                    <img src="https://via.placeholder.com/300x200" alt="产品图片" class="rounded-md">
                    <h3 class="text-xl font-semibold mt-4">产品名称 A</h3>
                    <p class="mt-2">简要描述产品的功能和特点。</p>
                    <button
                        class="mt-4 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition">了解更多</button>
                </div>
                <div
                    class="bg-white p-4 rounded-lg shadow hover:shadow-lg transition duration-300 transform hover:scale-105">
                    <img src="https://via.placeholder.com/300x200" alt="产品图片" class="rounded-md">
                    <h3 class="text-xl font-semibold mt-4">产品名称 B</h3>
                    <p class="mt-2">简要描述产品的功能和特点。</p>
                    <button
                        class="mt-4 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition">了解更多</button>
                </div>
                <div
                    class="bg-white p-4 rounded-lg shadow hover:shadow-lg transition duration-300 transform hover:scale-105">
                    <img src="https://via.placeholder.com/300x200" alt="产品图片" class="rounded-md">
                    <h3 class="text-xl font-semibold mt-4">产品名称 C</h3>
                    <p class="mt-2">简要描述产品的功能和特点。</p>
                    <button
                        class="mt-4 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition">了解更多</button>
                </div>
            </div>
        </section>

        <!-- 用户评论 -->
        <section id="reviews" class="bg-gray-100 py-16">
            <h2 class="text-3xl font-bold text-center mb-8">用户评价</h2>
            <div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-6">
                <div
                    class="p-6 bg-white rounded-lg shadow hover:shadow-lg transition transform hover:scale-105">
                    <blockquote>“这个平台真棒，它让我发现了许多灵感！”</blockquote>
                    <p class="mt-4 text-right font-semibold">- 用户 A</p>
                </div>
                <div
                    class="p-6 bg-white rounded-lg shadow hover:shadow-lg transition transform hover:scale-105">
                    <blockquote>“产品设计很棒，推荐大家试试。”</blockquote>
                    <p class="mt-4 text-right font-semibold">- 用户 B</p>
                </div>
                <div
                    class="p-6 bg-white rounded-lg shadow hover:shadow-lg transition transform hover:scale-105">
                    <blockquote>“很实用的平台，为我节省了很多时间！”</blockquote>
                    <p class="mt-4 text-right font-semibold">- 用户 C</p>
                </div>
            </div>
        </section>

        <!-- 团队介绍 -->
        <section id="team" class="container mx-auto py-16">
            <h2 class="text-3xl font-bold text-center mb-8">我们的团队</h2>
            <div class="flex flex-wrap justify-center gap-6">
                <div class="text-center">
                    <img src="https://via.placeholder.com/100" alt="团队成员" class="rounded-full mx-auto mb-4">
                    <h3 class="text-xl font-semibold">张三</h3>
                    <p>首席设计师</p>
                </div>
                <div class="text-center">
                    <img src="https://via.placeholder.com/100" alt="团队成员" class="rounded-full mx-auto mb-4">
                    <h3 class="text-xl font-semibold">李四</h3>
                    <p>开发经理</p>
                </div>
                <div class="text-center">
                    <img src="https://via.placeholder.com/100" alt="团队成员" class="rounded-full mx-auto mb-4">
                    <h3 class="text-xl font-semibold">王五</h3>
                    <p>营销专家</p>
                </div>
            </div>
        </section>

        <!-- Footer -->
        <footer class="bg-gray-800 text-white py-6 text-center">
            <p>© 2023 灵感展示平台. 保留所有权利.</p>
        </footer>
    </div>

    <script>
        // 处理移动端下拉菜单展示
        const menuToggle = document.getElementById('menu-toggle');
        const menu = document.getElementById('menu');

        menuToggle.addEventListener('click', () => {
            menu.classList.toggle('hidden');
        });
    </script>
</body>

</html>

功能亮点：

导航栏：支持桌面端和移动端（使用的下拉菜单）。
Hero 区域动态效果：通过动画效果 (fade-in) 提升视觉体验。
产品展示：提供了响应式产品卡片，支持鼠标悬停放大效果。
用户评价：设计简约，内容清晰。
团队介绍：成员头像结合名字和职位。
响应式布局：借助 Tailwind CSS 提供丰富的样式支持，轻松实现移动端适配。

整个代码结构清晰，功能易于维护和扩展。你可以根据需求修改细节样式或功能。

以下是一个完整的HTML文档，包含嵌入式CSS和JavaScript代码，用Foundation框架设计的响应式单页网站，符合要求并提供注释。所有内容均保存在一个HTML文件中。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人作品集展示</title>
  <!-- 引入Foundation CSS (CDN) -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites/dist/css/foundation.min.css">
  <style>
    /* 自定义样式 */
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
    }
    .hero-section {
      background-color: #2c3e50;
      color: white;
      text-align: center;
      padding: 50px 20px;
    }
    .portfolio-item {
      margin-bottom: 2rem;
    }
    .feedback-form label {
      font-weight: bold;
    }
    footer {
      background-color: #2c3e50;
      color: white;
      padding: 10px 0;
      text-align: center;
    }
  </style>
</head>
<body>
  <!-- 导航栏 -->
  <div class="top-bar">
    <div class="top-bar-left">
      <ul class="dropdown menu" data-dropdown-menu>
        <li class="menu-text">个人作品集展示</li>
        <li><a href="#about">个人简介</a></li>
        <li><a href="#portfolio">作品展示</a></li>
        <li><a href="#contact">联系信息</a></li>
        <li><a href="#feedback">用户反馈</a></li>
      </ul>
    </div>
  </div>

  <!-- 英雄部分 -->
  <section class="hero-section">
    <h1>欢迎来到我的作品集</h1>
    <p>展示我的技能和项目成果</p>
  </section>

  <!-- 个人简介 -->
  <section id="about" class="grid-container">
    <h2>个人简介</h2>
    <p>大家好！我是[你的名字]，一名热衷于前端开发和设计的开发者。我擅长使用HTML、CSS、JavaScript和Foundation框架来创建具有吸引力的网站和应用程序。</p>
    <button class="button" onclick="toggleDynamicText()">点击了解更多</button>
    <p id="dynamic-text" style="display: none;">在过去的几年中，我完成了多个精彩的项目，涵盖电商平台、博客网站和交互式应用。</p>
  </section>

  <!-- 作品展示 -->
  <section id="portfolio" class="grid-container">
    <h2>作品展示</h2>
    <div class="grid-x grid-margin-x small-up-1 medium-up-2 large-up-3">
      <div class="cell portfolio-item">
        <img src="https://via.placeholder.com/300" alt="项目1">
        <h3>项目1</h3>
        <p>这是项目1的简要说明。</p>
      </div>
      <div class="cell portfolio-item">
        <img src="https://via.placeholder.com/300" alt="项目2">
        <h3>项目2</h3>
        <p>这是项目2的简要说明。</p>
      </div>
      <div class="cell portfolio-item">
        <img src="https://via.placeholder.com/300" alt="项目3">
        <h3>项目3</h3>
        <p>这是项目3的简要说明。</p>
      </div>
    </div>
  </section>

  <!-- 联系信息 -->
  <section id="contact" class="grid-container">
    <h2>联系信息</h2>
    <p>您可以通过以下方式联系我们：</p>
    <ul>
      <li>邮箱：example@email.com</li>
      <li>电话：+123 456 7890</li>
      <li>地址：某某街道，某某城市</li>
    </ul>
  </section>

  <!-- 用户反馈 -->
  <section id="feedback" class="grid-container">
    <h2>用户反馈</h2>
    <form class="feedback-form" onsubmit="handleFeedback(event)">
      <label for="name">姓名</label>
      <input type="text" id="name" required>
      <label for="email">邮箱</label>
      <input type="email" id="email" required>
      <label for="message">反馈信息</label>
      <textarea id="message" rows="4" required></textarea>
      <button type="submit" class="button">提交反馈</button>
    </form>
  </section>

  <!-- 页脚 -->
  <footer>
    <p>&copy; 2023 个人作品集展示. 保留所有权利。</p>
  </footer>

  <!-- 引入Foundation JavaScript (CDN) -->
  <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/foundation-sites/dist/js/foundation.min.js"></script>
  <script>
    $(document).foundation();

    // 动态文本显示/隐藏功能
    function toggleDynamicText() {
      const dynamicText = document.getElementById('dynamic-text');
      if (dynamicText.style.display === 'none') {
        dynamicText.style.display = 'block';
      } else {
        dynamicText.style.display = 'none';
      }
    }

    // 处理用户反馈表单提交
    function handleFeedback(event) {
      event.preventDefault(); // 防止表单刷新页面
      const name = document.getElementById('name').value;
      const email = document.getElementById('email').value;
      const message = document.getElementById('message').value;
      alert(`谢谢您的反馈！\n姓名: ${name}\n邮箱: ${email}\n信息: ${message}`);
    }
  </script>
</body>
</html>

设计说明：

采用Foundation框架：这一架构确保了响应式布局的基本功能，轻松适配多种设备。
包含模块：
- 导航栏通过链接快速跳转到页面内的对应模块。
- 个人简介模块包含动态显示/隐藏的文本区域。
- 作品展示模块采用Foundation网格布局，确保组件对齐和美观。
- 联系信息模块简单明了。
- 用户反馈模块带有基本前端校验并通过JavaScript进行反馈提交处理。
注释清晰：代码中的注释有助于快速理解和维护。

可直接将文件保存为.html后打开使用。

解决的问题

帮助用户快速生成包含互动功能和美观设计的响应式单页网站，从而提升开发效率和用户体验。

适用用户

中小型企业主

无需专业开发团队，即可快速生成公司官网或营销活动页面，低成本、高效率满足业务需求。

初创项目负责人

快速构建产品展示页面，通过精美设计和互动功能吸引用户注意力，提升品牌认知度。

自由职业者

轻松搭建个人简历页面或作品集网站，展现专业实力并吸引潜在客户。

特征总结

• 轻松生成功能齐全的单页网站，无需编码基础即可一键完成。

• 内置互动功能支持，如下拉菜单、动态文本和可点击按钮，全面提升用户体验。

• 自动适配响应式布局，确保网站在不同设备屏幕上都能完美显示。

• 完整输出HTML、CSS和JavaScript代码，结构清晰、易于维护并配有详细注释。

• 支持灵活定制，包括网站名称、功能模块和样式设计，满足个性化需求。

• 采用嵌入式JavaScript和CSS，让网站设计美观并减少外部依赖。

• 高效组织代码结构，便于二次开发与维护，助力快速上线应用。

• 时尚视觉设计与实用功能结合，满足展示、营销、交互等多种场景需求。

如何使用购买的提示词模板

1. 直接在外部 Chat 应用中使用

将模板生成的提示词复制粘贴到您常用的 Chat 应用（如 ChatGPT、Claude 等），即可直接对话使用，无需额外开发。适合个人快速体验和轻量使用场景。

2. 发布为 API 接口调用

把提示词模板转化为 API，您的程序可任意修改模板参数，通过接口直接调用，轻松实现自动化与批量处理。适合开发者集成与业务系统嵌入。

3. 在 MCP Client 中配置使用

在 MCP client 中配置对应的 server 地址，让您的 AI 应用自动调用提示词模板。适合高级用户和团队协作，让提示词在不同 AI 工具间无缝衔接。

AI 提示词价格

￥0元

先用后买，用好了再付款，超安全！

在线免费用提示词

您购买后可以获得什么

✓

获得完整提示词模板

- 共 131 tokens

- 3 个可调节参数

{ 网站名称 } { 功能模块 } { 样式框架 }

✓

获得社区贡献内容的使用权

- 精选社区优质案例，助您快速上手提示词

0 元购

KIMI提示词：单页网站生成器

功能说明：

功能亮点：

设计说明：

解决的问题

适用用户

中小型企业主

初创项目负责人

自由职业者

特征总结

如何使用购买的提示词模板

1. 直接在外部 Chat 应用中使用

2. 发布为 API 接口调用

3. 在 MCP Client 中配置使用

您购买后可以获得什么

不要错过！

热门提示词

热门角色

热门业务

大模型API

使用我们的提示词工具

数字艺术创作者

新媒体运营

内容创作者

教师

学生

产品经理

企业管理人员

市场营销人员

开发者

工具

写作

教育

内容创作

市场营销

SEO

策略

艺术

设计

DeepSeek

OpenAI

Claude

Gemini

Grok

Qwen

Kimi

KIMI提示词：单页网站生成器

功能说明：

功能亮点：

设计说明：

示例详情

解决的问题

适用用户

中小型企业主

初创项目负责人

自由职业者

特征总结

如何使用购买的提示词模板

1. 直接在外部 Chat 应用中使用

2. 发布为 API 接口调用

3. 在 MCP Client 中配置使用

您购买后可以获得什么

相似AI提示词

不要错过！

热门提示词

热门角色

热门业务

大模型API

使用我们的提示词工具

反馈问题