智能网站自动生成器

幂简官方

96 浏览

9 试用

2 购买

Oct 22, 2025更新

本提示词模板专为简化网站创建流程而设计，能够根据用户提供的设计元素自动生成功能完整的网站。通过深度分析设计需求，采用分步推理的方式确保网站结构的合理性和功能的完整性。模板具备卓越的设计元素解析能力，能够智能适配不同业务场景，从企业官网到个人作品集均可高效生成。亮点在于将复杂的网站开发过程转化为简单的设计输入，无需编程知识即可获得专业级网站，同时支持多种设计风格的灵活配置，确保输出结果既美观又实用。该模板特别适合设计师、创业者、中小企业主等非技术背景用户快速搭建在线展示平台。

网站设计方案

视觉风格：以深蓝与白为主色，稳重现代。深蓝用于背景、标题与导航，白色用于内容区与留白，强调清晰的信息层级。辅以适度的天蓝作为强调色用于CTA按钮与交互状态。
布局策略：全站采用响应式网格布局（CSS Grid + Flex），中等留白提升可读性。首屏大横幅展示品牌主张与价值，右侧简洁图形增强现代感；CTA按钮明显、对比强烈。
导航与信息架构：顶部固定导航，清晰分区：首页、关于我们、产品与服务、服务流程、客户反馈、联系我们。全站锚点跳转与吸顶导航保证易用性。
组件与交互：
- 首屏CTA“获取报价”与“联系我们”，启用询价表单弹窗，提升线索收集效率。
- 产品卡片网格展示3项核心产品与一句话卖点。
- 四步流程以编号卡片呈现，便于理解。
- 客户反馈以轮播组件简洁展示摘句。
- 联系我们区包含联系信息与同款询价表单（支持姓名、电话、需求描述、预算区间），表单校验与成功反馈。
品牌统一：统一色彩、按钮样式、图标风格（简洁SVG）、一致的排版与间距规范，确保整体专业可信。

网站结构图

首页（Hero）
- 标题与品牌主张
- 主CTA：获取报价
- 次CTA：联系我们
关于我们（About）
- 成立背景
- 业务范围简述
产品与服务（Products）
- 核心产品1：一句话卖点
- 核心产品2：一句话卖点
- 核心产品3：一句话卖点
服务流程（Process）
- 步骤1：需求沟通
- 步骤2：方案与报价
- 步骤3：开发交付
- 步骤4：上线与支持
客户反馈（Testimonials）
- 摘句轮播
联系我们（Contact）
- 邮箱、电话、所在城市
- 询价表单（姓名、电话、需求描述、预算区间）
全站组件
- 固定导航
- 询价表单弹窗（与联系区同字段）
- 页脚版权信息

核心代码实现

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>企业官网 | 产品与服务展示</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="稳重现代的企业官网与产品服务展示，统一品牌风格，配置联系我们与询价表单，收集销售线索。">
  <meta property="og:title" content="企业官网 | 产品与服务展示">
  <meta property="og:description" content="稳重现代的企业官网与产品服务展示，统一品牌风格，配置联系我们与询价表单，收集销售线索。">
  <meta property="og:type" content="website">
  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2215%22 fill=%22%230A1F44%22/><text x=%2250%22 y=%2258%22 font-size=%2250%22 text-anchor=%22middle%22 fill=%22white%22>B</text></svg>">
  <link rel="stylesheet" href="styles.css">
  <script defer src="script.js"></script>
</head>
<body>
  <a class="skip-link" href="#main">跳转至正文</a>

  <header class="site-header" role="banner">
    <div class="container header-inner">
      <a href="#home" class="brand" aria-label="企业品牌首页">企业品牌</a>
      <nav class="site-nav" aria-label="主导航">
        <button class="nav-toggle" aria-label="打开菜单" aria-expanded="false" data-nav-toggle>
          <span class="nav-toggle-bar"></span>
          <span class="nav-toggle-bar"></span>
          <span class="nav-toggle-bar"></span>
        </button>
        <ul class="nav-list" data-nav-list>
          <li><a href="#about">关于我们</a></li>
          <li><a href="#products">产品与服务</a></li>
          <li><a href="#process">服务流程</a></li>
          <li><a href="#testimonials">客户反馈</a></li>
          <li><a href="#contact">联系我们</a></li>
        </ul>
      </nav>
      <button class="btn btn-accent cta-header" data-open-modal="#quoteModal">获取报价</button>
    </div>
  </header>

  <main id="main">
    <!-- 首屏大横幅 -->
    <section id="home" class="hero">
      <div class="container hero-grid">
        <div class="hero-content">
          <h1>稳重现代的企业官网，助力品牌升级</h1>
          <p class="hero-sub">以深蓝与白为基调，统一品牌形象；网格布局清晰呈现产品与服务，通过询价表单高效收集销售线索。</p>
          <div class="hero-actions">
            <button class="btn btn-accent btn-lg" data-open-modal="#quoteModal" aria-label="打开询价表单">获取报价</button>
            <a class="btn btn-outline btn-lg" href="#contact">联系我们</a>
          </div>
        </div>
        <div class="hero-visual" aria-hidden="true">
          <svg viewBox="0 0 480 360" class="hero-svg">
            <defs>
              <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="#0A1F44"/>
                <stop offset="100%" stop-color="#123768"/>
              </linearGradient>
            </defs>
            <rect x="0" y="0" width="480" height="360" rx="24" fill="url(#g1)"/>
            <g fill="#2D9CDB" opacity="0.8">
              <circle cx="80" cy="80" r="8"/>
              <circle cx="120" cy="80" r="8"/>
              <circle cx="160" cy="80" r="8"/>
            </g>
            <rect x="48" y="120" width="384" height="160" rx="16" fill="#ffffff" opacity="0.09"/>
            <rect x="72" y="144" width="336" height="24" rx="6" fill="#2D9CDB" opacity="0.25"/>
            <rect x="72" y="184" width="216" height="24" rx="6" fill="#2D9CDB" opacity="0.25"/>
          </svg>
        </div>
      </div>
    </section>

    <!-- 关于我们 -->
    <section id="about" class="section about">
      <div class="container grid-2">
        <div>
          <h2>关于我们</h2>
          <p>我们致力于为企业提供现代化的网页解决方案，通过优雅的设计与可靠的技术，提升线上形象与获客效率。</p>
        </div>
        <div class="about-cards">
          <article class="card">
            <h3>成立背景</h3>
            <p>团队由资深设计与前端工程师组成，融合审美与技术，为不同行业打造高品质网站。</p>
          </article>
          <article class="card">
            <h3>业务范围简述</h3>
            <p>企业官网建设、产品展示页、询价表单与线索收集、基础SEO优化、主流浏览器兼容与响应式适配。</p>
          </article>
        </div>
      </div>
    </section>

    <!-- 产品与服务 -->
    <section id="products" class="section products">
      <div class="container">
        <h2>产品与服务</h2>
        <div class="grid-3">
          <article class="card card-product">
            <div class="icon">
              <svg viewBox="0 0 48 48" aria-hidden="true">
                <rect x="6" y="10" width="36" height="28" rx="4" fill="#2D9CDB"/>
                <rect x="10" y="14" width="28" height="6" rx="3" fill="#fff"/>
                <rect x="10" y="24" width="18" height="6" rx="3" fill="#fff" opacity="0.9"/>
              </svg>
            </div>
            <h3>智能官网引擎</h3>
            <p class="sell">一体化搭建与管理，让官网快速上线，维护更轻松。</p>
          </article>

          <article class="card card-product">
            <div class="icon">
              <svg viewBox="0 0 48 48" aria-hidden="true">
                <circle cx="24" cy="24" r="18" fill="#2D9CDB"/>
                <rect x="16" y="22" width="16" height="4" rx="2" fill="#fff"/>
                <rect x="22" y="16" width="4" height="16" rx="2" fill="#fff"/>
              </svg>
            </div>
            <h3>轻量产品展示</h3>
            <p class="sell">网格化卡片呈现要点，突出卖点，转化更直接。</p>
          </article>

          <article class="card card-product">
            <div class="icon">
              <svg viewBox="0 0 48 48" aria-hidden="true">
                <rect x="10" y="10" width="28" height="28" rx="6" fill="#2D9CDB"/>
                <polyline points="14,28 20,22 26,30 34,18" stroke="#fff" stroke-width="3" fill="none"/>
              </svg>
            </div>
            <h3>数据洞察仪表</h3>
            <p class="sell">基础数据追踪与可视化，支持后续接入CRM与分析。</p>
          </article>
        </div>
      </div>
    </section>

    <!-- 服务流程 -->
    <section id="process" class="section process">
      <div class="container">
        <h2>服务流程</h2>
        <div class="grid-4 steps">
          <article class="step">
            <div class="num">01</div>
            <h3>需求沟通</h3>
            <p>明确网站目标、风格偏好与内容素材。</p>
          </article>
          <article class="step">
            <div class="num">02</div>
            <h3>方案与报价</h3>
            <p>确认信息架构与设计方案，提供合理预算区间。</p>
          </article>
          <article class="step">
            <div class="num">03</div>
            <h3>开发交付</h3>
            <p>输出高质量前端代码，完成测试与优化。</p>
          </article>
          <article class="step">
            <div class="num">04</div>
            <h3>上线与支持</h3>
            <p>协助部署上线，提供后续维护与升级建议。</p>
          </article>
        </div>
      </div>
    </section>

    <!-- 客户反馈 -->
    <section id="testimonials" class="section testimonials">
      <div class="container">
        <h2>客户反馈</h2>
        <div class="slider" data-slider>
          <div class="slides">
            <figure class="slide">
              <blockquote>“官网很干净利落，CTA醒目，询价表单带来了实际线索。”</blockquote>
              <figcaption>— 制造业客户</figcaption>
            </figure>
            <figure class="slide">
              <blockquote>“设计稳重现代，品牌一致性很好，加载速度也很快。”</blockquote>
              <figcaption>— 科技企业</figcaption>
            </figure>
            <figure class="slide">
              <blockquote>“从沟通到上线体验顺畅，后续维护建议也很专业。”</blockquote>
              <figcaption>— 服务业伙伴</figcaption>
            </figure>
          </div>
          <div class="slider-controls">
            <button class="btn btn-outline btn-sm" data-prev>上一条</button>
            <button class="btn btn-outline btn-sm" data-next>下一条</button>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系我们 -->
    <section id="contact" class="section contact">
      <div class="container grid-2">
        <div>
          <h2>联系我们</h2>
          <address class="contact-info">
            <p><strong>邮箱：</strong><a href="mailto:contact@yourcompany.com">contact@yourcompany.com</a></p>
            <p><strong>电话：</strong><a href="tel:+864001234567">400-123-4567</a></p>
            <p><strong>所在城市：</strong>上海</p>
          </address>
          <p class="note">也可点击页面右上角或首屏按钮，打开询价表单。</p>
        </div>

        <!-- 询价表单（内嵌版） -->
        <form class="form card" data-lead-form novalidate>
          <h3>询价表单</h3>
          <div class="form-row">
            <label for="name">姓名</label>
            <input id="name" name="name" type="text" required placeholder="请输入您的姓名" aria-required="true">
          </div>
          <div class="form-row">
            <label for="phone">电话</label>
            <input id="phone" name="phone" type="tel" required placeholder="手机号或座机" aria-required="true" pattern="^(\+?\d{1,4}[-\s]?)?(\d{7,13})$">
          </div>
          <div class="form-row">
            <label for="budget">预算区间</label>
            <select id="budget" name="budget" required aria-required="true">
              <option value="">请选择</option>
              <option>¥3-5万</option>
              <option>¥5-10万</option>
              <option>¥10-30万</option>
              <option>¥30万以上</option>
            </select>
          </div>
          <div class="form-row">
            <label for="desc">需求描述</label>
            <textarea id="desc" name="desc" rows="4" placeholder="简要描述您的网站目标与内容需求"></textarea>
          </div>
          <div class="form-actions">
            <button type="submit" class="btn btn-accent">提交询价</button>
            <p class="form-status" aria-live="polite"></p>
          </div>
        </form>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <div class="container footer-inner">
      <p>© <span id="year"></span> 企业品牌. 保留所有权利。</p>
      <nav aria-label="页脚导航">
        <a href="#about">关于</a>
        <a href="#products">产品</a>
        <a href="#process">流程</a>
        <a href="#contact">联系</a>
      </nav>
    </div>
  </footer>

  <!-- 询价表单弹窗 -->
  <div class="modal" id="quoteModal" aria-hidden="true" aria-labelledby="quoteTitle" role="dialog">
    <div class="modal-backdrop" data-close-modal></div>
    <div class="modal-dialog" role="document" aria-modal="true">
      <button class="modal-close" aria-label="关闭弹窗" data-close-modal>&times;</button>
      <h3 id="quoteTitle">获取报价</h3>
      <form class="form" data-lead-form novalidate>
        <div class="form-row">
          <label for="m-name">姓名</label>
          <input id="m-name" name="name" type="text" required placeholder="请输入您的姓名" aria-required="true">
        </div>
        <div class="form-row">
          <label for="m-phone">电话</label>
          <input id="m-phone" name="phone" type="tel" required placeholder="手机号或座机" aria-required="true" pattern="^(\+?\d{1,4}[-\s]?)?(\d{7,13})$">
        </div>
        <div class="form-row">
          <label for="m-budget">预算区间</label>
          <select id="m-budget" name="budget" required aria-required="true">
            <option value="">请选择</option>
            <option>¥3-5万</option>
            <option>¥5-10万</option>
            <option>¥10-30万</option>
            <option>¥30万以上</option>
          </select>
        </div>
        <div class="form-row">
          <label for="m-desc">需求描述</label>
          <textarea id="m-desc" name="desc" rows="4" placeholder="简要描述您的网站目标与内容需求"></textarea>
        </div>
        <div class="form-actions">
          <button type="submit" class="btn btn-accent">提交询价</button>
          <p class="form-status" aria-live="polite"></p>
        </div>
      </form>
    </div>
  </div>
