关于 prototype-web
用于生成 Web 产品高保真原型的设计技能，要求输出包含导航、主视觉、功能、流程和页脚等部分的完整 landing page。它还规定响应式布局、现代 SaaS 视觉风格及基础交互。
主要功能
- 01生成完整产品 landing page
- 02包含导航、主视觉与功能区块
- 03提供工作流程和社会证明区域
- 04采用响应式布局与 md: 断点
- 05添加滚动、悬停和手风琴交互
适用场景
- 01为 Web 产品制作落地页原型
- 02展示产品功能与使用流程
- 03创建带响应式布局的 SaaS 页面
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/prototype-web确认已加载。
附带文件example.htmlexample.md
README 原文English
来自项目 READMEREADME 暂无中文译文，以下为英文原文；中文介绍见上方。
【模板: 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>)。 - 这是高保真原型, 应该让人觉得"明天就能上线"。
评论
支持 Markdown