What makes Product Prototype Design notable?

1K downloads. Trust evidence available

How should Product Prototype Design be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

Product Prototype Design

快速生成高保真的产品交互原型（单个独立 HTML 文件），适用于产品经理、创业者、设计师快速验证想法。当用户提到原型设计、产品原型、交互原型、demo 制作、产品 Mock、界面原型、H5 原型、产品页面设计、MVP 原型、Landing Page、产品概念验证，或需要快速将产品想法可视化为可交互页面时，请使用此... Skill: Product Prototype Design Owner: yz6214589-hash Summary: 快速生成高保真的产品交互原型（单个独立 HTML 文件），适用于产品经理、创业者、设计师快速验证想法。当用户提到原型设计、产品原型、交互原型、demo 制作、产品 Mock、界面原型、H5 原型、产品页面设计、MVP 原型、Landing Page、产品概念验证，或需要快速将产品想法可视化为可交互页面时，请使用此... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-04-21T04:01:30.097Z | user init Archive index: Archive v1.0.0: 4 files, 8252 bytes Files: references/industry-design-specs.md (7551b), skill-card.

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

1.0k

Updated

Oct 11, 2026

Version

1.0.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1K downloads reported by the source. Last updated 10/11/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 11, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 11, 2026
Adoption signal: 1K downloadsadoption · observed Oct 11, 2026
Latest release: 1.0.0release · observed Apr 21, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s17996fk24wt0zdqhvatzxareh857jje:product-prototype-design

Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-yz6214589-hash-product-prototype-design/snapshot"

Run-check

$0.02 USD

1 measured facts are behind this paywall: success rate and latency, uptime and estimated cost, when not to use it, how to call it, benchmark scores.

Agents pay $0.02 in USDC. A card payment is $0.50, the smallest a card allows.

Documentation

CLAWHUB

10,904 characters of source documentation, loaded on request.

Extracted files

4 files captured from the source.

SKILL.md

---
name: product-prototype-design
version: 1.0.0
description: 快速生成高保真的产品交互原型（单个独立 HTML 文件），适用于产品经理、创业者、设计师快速验证想法。当用户提到原型设计、产品原型、交互原型、demo 制作、产品 Mock、界面原型、H5 原型、产品页面设计、MVP 原型、Landing Page、产品概念验证，或需要快速将产品想法可视化为可交互页面时，请使用此 skill。即使未明确提及'原型'，只要用户想快速做一个产品页面/界面/Demo，也应触发此 skill。
metadata:
  openclaw:
    emoji: "🎨"
    tags: ["prototype", "design", "ui", "ux", "demo", "landing"]
---

# 产品原型设计

快速生成高保真交互原型，单文件独立 HTML，无需部署即可体验。

## 设计流程

### Step 1: 需求收集

使用 AskUserQuestion 收集关键信息：

```markdown
请告诉我关于原型的基本信息：

1. **产品类型** (单选)
   - SaaS 应用
   - 移动 App
   - 电商网站
   - 内容平台
   - 工具类产品
   - 其他

2. **目标用户** (单选)
   - 企业用户 (B2B)
   - 个人消费者 (B2C)
   - 开发者
   - 创造者
   - 学生
   - 其他

3. **核心功能** (多选最多3项)
   [ ] 用户注册/登录
   [ ] 数据展示/列表
   [ ] 搜索/筛选
   [ ] 内容创建/编辑
   [ ] 购买/支付
   [ ] 社交分享
   [ ] 数据分析/报表
   [ ] 设置/个人中心

4. **风格偏好** (单选)
   - 现代简约
   - 专业商务
   - 活力创新
   - 科技未来
   - 温情人文
   - 其他
```

### Step 2: 页面规划

根据收集的信息，规划原型包含的关键页面：

```markdown
产品原型将包含以下页面：

✅ Page 1: 首页/仪表盘
- 主要数据展示
- 快捷操作入口
- 核心功能预览

✅ Page 2: 核心功能页
- [根据选择的3个核心功能]

✅ Page 3: 详情/配置页
- 详细设置选项
- 高级功能

✅ Page 4: 个人中心
- 用户信息
- 偏好设置

确认这个规划是否符合您的预期？
```