</body>
</html>

/* styles.css */
/* 基础主题变量 */
:root {
  --blue-900: #0A1F44;
  --blue-800: #0F2B5C;
  --blue-700: #123768;
  --accent:   #2D9CDB;
  --text:     #0D1B2A;
  --muted:    #6B7B8C;
  --bg:       #FFFFFF;
  --bg-alt:   #F3F7FB;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --shadow-sm: 0 2px 8px rgba(10,31,68,0.08);
  --shadow-md: 0 8px 24px rgba(10,31,68,0.12);

  --max-w: 1120px;
}

/* CSS Reset 简化 */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "PingFang SC", "Microsoft Yahei", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
input, select, textarea { font: inherit; color: inherit; }

/* 可访问性 */
.skip-link {
  position: absolute; left: -999px; top: -999px;
}
.skip-link:focus {
  left: 12px; top: 12px; background: var(--bg); color: var(--blue-900);
  padding: 8px 12px; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
}

/* 容器与栅格 */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 20px;
}
.section { padding: 72px 0; }
.grid-2 {
  display: grid; gap: 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-3 {
  display: grid; gap: 28px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-4 {
  display: grid; gap: 28px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 头部导航 */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(10,31,68,0.95);
  backdrop-filter: saturate(150%) blur(8px);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.brand {
  color: #fff; font-weight: 700; letter-spacing: 0.3px; font-size: 18px;
}
.site-nav { display: flex; align-items: center; gap: 18px; }
.nav-toggle {
  display: none; background: transparent; border: none; cursor: pointer;
}
.nav-toggle-bar {
  display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0;
}
.nav-list {
  display: flex; list-style: none; gap: 18px; margin: 0; padding: 0;
}
.nav-list a {
  color: #fff; opacity: 0.9; padding: 8px 10px; border-radius: 8px;
}
.nav-list a:hover, .nav-list a:focus { background: rgba(255,255,255,0.08); opacity: 1; }
.cta-header { display: inline-flex; }

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; transition: all .25s ease;
}
.btn-lg { padding: 12px 20px; font-weight: 600; }
.btn-sm { padding: 6px 12px; font-size: 14px; }
.btn-accent {
  background: var(--accent); color: #fff; box-shadow: var(--shadow-sm);
}
.btn-accent:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-outline {
  background: transparent; color: var(--accent); border-color: var(--accent);
}
.btn-outline:hover { background: rgba(45,156,219,0.08); }

/* 首屏 */
.hero {
  background: linear-gradient(180deg, var(--blue-900), var(--blue-800));
  color: #fff;
  padding: 96px 0 88px;
}
.hero-grid {
  display: grid; gap: 36px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}
.hero-content h1 { font-size: 36px; line-height: 1.2; margin: 0 0 12px; }
.hero-sub { opacity: 0.9; }
.hero-actions { display: flex; gap: 12px; margin-top: 20px; }
.hero-visual { justify-self: end; max-width: 520px; }
.hero-svg { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

/* 关于我们 */
.about .about-cards {
  display: grid; gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card {
  background: #fff; border: 1px solid #E6ECF3; border-radius: var(--radius-md);
  padding: 20px; box-shadow: var(--shadow-sm);
}
.about h2, .products h2, .process h2, .testimonials h2, .contact h2 {
  color: var(--blue-900);
}

/* 产品与服务 */
.card-product .icon { width: 56px; height: 56px; border-radius: 14px; background: var(--bg-alt); display: grid; place-items: center; margin-bottom: 12px; }
.card-product h3 { margin: 8px 0; }
.sell { color: var(--muted); }

/* 服务流程 */
.steps .step {
  background: #fff; border: 1px solid #E6ECF3; border-radius: var(--radius-md);
  padding: 18px; box-shadow: var(--shadow-sm);
}
.step .num {
  width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: #fff;
  display: grid; place-items: center; font-weight: 700; margin-bottom: 8px;
}

/* 客户反馈 */
.testimonials { background: var(--bg-alt); }
.slider { position: relative; overflow: hidden; border-radius: var(--radius-md); background: #fff; padding: 12px; }
.slides {
  display: flex; transition: transform .4s ease;
}
.slide {
  min-width: 100%;
  padding: 18px;
}
blockquote { font-size: 18px; color: var(--blue-900); margin: 0 0 8px; }
figcaption { color: var(--muted); }
.slider-controls {
  display: flex; gap: 8px; justify-content: flex-end; padding: 8px 4px;
}

/* 联系我们与表单 */
.contact .contact-info a { color: var(--accent); }
.form {
  display: grid; gap: 12px;
}
.form-row {
  display: grid; gap: 6px;
}
label { font-weight: 600; color: var(--blue-900); }
input[type="text"], input[type="tel"], select, textarea {
  border: 1px solid #D8E1EA; border-radius: 10px; padding: 10px 12px; background: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(45,156,219,0.35); border-color: var(--accent);
}
.form-actions { display: flex; align-items: center; gap: 12px; }
.form-status { font-size: 14px; color: var(--muted); }

/* 页脚 */
.site-footer {
  border-top: 1px solid #E6ECF3; background: #fff; color: var(--muted);
}
.footer-inner {
  display: flex; align-items: center; justify-content: space-between; padding: 20px;
}
.site-footer a { color: var(--accent); }

/* 锚点滚动修正 */
:target { scroll-margin-top: 84px; }

/* 弹窗 */
.modal { position: fixed; inset: 0; display: none; }
.modal.open { display: block; }
.modal-backdrop {
  position: absolute; inset: 0; background: rgba(13,27,42,0.55); backdrop-filter: blur(2px);
}
.modal-dialog {
  position: relative;
  width: min(560px, calc(100% - 32px));
  margin: 8vh auto;
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 20px;
}
.modal-close {
  position: absolute; right: 10px; top: 8px;
  background: transparent; border: none; font-size: 28px; color: var(--muted); cursor: pointer;
}

/* 响应式 */
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .hero-grid, .grid-2 { grid-template-columns: 1fr; }
  .nav-toggle { display: inline-block; }
  .nav-list {
    position: absolute; right: 20px; top: 64px;
    background: var(--blue-800); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px; padding: 12px;
    display: none; flex-direction: column; gap: 10px; min-width: 180px;
  }
  .nav-list.open { display: flex; }
  .cta-header { display: none; }
  .hero { padding: 72px 0; }
}

/* 降低动画对部分用户影响 */
@media (prefers-reduced-motion: reduce) {
  .slides { transition: none; }
  .btn, .nav-list a { transition: none; }
}

// script.js

// 年份更新
document.getElementById('year').textContent = new Date().getFullYear();

// 移动端导航开合
const navToggle = document.querySelector('[data-nav-toggle]');
const navList = document.querySelector('[data-nav-list]');
if (navToggle && navList) {
  navToggle.addEventListener('click', () => {
    const open = navList.classList.toggle('open');
    navToggle.setAttribute('aria-expanded', String(open));
  });
  // 点击导航项后收起菜单
  navList.addEventListener('click', (e) => {
    if (e.target.tagName === 'A') {
      navList.classList.remove('open');
      navToggle.setAttribute('aria-expanded', 'false');
    }
  });
}

// 简易轮播
(function initSlider() {
  const slider = document.querySelector('[data-slider]');
  if (!slider) return;
  const slidesEl = slider.querySelector('.slides');
  const slides = slider.querySelectorAll('.slide');
  const prev = slider.querySelector('[data-prev]');
  const next = slider.querySelector('[data-next]');
  let index = 0;

  function update() {
    slidesEl.style.transform = `translateX(-${index * 100}%)`;
  }
  prev.addEventListener('click', () => {
    index = (index - 1 + slides.length) % slides.length;
    update();
  });
  next.addEventListener('click', () => {
    index = (index + 1) % slides.length;
    update();
  });
  // 自动播放
  let autoplay = setInterval(() => {
    index = (index + 1) % slides.length;
    update();
  }, 5000);
  slider.addEventListener('mouseenter', () => clearInterval(autoplay));
  slider.addEventListener('mouseleave', () => {
    autoplay = setInterval(() => {
      index = (index + 1) % slides.length;
      update();
    }, 5000);
  });
})();

// 弹窗逻辑
const modal = document.getElementById('quoteModal');
function openModal() {
  modal.classList.add('open');
  modal.setAttribute('aria-hidden', 'false');
  const input = modal.querySelector('input, select, textarea, button');
  input && input.focus();
}
function closeModal() {
  modal.classList.remove('open');
  modal.setAttribute('aria-hidden', 'true');
}
document.querySelectorAll('[data-open-modal]').forEach(btn => {
  btn.addEventListener('click', (e) => {
    const target = btn.getAttribute('data-open-modal');
    if (target === '#quoteModal') openModal();
  });
});
document.querySelectorAll('[data-close-modal]').forEach(el => {
  el.addEventListener('click', closeModal);
});
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && modal.classList.contains('open')) closeModal();
});

// 表单处理（线索收集）
const leadForms = document.querySelectorAll('form[data-lead-form]');
leadForms.forEach(form => {
  const statusEl = form.querySelector('.form-status');
  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const data = {
      name: form.name?.value?.trim(),
      phone: form.phone?.value?.trim(),
      budget: form.budget?.value,
      desc: form.desc?.value?.trim() || ''
    };

    // 基础校验
    let errors = [];
    if (!data.name) errors.push('请输入姓名');
    if (!data.phone) errors.push('请输入电话');
    if (!data.budget) errors.push('请选择预算区间');
    const phonePattern = /^(\+?\d{1,4}[-\s]?)?(\d{7,13})$/;
    if (data.phone && !phonePattern.test(data.phone)) errors.push('电话格式不正确');

    if (errors.length) {
      statusEl.textContent = errors.join('；');
      statusEl.style.color = '#C62828';
      return;
    }

    // 本地存储（示例）
    try {
      const leads = JSON.parse(localStorage.getItem('leads') || '[]');
      leads.push({ ...data, ts: Date.now() });
      localStorage.setItem('leads', JSON.stringify(leads));
    } catch (err) {
      // 忽略本地存储错误
    }

    // 可选：发送到后端（若部署时设置 window.LEAD_ENDPOINT）
    // 在部署中将 window.LEAD_ENDPOINT 指向后端/表单服务地址，如：
    // window.LEAD_ENDPOINT = 'https://api.example.com/leads';
    if (window.LEAD_ENDPOINT) {
      try {
        const resp = await fetch(window.LEAD_ENDPOINT, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(data)
        });
        if (!resp.ok) throw new Error('提交失败');
      } catch (err) {
        statusEl.textContent = '网络提交失败，已本地记录。';
        statusEl.style.color = '#C62828';
        return;
      }
    }

    statusEl.textContent = '提交成功！我们将尽快与您联系。';
    statusEl.style.color = '#2D9CDB';
    form.reset();

    // 若在弹窗中提交，自动关闭
    if (form.closest('.modal')) {
      setTimeout(closeModal, 600);
    }
  });
});

