# Prototype Web

> Generates a high-fidelity, clickable web prototype with navigation, hero, features, and CTA sections.

- Skill: `nexu-io/prototype-web` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds add nexu-io/prototype-web`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nexu-io/prototype-web/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend, Coding & Dev Tools, Design & Media, Frontend Frameworks, UI Design
- Tags: Css Animations, Glassmorphism, Html, Landing Page, Prototype, Responsive Design
- Author: Nexu (https://skillmd.com/u/nexu-io)
- Updated: 2026-07-19
- Page: https://skillmd.com/skills/nexu-io/prototype-web

---


【模板: 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>`)。
- 这是高保真原型, 应该让人觉得"明天就能上线"。