### Step 3: 行业风格应用

查询 `references/industry-design-specs.md` 获取对应行业的设计规范：

- 根据产品类型选择配色方案
- 应用推荐的视觉风格
- 使用行业标准的交互模式

### Step 4: 生成原型

调用 Write 工具创建单文件 HTML 原型：

**文件命名规范**: `product-prototypes/{产品类型}_{时间戳}.html`

**技术栈**:
- HTML5 语义化标签
- Tailwind CSS (CDN)
- 原生 JavaScript (ES6+)
- 微交互动画 (CSS transitions)
- 模拟数据 (JSON)

### Step 5: 交付说明

```markdown
✅ 原型已生成！

文件位置: product-prototypes/{产品类型}_{时间戳}.html

使用方法:
1. 双击 HTML 文件即可在浏览器打开
2. 无需任何服务器或部署
3. 所有交互都是可点击的
4. 点击页面顶部的导航可切换页面

预览链接: [如果支持在线预览]

📝 原型说明:
- 包含 {N} 个核心页面
- 实现了 {M} 个交互功能
- 包含 {K} 个微动效
- 响应式设计，支持移动端
```

## 原型模板库

### SaaS 仪表盘模板
```
关键元素:
- 侧边导航栏
- 顶部用户信息
- 数据图表区域
- 快速操作卡片
- 最近活动列表
```

### 电商产品页模板
```
关键元素:
- 商品轮播图
- 价格/购买按钮
- 规格选择器
- 商品描述标签
- 相关推荐
```

### 内容平台模板
```
关键元素:
- 内容瀑布流
- 筛选/排序
- 点赞/收藏
- 评论互动
- 创作者信息
```

### 工具类产品模板
```
关键元素:
- 功能输入区
- 实时预览
- 操作按钮
- 历史记录
- 导出/分享
```

## 高级功能

### 数据可视化
- Chart.js 图表展示
- 动态数据更新
- 交互式筛选

### 表单交互
- 步骤式表单
- 实时验证
- 拖拽排序

### 列表管理
- 虚拟滚动
- 批量操作
- 拖拽上传

### 通知系统
- Toast 提示
- Badge 徽章
- 弹窗模态

## 最佳实践

### 1. 快速原型原则
- 80/20 法则：实现核心 20% 的功能，呈现 80% 的效果
- 灰度模式：先布局后上色
- 渐进增强：基础交互 → 微动画 → 复杂功能

### 2. 用户体验
- 3 秒规则：3秒内理解页面价值
- 一致性：保持全局设计语言统一
- 反馈：每个操作都有视觉反馈

### 3. 技术实现
- 组件化思维：可复用的 UI 模块
- 性能优化：懒加载防抖节流
- 移动优先：响应式设计

## 示例输出

### 文件结构
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品原型 - {产品名称}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* 自定义样式和动画 */
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <!-- 页面内容 -->
    <!-- 交互逻辑 -->
    <script>
        // 所有交互代码
    </script>
</body>
</html>
```

### 交互示例
```javascript
// 页面切换
function showPage(pageId) {
    document.querySelectorAll('.page').forEach(p => p.classList.add('hidden'));
    document.getElementById(pageId).classList.remove('hidden');
}

_meta.json

{
  "ownerId": "kn7070e6kjytarngxs9g8h1c018577bj",
  "slug": "product-prototype-design",
  "version": "1.0.0",
  "publishedAt": 1776744090097
}

references/industry-design-specs.md

# Industry Design Specifications

各行业配色方案与视觉风格规范。根据推断的行业，选取对应规范应用到原型设计中。

---

## 配色方案