部署指南

文件结构
- 根目录包含 index.html、styles.css、script.js。
- 可选：创建 assets 目录存放图片与图标。
静态托管
- 方案一：Vercel
  - 注册并安装Vercel CLI或通过Web导入仓库。
  - 项目类型选择“Other”，直接部署静态文件。
- 方案二：Netlify
  - 连接Git仓库；构建命令留空，发布目录为根目录。
  - 如需内置表单处理，可在Netlify配置表单收集服务，或在script.js中设置window.LEAD_ENDPOINT为Netlify Functions地址。
- 方案三：GitHub Pages
  - 创建仓库并推送代码；在仓库设置中启用Pages，选择主分支根目录。
域名与HTTPS
- 在托管平台绑定自有域名，启用自动HTTPS。
线索收集对接
- 若无后端服务，先使用本地存储记录；正式上线建议接入：
  - Serverless函数（Vercel/Netlify Functions）提供POST /leads接口。
  - 第三方表单服务（如Web3Forms、Getform），将其端点赋值给window.LEAD_ENDPOINT。
性能与SEO基础
- 设置页面title与meta description（已配置）。
- 提交站点地图与Robots（可后续补充）。
- 压缩与优化图片资源（SVG已轻量）。
测试
- 在Chrome、Safari、Firefox、Edge进行兼容性检查。
- 移动端（iOS/Android）触屏交互与弹窗验证。

优化建议

内容管理：接入轻量CMS（如Netlify CMS、Contentful），便于非技术人员更新产品与反馈内容。
线索管理：与CRM（如HubSpot、Zoho）打通表单数据，实现自动化跟进与统计。
数据分析：接入分析工具（如Google Analytics、umami），跟踪CTA点击率与表单转化。
可访问性增强：增加键盘焦点圈与弹窗焦点陷阱、提供更详细的aria标签与表单错误提示关联。
组件扩展：增加常见问题（FAQ）、团队介绍与案例模块，丰富信任度与转化路径。
性能优化：启用HTTP缓存策略、CSS与JS压缩、图片懒加载；引入Critical CSS以提升首屏渲染。
SEO细化：结构化数据（Organization、Product）、开放图像（og:image），完善站点地图与页面级关键词策略。

网站设计方案

设计语言与风格
- 亮色渐变为主背景（从浅蓝到紫的细腻过渡），前景采用轻卡片风格：柔和阴影、圆角、1px 分隔线与足够留白，体现“预发布/新鲜感”的轻盈质感
- 移动优先：单栏信息流 + 底部固定 CTA，在平板与桌面分辨率下扩展为双/三栏网格
- 模块化段落：Hero/价值主张、功能亮点、路线图时间轴、FAQ、报名与预约表单、社媒关注独立模块，可自由增删和复用
- 深浅双主题：CSS 变量驱动 + prefers-color-scheme 适配；提供一键快速切换与键盘快捷键 t
体验与交互
- 小流量实验：内置轻量 A/B 文案实验（URL 参数 variant 或 v 控制；默认均匀分流），曝光与转化在本地持久化并可导出 CSV
- 报名与预约入口：主按钮“立即报名，抢先体验”，同一表单包含邮箱、公司规模、使用场景；提交后显示感谢状态并记录转化
- 可达性：语义化 HTML、可聚焦态、对比度适配深浅主题、aria 属性与可键盘操作的导航/折叠
技术与实现
- 纯前端，无依赖框架；语义化 HTML + 原生 CSS/JS
- 响应式布局（flex/grid）、CSS 变量主题、轻量动画；无阻塞渲染
- 可配置数据上报端点（通过 meta[name="form-endpoint"]），默认使用 localStorage 存储与导出

网站结构图

首页 /
- 头部导航
  - 品牌标识
  - 导航：功能亮点、路线图、FAQ、报名预约
  - 主题切换按钮
  - 移动端菜单
- Hero/价值主张
  - 一句话价值主张（A/B 实验）
  - 辅助说明
  - CTA：立即报名、预约滚动
  - 隐私提示
- 功能亮点（5 条）
- 路线图时间轴（简版）
- FAQ（6 条，可折叠）
- 报名与预约表单
  - 邮箱
  - 公司规模
  - 使用场景
  - 同意隐私勾选
  - 提交后感谢状态
- 社媒关注入口
- 页脚
  - 导出实验数据
  - 版权
- 隐私政策弹窗（Modal）

核心代码实现

