AI编程后如何生成设计稿？用 Web to Design 实现代码到设计无缝转换
·
随着ai的发展，越来越多人开始使用 AI 编程工具开发网页。比如Cursor 生成 HTML 页面、Claude 编写前端代码等等。
以前一个网页从设计到开发，通常是Figma设计稿 → 前端开发 → 网站上线
但现在流程已经发生了变化，AI直接生成代码后，直接页面快速上线，效率提升非常明显。
不过新的问题也出现了：AI生成的网页，如果想继续调整设计怎么办？
直接改代码？需要修改大量 CSS。
想在 Figma 里调整？又没有设计稿。
这时候，Web to Design 就可以解决这个问题。
Web to Design是什么？
Web to Design 是一个可以将网页转换成 Figma 设计稿的工具。
简单来说：
AI生成HTML页面 ➡️ 网页运行预览 ➡️ Web to Design转换 ➡️ 生成可编辑Figma文件
转换后不是简单截图，而是可以继续编辑的设计文件。包括文本、 图片、 页面布局等等，拿到设计稿后，可以直接在 Figma 中继续优化。
他的使用流程也非常简单。
第一步：使用AI生成网页
首先使用你熟悉的 AI 编程工具。例如：Cursor、Claude、ChatGPT。
输入需求，如：“帮我设计一个 SaaS 产品首页，需要包含导航栏、Hero区域、功能介绍、价格模块。”
AI会快速生成 HTML 页面。运行后，就可以看到网页效果。
第二步：使用Web to Design抓取网页
打开生成好的网页。
安装 Web to Design Chrome 插件。
点击插件，选择「导出完整页面」或者「选择区域导出」，插件会自动解析网页结构。
包括HTML结构、CSS样式、图片资源、页面布局等，并生成对应的设计文件。
第三步：导入Figma继续设计
打开 Figma。
安装 Web to Design 插件，上传刚刚导出的文件，等待转换完成。
通常几秒到一分钟左右，一个可以编辑的 Figma 设计稿就生成了。
之后你可以继续调整布局 / 修改字体 / 替换图片 / 优化视觉效果 / 添加组件规范
为什么AI开发后还需要用到Figma？
很多人认为，AI都能生成网页了，还需要设计稿吗？
实际上，设计和开发关注的重点不同。
AI生成代码速度很快，但页面细节调整不方便，视觉统一性需要优化，组件规范需要整理
Figma更适合做视觉调整、交互设计、组件管理、团队协作
所以更高效的方式是，AI负责快速生成，Figma负责精细设计。
Web to Design有哪些应用场景？
1. AI网页原型优化
AI生成一个页面后，不满意布局？
直接导入Figma修改，不用重新调整代码。
2. 快速制作产品方案
产品经理可以在工作中，
AI生成Demo页面
↓
转换Figma
↓
调整产品方案
↓
和团队沟通
大幅减少原型制作时间。
3. 学习优秀网站设计
看到优秀网站：
以前：截图收藏。
现在：直接转换Figma。
分析：
- 页面结构
- 信息层级
- 设计规范
对于学习UI非常有帮助。
以前做一个网页原型可能需要几天。现在直接AI生成代码 + Web to Design转换 + Figma优化，
可以在几个小时内完成从想法到设计稿的过程。
对于设计师、产品经理、前端开发者来说，这可能会成为未来非常重要的一种工作方式。
最后放一个实际案例：
这是我用 AI 生成的 SaaS 官网首页，大家可以自己动手测试一下转换效果。
从 AI 生成 HTML，到 Web to Design 导入 Figma，整个过程只需要几分钟。
你也可以尝试把自己喜欢的网站、AI生成页面转换成 Figma，看看实际还原效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NextFlow – SaaS 首页</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC",
"Microsoft YaHei", sans-serif;
color: #1a1a2e;
background: #ffffff;
line-height: 1.6;
}
a {
text-decoration: none;
color: inherit;
}
/* ===== 导航栏 ===== */
.navbar {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
transition: box-shadow 0.3s;
}
.navbar:hover {
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 22px;
letter-spacing: -0.5px;
}
.logo-icon {
width: 36px;
height: 36px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 20px;
}
.nav-links {
display: flex;
gap: 32px;
list-style: none;
font-weight: 500;
font-size: 15px;
color: #4b5563;
}
.nav-links a {
transition: color 0.2s;
}
.nav-links a:hover {
color: #6366f1;
}
.nav-actions {
display: flex;
align-items: center;
gap: 12px;
}
.btn-outline {
padding: 8px 18px;
border: 1.5px solid #e2e8f0;
border-radius: 8px;
font-weight: 500;
font-size: 14px;
color: #2d3748;
transition: all 0.2s;
}
.btn-outline:hover {
border-color: #6366f1;
color: #6366f1;
background: #f8f7ff;
}
.btn-primary {
padding: 10px 22px;
background: #6366f1;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
color: #fff;
cursor: pointer;
transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}
.btn-primary:hover {
background: #4f46e5;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
}
.hamburger {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 8px;
}
.hamburger span {
display: block;
width: 22px;
height: 2px;
background: #1a1a2e;
margin: 4px 0;
border-radius: 2px;
}
/* ===== Hero 区域 ===== */
.hero {
background: linear-gradient(180deg, #f0f1ff 0%, #ffffff 100%);
position: relative;
overflow: hidden;
}
.hero-container {
max-width: 1200px;
margin: 0 auto;
padding: 100px 24px 80px;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 60px;
}
.hero-badge {
display: inline-block;
background: rgba(99, 102, 241, 0.08);
color: #4f46e5;
padding: 6px 16px;
border-radius: 30px;
font-size: 13px;
font-weight: 600;
margin-bottom: 24px;
letter-spacing: 0.3px;
border: 1px solid rgba(99, 102, 241, 0.16);
}
.hero-title {
font-size: 52px;
font-weight: 800;
line-height: 1.15;
letter-spacing: -2px;
color: #0f0e2a;
margin-bottom: 24px;
}
.hero-title .highlight {
background: linear-gradient(120deg, #6366f1 0%, #a855f7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-description {
font-size: 17px;
color: #5b6170;
line-height: 1.7;
margin-bottom: 32px;
max-width: 480px;
}
.hero-buttons {
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
}
.btn-lg {
padding: 14px 28px;
font-size: 16px;
border-radius: 10px;
}
.btn-secondary {
background: #ffffff;
border: 1.5px solid #e2e8f0;
color: #2d3748;
font-weight: 500;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-secondary:hover {
border-color: #c0c8d6;
background: #f8fafc;
}
.hero-stats {
display: flex;
gap: 40px;
margin-top: 48px;
}
.stat-item {
display: flex;
flex-direction: column;
}
.stat-number {
font-size: 28px;
font-weight: 800;
color: #0f0e2a;
letter-spacing: -1px;
}
.stat-label {
font-size: 13px;
color: #8a8fa3;
margin-top: 4px;
}
.hero-visual {
position: relative;
}
.hero-visual img {
width: 100%;
height: auto;
border-radius: 20px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
display: block;
}
.floating-card {
position: absolute;
background: #ffffff;
border-radius: 14px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
padding: 14px 18px;
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
font-weight: 500;
animation: float 3s ease-in-out infinite;
}
.floating-card .emoji {
font-size: 24px;
}
.fc-1 {
top: 20px;
left: -30px;
animation-delay: 0s;
}
.fc-2 {
bottom: 40px;
right: -20px;
animation-delay: 1.5s;
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
/* ===== 功能介绍 ===== */
.features {
padding: 100px 24px;
max-width: 1200px;
margin: 0 auto;
}
.section-header {
text-align: center;
max-width: 640px;
margin: 0 auto 64px;
}
.section-tag {
color: #6366f1;
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 12px;
}
.section-title {
font-size: 40px;
font-weight: 800;
letter-spacing: -1.5px;
color: #0f0e2a;
line-height: 1.2;
}
.section-subtitle {
color: #5b6170;
font-size: 16px;
margin-top: 16px;
line-height: 1.7;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.feature-card {
background: #ffffff;
border: 1px solid #edf2f7;
border-radius: 16px;
padding: 32px 24px;
transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
}
.feature-card:hover {
border-color: #c7d2fe;
box-shadow: 0 20px 50px rgba(99, 102, 241, 0.08);
transform: translateY(-4px);
}
.feature-icon {
width: 52px;
height: 52px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
margin-bottom: 20px;
}
.feature-icon.purple {
background: #eef2ff;
}
.feature-icon.blue {
background: #dbeafe;
}
.feature-icon.green {
background: #d1fae5;
}
.feature-icon.orange {
background: #ffedd5;
}
.feature-icon.pink {
background: #fce7f3;
}
.feature-icon.cyan {
background: #cffafe;
}
.feature-title {
font-size: 18px;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 8px;
}
.feature-desc {
font-size: 14px;
color: #5b6170;
line-height: 1.7;
}
/* ===== 价格模块 ===== */
.pricing {
background: #f9fafb;
padding: 100px 24px;
border-top: 1px solid #f0f0f2;
}
.pricing .section-header {
margin-bottom: 56px;
}
.pricing-switch {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
margin-bottom: 48px;
font-size: 15px;
font-weight: 500;
color: #4b5563;
}
.switch {
position: relative;
width: 48px;
height: 26px;
background: #e2e8f0;
border-radius: 30px;
cursor: pointer;
transition: background 0.3s;
}
.switch.active {
background: #6366f1;
}
.switch::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
transition: transform 0.3s;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.switch.active::after {
transform: translateX(22px);
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1100px;
margin: 0 auto;
align-items: stretch;
}
.price-card {
background: #ffffff;
border-radius: 20px;
padding: 40px 28px;
border: 1px solid #edf2f7;
position: relative;
transition: transform 0.3s, box-shadow 0.3s;
display: flex;
flex-direction: column;
}
.price-card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
}
.price-card.popular {
background: linear-gradient(180deg, #ffffff 0%, #f5f3ff 100%);
border-color: #a5b4fc;
border-width: 2px;
padding-top: 44px;
padding-bottom: 44px;
}
.popular-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff;
padding: 6px 18px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
white-space: nowrap;
box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}
.plan-name {
font-size: 18px;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 6px;
}
.plan-desc {
font-size: 14px;
color: #8a8fa3;
margin-bottom: 24px;
}
.plan-price {
font-size: 48px;
font-weight: 800;
letter-spacing: -2px;
color: #0f0e2a;
line-height: 1;
margin-bottom: 8px;
}
.plan-price span {
font-size: 16px;
font-weight: 400;
color: #8a8fa3;
letter-spacing: 0;
}
.plan-features {
list-style: none;
margin: 32px 0;
flex: 1;
}
.plan-features li {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 0;
font-size: 14px;
color: #3d4450;
}
.plan-features .check {
flex-shrink: 0;
width: 20px;
height: 20px;
background: #6366f1;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #fff;
}
.plan-features .check.dim {
background: #e2e8f0;
color: #94a3b8;
}
.plan-btn {
width: 100%;
padding: 14px 0;
border-radius: 10px;
font-weight: 600;
font-size: 15px;
text-align: center;
border: none;
cursor: pointer;
transition: all 0.2s;
}
.plan-btn.light {
background: #eef2ff;
color: #4f46e5;
}
.plan-btn.light:hover {
background: #e0e7ff;
}
.plan-btn.solid {
background: #6366f1;
color: #ffffff;
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
}
.plan-btn.solid:hover {
background: #4f46e5;
transform: translateY(-1px);
}
.plan-btn.gray {
background: #f1f3f5;
color: #2d3748;
}
.plan-btn.gray:hover {
background: #e2e8f0;
}
/* ===== 响应式 ===== */
@media (max-width: 900px) {
.nav-links {
display: none;
}
.nav-actions {
display: none;
}
.hamburger {
display: block;
}
.hero-container {
grid-template-columns: 1fr;
padding: 60px 24px 50px;
text-align: center;
}
.hero-title {
font-size: 36px;
}
.hero-description {
margin: 0 auto 28px;
}
.hero-buttons {
justify-content: center;
}
.hero-stats {
justify-content: center;
gap: 32px;
}
.hero-visual {
margin-top: 40px;
}
.floating-card {
display: none;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.pricing-grid {
grid-template-columns: 1fr;
max-width: 420px;
}
.feature-card {
padding: 24px 20px;
}
}
@media (max-width: 540px) {
.features-grid {
grid-template-columns: 1fr;
}
.hero-stats {
flex-wrap: wrap;
}
.section-title {
font-size: 30px;
}
}
</style>
</head>
<body>
<!-- ===== 导航栏 ===== -->
<nav class="navbar">
<div class="nav-container">
<div class="logo">
<div class="logo-icon">◆</div>
NextFlow
</div>
<ul class="nav-links">
<li><a href="#features">功能</a></li>
<li><a href="#pricing">价格</a></li>
<li><a href="#">资源</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<div class="nav-actions">
<a href="#" class="btn-outline">登录</a>
<button class="btn-primary">免费试用</button>
</div>
<button class="hamburger" aria-label="菜单">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<!-- ===== Hero 区域 ===== -->
<section class="hero">
<div class="hero-container">
<div>
<div class="hero-badge">🚀 刚刚发布 v2.0</div>
<h1 class="hero-title">
助力团队<br />
实现<span class="highlight">增长</span>的<br />
No.1 SaaS 平台
</h1>
<p class="hero-description">
NextFlow 为您提供一站式的团队协作、数据分析和自动化工作流工具，
让每一位成员都能专注于高效产出。
</p>
<div class="hero-buttons">
<button class="btn-primary btn-lg">开始免费试用</button>
<a href="#" class="btn-secondary btn-lg">▶ 查看演示</a>
</div>
<div class="hero-stats">
<div class="stat-item">
<span class="stat-number">50K+</span>
<span class="stat-label">全球用户</span>
</div>
<div class="stat-item">
<span class="stat-number">99.9%</span>
<span class="stat-label">运行时间</span>
</div>
<div class="stat-item">
<span class="stat-number">4.8<span style="font-size:16px">/5</span></span>
<span class="stat-label">用户评分</span>
</div>
</div>
</div>
<div class="hero-visual">
<img alt="产品截图" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='420' viewBox='0 0 600 420'%3E%3Crect width='600' height='420' fill='%23f3f4ff'/%3E%3Crect x='40' y='30' width='220' height='180' rx='12' fill='%23ffffff' stroke='%23e0e2ff'/%3E%3Crect x='40' y='50' width='100' height='12' rx='6' fill='%23c7d2fe'/%3E%3Crect x='40' y='72' width='160' height='8' rx='4' fill='%23eef2ff'/%3E%3Crect x='40' y='86' width='130' height='8' rx='4' fill='%23eef2ff'/%3E%3Ccircle cx='70' cy='140' r='20' fill='%236366f1' opacity='0.8'/%3E%3Crect x='100' y='128' width='80' height='24' rx='6' fill='%23c7d2fe' opacity='0.6'/%3E%3Crect x='280' y='30' width='280' height='360' rx='12' fill='%23ffffff' stroke='%23e0e2ff'/%3E%3Crect x='300' y='55' width='120' height='10' rx='5' fill='%236366f1' opacity='0.6'/%3E%3Crect x='300' y='80' width='200' height='120' rx='8' fill='%23f8f7ff' stroke='%23e0e2ff'/%3E%3Crect x='300' y='90' width='60' height='8' rx='4' fill='%23a5b4fc'/%3E%3Crect x='300' y='106' width='140' height='8' rx='4' fill='%23d0d9f0'/%3E%3Crect x='300' y='220' width='180' height='10' rx='5' fill='%236366f1' opacity='0.4'/%3E%3Crect x='300' y='250' width='160' height='60' rx='8' fill='%23f8f7ff' stroke='%23e0e2ff'/%3E%3Crect x='300' y='330' width='220' height='10' rx='5' fill='%23a5b4fc' opacity='0.5'/%3E%3Crect x='300' y='355' width='180' height='8' rx='4' fill='%23eef2ff'/%3E%3C/svg%3E" />
<div class="floating-card fc-1">
<span class="emoji">📈</span>
<div>
<div style="font-size:15px;font-weight:600">+42%</div>
<div style="font-size:12px;color:#8a8fa3">效率提升</div>
</div>
</div>
<div class="floating-card fc-2">
<span class="emoji">✅</span>
<div>
<div style="font-size:15px;font-weight:600">今天完成 12 项</div>
<div style="font-size:12px;color:#8a8fa3">自动化任务</div>
</div>
</div>
</div>
</div>
</section>
<!-- ===== 功能介绍 ===== -->
<section class="features" id="features">
<div class="section-header">
<div class="section-tag">✦ 核心功能</div>
<h2 class="section-title">一个平台，满足所有需求</h2>
<p class="section-subtitle">从项目管理到数据分析，NextFlow 提供完整的工具链，帮助您轻松掌控业务全局</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon purple">📊</div>
<h3 class="feature-title">数据可视化</h3>
<p class="feature-desc">精美图表与实时仪表盘，让关键数据一目了然，为决策提供可靠依据。</p>
</div>
<div class="feature-card">
<div class="feature-icon blue">⚡</div>
<h3 class="feature-title">自动化工作流</h3>
<p class="feature-desc">通过触发器与动作无缝连接，将重复性任务交给系统，效率倍增。</p>
</div>
<div class="feature-card">
<div class="feature-icon green">🤝</div>
<h3 class="feature-title">团队协作</h3>
<p class="feature-desc">实时评论、@提及、共享画布，让团队成员时刻同步，无缝沟通。</p>
</div>
<div class="feature-card">
<div class="feature-icon orange">🛡️</div>
<h3 class="feature-title">企业级安全</h3>
<p class="feature-desc">银行级加密、多种权限角色、SSO 集成，保障企业数据安全无忧。</p>
</div>
<div class="feature-card">
<div class="feature-icon pink">🔌</div>
<h3 class="feature-title">200+ 集成丰富</h3>
<p class="feature-desc">与 Slack、Notion、GitHub 等常用工具无缝连接，轻松融入现有技术栈。</p>
</div>
<div class="feature-card">
<div class="feature-icon cyan">📱</div>
<h3 class="feature-title">全平台响应</h3>
<p class="feature-desc">支持 Web、iOS、Android，随时随地掌握工作进度，从未如此简单。</p>
</div>
</div>
</section>
<!-- ===== 价格模块 ===== -->
<section class="pricing" id="pricing">
<div class="section-header">
<div class="section-tag">💰 定价方案</div>
<h2 class="section-title">选择适合您的方案</h2>
<p class="section-subtitle">所有方案都包含 14 天免费试用，不设任何隐藏费用，随时取消</p>
</div>
<div class="pricing-switch">
<span>月付</span>
<div class="switch" id="billingSwitch"></div>
<span>年付 <span style="background:#e6f7ee;color:#0d9f4e;padding:2px 8px;border-radius:20px;font-size:12px;font-weight:600;margin-left:4px;">-20%</span></span>
</div>
<div class="pricing-grid">
<!-- Starter -->
<div class="price-card">
<h3 class="plan-name">Starter</h3>
<p class="plan-desc">个人和初创团队</p>
<div class="plan-price" data-monthly="0" data-yearly="0">
<span>$</span>0<span>/月</span>
</div>
<ul class="plan-features">
<li><span class="check">✓</span> 最多 3 个成员</li>
<li><span class="check dim">✓</span> 5 GB 存储空间</li>
<li><span class="check dim">✓</span> 核心自动化功能</li>
<li><span class="check dim">✓</span> 社区支持</li>
<li><span class="check dim" style="color:#cbd5e1;">✕</span> 高级 SSO / SAML</li>
</ul>
<button class="plan-btn light">开始免费使用</button>
</div>
<!-- Pro (热门) -->
<div class="price-card popular">
<div class="popular-badge">最受欢迎</div>
<h3 class="plan-name">Pro</h3>
<p class="plan-desc">成长中的企业团队</p>
<div class="plan-price" data-monthly="29" data-yearly="23">
<span>$</span><span class="price-num">29</span><span>/月</span>
</div>
<ul class="plan-features">
<li><span class="check">✓</span> 无限团队成员</li>
<li><span class="check">✓</span> 100 GB 存储空间</li>
<li><span class="check">✓</span> 高级自动化与 API</li>
<li><span class="check">✓</span> 优先邮件支持</li>
<li><span class="check">✓</span> 高级 SSO / SAML</li>
</ul>
<button class="plan-btn solid">立即开始</button>
</div>
<!-- Enterprise -->
<div class="price-card">
<h3 class="plan-name">Enterprise</h3>
<p class="plan-desc">大型组织和定制需求</p>
<div class="plan-price" data-monthly="99" data-yearly="79">
<span>$</span><span class="price-num">99</span><span>/月</span>
</div>
<ul class="plan-features">
<li><span class="check">✓</span> 无限团队成员</li>
<li><span class="check">✓</span> 1 TB 存储空间</li>
<li><span class="check">✓</span> 专属客户成功经理</li>
<li><span class="check">✓</span> 私有云部署选项</li>
<li><span class="check">✓</span> 24/7 专属支持</li>
</ul>
<button class="plan-btn gray">联系我们</button>
</div>
</div>
</section>
<script>
// 计费切换逻辑
const billingSwitch = document.getElementById('billingSwitch');
let isYearly = false;
billingSwitch.addEventListener('click', function() {
isYearly = !isYearly;
this.classList.toggle('active', isYearly);
const priceCards = document.querySelectorAll('.price-card');
priceCards.forEach(card => {
const priceEl = card.querySelector('.plan-price');
const numEl = card.querySelector('.price-num');
const monthly = priceEl.getAttribute('data-monthly');
const yearly = priceEl.getAttribute('data-yearly');
// Starter 免费档
if (monthly === '0') return;
const displayPrice = isYearly ? yearly : monthly;
numEl.textContent = displayPrice;
// 更新后缀说明
const suffix = priceEl.querySelector('span:last-child');
if (suffix) {
suffix.textContent = isYearly ? '/月（年付）' : '/月';
}
});
});
// 移动端 Hamburger 简单切换
const hamburger = document.querySelector('.hamburger');
hamburger.addEventListener('click', function() {
const links = document.querySelector('.nav-links');
const actions = document.querySelector('.nav-actions');
if (links.style.display === 'flex') {
links.style.display = 'none';
actions.style.display = 'none';
} else {
links.style.display = 'flex';
links.style.flexDirection = 'column';
links.style.position = 'absolute';
links.style.top = '72px';
links.style.left = '0';
links.style.right = '0';
links.style.background = '#fff';
links.style.padding = '16px 24px';
links.style.boxShadow = '0 8px 30px rgba(0,0,0,0.08)';
links.style.borderRadius = '0 0 12px 12px';
actions.style.display = 'flex';
actions.style.flexDirection = 'column';
actions.style.position = 'absolute';
actions.style.top = '250px';
actions.style.right = '24px';
actions.style.gap = '8px';
}
});
</script>
</body>
</html>更多推荐
17
0- 0
已为社区贡献3条内容
所有评论(0)