name	prototype-web
zh_name	Web 产品原型
en_name	Web Prototype
emoji	🛠️
description	可点击的功能性 Web 原型, 含导航、英雄区、特性区、CTA
category	prototype
scenario	design
aspect_hint	1440×900 桌面
tags	["prototype","landing","原型"]
example_id	sample-prototype-inkstack
example_name	Web 原型 · SaaS Landing
example_format	markdown
example_tagline	完整可点击的 SaaS 落地页
example_desc	Hero / Features / How / Voices / Pricing / Footer 一步到位

【模板: Web 产品原型】

输出一个完整的产品 landing page。
Sections: Top Nav (logo + 导航 + CTA 按钮) → Hero (大标题 + 副标 + 双 CTA + 可视化占位) → Features (3-6 个特性卡) → How it works (步骤) → Social proof (logo wall / 评价) → Pricing (可选) → Footer。
使用现代 SaaS 设计趋势: 大字号、柔和渐变、glassmorphism 卡片、滚动到视图入场动画 (pure CSS 即可)。
响应式: 移动端单栏, 桌面多栏; 至少处理 md: 断点。
添加交互: nav 滚动变色; 特性卡 hover 浮起; FAQ 可手风琴展开 (用 <details>)。
这是高保真原型, 应该让人觉得"明天就能上线"。

prototype-web

معلومات المصدر