<!doctype html>
<html lang="zh-CN" data-theme="auto">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>新产品预发布 | 报名与预约</title>
  <meta name="description" content="用数据驱动的预发布页，快速验证核心卖点并沉淀早期用户。" />
  <!-- 可选：配置表单上报端点：例如 https://example.com/api/lead -->
  <meta name="form-endpoint" content="" />
  <style>
    :root {
      --bg: #f7f9fc;
      --surface: #ffffff;
      --text: #111827;
      --muted: #6b7280;
      --primary: #5b7cfa;
      --primary-600: #4c6af5;
      --primary-700: #3f5ae6;
      --ring: rgba(91,124,250,0.35);
      --border: #e5e7eb;
      --success: #10b981;
      --warning: #f59e0b;
      --danger: #ef4444;
      --gradient: linear-gradient(135deg, #b3d2ff 0%, #e0c6ff 50%, #ffe3f3 100%);
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
      --shadow-md: 0 6px 24px rgba(0,0,0,0.08);
      --radius: 14px;
      --radius-sm: 10px;
      color-scheme: light dark;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #0b1020;
        --surface: #121937;
        --text: #e5e7eb;
        --muted: #a3a8b3;
        --primary: #7ea1ff;
        --primary-600: #7091ff;
        --primary-700: #5f7af5;
        --ring: rgba(126,161,255,0.35);
        --border: #20274b;
        --gradient: linear-gradient(135deg, #1a2448 0%, #2d1f49 50%, #3a1e34 100%);
        --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
        --shadow-md: 0 10px 30px rgba(0,0,0,0.35);
      }
    }
    html[data-theme="light"] {
      --bg: #f7f9fc;
      --surface: #ffffff;
      --text: #111827;
      --muted: #6b7280;
      --primary: #5b7cfa;
      --primary-600: #4c6af5;
      --primary-700: #3f5ae6;
      --ring: rgba(91,124,250,0.35);
      --border: #e5e7eb;
      --gradient: linear-gradient(135deg, #b3d2ff 0%, #e0c6ff 50%, #ffe3f3 100%);
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
      --shadow-md: 0 6px 24px rgba(0,0,0,0.08);
    }
    html[data-theme="dark"] {
      --bg: #0b1020;
      --surface: #121937;
      --text: #e5e7eb;
      --muted: #a3a8b3;
      --primary: #7ea1ff;
      --primary-600: #7091ff;
      --primary-700: #5f7af5;
      --ring: rgba(126,161,255,0.35);
      --border: #20274b;
      --gradient: linear-gradient(135deg, #1a2448 0%, #2d1f49 50%, #3a1e34 100%);
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
      --shadow-md: 0 10px 30px rgba(0,0,0,0.35);
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
      color: var(--text);
      background: var(--bg);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .gradient-bg {
      position: absolute; inset: 0; z-index: -1;
      background: var(--gradient);
      opacity: 0.5;
      filter: blur(60px) saturate(1.2);
    }

    .container {
      width: 100%;
      max-width: 1160px;
      padding: 0 16px;
      margin: 0 auto;
    }

    header.site-header {
      position: sticky; top: 0; z-index: 50;
      backdrop-filter: saturate(1.2) blur(10px);
      background: color-mix(in oklab, var(--surface) 75%, transparent);
      border-bottom: 1px solid var(--border);
    }
    .nav {
      display: flex; align-items: center; justify-content: space-between;
      height: 64px;
    }
    .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
    .brand .logo {
      width: 28px; height: 28px; border-radius: 8px;
      background: linear-gradient(135deg, var(--primary), #9a7bff);
      box-shadow: var(--shadow-sm);
    }
    .nav-links {
      display: none; gap: 20px; align-items: center;
    }
    .nav-links a {
      color: var(--text); text-decoration: none; font-weight: 500;
    }
    .nav-actions { display: flex; align-items: center; gap: 10px; }
    .btn, button.btn {
      appearance: none; cursor: pointer; user-select: none;
      border: 1px solid color-mix(in oklab, var(--primary) 30%, var(--border));
      background: linear-gradient(180deg, var(--primary), var(--primary-600));
      color: #fff; padding: 10px 14px; border-radius: 999px;
      box-shadow: 0 8px 18px rgba(91,124,250,0.25);
      font-weight: 600; transition: transform .05s ease, box-shadow .2s ease;
    }
    .btn:hover { box-shadow: 0 10px 22px rgba(91,124,250,0.32); }
    .btn:active { transform: translateY(1px); }
    .btn-outline {
      background: transparent; color: var(--text);
      border: 1px solid var(--border); box-shadow: var(--shadow-sm);
    }
    .btn-ghost {
      background: transparent; border: 1px solid transparent; color: var(--text);
    }

    .icon-btn {
      border: 1px solid var(--border);
      background: color-mix(in oklab, var(--surface) 85%, transparent);
      color: var(--text); width: 40px; height: 40px; border-radius: 999px;
      display: inline-flex; align-items: center; justify-content: center;
      box-shadow: var(--shadow-sm);
    }

    .hamburger { display: inline-flex; }
    @media (min-width: 900px) {
      .nav-links { display: flex; }
      .hamburger { display: none; }
    }

    .mobile-menu {
      display: none; border-top: 1px solid var(--border);
      background: var(--surface);
    }
    .mobile-menu.open { display: block; }
    .mobile-menu a { display: block; padding: 14px 0; color: var(--text); text-decoration: none; }

    .hero {
      position: relative; padding: 36px 0 24px;
    }
    .hero-card {
      position: relative; overflow: hidden;
      background: color-mix(in oklab, var(--surface) 85%, transparent);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-md);
      padding: 22px;
    }
    @media (min-width: 900px) {
      .hero { padding: 64px 0 40px; }
      .hero-card { padding: 42px; }
    }
    .kicker { color: var(--primary); font-weight: 700; letter-spacing: .08em; font-size: 12px; text-transform: uppercase; }
    .hero-title { font-size: 26px; line-height: 1.2; margin: 8px 0 10px; font-weight: 800; }
    .hero-sub { color: var(--muted); font-size: 16px; margin-bottom: 16px; }
    @media (min-width: 900px) {
      .hero-title { font-size: 42px; }
      .hero-sub { font-size: 18px; }
    }
    .hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
    .legal { font-size: 12px; color: var(--muted); margin-top: 8px; }

    .section { padding: 28px 0; }
    @media (min-width: 900px) { .section { padding: 48px 0; } }
    .section-title { font-size: 22px; font-weight: 800; margin-bottom: 14px; }
    .section-sub { color: var(--muted); margin-bottom: 18px; }

    .grid {
      display: grid; gap: 12px;
      grid-template-columns: 1fr;
    }
    @media (min-width: 700px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow-sm);
      padding: 16px;
    }
    .feature { display: flex; gap: 12px; }
    .feature .ico {
      width: 40px; height: 40px; border-radius: 10px;
      display: inline-flex; align-items: center; justify-content: center;
      background: color-mix(in oklab, var(--primary) 12%, transparent);
      color: var(--primary);
    }
    .feature h3 { margin: 0 0 6px; font-size: 16px; }
    .feature p { margin: 0; color: var(--muted); font-size: 14px; }

    .timeline { position: relative; }
    .timeline::before {
      content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 2px;
      background: var(--border);
    }
    .t-item { position: relative; padding-left: 40px; margin-bottom: 16px; }
    .t-item::before {
      content: ""; position: absolute; left: 6px; top: 4px; width: 16px; height: 16px; border-radius: 999px;
      background: var(--surface); border: 2px solid var(--primary);
      box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 15%, transparent);
    }
    .t-item h4 { margin: 0 0 4px; }
    .t-item p { margin: 0; color: var(--muted); }

    details.faq { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 10px 12px; }
    details.faq + details.faq { margin-top: 10px; }
    details.faq[open] { box-shadow: var(--shadow-sm); }
    summary { cursor: pointer; list-style: none; font-weight: 600; }
    summary::-webkit-details-marker { display: none; }
    .faq p { color: var(--muted); margin: 8px 0 0; }

    .form {
      display: grid; gap: 12px;
    }
    .input, select, textarea {
      width: 100%; padding: 12px 12px;
      border: 1px solid var(--border); border-radius: 10px;
      background: color-mix(in oklab, var(--surface) 90%, transparent);
      color: var(--text);
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .input:focus, select:focus, textarea:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 4px var(--ring);
    }
    .assist { font-size: 12px; color: var(--muted); }
    .error { color: var(--danger); font-size: 12px; }

    .success {
      border: 1px solid color-mix(in oklab, var(--success) 40%, var(--border));
      background: color-mix(in oklab, var(--success) 8%, var(--surface));
      color: var(--text);
      padding: 12px; border-radius: var(--radius-sm);
    }

    .socials { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
    .socials a {
      display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
      color: var(--text); padding: 8px 10px; border: 1px solid var(--border); border-radius: 999px;
      background: color-mix(in oklab, var(--surface) 85%, transparent);
    }

    footer {
      padding: 24px 0; border-top: 1px solid var(--border); margin-top: 24px;
      background: color-mix(in oklab, var(--surface) 80%, transparent);
    }

    .sticky-cta {
      position: sticky; bottom: 10px; z-index: 40; pointer-events: none;
    }
    .sticky-cta .wrap {
      pointer-events: auto; display: flex; justify-content: center;
    }
    .sticky-cta .wrap .btn { box-shadow: 0 10px 24px rgba(91,124,250,0.35); }

    .modal {
      position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 60;
      background: rgba(0,0,0,0.35);
    }
    .modal.open { display: flex; }
    .modal .dialog {
      max-width: 680px; width: calc(100% - 32px);
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
      box-shadow: var(--shadow-md); padding: 18px;
    }
    .modal .dialog h3 { margin-top: 0; }
  </style>
</head>
<body>
  <div class="gradient-bg" aria-hidden="true"></div>

  <header class="site-header" role="banner">
    <div class="container nav">
      <div class="brand">
        <div class="logo" aria-hidden="true"></div>
        <a href="#" aria-label="返回首页" style="text-decoration:none; color:inherit;">预发布实验室</a>
      </div>
      <nav class="nav-links" aria-label="主导航">
        <a href="#features">功能亮点</a>
        <a href="#roadmap">路线图</a>
        <a href="#faq">FAQ</a>
        <a href="#signup">报名预约</a>
      </nav>
      <div class="nav-actions">
        <button class="icon-btn" id="themeToggle" aria-label="切换主题" title="切换主题 (T)">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M21.64,13a9,9,0,1,1-10.63-10A1,1,0,0,1,12,4a7,7,0,1,0,8,8A1,1,0,0,1,21.64,13Z"/></svg>
        </button>
        <a href="#signup" class="btn" aria-label="立即报名">立即报名</a>
        <button class="icon-btn hamburger" id="menuToggle" aria-label="展开菜单">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z"/></svg>
        </button>
      </div>
    </div>
    <div class="mobile-menu" id="mobileMenu" aria-label="移动菜单">
      <div class="container">
        <a href="#features" onclick="closeMenu()">功能亮点</a>
        <a href="#roadmap" onclick="closeMenu()">路线图</a>
        <a href="#faq" onclick="closeMenu()">FAQ</a>
        <a href="#signup" onclick="closeMenu()">报名预约</a>
      </div>
    </div>
  </header>

  <main id="main">
    <section class="hero" id="hero">
      <div class="container">
        <div class="hero-card">
          <div class="kicker">预发布 · 文案实验 · 早期用户</div>
          <h1 class="hero-title" id="vpTitle">让团队在一周内验证产品卖点</h1>
          <p class="hero-sub" id="vpSub">用数据驱动的预发布页，快速沉淀愿意尝鲜的真实用户线索。</p>
          <div class="hero-ctas">
            <a href="#signup" class="btn" id="ctaPrimary">立即报名，抢先体验</a>
            <a href="#signup" class="btn btn-outline">预约演示</a>
          </div>
          <div class="legal">
            提交即表示同意《<a href="#" id="openPolicy">隐私政策</a>》，我们仅用于与产品相关的联络，可随时退订。
          </div>
        </div>
      </div>
    </section>

    <section class="section" id="features">
      <div class="container">
        <h2 class="section-title">功能亮点</h2>
        <p class="section-sub">围绕“验证—学习—迭代”的最小闭环设计，助你以更小的代价找到真正的产品共鸣点。</p>
        <div class="grid grid-3">
          <div class="card feature">
            <div class="ico" aria-hidden="true">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M4 5h16v2H4zM4 11h16v2H4zM4 17h10v2H4z"/></svg>
            </div>
            <div>
              <h3>模块化预发布页</h3>
              <p>亮色渐变 + 轻卡片模块，移动优先，几分钟搭建发布。</p>
            </div>
          </div>
          <div class="card feature">
            <div class="ico" aria-hidden="true">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3v18M3 12h18"/></svg>
            </div>
            <div>
              <h3>多版本文案实验</h3>
              <p>URL 参数或自动分流，记录曝光与转化，一键导出 CSV。</p>
            </div>
          </div>
          <div class="card feature">
            <div class="ico" aria-hidden="true">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M4 4h16v10H4zM2 18h20v2H2z"/></svg>
            </div>
            <div>
              <h3>报名与预约一体</h3>
              <p>邮箱、公司规模、使用场景统一采集，提交后即时反馈。</p>
            </div>
          </div>
          <div class="card feature">
            <div class="ico" aria-hidden="true">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 100 20 10 10 0 000-20z"/></svg>
            </div>
            <div>
              <h3>深浅双主题</h3>
              <p>支持系统偏好与快速切换，视觉一致，减少视觉疲劳。</p>
            </div>
          </div>
          <div class="card feature">
            <div class="ico" aria-hidden="true">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3 12l7 7 11-11"/></svg>
            </div>
            <div>
              <h3>无侵入轻量分析</h3>
              <p>本地持久化，不依赖外部脚本；可对接 Webhook 与自建端点。</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="section" id="roadmap">
      <div class="container">
        <h2 class="section-title">简版路线图</h2>
        <p class="section-sub">从内测到公开发布，持续围绕“验证效率”和“增长闭环”迭代。</p>
        <div class="timeline">
          <div class="t-item">
            <h4>10 月 · 内测邀请</h4>
            <p>首批种子用户加入，验证报名与预约流程、文案实验稳定性。</p>
          </div>
          <div class="t-item">
            <h4>11 月 · 自定义域名 & Webhook</h4>
            <p>支持表单 Webhook，对接飞书/Slack；自定义域名与 HTTPS。</p>
          </div>
          <div class="t-item">
            <h4>12 月 · 组件市场 Beta</h4>
            <p>可视化模块扩展：社会证明、倒计时、用例库、媒体引用。</p>
          </div>
          <div class="t-item">
            <h4>1 月 · 多臂老虎机实验</h4>
            <p>在小流量下提升收敛速度；自动暂停表现不佳的版本。</p>
          </div>
          <div class="t-item">
            <h4>2 月 · 消息集成</h4>
            <p>线索自动同步到 CRM，触发欢迎邮件与预约提醒。</p>
          </div>
        </div>
      </div>
    </section>

    <section class="section" id="faq">
      <div class="container">
        <h2 class="section-title">FAQ</h2>
        <div>
          <details class="faq">
            <summary>如何进行文案 A/B 实验？</summary>
            <p>默认均匀分流；也可用 URL 参数 ?variant=a/b/c 或 ?v=b 指定版本。系统记录曝光与提交作为转化。</p>
          </details>
          <details class="faq">
            <summary>我的数据存在哪里？</summary>
            <p>默认保存在本地浏览器（localStorage），你可一键导出 CSV 或配置表单端点进行服务端接收。</p>
          </details>
          <details class="faq">
            <summary>支持哪些表单字段？能否自定义？</summary>
            <p>内置邮箱、公司规模、使用场景。后续版本支持自定义字段与验证规则。</p>
          </details>
          <details class="faq">
            <summary>是否收费？</summary>
            <p>内测期间免费。公测后提供免费版与专业版（包含多臂实验、Webhook、团队协作）。</p>
          </details>
          <details class="faq">
            <summary>可以随时退订吗？</summary>
            <p>可以。邮件页脚提供退订入口，我们严格遵守隐私与反骚扰规范。</p>
          </details>
          <details class="faq">
            <summary>遇到问题如何联系支持？</summary>
            <p>通过页脚社媒与我们联系，或在提交表单后回复确认邮件。</p>
          </details>
        </div>
      </div>
    </section>

    <section class="section" id="signup">
      <div class="container">
        <div class="grid grid-2">
          <div class="card">
            <h2 class="section-title" style="margin-bottom:8px">报名与预约</h2>
            <p class="section-sub">留下你的信息，我们将在开放名额时第一时间通知并提供预约演示。</p>
            <form id="leadForm" class="form" novalidate>
              <div>
                <label for="email">邮箱</label>
                <input id="email" name="email" type="email" class="input" placeholder="you@company.com" required />
                <div class="assist">用于发送内测邀请与预约确认。</div>
                <div class="error" data-error-for="email"></div>
              </div>
              <div>
                <label for="size">公司规模</label>
                <select id="size" name="company_size" required>
                  <option value="">请选择</option>
                  <option>1-10</option>
                  <option>11-50</option>
                  <option>51-200</option>
                  <option>200+</option>
                </select>
                <div class="error" data-error-for="size"></div>
              </div>
              <div>
                <label for="usecase">使用场景</label>
                <textarea id="usecase" name="use_case" rows="4" placeholder="例如：验证新功能卖点；收集等待名单；活动报名等" required></textarea>
                <div class="error" data-error-for="usecase"></div>
              </div>
              <div>
                <label style="display:flex; align-items:center; gap:8px;">
                  <input id="consent" type="checkbox" required />
                  我已阅读并同意隐私政策，仅用于与本产品相关的联络
                </label>
                <div class="assist">我们不会出售或出租你的信息，可随时退订。</div>
                <div class="error" data-error-for="consent"></div>
              </div>
              <input type="hidden" name="variant" id="variantField" />
              <input type="hidden" name="timestamp" id="tsField" />
              <div style="display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
                <button type="submit" class="btn" id="submitBtn">提交报名</button>
                <span class="assist">提交即同意《<a href="#" id="openPolicy2">隐私政策</a>》</span>
              </div>
              <div id="formMsg" style="display:none; margin-top:10px;" class="success" role="status" aria-live="polite">
                感谢提交！我们已记录你的预约，稍后将通过邮箱与您联系。
              </div>
            </form>
          </div>
          <div class="card">
            <h3 style="margin-top:0;">关注我们</h3>
            <p class="section-sub">获取最新路线图进展与内测名额开放时间。</p>
            <div class="socials">
              <a href="https://x.com" target="_blank" rel="noopener">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 3l-7.5 9.5L20 21h-2.5L12 14.5 7 21H4l7.5-9.5L4 3h2.5L12 9.5 16.5 3H20z"/></svg>
                X
              </a>
              <a href="https://www.linkedin.com" target="_blank" rel="noopener">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6 6h3v12H6zM7.5 3A1.5 1.5 0 1 1 6 4.5 1.5 1.5 0 0 1 7.5 3zM11 9h3v1.7h.1A3.3 3.3 0 0 1 17 8.9c2 0 3 1.3 3 3.9V18h-3v-4c0-1.2-.4-2-1.5-2s-1.5.9-1.5 2v4h-3z"/></svg>
                LinkedIn
              </a>
              <a href="https://github.com" target="_blank" rel="noopener">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5a12 12 0 0 0-3.8 23.4c.6.1.8-.2.8-.5v-1.8c-3.3.7-4-1.6-4-1.6-.6-1.6-1.5-2-1.5-2-1.2-.8.1-.8.1-.8 1.3.1 2 1.3 2 1.3 1.1 2 3 1.4 3.7 1 .1-.8.4-1.4.8-1.8-2.6-.3-5.3-1.3-5.3-6a4.7 4.7 0 0 1 1.2-3.3 4.4 4.4 0 0 1 .1-3.3s1-.3 3.4 1.2a11.7 11.7 0 0 1 6.2 0C17 5.7 18 6 18 6a4.4 4.4 0 0 1 .1 3.3 4.7 4.7 0 0 1 1.2 3.3c0 4.7-2.7 5.7-5.3 6 .5.4.9 1.2.9 2.4v3.5c0 .3.2.7.8.5A12 12 0 0 0 12 .5z"/></svg>
                GitHub
              </a>
              <a href="#" aria-label="微信二维码">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 3a7 7 0 100 14l.5-.1L7 20l3-2a8 8 0 109-7c0-4.4-4-8-9-8H8z"/></svg>
                微信
              </a>
            </div>
            <div style="margin-top:16px;">
              <button id="exportCsv" class="btn btn-outline">导出实验数据 CSV</button>
              <div class="assist" style="margin-top:8px;">包含版本曝光与表单转化，便于小流量验证与复盘。</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <div class="sticky-cta" aria-hidden="true">
      <div class="container wrap">
        <a href="#signup" class="btn">立即报名</a>
      </div>
    </div>
  </main>

  <footer role="contentinfo">
    <div class="container" style="display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;">
      <div class="assist">© <span id="year"></span> 预发布实验室 · All rights reserved.</div>
      <div class="assist">深浅主题 · 移动优先 · 模块化段落</div>
    </div>
  </footer>

  <!-- 隐私政策弹窗 -->
  <div class="modal" id="policyModal" role="dialog" aria-modal="true" aria-labelledby="policyTitle" aria-hidden="true">
    <div class="dialog">
      <div style="display:flex; justify-content:space-between; align-items:center;">
        <h3 id="policyTitle" style="margin:0;">隐私政策（简版）</h3>
        <button class="icon-btn" id="closePolicy" aria-label="关闭">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M6 6l12 12M18 6L6 18"/></svg>
        </button>
      </div>
      <p class="assist">我们仅收集用于联系与产品邀测的必要信息（邮箱、公司规模与使用场景）。我们不会出售或出租你的数据；如需删除，请通过提交的邮箱联系我们。提交表单即表示同意接收与本产品相关的邮件，可随时退订。</p>
    </div>
  </div>

  <script>
    // 实验与主题配置
    const EXPERIMENT_ID = 'vp_v1';
    const VARIANTS = {
      a: {
        title: '让团队在一周内验证产品卖点',
        sub: '用数据驱动的预发布页，快速沉淀愿意尝鲜的真实用户线索。',
        cta: '立即报名，抢先体验'
      },
      b: {
        title: '用预发布页捕捉首批愿意付费的用户',
        sub: '从曝光到转化的每一步都可度量，小流量也能科学决策。',
        cta: '获取内测名额'
      },
      c: {
        title: '把想法变成可验证的报名线索',
        sub: '零开发上线，迭代文案与卖点，快速找到产品共鸣点。',
        cta: '开始验证'
      }
    };

    // 工具函数
    const $ = (sel, ctx=document) => ctx.querySelector(sel);
    const $$ = (sel, ctx=document) => Array.from(ctx.querySelectorAll(sel));
    const storage = {
      get(k, def=null){ try { return JSON.parse(localStorage.getItem(k)) ?? def; } catch { return def; } },
      set(k,v){ localStorage.setItem(k, JSON.stringify(v)); },
      push(k,item){ const arr = storage.get(k, []); arr.push(item); storage.set(k, arr); }
    };

    // 主题切换：auto/light/dark
    const themeToggleBtn = $('#themeToggle');
    function applyTheme(mode) {
      if (mode === 'auto') {
        document.documentElement.setAttribute('data-theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
      } else {
        document.documentElement.setAttribute('data-theme', mode);
      }
    }
    function initTheme() {
      const saved = storage.get('theme_mode', 'auto');
      applyTheme(saved);
    }
    themeToggleBtn.addEventListener('click', () => {
      const current = document.documentElement.getAttribute('data-theme');
      const next = current === 'light' ? 'dark' : 'light';
      storage.set('theme_mode', next);
      applyTheme(next);
    });
    document.addEventListener('keydown', (e) => {
      if (e.key.toLowerCase() === 't') themeToggleBtn.click();
    });

    // 菜单
    const mobileMenu = $('#mobileMenu');
    const menuToggle = $('#menuToggle');
    window.closeMenu = () => mobileMenu.classList.remove('open');
    menuToggle.addEventListener('click', () => mobileMenu.classList.toggle('open'));

    // 隐私弹窗
    const policyModal = $('#policyModal');
    const openPolicy = $('#openPolicy');
    const openPolicy2 = $('#openPolicy2');
    const closePolicy = $('#closePolicy');
    function openPolicyDialog(){ policyModal.classList.add('open'); policyModal.setAttribute('aria-hidden', 'false'); }
    function closePolicyDialog(){ policyModal.classList.remove('open'); policyModal.setAttribute('aria-hidden', 'true'); }
    [openPolicy, openPolicy2].forEach(el => el && el.addEventListener('click', (e)=>{ e.preventDefault(); openPolicyDialog(); }));
    closePolicy.addEventListener('click', closePolicyDialog);
    policyModal.addEventListener('click', (e)=>{ if (e.target === policyModal) closePolicyDialog(); });

    // A/B 实验初始化
    function pickVariant() {
      const url = new URL(location.href);
      const fromParam = url.searchParams.get('variant') || url.searchParams.get('v');
      const saved = storage.get('exp_'+EXPERIMENT_ID);
      if (fromParam && VARIANTS[fromParam]) return { key: fromParam, source: 'param' };
      if (saved && VARIANTS[saved.key]) return saved;
      const keys = Object.keys(VARIANTS);
      const key = keys[Math.floor(Math.random() * keys.length)];
      return { key, source: 'random' };
    }
    function applyVariant(key) {
      const v = VARIANTS[key];
      if (!v) return;
      $('#vpTitle').textContent = v.title;
      $('#vpSub').textContent = v.sub;
      $('#ctaPrimary').textContent = v.cta;
      $('#variantField').value = key;
      // 曝光计数
      const stats = storage.get('stats_'+EXPERIMENT_ID, { exposures:{}, conversions:{} });
      stats.exposures[key] = (stats.exposures[key] || 0) + 1;
      storage.set('stats_'+EXPERIMENT_ID, stats);
      storage.set('exp_'+EXPERIMENT_ID, { key, at: Date.now() });
    }

    // 表单提交
    const form = $('#leadForm');
    const formMsg = $('#formMsg');
    const submitBtn = $('#submitBtn');
    const endpoint = $('meta[name="form-endpoint"]')?.content?.trim();

    function validate() {
      let ok = true;
      const email = $('#email');
      const size = $('#size');
      const usecase = $('#usecase');
      const consent = $('#consent');
      const showErr = (id,msg)=>{ const el = document.querySelector('[data-error-for="'+id+'"]'); if (el) el.textContent = msg || ''; };

      showErr('email'); showErr('size'); showErr('usecase'); showErr('consent');

      if (!email.value || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)) {
        ok = false; showErr('email','请输入有效的邮箱地址');
      }
      if (!size.value) { ok = false; showErr('size','请选择公司规模'); }
      if (!usecase.value || usecase.value.trim().length < 5) { ok = false; showErr('usecase','请简单描述使用场景（不少于 5 个字）'); }
      if (!consent.checked) { ok = false; showErr('consent','提交前请勾选隐私同意'); }
      return ok;
    }

    async function submitLead(e) {
      e.preventDefault();
      if (!validate()) return;

      submitBtn.disabled = true; submitBtn.textContent = '提交中...';
      $('#tsField').value = new Date().toISOString();

      const payload = {
        email: $('#email').value.trim(),
        company_size: $('#size').value,
        use_case: $('#usecase').value.trim(),
        variant: $('#variantField').value,
        ts: $('#tsField').value,
        url: location.href,
        ua: navigator.userAgent
      };

      // 首先本地持久化
      storage.push('leads', payload);

      let ok = true;
      if (endpoint) {
        try {
          const res = await fetch(endpoint, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
          });
          ok = res.ok;
        } catch (err) { ok = false; }
      }

      // 统计转化
      const key = payload.variant || 'unknown';
      const stats = storage.get('stats_'+EXPERIMENT_ID, { exposures:{}, conversions:{} });
      stats.conversions[key] = (stats.conversions[key] || 0) + 1;
      storage.set('stats_'+EXPERIMENT_ID, stats);

      formMsg.style.display = 'block';
      if (!ok && endpoint) {
        formMsg.textContent = '已记录本地，服务器暂时不可达，我们稍后重试或请刷新后再试。';
      }

      // 重置表单并防止重复提交
      form.reset();
      submitBtn.textContent = '已提交';
    }

    // 导出 CSV
    function exportCSV() {
      const stats = storage.get('stats_'+EXPERIMENT_ID, { exposures:{}, conversions:{} });
      const leads = storage.get('leads', []);
      const lines = [];
      lines.push('type,key,value');
      Object.entries(stats.exposures).forEach(([k,v]) => lines.push(`exposure,${k},${v}`));
      Object.entries(stats.conversions).forEach(([k,v]) => lines.push(`conversion,${k},${v}`));
      lines.push('');
      lines.push('email,company_size,use_case,variant,ts,url,ua');
      leads.forEach(l => lines.push([l.email,l.company_size,`"${(l.use_case||'').replace(/"/g,'""')}"`,l.variant,l.ts,l.url,`"${(l.ua||'').replace(/"/g,'""')}"`].join(',')));
      const blob = new Blob([lines.join('\n')], { type: 'text/csv;charset=utf-8;' });
      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = `experiment_${EXPERIMENT_ID}_${new Date().toISOString().slice(0,10)}.csv`;
      a.click();
      URL.revokeObjectURL(a.href);
    }

    // 平滑滚动（原生行为已支持，兜底）
    $$('a[href^="#"]').forEach(a=>{
      a.addEventListener('click', (e)=>{
        const id = a.getAttribute('href').slice(1);
        if (!id) return;
        const el = document.getElementById(id);
        if (el) { e.preventDefault(); el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
      });
    });

    // 初始化
    (function init(){
      initTheme();
      const chosen = pickVariant();
      applyVariant(chosen.key);
      $('#year').textContent = new Date().getFullYear();
      form.addEventListener('submit', submitLead);
      $('#exportCsv').addEventListener('click', exportCSV);
      document.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'visible' && storage.get('theme_mode','auto')==='auto') applyTheme('auto');
      });
    })();
  </script>
