prototype-web について
Web 製品の高忠実度プロトタイプを、完成したランディングページとして作成するデザインスキルです。セクション構成、レスポンシブレイアウト、SaaS のビジュアルスタイル、基本的なインタラクションを指定します。
主な機能
- 01製品ランディングページ全体の生成
- 02ナビゲーション、ヒーロー、機能セクションの配置
- 03ワークフローとソーシャルプルーフの追加
- 04md: ブレークポイントを含むレスポンシブレイアウト
- 05スクロール、ホバー、アコーディオンの操作
活用シーン
- 01Web 製品のランディングページ試作
- 02製品機能とワークフローの提示
- 03レスポンシブな SaaS ページの作成
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/prototype-webを入力して読み込まれたか確認します。
同梱ファイルexample.htmlexample.md
README（原文）English
プロジェクトの README よりこの 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>)。 - 这是高保真原型, 应该让人觉得"明天就能上线"。
コメント
Markdown 対応