shell
$ npx -y skills add nexu-io/html-anything --skill prototype-web --agent claude-codeInstalls just this skill. Get the whole plugin for auto-invocation.
How it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfClaude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/prototype-web
Context preview
The summary Claude sees to decide when to auto-load this skill.
可点击的功能性 Web 原型, 含导航、英雄区、特性区、CTA
Stats
Stars7,918
Forks773
LanguageHTML
LicenseApache-2.0
Ships with html-anything
SKILL.md
prototype-web.SKILL.md
--- name: prototype-web zh_name: "Web 产品原型" en_name: "Web Prototype" emoji: "🛠️" description: "可点击的功能性 Web 原型, 含导航、英雄区、特性区、CTA" category: prototype scenario: design aspect_hint: "1440×900 桌面" tags: ["prototype", "landing", "原型"] example_id: sample-prototype-inkstack example_name: "Web 原型 · SaaS Landing" example_format: markdown example_tagline: "完整可点击的 SaaS 落地页" example_desc: "Hero / Features / How / Voices / Pricing / Footer 一步到位" --- 【模板: 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>`)。 - 这是高保真原型, 应该让人觉得"明天就能上线"。