</body>
</html>

/* 完整的CSS样式（与 HTML 内联样式一致，可拆分为 styles.css 使用）
   如果外链，请删除 HTML 中的 <style> 并在 <head> 引入本文件 */
:root { /* 变量见内联 CSS，同步内容略 */ }

// 必要的JavaScript代码（与 HTML 内联脚本一致，可拆分为 app.js 使用）
// 见 HTML 中 <script>，包含：主题切换、移动菜单、隐私弹窗、A/B 实验、表单提交与 CSV 导出。

部署指南

本地预览
- 将上述 HTML 保存为 index.html（已内联 CSS/JS，可直接双击或用任意静态服务器打开）
静态托管
- 任选其一：GitHub Pages、Vercel、Netlify、Cloudflare Pages、阿里云 OSS/腾讯云 COS
- 新建仓库并推送项目；在平台创建站点，绑定自定义域名并开启 HTTPS
可选：接入表单服务端
- 在中的 meta[name="form-endpoint"] 填入你的接收端点（HTTPS）
- 端点需接受 POST application/json，建议返回 200/201
- 生产环境建议在服务端增加验证码、人机验证或速率限制
基础 SEO
- 补充标题与描述中的产品关键字；为社媒分享添加 Open Graph 与 Twitter Card
版本实验
- 使用 ?variant=a 或 ?variant=b/c 固定版本；默认随机均分
- 点击“导出实验数据 CSV”获取曝光与转化数据并分析转化率

