Skill6.7k repo starsupdated 11d ago

prototype-web

The prototype-web skill generates a complete, clickable SaaS landing page with a responsive layout featuring a navigation bar with logo and CTA buttons, hero section with dual calls-to-action, feature cards, how-it-works steps, social proof section, optional pricing, and footer. It incorporates modern design trends including large typography, soft gradients, glassmorphism effects, and scroll-triggered animations using pure CSS, with interactive elements like color-changing navigation on scroll, hovering feature cards, and expandable FAQ accordions. Use this when you need a polished, production-ready product landing page prototype that demonstrates a complete user journey across desktop and mobile viewports.

View source Repository: html-anything

Install in Claude Code

Copy

git clone --depth 1 https://github.com/nexu-io/html-anything /tmp/prototype-web && cp -r /tmp/prototype-web/next/src/lib/templates/skills/prototype-web ~/.claude/skills/prototype-web

Then start a new Claude Code session; the skill loads automatically.

Definition

SKILL.md

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