| 行业/场景 | 主色调 | 辅助色 | 中性色 | 风格关键词 |
| :--- | :--- | :--- | :--- | :--- |
| **科技/互联网** | 蓝色（深蓝 `slate-800`/宝蓝 `blue-600`） | 浅蓝 `sky-300`、青 `cyan-400`、白 | 白、浅灰 `gray-100`、深灰 `gray-800` | 专业、冷静、科技感、信任 |
| **金融/银行** | 藏蓝 `slate-900`、墨绿 `emerald-800`、深红 `red-800` | 金 `amber-400`、浅灰 `gray-200` | 白、浅灰 | 稳重、安全、权威、高端 |
| **电商/零售** | 红 `red-500`、橙 `orange-500`、橘黄 `amber-500` | 黄 `yellow-400`、浅蓝 `sky-200`、白 | 白、浅灰 | 活泼、促销感、醒目、促转化 |
| **餐饮/美食** | 暖橙 `orange-500`、暖红 `red-500`、暖黄 `amber-400` | 浅绿 `lime-300`、米黄 `amber-50` | 米白 `orange-50`、浅棕 `stone-300` | 食欲、温暖、烟火气、清新 |
| **医疗/健康** | 浅绿 `emerald-500`、浅蓝 `sky-500`、白 | 淡粉 `pink-100`、浅灰 `gray-200` | 白、浅灰 | 干净、安心、专业、柔和 |
| **教育/培训** | 蓝色 `blue-600`、绿色 `green-600` | 黄 `yellow-400`、浅橙 `orange-300` | 白、浅灰 | 理性、成长、清爽、易读 |
| **美妆/时尚** | 粉 `pink-400`、紫 `violet-400`、香槟金 `amber-200` | 浅灰 `gray-100`、白、银 `gray-300` | 白、浅灰、黑 | 精致、轻奢、高级、女性化 |
| **房地产/家居** | 咖色 `stone-700`、深棕 `amber-900`、墨绿 `green-900` | 米白 `stone-50`、浅金 `amber-300` | 白、米灰 `stone-100` | 质感、稳重、高端、温馨 |
| **游戏/娱乐** | 紫 `violet-500`、蓝 `indigo-500`、霓虹色 | 亮粉 `pink-400`、亮黄 `yellow-400`、青 `cyan-400` | 黑 `gray-950`、深灰 `gray-800` | 潮流、炫酷、年轻、视觉冲击 |
| **汽车/工业** | 黑 `gray-900`、深灰 `gray-700`、深蓝 `slate-800` | 红 `red-600`、银 `gray-400`、白 | 白、浅灰 | 硬朗、科技、高级、力量感 |
| **法律/咨询** | 藏蓝 `slate-900`、深灰 `gray-800`、黑 | 金 `amber-500`、暗红 `red-900` | 白、浅灰 | 严谨、正式、专业、可信赖 |
| **旅游/出行** | 天蓝 `sky-500`、湖蓝 `cyan-500`、草绿 `green-500` | 白、浅橙 `orange-200` | 白、浅灰 | 开阔、清爽、自然、放松 |
| **公益/环保** | 绿色 `green-600`、浅蓝 `sky-400` | 白、浅黄 `yellow-100` | 白、浅灰 | 自然、希望、清新、正能量 |
| **企业官网** | 深蓝 `slate-800`/深绿 `green-800` | 浅蓝 `sky-300`、白 | 白、灰、黑 | 大气、正式、品牌感强 |

---

## 视觉风格规范

### 科技/互联网

- **字体排版**: `font-sans`，字母间距收紧 `tracking-tight`
- **容器与边角**: 极细边框 `border-slate-100`，低阴影 `shadow-sm`
- **交互动效**: 悬停平滑位移 `hover:-translate-y-1`，`transition-all duration-300`
- **布局与空间**: 强调**负白空间**，使用 `gap-8` 以上的大间距，网格布局

### 金融/银行

- **字体排版**: 标题用 `font-serif` 或粗体，体现权威
- **容器与边角**: 直角或小圆角 `rounded-sm`，投影沉重 `shadow-md`
- **交互动效**: 严谨的加载动画，避免花哨的弹跳
- **布局与空间**: 模块化网格，左右对齐极度严谨

### 电商/零售