优化建议

数据对接
- 开启 Webhook：报名成功后推送到 CRM/表格（Airtable/飞书表格/自建）
- 邮件自动化：提交后发送欢迎邮件与预约日程（可用 Sendgrid/SES）
组件扩展
- 增加社会证明模块：Logo 墙、用户评价、媒体报道
- 加入紧迫感组件：名额计数器、倒计时、最新更新
实验能力
- 支持多臂老虎机与停更机制；按会话/访客维度粘性分流
- 为功能亮点与 CTA 文案引入细粒度实验位点
用户体验
- 表单实时校验与错误提示国际化；引入表单进度与懒加载输入提示
- Lighthouse 优化：字体预加载、图片延迟加载、关键渲染路径压缩
合规与隐私
- 增加完整《隐私政策》《使用条款》独立页面
- 提供数据导出与删除请求入口，支持 Do Not Track 标志

网站设计方案

风格与配色：黑白极简为主，通用灰阶层次；主体文字采用深黑，分隔线与边框使用极细浅灰，卡片阴影柔和低调。
排版与字号：大字号层级（标题使用超大字重、内容使用舒适阅读字号），宽松的行距与留白；中英文字体栈统一为系统无衬线。
布局：响应式单页结构，顶部极简导航；主体区块包含自我介绍、服务项目、瀑布流作品集、案例、下载入口、报价与FAQ、联系信息。
作品展示：瀑布流（Masonry）卡片，采用细线分隔与柔和阴影；悬浮微动效与卡片轻微上移。
动效：低调动效，包括滚动进入淡入（IntersectionObserver）、导航切换、案例详情弹窗、FAQ折叠。
适配：移动优先设计，断点调整列数与间距，保证中小屏阅读友好。

网站结构图

首页
- 导航
  - 关于我
  - 服务
  - 作品集
  - 案例
  - 下载作品集
  - 报价与FAQ
  - 联系方式
- Hero（姓名与一句话定位）
- 关于我（个人简介约50字）
- 服务（品牌视觉 / 网页设计 / 插画）
- 作品集（瀑布流作品卡片）
- 案例（3则标题 + 一句话背景与结果，支持详情弹窗）
- 下载作品集（打印或下载入口）
- 报价说明（计费逻辑与区间）与常见问题（折叠项）
- 联系方式（邮箱与社媒）
- 页脚（版权与社媒）

