prototype-web skill
可点击的功能性 Web 原型, 含导航、英雄区、特性区、CTA
A100/100content scan
Is the prototype-web skill safe?
Clean: nothing in its files matched our rules. We read 3 files in the folder on 2026-09-28.
No findings.
Install the prototype-web skill
A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description.
git clone --depth 1 https://github.com/nexu-io/html-anything.git /tmp/html-anything mkdir -p ~/.claude/skills cp -r /tmp/html-anything/next/src/lib/templates/skills/prototype-web ~/.claude/skills/prototype-web
available in every project
In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub
The instructions your agent would load
SKILL.md as published, without the frontmatter. Read it on GitHub
【模板: 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 可手风琴展开 (用 )。
- 这是高保真原型, 应该让人觉得"明天就能上线"。
More skills from nexu-io/html-anything
- Aarticle-magazineSubstack / Medium 高级感长文排版, 适合公众号、博客发布
- Aarticle-sketchnote-editorial把一个概念铸成杂志专题档案——真问题→失败→转折→顿悟→命名, 6 个 layout 模具 + 4 字族对比 + 探案档案细节
- Ablog-post杂志感长文, 含 masthead、hero、figures、pull quote、作者署名
- Acard-twitter推特金句 / 数据卡, 适合配推文
- Acard-xiaohongshu小红书风格知识卡片, 多张联排可滑动浏览
- Acompetitive-teardown定位图 + 功能矩阵 + 价格对比 + 机会窗口, 把竞品资料转成产品决策报告
- Adashboard固定侧栏 + 顶栏 + KPI 网格 + 1-2 张图
- Adata-report把 CSV/Excel/JSON 数据转成漂亮的可视化报告页
- Adating-web消费感配对仪表板: 信号 ticker + KPI + 30 天柱状 + 趋势
- Adeck-blueprint奶油纸 + 锈红 + 蓝图网格 mask + 黑边硬卡片 + pipeline 盒
- Adeck-course-module暖纸背景 + Playfair, 左侧学习目标常驻, 含 MCQ 自测页
- Adeck-dir-key-nav8 页单色背景, 160px display + 4px accent + Mono 箭头列表