{"id":"27495c41-b720-4b95-9d8b-bf2deba0502b","entityType":"agent","slug":"clawhub-yz6214589-hash-product-prototype-design","name":"Product Prototype Design","canonicalUrl":"https://www.xpersona.co/agent/clawhub-yz6214589-hash-product-prototype-design","canonicalPath":"/agent/clawhub-yz6214589-hash-product-prototype-design","generatedAt":"2026-10-12T02:15:04.166Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-11T18:45:05.402Z","emptyReason":null},"description":"快速生成高保真的产品交互原型（单个独立 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.","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1K downloads reported by the source. Last updated 10/11/2026.","installCommand":"clawhub skill install s17996fk24wt0zdqhvatzxareh857jje:product-prototype-design","sourceUrl":"https://clawhub.ai/yz6214589-hash/product-prototype-design","homepage":"https://clawhub.ai/yz6214589-hash/skills/product-prototype-design","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/yz6214589-hash/product-prototype-design","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/yz6214589-hash/skills/product-prototype-design","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":60,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"快速生成高保真的产品交互原型（单个独立 HTML 文件），适用于产品经理、创业者、设计师快速验证想法。当用户提到原型设计、产品原型、交互原型、demo 制作、产品 Mock、界面原型、H5 原型、产品页面设计、MVP 原型、Landing Page、产品概念验证，或需要快速将产品想法可视化为可交互页面时，请使用此..."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-11T18:45:05.402Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T18:45:05.402Z","emptyReason":null},"stars":null,"forks":null,"downloads":1008,"likes":null,"task":null,"library":null,"packageName":null,"latestVersion":"1.0.0","tractionLabel":"1K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T18:45:05.342Z","emptyReason":null},"lastUpdatedAt":"2026-10-11T18:45:05.402Z","lastCrawledAt":"2026-10-11T18:45:05.342Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-12T18:45:05.342Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.0","createdAt":"2026-04-21T04:01:30.097Z","changelog":"init","fileCount":4,"zipByteSize":8252}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s17996fk24wt0zdqhvatzxareh857jje:product-prototype-design","setupComplexity":"low","setupSteps":["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":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-yz6214589-hash-product-prototype-design/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-yz6214589-hash-product-prototype-design/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-yz6214589-hash-product-prototype-design/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-yz6214589-hash-product-prototype-design/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-yz6214589-hash-product-prototype-design/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-yz6214589-hash-product-prototype-design/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-12T02:15:04.165Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-yz6214589-hash-product-prototype-design/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-yz6214589-hash-product-prototype-design/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-yz6214589-hash-product-prototype-design/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-yz6214589-hash-product-prototype-design/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-11T18:45:05.402Z","emptyReason":null},"readme":"Skill: Product Prototype Design\n\nOwner: yz6214589-hash\n\nSummary: 快速生成高保真的产品交互原型（单个独立 HTML 文件），适用于产品经理、创业者、设计师快速验证想法。当用户提到原型设计、产品原型、交互原型、demo 制作、产品 Mock、界面原型、H5 原型、产品页面设计、MVP 原型、Landing Page、产品概念验证，或需要快速将产品想法可视化为可交互页面时，请使用此...\n\nTags: latest:1.0.0\n\nVersion history:\n\nv1.0.0 | 2026-04-21T04:01:30.097Z | user\n\ninit\n\nArchive index:\n\nArchive v1.0.0: 4 files, 8252 bytes\n\nFiles: references/industry-design-specs.md (7551b), skill-card.md (2275b), SKILL.md (5918b), _meta.json (143b)\n\nFile v1.0.0:SKILL.md\n\n---\nname: product-prototype-design\nversion: 1.0.0\ndescription: 快速生成高保真的产品交互原型（单个独立 HTML 文件），适用于产品经理、创业者、设计师快速验证想法。当用户提到原型设计、产品原型、交互原型、demo 制作、产品 Mock、界面原型、H5 原型、产品页面设计、MVP 原型、Landing Page、产品概念验证，或需要快速将产品想法可视化为可交互页面时，请使用此 skill。即使未明确提及'原型'，只要用户想快速做一个产品页面/界面/Demo，也应触发此 skill。\nmetadata:\n  openclaw:\n    emoji: \"🎨\"\n    tags: [\"prototype\", \"design\", \"ui\", \"ux\", \"demo\", \"landing\"]\n---\n\n# 产品原型设计\n\n快速生成高保真交互原型，单文件独立 HTML，无需部署即可体验。\n\n## 设计流程\n\n### Step 1: 需求收集\n\n使用 AskUserQuestion 收集关键信息：\n\n```markdown\n请告诉我关于原型的基本信息：\n\n1. **产品类型** (单选)\n   - SaaS 应用\n   - 移动 App\n   - 电商网站\n   - 内容平台\n   - 工具类产品\n   - 其他\n\n2. **目标用户** (单选)\n   - 企业用户 (B2B)\n   - 个人消费者 (B2C)\n   - 开发者\n   - 创造者\n   - 学生\n   - 其他\n\n3. **核心功能** (多选最多3项)\n   [ ] 用户注册/登录\n   [ ] 数据展示/列表\n   [ ] 搜索/筛选\n   [ ] 内容创建/编辑\n   [ ] 购买/支付\n   [ ] 社交分享\n   [ ] 数据分析/报表\n   [ ] 设置/个人中心\n\n4. **风格偏好** (单选)\n   - 现代简约\n   - 专业商务\n   - 活力创新\n   - 科技未来\n   - 温情人文\n   - 其他\n```\n\n### Step 2: 页面规划\n\n根据收集的信息，规划原型包含的关键页面：\n\n```markdown\n产品原型将包含以下页面：\n\n✅ Page 1: 首页/仪表盘\n- 主要数据展示\n- 快捷操作入口\n- 核心功能预览\n\n✅ Page 2: 核心功能页\n- [根据选择的3个核心功能]\n\n✅ Page 3: 详情/配置页\n- 详细设置选项\n- 高级功能\n\n✅ Page 4: 个人中心\n- 用户信息\n- 偏好设置\n\n确认这个规划是否符合您的预期？\n```\n\n### Step 3: 行业风格应用\n\n查询 `references/industry-design-specs.md` 获取对应行业的设计规范：\n\n- 根据产品类型选择配色方案\n- 应用推荐的视觉风格\n- 使用行业标准的交互模式\n\n### Step 4: 生成原型\n\n调用 Write 工具创建单文件 HTML 原型：\n\n**文件命名规范**: `product-prototypes/{产品类型}_{时间戳}.html`\n\n**技术栈**:\n- HTML5 语义化标签\n- Tailwind CSS (CDN)\n- 原生 JavaScript (ES6+)\n- 微交互动画 (CSS transitions)\n- 模拟数据 (JSON)\n\n### Step 5: 交付说明\n\n```markdown\n✅ 原型已生成！\n\n文件位置: product-prototypes/{产品类型}_{时间戳}.html\n\n使用方法:\n1. 双击 HTML 文件即可在浏览器打开\n2. 无需任何服务器或部署\n3. 所有交互都是可点击的\n4. 点击页面顶部的导航可切换页面\n\n预览链接: [如果支持在线预览]\n\n📝 原型说明:\n- 包含 {N} 个核心页面\n- 实现了 {M} 个交互功能\n- 包含 {K} 个微动效\n- 响应式设计，支持移动端\n```\n\n## 原型模板库\n\n### SaaS 仪表盘模板\n```\n关键元素:\n- 侧边导航栏\n- 顶部用户信息\n- 数据图表区域\n- 快速操作卡片\n- 最近活动列表\n```\n\n### 电商产品页模板\n```\n关键元素:\n- 商品轮播图\n- 价格/购买按钮\n- 规格选择器\n- 商品描述标签\n- 相关推荐\n```\n\n### 内容平台模板\n```\n关键元素:\n- 内容瀑布流\n- 筛选/排序\n- 点赞/收藏\n- 评论互动\n- 创作者信息\n```\n\n### 工具类产品模板\n```\n关键元素:\n- 功能输入区\n- 实时预览\n- 操作按钮\n- 历史记录\n- 导出/分享\n```\n\n## 高级功能\n\n### 数据可视化\n- Chart.js 图表展示\n- 动态数据更新\n- 交互式筛选\n\n### 表单交互\n- 步骤式表单\n- 实时验证\n- 拖拽排序\n\n### 列表管理\n- 虚拟滚动\n- 批量操作\n- 拖拽上传\n\n### 通知系统\n- Toast 提示\n- Badge 徽章\n- 弹窗模态\n\n## 最佳实践\n\n### 1. 快速原型原则\n- 80/20 法则：实现核心 20% 的功能，呈现 80% 的效果\n- 灰度模式：先布局后上色\n- 渐进增强：基础交互 → 微动画 → 复杂功能\n\n### 2. 用户体验\n- 3 秒规则：3秒内理解页面价值\n- 一致性：保持全局设计语言统一\n- 反馈：每个操作都有视觉反馈\n\n### 3. 技术实现\n- 组件化思维：可复用的 UI 模块\n- 性能优化：懒加载防抖节流\n- 移动优先：响应式设计\n\n## 示例输出\n\n### 文件结构\n```html\n<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>产品原型 - {产品名称}</title>\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <style>\n        /* 自定义样式和动画 */\n    </style>\n</head>\n<body>\n    <!-- 导航栏 -->\n    <!-- 页面内容 -->\n    <!-- 交互逻辑 -->\n    <script>\n        // 所有交互代码\n    </script>\n</body>\n</html>\n```\n\n### 交互示例\n```javascript\n// 页面切换\nfunction showPage(pageId) {\n    document.querySelectorAll('.page').forEach(p => p.classList.add('hidden'));\n    document.getElementById(pageId).classList.remove('hidden');\n}\n\n// 模态框控制\nfunction showModal(content) {\n    // 显示模态框逻辑\n}\n\n// 表单验证\nfunction validateForm() {\n    // 验证逻辑\n}\n```\n\n## 扩展功能\n\n### 数据持久化\n- LocalStorage 保存设置\n- 导出/导入配置\n\n### 分享功能\n- 生成分享链接\n- 导出为图片\n- 分享到社交平台\n\n### 协作功能\n- 评论标注\n- 版本对比\n- 反馈收集\n\n## 交付物清单\n\n- [✅] product-prototype-{timestamp}.html (主文件)\n- [ ] assets/ (静态资源，如需要)\n- [ ] README.md (使用说明)\n- [ ] changelog.md (版本记录)\n\n## 后续优化建议\n\n1. **添加真实 API 集成**\n2. **实现后端数据存储**\n3. **增加用户认证系统**\n4. **优化移动端体验**\n5. **添加无障碍支持**\n\nFile v1.0.0:_meta.json\n\n{\n  \"ownerId\": \"kn7070e6kjytarngxs9g8h1c018577bj\",\n  \"slug\": \"product-prototype-design\",\n  \"version\": \"1.0.0\",\n  \"publishedAt\": 1776744090097\n}\n\nFile v1.0.0:references/industry-design-specs.md\n\n# Industry Design Specifications\n\n各行业配色方案与视觉风格规范。根据推断的行业，选取对应规范应用到原型设计中。\n\n---\n\n## 配色方案\n\n| 行业/场景 | 主色调 | 辅助色 | 中性色 | 风格关键词 |\n| :--- | :--- | :--- | :--- | :--- |\n| **科技/互联网** | 蓝色（深蓝 `slate-800`/宝蓝 `blue-600`） | 浅蓝 `sky-300`、青 `cyan-400`、白 | 白、浅灰 `gray-100`、深灰 `gray-800` | 专业、冷静、科技感、信任 |\n| **金融/银行** | 藏蓝 `slate-900`、墨绿 `emerald-800`、深红 `red-800` | 金 `amber-400`、浅灰 `gray-200` | 白、浅灰 | 稳重、安全、权威、高端 |\n| **电商/零售** | 红 `red-500`、橙 `orange-500`、橘黄 `amber-500` | 黄 `yellow-400`、浅蓝 `sky-200`、白 | 白、浅灰 | 活泼、促销感、醒目、促转化 |\n| **餐饮/美食** | 暖橙 `orange-500`、暖红 `red-500`、暖黄 `amber-400` | 浅绿 `lime-300`、米黄 `amber-50` | 米白 `orange-50`、浅棕 `stone-300` | 食欲、温暖、烟火气、清新 |\n| **医疗/健康** | 浅绿 `emerald-500`、浅蓝 `sky-500`、白 | 淡粉 `pink-100`、浅灰 `gray-200` | 白、浅灰 | 干净、安心、专业、柔和 |\n| **教育/培训** | 蓝色 `blue-600`、绿色 `green-600` | 黄 `yellow-400`、浅橙 `orange-300` | 白、浅灰 | 理性、成长、清爽、易读 |\n| **美妆/时尚** | 粉 `pink-400`、紫 `violet-400`、香槟金 `amber-200` | 浅灰 `gray-100`、白、银 `gray-300` | 白、浅灰、黑 | 精致、轻奢、高级、女性化 |\n| **房地产/家居** | 咖色 `stone-700`、深棕 `amber-900`、墨绿 `green-900` | 米白 `stone-50`、浅金 `amber-300` | 白、米灰 `stone-100` | 质感、稳重、高端、温馨 |\n| **游戏/娱乐** | 紫 `violet-500`、蓝 `indigo-500`、霓虹色 | 亮粉 `pink-400`、亮黄 `yellow-400`、青 `cyan-400` | 黑 `gray-950`、深灰 `gray-800` | 潮流、炫酷、年轻、视觉冲击 |\n| **汽车/工业** | 黑 `gray-900`、深灰 `gray-700`、深蓝 `slate-800` | 红 `red-600`、银 `gray-400`、白 | 白、浅灰 | 硬朗、科技、高级、力量感 |\n| **法律/咨询** | 藏蓝 `slate-900`、深灰 `gray-800`、黑 | 金 `amber-500`、暗红 `red-900` | 白、浅灰 | 严谨、正式、专业、可信赖 |\n| **旅游/出行** | 天蓝 `sky-500`、湖蓝 `cyan-500`、草绿 `green-500` | 白、浅橙 `orange-200` | 白、浅灰 | 开阔、清爽、自然、放松 |\n| **公益/环保** | 绿色 `green-600`、浅蓝 `sky-400` | 白、浅黄 `yellow-100` | 白、浅灰 | 自然、希望、清新、正能量 |\n| **企业官网** | 深蓝 `slate-800`/深绿 `green-800` | 浅蓝 `sky-300`、白 | 白、灰、黑 | 大气、正式、品牌感强 |\n\n---\n\n## 视觉风格规范\n\n### 科技/互联网\n\n- **字体排版**: `font-sans`，字母间距收紧 `tracking-tight`\n- **容器与边角**: 极细边框 `border-slate-100`，低阴影 `shadow-sm`\n- **交互动效**: 悬停平滑位移 `hover:-translate-y-1`，`transition-all duration-300`\n- **布局与空间**: 强调**负白空间**，使用 `gap-8` 以上的大间距，网格布局\n\n### 金融/银行\n\n- **字体排版**: 标题用 `font-serif` 或粗体，体现权威\n- **容器与边角**: 直角或小圆角 `rounded-sm`，投影沉重 `shadow-md`\n- **交互动效**: 严谨的加载动画，避免花哨的弹跳\n- **布局与空间**: 模块化网格，左右对齐极度严谨\n\n### 电商/零售\n\n- **字体排版**: 价格文字放大并加粗，使用醒目色彩\n- **容器与边角**: 大圆角 `rounded-2xl`，强阴影 `shadow-xl`\n- **交互动效**: 按钮呼吸灯效果 `animate-pulse`，购物车抖动反馈\n- **布局与空间**: 瀑布流布局，行动按钮 (CTA) 始终悬浮可见\n\n### 餐饮/美食\n\n- **字体排版**: 手写体或圆润字体，增加亲和力\n- **容器与边角**: 有机形状（不规则圆角），背景米白 `bg-orange-50/30`\n- **交互动效**: 图片悬停放大 `hover:scale-105`\n- **布局与空间**: 大图驱动，卡片式布局，突出食物质感\n\n### 医疗/健康\n\n- **字体排版**: 增加行高 `leading-relaxed`，提升易读性\n- **容器与边角**: 中等圆角 `rounded-lg`，柔和阴影 `shadow-blue-100/50`\n- **交互动效**: 淡入淡出 `transition-opacity`\n- **布局与空间**: 极简主义，去除所有干扰性装饰元素\n\n### 教育/培训\n\n- **字体排版**: 清爽的无衬线体，重点内容加背景高亮\n- **容器与边角**: 模块边框 `border-2`，活泼的彩色阴影\n- **交互动效**: 进度条动画，点击反馈明显\n- **布局与空间**: 线性叙事，分步式引导（Step-by-step）\n\n### 美妆/时尚\n\n- **字体排版**: 标题超大且字间距拉开 `tracking-widest`\n- **容器与边角**: 极细线条，去阴影或仅留背景色块切换\n- **交互动效**: 优雅的淡入动画，滚动视差效果\n- **布局与空间**: 杂志排版风格，大量非对称留白\n\n### 房地产/家居\n\n- **字体排版**: 标题采用现代衬线体，显得贵气\n- **容器与边角**: 容器使用内阴影 `shadow-inner` 增加质感\n- **交互动效**: 平滑的缩放切换\n- **布局与空间**: 宽屏大图，强调空间延伸感\n\n### 游戏/娱乐\n\n- **字体排版**: **强制深色模式**，标题可倾斜 `italic`\n- **容器与边角**: 霓虹发光边框 `ring-1 ring-cyan-400`，**禁止渐变**\n- **交互动效**: 剧烈反馈，如 `active:scale-95`\n- **布局与空间**: 碎片化、重叠式布局，打破常规栅格\n\n### 汽车/工业\n\n- **字体排版**: 全大写标题 `uppercase`，高对比度\n- **容器与边角**: 锐利边角，金属质感边框 `border-slate-700`\n- **交互动效**: 极速切换，硬朗的线性滑动\n- **布局与空间**: 强调性能参数的对比表，暗色基调\n\n### 法律/咨询\n\n- **字体排版**: 经典宋体/衬线体标题，正文严谨\n- **容器与边角**: 对称布局，严禁使用花哨装饰\n- **交互动效**: 极其克制的动效，仅限必要导航\n- **布局与空间**: 经典 F 型阅读路径，强调文档和资质展示\n\n### 旅游/出行\n\n- **字体排版**: 字体轻盈，标题带轻微投影\n- **容器与边角**: 图片圆角 `rounded-3xl`，卡片悬浮感\n- **交互动效**: 流畅的滚动加载\n- **布局与空间**: 宽大视野，背景图穿插，模拟开阔感\n\n### 公益/环保\n\n- **字体排版**: 柔和的字体，大量使用图标辅助\n- **容器与边角**: 叶子形状圆角 `rounded-tl-3xl rounded-br-3xl`\n- **交互动效**: 温暖的渐显效果\n- **布局与空间**: 自然流畅的 S 型布局，多用矢量插画\n\n### 企业官网\n\n- **字体排版**: 均衡的比例，主标题稳重\n- **容器与边角**: 标准圆角 `rounded-md`，规范化阴影\n- **交互动效**: 稳定的平滑滚动\n- **布局与空间**: 传统的 Hero + Features + Solution 结构\n\n---\n\n## Google Fonts 推荐\n\n| 行业 | 推荐字体 |\n| :--- | :--- |\n| 科技/互联网 | Inter, Source Sans 3 |\n| 金融/银行 | Playfair Display (标题), Source Sans 3 (正文) |\n| 电商/零售 | Poppins, Noto Sans SC |\n| 餐饮/美食 | Nunito, Ma Shan Zheng (中文手写) |\n| 医疗/健康 | Lato, Noto Sans SC |\n| 教育/培训 | Open Sans, Noto Sans SC |\n| 美妆/时尚 | Montserrat, Playfair Display |\n| 房地产/家居 | Cormorant Garamond, Noto Serif SC |\n| 游戏/娱乐 | Orbitron, Rajdhani |\n| 汽车/工业 | Oswald, Barlow |\n| 法律/咨询 | Merriweather, Noto Serif SC |\n| 旅游/出行 | Quicksand, Nunito |\n| 公益/环保 | Nunito, Quicksand |\n| 企业官网 | Inter, Noto Sans SC |\n\nFile v1.0.0:skill-card.md\n\n## Description:\n\nGenerates high-fidelity interactive product prototypes as standalone HTML files for quickly visualizing and validating product ideas.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[yz6214589-hash](https://clawhub.ai/user/yz6214589-hash)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nProduct 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.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The skill may activate for broad page, interface, or demo requests and produce a prototype when the user expected a narrower design artifact.\n\nMitigation: Confirm the product type, target users, core features, and visual style before generating the prototype.\n\nRisk: Generated prototype HTML can load Tailwind CSS from a remote CDN.\n\nMitigation: Review generated HTML before use in restricted environments and replace the CDN dependency with approved local CSS when needed.\n\nRisk: Prototype screens use simulated data and interactions that may be mistaken for production-ready behavior.\n\nMitigation: Label prototypes as validation artifacts and review them before entering sensitive or realistic test data.\n\n## Reference(s):\n\n- [Industry Design Specifications](artifact/references/industry-design-specs.md)\n- [ClawHub Skill Page](https://clawhub.ai/yz6214589-hash/skills/product-prototype-design)\n- [Tailwind CSS CDN](https://cdn.tailwindcss.com)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, configuration, guidance]\n\n**Output Format:** [Standalone HTML file plus concise Markdown delivery notes]\n\n**Output Parameters:** [1D]\n\n**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.]\n\n## Skill Version(s):\n\n1.0.0 (source: frontmatter and release evidence)\n\n## Ethical Considerations:\n\nUsers 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.","readmeExcerpt":"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.","codeSnippets":[],"executableExamples":[{"language":"markdown","snippet":"请告诉我关于原型的基本信息：\n\n1. **产品类型** (单选)\n   - SaaS 应用\n   - 移动 App\n   - 电商网站\n   - 内容平台\n   - 工具类产品\n   - 其他\n\n2. **目标用户** (单选)\n   - 企业用户 (B2B)\n   - 个人消费者 (B2C)\n   - 开发者\n   - 创造者\n   - 学生\n   - 其他\n\n3. **核心功能** (多选最多3项)\n   [ ] 用户注册/登录\n   [ ] 数据展示/列表\n   [ ] 搜索/筛选\n   [ ] 内容创建/编辑\n   [ ] 购买/支付\n   [ ] 社交分享\n   [ ] 数据分析/报表\n   [ ] 设置/个人中心\n\n4. **风格偏好** (单选)\n   - 现代简约\n   - 专业商务\n   - 活力创新\n   - 科技未来\n   - 温情人文\n   - 其他"},{"language":"markdown","snippet":"产品原型将包含以下页面：\n\n✅ Page 1: 首页/仪表盘\n- 主要数据展示\n- 快捷操作入口\n- 核心功能预览\n\n✅ Page 2: 核心功能页\n- [根据选择的3个核心功能]\n\n✅ Page 3: 详情/配置页\n- 详细设置选项\n- 高级功能\n\n✅ Page 4: 个人中心\n- 用户信息\n- 偏好设置\n\n确认这个规划是否符合您的预期？"},{"language":"markdown","snippet":"✅ 原型已生成！\n\n文件位置: product-prototypes/{产品类型}_{时间戳}.html\n\n使用方法:\n1. 双击 HTML 文件即可在浏览器打开\n2. 无需任何服务器或部署\n3. 所有交互都是可点击的\n4. 点击页面顶部的导航可切换页面\n\n预览链接: [如果支持在线预览]\n\n📝 原型说明:\n- 包含 {N} 个核心页面\n- 实现了 {M} 个交互功能\n- 包含 {K} 个微动效\n- 响应式设计，支持移动端"},{"language":"text","snippet":"关键元素:\n- 侧边导航栏\n- 顶部用户信息\n- 数据图表区域\n- 快速操作卡片\n- 最近活动列表"},{"language":"text","snippet":"关键元素:\n- 商品轮播图\n- 价格/购买按钮\n- 规格选择器\n- 商品描述标签\n- 相关推荐"},{"language":"text","snippet":"关键元素:\n- 内容瀑布流\n- 筛选/排序\n- 点赞/收藏\n- 评论互动\n- 创作者信息"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: product-prototype-design\nversion: 1.0.0\ndescription: 快速生成高保真的产品交互原型（单个独立 HTML 文件），适用于产品经理、创业者、设计师快速验证想法。当用户提到原型设计、产品原型、交互原型、demo 制作、产品 Mock、界面原型、H5 原型、产品页面设计、MVP 原型、Landing Page、产品概念验证，或需要快速将产品想法可视化为可交互页面时，请使用此 skill。即使未明确提及'原型'，只要用户想快速做一个产品页面/界面/Demo，也应触发此 skill。\nmetadata:\n  openclaw:\n    emoji: \"🎨\"\n    tags: [\"prototype\", \"design\", \"ui\", \"ux\", \"demo\", \"landing\"]\n---\n\n# 产品原型设计\n\n快速生成高保真交互原型，单文件独立 HTML，无需部署即可体验。\n\n## 设计流程\n\n### Step 1: 需求收集\n\n使用 AskUserQuestion 收集关键信息：\n\n```markdown\n请告诉我关于原型的基本信息：\n\n1. **产品类型** (单选)\n   - SaaS 应用\n   - 移动 App\n   - 电商网站\n   - 内容平台\n   - 工具类产品\n   - 其他\n\n2. **目标用户** (单选)\n   - 企业用户 (B2B)\n   - 个人消费者 (B2C)\n   - 开发者\n   - 创造者\n   - 学生\n   - 其他\n\n3. **核心功能** (多选最多3项)\n   [ ] 用户注册/登录\n   [ ] 数据展示/列表\n   [ ] 搜索/筛选\n   [ ] 内容创建/编辑\n   [ ] 购买/支付\n   [ ] 社交分享\n   [ ] 数据分析/报表\n   [ ] 设置/个人中心\n\n4. **风格偏好** (单选)\n   - 现代简约\n   - 专业商务\n   - 活力创新\n   - 科技未来\n   - 温情人文\n   - 其他\n```\n\n### Step 2: 页面规划\n\n根据收集的信息，规划原型包含的关键页面：\n\n```markdown\n产品原型将包含以下页面：\n\n✅ Page 1: 首页/仪表盘\n- 主要数据展示\n- 快捷操作入口\n- 核心功能预览\n\n✅ Page 2: 核心功能页\n- [根据选择的3个核心功能]\n\n✅ Page 3: 详情/配置页\n- 详细设置选项\n- 高级功能\n\n✅ Page 4: 个人中心\n- 用户信息\n- 偏好设置\n\n确认这个规划是否符合您的预期？\n```\n\n### Step 3: 行业风格应用\n\n查询 `references/industry-design-specs.md` 获取对应行业的设计规范：\n\n- 根据产品类型选择配色方案\n- 应用推荐的视觉风格\n- 使用行业标准的交互模式\n\n### Step 4: 生成原型\n\n调用 Write 工具创建单文件 HTML 原型：\n\n**文件命名规范**: `product-prototypes/{产品类型}_{时间戳}.html`\n\n**技术栈**:\n- HTML5 语义化标签\n- Tailwind CSS (CDN)\n- 原生 JavaScript (ES6+)\n- 微交互动画 (CSS transitions)\n- 模拟数据 (JSON)\n\n### Step 5: 交付说明\n\n```markdown\n✅ 原型已生成！\n\n文件位置: product-prototypes/{产品类型}_{时间戳}.html\n\n使用方法:\n1. 双击 HTML 文件即可在浏览器打开\n2. 无需任何服务器或部署\n3. 所有交互都是可点击的\n4. 点击页面顶部的导航可切换页面\n\n预览链接: [如果支持在线预览]\n\n📝 原型说明:\n- 包含 {N} 个核心页面\n- 实现了 {M} 个交互功能\n- 包含 {K} 个微动效\n- 响应式设计，支持移动端\n```\n\n## 原型模板库\n\n### SaaS 仪表盘模板\n```\n关键元素:\n- 侧边导航栏\n- 顶部用户信息\n- 数据图表区域\n- 快速操作卡片\n- 最近活动列表\n```\n\n### 电商产品页模板\n```\n关键元素:\n- 商品轮播图\n- 价格/购买按钮\n- 规格选择器\n- 商品描述标签\n- 相关推荐\n```\n\n### 内容平台模板\n```\n关键元素:\n- 内容瀑布流\n- 筛选/排序\n- 点赞/收藏\n- 评论互动\n- 创作者信息\n```\n\n### 工具类产品模板\n```\n关键元素:\n- 功能输入区\n- 实时预览\n- 操作按钮\n- 历史记录\n- 导出/分享\n```\n\n## 高级功能\n\n### 数据可视化\n- Chart.js 图表展示\n- 动态数据更新\n- 交互式筛选\n\n### 表单交互\n- 步骤式表单\n- 实时验证\n- 拖拽排序\n\n### 列表管理\n- 虚拟滚动\n- 批量操作\n- 拖拽上传\n\n### 通知系统\n- Toast 提示\n- Badge 徽章\n- 弹窗模态\n\n## 最佳实践\n\n### 1. 快速原型原则\n- 80/20 法则：实现核心 20% 的功能，呈现 80% 的效果\n- 灰度模式：先布局后上色\n- 渐进增强：基础交互 → 微动画 → 复杂功能\n\n### 2. 用户体验\n- 3 秒规则：3秒内理解页面价值\n- 一致性：保持全局设计语言统一\n- 反馈：每个操作都有视觉反馈\n\n### 3. 技术实现\n- 组件化思维：可复用的 UI 模块\n- 性能优化：懒加载防抖节流\n- 移动优先：响应式设计\n\n## 示例输出\n\n### 文件结构\n```html\n<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>产品原型 - {产品名称}</title>\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n    <style>\n        /* 自定义样式和动画 */\n    </style>\n</head>\n<body>\n    <!-- 导航栏 -->\n    <!-- 页面内容 -->\n    <!-- 交互逻辑 -->\n    <script>\n        // 所有交互代码\n    </script>\n</body>\n</html>\n```\n\n### 交互示例\n```javascript\n// 页面切换\nfunction showPage(pageId) {\n    document.querySelectorAll('.page').forEach(p => p.classList.add('hidden'));\n    document.getElementById(pageId).classList.remove('hidden');\n}\n\n"},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn7070e6kjytarngxs9g8h1c018577bj\",\n  \"slug\": \"product-prototype-design\",\n  \"version\": \"1.0.0\",\n  \"publishedAt\": 1776744090097\n}"},{"path":"references/industry-design-specs.md","content":"# Industry Design Specifications\n\n各行业配色方案与视觉风格规范。根据推断的行业，选取对应规范应用到原型设计中。\n\n---\n\n## 配色方案\n\n| 行业/场景 | 主色调 | 辅助色 | 中性色 | 风格关键词 |\n| :--- | :--- | :--- | :--- | :--- |\n| **科技/互联网** | 蓝色（深蓝 `slate-800`/宝蓝 `blue-600`） | 浅蓝 `sky-300`、青 `cyan-400`、白 | 白、浅灰 `gray-100`、深灰 `gray-800` | 专业、冷静、科技感、信任 |\n| **金融/银行** | 藏蓝 `slate-900`、墨绿 `emerald-800`、深红 `red-800` | 金 `amber-400`、浅灰 `gray-200` | 白、浅灰 | 稳重、安全、权威、高端 |\n| **电商/零售** | 红 `red-500`、橙 `orange-500`、橘黄 `amber-500` | 黄 `yellow-400`、浅蓝 `sky-200`、白 | 白、浅灰 | 活泼、促销感、醒目、促转化 |\n| **餐饮/美食** | 暖橙 `orange-500`、暖红 `red-500`、暖黄 `amber-400` | 浅绿 `lime-300`、米黄 `amber-50` | 米白 `orange-50`、浅棕 `stone-300` | 食欲、温暖、烟火气、清新 |\n| **医疗/健康** | 浅绿 `emerald-500`、浅蓝 `sky-500`、白 | 淡粉 `pink-100`、浅灰 `gray-200` | 白、浅灰 | 干净、安心、专业、柔和 |\n| **教育/培训** | 蓝色 `blue-600`、绿色 `green-600` | 黄 `yellow-400`、浅橙 `orange-300` | 白、浅灰 | 理性、成长、清爽、易读 |\n| **美妆/时尚** | 粉 `pink-400`、紫 `violet-400`、香槟金 `amber-200` | 浅灰 `gray-100`、白、银 `gray-300` | 白、浅灰、黑 | 精致、轻奢、高级、女性化 |\n| **房地产/家居** | 咖色 `stone-700`、深棕 `amber-900`、墨绿 `green-900` | 米白 `stone-50`、浅金 `amber-300` | 白、米灰 `stone-100` | 质感、稳重、高端、温馨 |\n| **游戏/娱乐** | 紫 `violet-500`、蓝 `indigo-500`、霓虹色 | 亮粉 `pink-400`、亮黄 `yellow-400`、青 `cyan-400` | 黑 `gray-950`、深灰 `gray-800` | 潮流、炫酷、年轻、视觉冲击 |\n| **汽车/工业** | 黑 `gray-900`、深灰 `gray-700`、深蓝 `slate-800` | 红 `red-600`、银 `gray-400`、白 | 白、浅灰 | 硬朗、科技、高级、力量感 |\n| **法律/咨询** | 藏蓝 `slate-900`、深灰 `gray-800`、黑 | 金 `amber-500`、暗红 `red-900` | 白、浅灰 | 严谨、正式、专业、可信赖 |\n| **旅游/出行** | 天蓝 `sky-500`、湖蓝 `cyan-500`、草绿 `green-500` | 白、浅橙 `orange-200` | 白、浅灰 | 开阔、清爽、自然、放松 |\n| **公益/环保** | 绿色 `green-600`、浅蓝 `sky-400` | 白、浅黄 `yellow-100` | 白、浅灰 | 自然、希望、清新、正能量 |\n| **企业官网** | 深蓝 `slate-800`/深绿 `green-800` | 浅蓝 `sky-300`、白 | 白、灰、黑 | 大气、正式、品牌感强 |\n\n---\n\n## 视觉风格规范\n\n### 科技/互联网\n\n- **字体排版**: `font-sans`，字母间距收紧 `tracking-tight`\n- **容器与边角**: 极细边框 `border-slate-100`，低阴影 `shadow-sm`\n- **交互动效**: 悬停平滑位移 `hover:-translate-y-1`，`transition-all duration-300`\n- **布局与空间**: 强调**负白空间**，使用 `gap-8` 以上的大间距，网格布局\n\n### 金融/银行\n\n- **字体排版**: 标题用 `font-serif` 或粗体，体现权威\n- **容器与边角**: 直角或小圆角 `rounded-sm`，投影沉重 `shadow-md`\n- **交互动效**: 严谨的加载动画，避免花哨的弹跳\n- **布局与空间**: 模块化网格，左右对齐极度严谨\n\n### 电商/零售\n\n- **字体排版**: 价格文字放大并加粗，使用醒目色彩\n- **容器与边角**: 大圆角 `rounded-2xl`，强阴影 `shadow-xl`\n- **交互动效**: 按钮呼吸灯效果 `animate-pulse`，购物车抖动反馈\n- **布局与空间**: 瀑布流布局，行动按钮 (CTA) 始终悬浮可见\n\n### 餐饮/美食\n\n- **字体排版**: 手写体或圆润字体，增加亲和力\n- **容器与边角**: 有机形状（不规则圆角），背景米白 `bg-orange-50/30`\n- **交互动效**: 图片悬停放大 `hover:scale-105`\n- **布局与空间**: 大图驱动，卡片式布局，突出食物质感\n\n### 医疗/健康\n\n- **字体排版**: 增加行高 `leading-relaxed`，提升易读性\n- **容器与边角**: 中等圆角 `rounded-lg`，柔和阴影 `shadow-blue-100/50`\n- **交互动效**: 淡入淡出 `transition-opacity`\n- **布局与空间**: 极简主义，去除所有干扰性装饰元素\n\n### 教育/培训\n\n- **字体排版**: 清爽的无衬线体，重点内容加背景高亮\n- **容器与边角**: 模块边框 `border-2`，活泼的彩色阴影\n- **交互动效**: 进度条动画，点击反馈明显\n- **布局与空间**: 线性叙事，分步式引导（Step-by-step）\n\n### 美妆/时尚\n\n- **字体排版**: 标题超大且字间距拉开 `tracking-widest`\n- **容器与边角**: 极细线条，去阴影或仅留背景色块切换\n- **交互动效**: 优雅的淡入动画，滚动视差效果\n- **布局与空间**: 杂志排版风格，大量非对称留白\n\n### 房地产/家居\n\n- **字体排版**: 标题采用现代衬线体，显得贵气\n- **容器与边角**: 容器使用内阴影 `shadow-inner` 增加质感\n- **交互动效**: 平滑的缩放切换\n- **布局与"},{"path":"skill-card.md","content":"## Description:\n\nGenerates high-fidelity interactive product prototypes as standalone HTML files for quickly visualizing and validating product ideas.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[yz6214589-hash](https://clawhub.ai/user/yz6214589-hash)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nProduct 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.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The skill may activate for broad page, interface, or demo requests and produce a prototype when the user expected a narrower design artifact.\n\nMitigation: Confirm the product type, target users, core features, and visual style before generating the prototype.\n\nRisk: Generated prototype HTML can load Tailwind CSS from a remote CDN.\n\nMitigation: Review generated HTML before use in restricted environments and replace the CDN dependency with approved local CSS when needed.\n\nRisk: Prototype screens use simulated data and interactions that may be mistaken for production-ready behavior.\n\nMitigation: Label prototypes as validation artifacts and review them before entering sensitive or realistic test data.\n\n## Reference(s):\n\n- [Industry Design Specifications](artifact/references/industry-design-specs.md)\n- [ClawHub Skill Page](https://clawhub.ai/yz6214589-hash/skills/product-prototype-design)\n- [Tailwind CSS CDN](https://cdn.tailwindcss.com)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, configuration, guidance]\n\n**Output Format:** [Standalone HTML file plus concise Markdown delivery notes]\n\n**Output Parameters:** [1D]\n\n**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.]\n\n## Skill Version(s):\n\n1.0.0 (source: frontmatter and release evidence)\n\n## Ethical Considerations:\n\nUsers 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."}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"快速生成高保真的产品交互原型（单个独立 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.","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":919,"uniquenessScore":55,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-11T18:45:05.402Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-11T18:45:05.402Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-12T02:15:04.166Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"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!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"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","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}