- **字体排版**: 价格文字放大并加粗，使用醒目色彩
- **容器与边角**: 大圆角 `rounded-2xl`，强阴影 `shadow-xl`
- **交互动效**: 按钮呼吸灯效果 `animate-pulse`，购物车抖动反馈
- **布局与空间**: 瀑布流布局，行动按钮 (CTA) 始终悬浮可见

### 餐饮/美食

- **字体排版**: 手写体或圆润字体，增加亲和力
- **容器与边角**: 有机形状（不规则圆角），背景米白 `bg-orange-50/30`
- **交互动效**: 图片悬停放大 `hover:scale-105`
- **布局与空间**: 大图驱动，卡片式布局，突出食物质感

### 医疗/健康

- **字体排版**: 增加行高 `leading-relaxed`，提升易读性
- **容器与边角**: 中等圆角 `rounded-lg`，柔和阴影 `shadow-blue-100/50`
- **交互动效**: 淡入淡出 `transition-opacity`
- **布局与空间**: 极简主义，去除所有干扰性装饰元素

### 教育/培训

- **字体排版**: 清爽的无衬线体，重点内容加背景高亮
- **容器与边角**: 模块边框 `border-2`，活泼的彩色阴影
- **交互动效**: 进度条动画，点击反馈明显
- **布局与空间**: 线性叙事，分步式引导（Step-by-step）

### 美妆/时尚

- **字体排版**: 标题超大且字间距拉开 `tracking-widest`
- **容器与边角**: 极细线条，去阴影或仅留背景色块切换
- **交互动效**: 优雅的淡入动画，滚动视差效果
- **布局与空间**: 杂志排版风格，大量非对称留白

### 房地产/家居

- **字体排版**: 标题采用现代衬线体，显得贵气
- **容器与边角**: 容器使用内阴影 `shadow-inner` 增加质感
- **交互动效**: 平滑的缩放切换
- **布局与

skill-card.md

## Description:

Generates high-fidelity interactive product prototypes as standalone HTML files for quickly visualizing and validating product ideas.

This skill is ready for commercial/non-commercial use.

## Publisher:

[yz6214589-hash](https://clawhub.ai/user/yz6214589-hash)

### License/Terms of Use:

MIT-0

## Use Case:

Product managers, founders, designers, and developers use this skill to turn product concepts, MVP ideas, landing pages, and interface requests into clickable prototype pages for rapid review.

### Deployment Geography for Use:

Global

## Known Risks and Mitigations:

Risk: The skill may activate for broad page, interface, or demo requests and produce a prototype when the user expected a narrower design artifact.

Mitigation: Confirm the product type, target users, core features, and visual style before generating the prototype.

Risk: Generated prototype HTML can load Tailwind CSS from a remote CDN.

Mitigation: Review generated HTML before use in restricted environments and replace the CDN dependency with approved local CSS when needed.

Risk: Prototype screens use simulated data and interactions that may be mistaken for production-ready behavior.

Mitigation: Label prototypes as validation artifacts and review them before entering sensitive or realistic test data.

## Reference(s):

- [Industry Design Specifications](artifact/references/industry-design-specs.md)
- [ClawHub Skill Page](https://clawhub.ai/yz6214589-hash/skills/product-prototype-design)
- [Tailwind CSS CDN](https://cdn.tailwindcss.com)

## Skill Output:

**Output Type(s):** [text, markdown, code, configuration, guidance]

**Output Format:** [Standalone HTML file plus concise Markdown delivery notes]

**Output Parameters:** [1D]

**Other Properties Related to Output:** [Generated prototypes may include Tailwind CSS from a remote CDN, native JavaScript interactions, simulated JSON data, and optional local assets.]

## Skill Version(s):

1.0.0 (source: frontmatter and release evidence)

## Ethical Considerations:

Users should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.

Github ReposUpdated 2d agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.

MCPOPENCLAW

Github ReposUpdated 7mo agoRank 70

CopilotKit

The Frontend for Agents & Generative UI. React + Angular