About prototype-web
A design skill for producing high-fidelity Web product prototypes as complete landing pages. It specifies sections, responsive layouts, a modern SaaS visual style, and basic interactions.
Key features
- 01Generate a complete product landing page
- 02Include navigation, hero, and feature sections
- 03Add workflow and social-proof sections
- 04Use responsive layouts with an md: breakpoint
- 05Add scroll, hover, and accordion interactions
Use cases
- 01Prototype a landing page for a Web product
- 02Present product features and workflows
- 03Create a responsive SaaS page
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/prototype-webin Claude Code to confirm it loaded.
Bundled filesexample.htmlexample.md
Details
From the project README【模板: 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>)。 - 这是高保真原型, 应该让人觉得"明天就能上线"。
Comments
Markdown supported