核心代码实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>极简作品集网站</title>
  <meta name="description" content="黑白极简，大字号版式的个人作品集与案例展示网站。" />
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header class="site-header reveal">
    <div class="container header-inner">
      <a href="#" class="logo" aria-label="主页">Design Studio</a>
      <button class="nav-toggle" aria-label="打开菜单" aria-expanded="false">☰</button>
      <nav class="site-nav" aria-label="主导航">
        <ul>
          <li><a href="#about">关于我</a></li>
          <li><a href="#services">服务</a></li>
          <li><a href="#portfolio">作品集</a></li>
          <li><a href="#cases">案例</a></li>
          <li><a href="#download">下载作品集</a></li>
          <li><a href="#pricing">报价与FAQ</a></li>
          <li><a href="#contact">联系</a></li>
        </ul>
      </nav>
    </div>
    <div class="divider"></div>
  </header>

  <main>
    <!-- Hero -->
    <section id="hero" class="section hero reveal">
      <div class="container">
        <h1 class="hero-title">黑白极简 · 品牌与网页设计</h1>
        <p class="hero-sub">以理性视觉与高效交付，快速把设计稿与素材转为可上线网站。</p>
      </div>
    </section>

    <!-- 关于我 -->
    <section id="about" class="section reveal">
      <div class="container">
        <h2 class="section-title">关于我</h2>
        <p class="intro">
          独立设计师，专注品牌与网页视觉，以简洁理性为核心，追求高效交付与一致体验，善于将复杂信息化繁为简。
        </p>
      </div>
      <div class="divider"></div>
    </section>

    <!-- 服务 -->
    <section id="services" class="section reveal">
      <div class="container">
        <h2 class="section-title">服务项目</h2>
        <div class="services">
          <div class="service-card">
            <h3>品牌视觉</h3>
            <p>标志与识别系统、规范手册、应用物料，统一品牌形象。</p>
          </div>
          <div class="service-card">
            <h3>网页设计</h3>
            <p>响应式官网、落地页与组件库，提升转化与信息清晰度。</p>
          </div>
          <div class="service-card">
            <h3>插画</h3>
            <p>用于产品叙事与社媒传播的风格化插画与图形元素。</p>
          </div>
        </div>
      </div>
      <div class="divider"></div>
    </section>

    <!-- 作品集 -->
    <section id="portfolio" class="section reveal">
      <div class="container">
        <h2 class="section-title">作品集</h2>
        <div class="portfolio-grid">
          <!-- 9个作品卡片，使用SVG占位图。替换为真实图片即可。 -->
          <article class="portfolio-item">
            <img alt="作品 01 占位图"
                 src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600'><rect width='100%25' height='100%25' fill='%23f5f5f5'/><text x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23222' font-size='42' font-family='system-ui'>WORK 01</text></svg>">
            <div class="item-info">
              <h3>作品 01</h3>
              <p>极简网页视觉探索</p>
            </div>
          </article>

          <article class="portfolio-item">
            <img alt="作品 02 占位图"
                 src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='1000'><rect width='100%25' height='100%25' fill='%23f5f5f5'/><text x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23222' font-size='42' font-family='system-ui'>WORK 02</text></svg>">
            <div class="item-info">
              <h3>作品 02</h3>
              <p>品牌系统与版式</p>
            </div>
          </article>

          <article class="portfolio-item">
            <img alt="作品 03 占位图"
                 src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='700'><rect width='100%25' height='100%25' fill='%23f5f5f5'/><text x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23222' font-size='42' font-family='system-ui'>WORK 03</text></svg>">
            <div class="item-info">
              <h3>作品 03</h3>
              <p>信息架构与组件</p>
            </div>
          </article>

          <article class="portfolio-item">
            <img alt="作品 04 占位图"
                 src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='650'><rect width='100%25' height='100%25' fill='%23f5f5f5'/><text x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23222' font-size='42' font-family='system-ui'>WORK 04</text></svg>">
            <div class="item-info">
              <h3>作品 04</h3>
              <p>登陆页视觉</p>
            </div>
          </article>

          <article class="portfolio-item">
            <img alt="作品 05 占位图"
                 src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='900'><rect width='100%25' height='100%25' fill='%23f5f5f5'/><text x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23222' font-size='42' font-family='system-ui'>WORK 05</text></svg>">
            <div class="item-info">
              <h3>作品 05</h3>
              <p>电商模块化UI</p>
            </div>
          </article>

          <article class="portfolio-item">
            <img alt="作品 06 占位图"
                 src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600'><rect width='100%25' height='100%25' fill='%23f5f5f5'/><text x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23222' font-size='42' font-family='system-ui'>WORK 06</text></svg>">
            <div class="item-info">
              <h3>作品 06</h3>
              <p>移动端交互草图</p>
            </div>
          </article>

          <article class="portfolio-item">
            <img alt="作品 07 占位图"
                 src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='720'><rect width='100%25' height='100%25' fill='%23f5f5f5'/><text x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23222' font-size='42' font-family='system-ui'>WORK 07</text></svg>">
            <div class="item-info">
              <h3>作品 07</h3>
              <p>插画风格探索</p>
            </div>
          </article>

          <article class="portfolio-item">
            <img alt="作品 08 占位图"
                 src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='820'><rect width='100%25' height='100%25' fill='%23f5f5f5'/><text x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23222' font-size='42' font-family='system-ui'>WORK 08</text></svg>">
            <div class="item-info">
              <h3>作品 08</h3>
              <p>图形语言与图标</p>
            </div>
          </article>

          <article class="portfolio-item">
            <img alt="作品 09 占位图"
                 src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='680'><rect width='100%25' height='100%25' fill='%23f5f5f5'/><text x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23222' font-size='42' font-family='system-ui'>WORK 09</text></svg>">
            <div class="item-info">
              <h3>作品 09</h3>
              <p>动效与微交互</p>
            </div>
          </article>
        </div>
      </div>
      <div class="divider"></div>
    </section>

    <!-- 案例 -->
    <section id="cases" class="section reveal">
      <div class="container">
        <h2 class="section-title">案例</h2>
        <div class="cases">
          <article class="case-item" tabindex="0"
            data-title="初创咖啡品牌识别升级"
            data-detail="背景：门店扩张期品牌缺乏统一；结果：建立黑白主色与细线系统，线下转化提升20%。">
            <div class="case-head">
              <h3>初创咖啡品牌识别升级</h3>
            </div>
            <p class="case-summary">背景：门店扩张期品牌缺乏统一；结果：建立黑白主色与细线系统，线下转化提升20%。</p>
            <button class="case-more" aria-label="查看详情">查看详情</button>
          </article>

          <article class="case-item" tabindex="0"
            data-title="SaaS官网重设计"
            data-detail="背景：旧站信息冗杂；结果：重构导航与层级，跳出率下降35%。">
            <div class="case-head">
              <h3>SaaS官网重设计</h3>
            </div>
            <p class="case-summary">背景：旧站信息冗杂；结果：重构导航与层级，跳出率下降35%。</p>
            <button class="case-more" aria-label="查看详情">查看详情</button>
          </article>

          <article class="case-item" tabindex="0"
            data-title="插画内容营销"
            data-detail="背景：社媒曝光低；结果：系列插画引导分享，关注增长3倍。">
            <div class="case-head">
              <h3>插画内容营销</h3>
            </div>
            <p class="case-summary">背景：社媒曝光低；结果：系列插画引导分享，关注增长3倍。</p>
            <button class="case-more" aria-label="查看详情">查看详情</button>
          </article>
        </div>
      </div>
      <div class="divider"></div>
    </section>

    <!-- 下载作品集 -->
    <section id="download" class="section reveal">
      <div class="container">
        <h2 class="section-title">下载作品集</h2>
        <p class="download-desc">点击即可生成打印版视图，导出为PDF便于快速沟通与提交。</p>
        <div class="download-actions">
          <button id="downloadBtn" class="btn-primary">下载 PDF</button>
          <a class="btn-secondary" href="#portfolio">查看在线作品</a>
        </div>
      </div>
      <div class="divider"></div>
    </section>

    <!-- 报价与FAQ -->
    <section id="pricing" class="section reveal">
      <div class="container">
        <h2 class="section-title">报价说明与常见问题</h2>
        <div class="pricing">
          <h3>报价说明</h3>
          <p>以项目范围与交付内容计费：明确页面数量、模块复杂度、素材准备情况与时间要求。典型区间：品牌视觉基础包 8k–20k，官网设计（含基础前端实现）15k–40k，插画按幅计费 1k–5k/幅。</p>
          <p>支持里程碑分阶段交付与结算，价格包含一次完整风格确定与两轮常规修改（不含方向性大改）。</p>
        </div>
        <div class="faq">
          <div class="faq-item">
            <button class="faq-q" aria-expanded="false">交付流程</button>
            <div class="faq-a">需求梳理 → 风格板与信息架构 → 高保真页面 → 前端实现与测试 → 上线与验收。</div>
          </div>
          <div class="faq-item">
            <button class="faq-q" aria-expanded="false">设计周期</button>
            <div class="faq-a">小型项目约1–2周，中型项目2–4周，视素材与反馈效率而定。</div>
          </div>
          <div class="faq-item">
            <button class="faq-q" aria-expanded="false">版权与素材</button>
            <div class="faq-a">交付的自有作品版权归客户使用，第三方素材需合法授权并由双方确认。</div>
          </div>
          <div class="faq-item">
            <button class="faq-q" aria-expanded="false">付款与发票</button>
            <div class="faq-a">签约后预付30%，中期支付40%，验收后付尾款30%；可开具正规发票。</div>
          </div>
        </div>
      </div>
      <div class="divider"></div>
    </section>

    <!-- 联系 -->
    <section id="contact" class="section reveal">
      <div class="container">
        <h2 class="section-title">联系我</h2>
        <ul class="contact-list">
          <li>邮箱：<a href="mailto:hello@studio.example">hello@studio.example</a></li>
          <li>社媒：<a href="https://www.instagram.com/" target="_blank" rel="noopener">Instagram</a> · <a href="https://www.behance.net/" target="_blank" rel="noopener">Behance</a> · <a href="https://x.com/" target="_blank" rel="noopener">X</a></li>
        </ul>
      </div>
      <div class="divider"></div>
    </section>
  </main>

  <footer class="site-footer reveal">
    <div class="container footer-inner">
      <small>© 2025 Design Studio · 保留所有权利</small>
      <div class="footer-links">
        <a href="#about">关于</a>
        <span class="dot">·</span>
        <a href="#portfolio">作品</a>
        <span class="dot">·</span>
        <a href="#contact">联系</a>
      </div>
    </div>
  </footer>

  <!-- 案例弹窗 -->
  <div class="modal" id="caseModal" aria-hidden="true" role="dialog" aria-label="案例详情">
    <div class="modal-backdrop" data-close="true"></div>
    <div class="modal-content" role="document">
      <button class="modal-close" aria-label="关闭" data-close="true">×</button>
      <h3 id="modalTitle">案例标题</h3>
      <p id="modalDetail">案例详情</p>
    </div>
  </div>

  <script src="main.js" defer></script>
</body>
</html>

:root{
  --bg:#fff;
  --fg:#111;
  --muted:#666;
  --line:#e6e6e6;
  --shadow:0 6px 20px rgba(0,0,0,0.06);
  --radius:12px;
  --container:1100px;
  --sp-1:10px;
  --sp-2:16px;
  --sp-3:24px;
  --sp-4:36px;
  --sp-5:56px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  line-height:1.6;
}
img{display:block;max-width:100%;height:auto;border-radius:8px}
a{color:var(--fg);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:100%;max-width:var(--container);padding:0 var(--sp-3);margin:0 auto}

.site-header{
  position:sticky;top:0;background:var(--bg);z-index:10;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-2) 0;
}
.logo{font-weight:700;font-size:20px;letter-spacing:.02em}
.nav-toggle{
  display:none;border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 10px;cursor:pointer;
}
.site-nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.site-nav a{padding:8px 0}
.divider{height:1px;background:var(--line)}

.section{padding:var(--sp-5) 0}
.section-title{
  font-size:clamp(26px,4vw,40px);line-height:1.2;margin:0 0 var(--sp-3) 0;
  letter-spacing:.01em;
}
.hero{padding:calc(var(--sp-5) + 10px) 0}
.hero-title{font-size:clamp(36px,6vw,72px);line-height:1.1;margin:0 0 var(--sp-2) 0}
.hero-sub{font-size:clamp(16px,2.4vw,22px);color:var(--muted);max-width:800px}

.intro{font-size:clamp(16px,2.2vw,18px);max-width:800px}

.services{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)
}
.service-card{
  border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-3);
  box-shadow:var(--shadow);transition:.25s ease transform, .25s ease box-shadow;
}
.service-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,0.08)}
.service-card h3{margin:0 0 var(--sp-1) 0;font-size:20px}
.service-card p{margin:0;color:var(--muted)}

.portfolio-grid{
  column-count:3;column-gap:var(--sp-3)
}
.portfolio-item{
  break-inside:avoid;border:1px solid var(--line);border-radius:var(--radius);
  margin:0 0 var(--sp-3) 0;box-shadow:var(--shadow);overflow:hidden;
  transition:.25s ease transform, .25s ease box-shadow;
  background:#fff;
}
.portfolio-item:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,0.08)}
.item-info{padding:var(--sp-2) var(--sp-3)}
.item-info h3{margin:0 0 6px 0;font-size:18px}
.item-info p{margin:0;color:var(--muted);font-size:15px}

.cases{
  display:grid;grid-template-columns:1fr;gap:var(--sp-3)
}
.case-item{
  border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-3);
  box-shadow:var(--shadow);background:#fff;
}
.case-head h3{margin:0 0 var(--sp-1) 0;font-size:20px}
.case-summary{margin:0 0 var(--sp-2) 0;color:var(--muted)}
.case-more{
  border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:#fff;cursor:pointer;
  transition:.2s ease transform, .2s ease box-shadow;
}
.case-more:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,0.07)}

.download-desc{color:var(--muted);max-width:720px}
.download-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-2)}
.btn-primary{
  background:#111;color:#fff;border:1px solid #111;padding:12px 16px;border-radius:12px;cursor:pointer;
}
.btn-primary:hover{background:#000}
.btn-secondary{
  border:1px solid var(--line);padding:12px 16px;border-radius:12px;display:inline-block;
}

.pricing h3{margin:0 0 var(--sp-2) 0}
.pricing p{margin:0 0 var(--sp-2) 0;color:var(--muted)}
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.faq-item + .faq-item{border-top:1px solid var(--line)}
.faq-q{
  width:100%;text-align:left;padding:14px 16px;background:#fff;border:0;font-size:16px;cursor:pointer
}
.faq-a{padding:0 16px 16px 16px;color:var(--muted);display:none}
.faq-item.open .faq-a{display:block}
.faq-item.open .faq-q{font-weight:600}

.contact-list{list-style:none;padding:0;margin:0}
.contact-list li{margin-bottom:8px}

.site-footer{padding:var(--sp-4) 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.footer-links{display:flex;align-items:center;gap:10px}
.dot{color:#bbb}

.modal{position:fixed;inset:0;display:none}
.modal.show{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.25)}
.modal-content{
  position:relative;max-width:720px;margin:8vh auto;background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,0.14);padding:24px
}
.modal-close{
  position:absolute;top:10px;right:10px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 10px;cursor:pointer
}

.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .5s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

@media (max-width:1000px){
  .services{grid-template-columns:repeat(2,1fr)}
  .portfolio-grid{column-count:2}
}
@media (max-width:640px){
  .site-nav{display:none;position:absolute;right:16px;top:58px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:var(--shadow)}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;gap:8px}
  .nav-toggle{display:block}
  .services{grid-template-columns:1fr}
  .portfolio-grid{column-count:1}
}

/* 打印样式：隐藏不必要元素，优化为PDF */
@media print{
  .site-header,.site-footer,.divider,.nav-toggle,.btn-primary,.btn-secondary,.modal{display:none !important}
  .section{padding:24px 0}
  .portfolio-item{page-break-inside:avoid}
}

// 低调动效与交互
document.addEventListener('DOMContentLoaded', () => {
  // 移动端导航
  const toggle = document.querySelector('.nav-toggle');
  const nav = document.querySelector('.site-nav');
  if (toggle && nav) {
    toggle.addEventListener('click', () => {
      const open = nav.classList.toggle('open');
      toggle.setAttribute('aria-expanded', String(open));
    });
  }

  // 滚动淡入
  const observer = new IntersectionObserver((entries)=>{
    entries.forEach(e=>{
      if(e.isIntersecting){ e.target.classList.add('visible'); }
    });
  },{threshold:0.12});
  document.querySelectorAll('.reveal').forEach(el=>observer.observe(el));

  // 案例弹窗
  const modal = document.getElementById('caseModal');
  const modalTitle = document.getElementById('modalTitle');
  const modalDetail = document.getElementById('modalDetail');
  const openCase = (title, detail) => {
    modalTitle.textContent = title;
    modalDetail.textContent = detail;
    modal.classList.add('show');
    modal.setAttribute('aria-hidden','false');
    document.body.style.overflow = 'hidden';
  };
  const closeCase = () => {
    modal.classList.remove('show');
    modal.setAttribute('aria-hidden','true');
    document.body.style.overflow = '';
  };
  document.querySelectorAll('.case-item').forEach(item=>{
    const title = item.dataset.title;
    const detail = item.dataset.detail;
    const btn = item.querySelector('.case-more');
    const open = ()=>openCase(title, detail);
    btn.addEventListener('click', open);
    item.addEventListener('keydown', (e)=>{ if(e.key==='Enter' || e.key===' ') { e.preventDefault(); open(); } });
  });
  modal.addEventListener('click', (e)=>{
    if(e.target.dataset.close==='true'){ closeCase(); }
  });
  document.addEventListener('keydown',(e)=>{ if(e.key==='Escape' && modal.classList.contains('show')) closeCase(); });

  // FAQ 折叠
  document.querySelectorAll('.faq-item').forEach(item=>{
    const q = item.querySelector('.faq-q');
    q.addEventListener('click', ()=>{
      const isOpen = item.classList.toggle('open');
      q.setAttribute('aria-expanded', String(isOpen));
    });
  });

  // 下载作品集（打印为PDF）
  const dl = document.getElementById('downloadBtn');
  if (dl) {
    dl.addEventListener('click', ()=>{
      window.print();
    });
  }
});

部署指南

文件结构
- 建立项目文件夹，包含 index.html、styles.css、main.js 三个文件（与上述代码对应）。
- 如需替换占位图，将真实图片放入 assets/ 目录，改写作品集路径。
本地预览
- 双击 index.html 即可本地查看；为避免某些浏览器的本地资源限制，建议使用任意静态服务器（如 VS Code Live Server 或命令行 npx serve）。
上线托管
- Netlify/Vercel：注册后新建项目，拖放整个文件夹或连接仓库，一键部署。
- GitHub Pages：将代码推送到仓库，启用 Pages，来源选择根目录或 docs。
- 传统主机：将三个文件上传到服务器的站点根目录，确保默认入口为 index.html。
域名与证书
- 绑定自有域名并开启 HTTPS；在托管平台中添加 DNS 记录并启用自动证书。
下载入口说明
- 点击“下载 PDF”会打开打印视图；在打印对话框中选择“另存为PDF”即可生成作品集文件。

优化建议

内容替换与结构扩展
- 将“关于我”文案替换为真实简介；在作品卡片中添加标题、年份与角色说明。
- 案例弹窗可扩展为独立子页面，包含过程、交付物与数据指标。
性能与体验
- 使用现代图片格式（WebP/AVIF），按需设置 sizes 与 srcset，自适应加载。
- 开启懒加载：为图片添加 loading="lazy"（可直接在标签加上）。
SEO与分享
- 补充页面标题与描述、Open Graph 与 Twitter Card 元数据；在案例页使用语义化标签（article、section、figure）。
设计系统
- 提炼通用组件（按钮、卡片、导航），用CSS变量管理色彩与间距，便于主题切换与规模化维护。
可访问性
- 为所有交互提供键盘操作与ARIA属性；确保对比度符合标准。
构建与版本
- 如需多页与组件化，可引入构建工具（Vite）与模板引擎，统一输出静态资源并做缓存指纹。

解决的问题

为企业主、设计师、创业团队等非技术用户，提供一条从“设计想法”到“可上线网站”的快速通道。通过一次性输入品牌色、风格偏好与核心文案，自动生成结构清晰、风格统一、可直接发布的完整网站方案与上线指南，覆盖企业官网、个人作品集、产品介绍页、活动落地页等高频场景，显著缩短上线周期、提升转化表现、统一品牌形象，并降低外包与沟通成本。

适用用户

中小企业主

快速搭建企业官网与产品服务页，统一品牌风格，配置联系我们与表单，收集销售线索，助力线上获客与企业形象升级。

创业者与产品负责人

迅速上线产品介绍页与发布页，制作报名与预约入口，灵活切换主题做小流量试验，验证卖点并沉淀早期用户。

视觉设计师与自由职业者

将设计稿与素材直接转为可上线网站，包含作品集、案例页与自我介绍，缩短交付周期，减少外包与沟通成本。

特征总结

• 输入品牌色、风格与素材，即可轻松生成整站方案与页面模块，所见即可上线。

• 自动规划导航与层级结构，保障信息清晰可达，减少跳出率，提升转化路径顺滑。

• 内置响应式策略，自动适配电脑、平板与手机，一次生成，多端一致呈现。

• 支持多种设计风格与版式组合，一键切换主题，快速试错找到更高转化的视觉方案。

• 自动生成可用的页面表单、轮播、图文区块，无需编码即可完成交互与展示。

• 内建内容结构优化与文案润色，引导更清晰的卖点表达，提升访客停留与咨询。

• 从需求到上线的分步流程指引，提供打包导出与部署建议，助你当天完成发布。

• 支持场景化模块库，企业官网、产品发布、个人作品集等，一键调用即可复用。

• 智能校验常见问题与兼容性风险，提前给出修正建议，减少返工与沟通成本。

• 可保存多版本方案与设计参数，便于团队协作评审，记录决策并快速回滚。

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

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

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

2. 发布为 API 接口调用

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

3. 在 MCP Client 中配置使用

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

AI 提示词价格

￥20.00元

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

在线免费用提示词

您购买后可以获得什么

✓

获得完整提示词模板

- 共 734 tokens

- 3 个可调节参数

{ 设计元素 } { 网站用途 } { 内容材料 }

✓

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

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

购买

智能网站自动生成器

网站设计方案

网站结构图

核心代码实现

部署指南

优化建议

网站设计方案

网站结构图

核心代码实现

部署指南

优化建议

网站设计方案

网站结构图

核心代码实现

部署指南

优化建议

解决的问题

适用用户

中小企业主

创业者与产品负责人

视觉设计师与自由职业者

特征总结

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

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

2. 发布为 API 接口调用

3. 在 MCP Client 中配置使用

您购买后可以获得什么

不要错过！

热门提示词

热门角色

热门业务

大模型API

使用我们的提示词工具

数字艺术创作者

新媒体运营

内容创作者

教师

学生

产品经理

企业管理人员

市场营销人员

开发者

工具

写作

教育

内容创作

市场营销

SEO

策略

艺术

设计

DeepSeek

OpenAI

Claude

Gemini

Grok

Qwen

Kimi

智能网站自动生成器

网站设计方案

网站结构图

核心代码实现

部署指南

优化建议

网站设计方案

网站结构图

核心代码实现

部署指南

优化建议

网站设计方案

网站结构图

核心代码实现

部署指南

优化建议

示例详情

解决的问题

适用用户

中小企业主

创业者与产品负责人

视觉设计师与自由职业者

特征总结

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

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

2. 发布为 API 接口调用

3. 在 MCP Client 中配置使用

您购买后可以获得什么

不要错过！

热门提示词

热门角色

热门业务

大模型API

使用我们的提示词工具

反馈问题