{"id":"e389b079-16ab-47db-bf9b-84964d262f7a","entityType":"agent","slug":"clawhub-nitishgargiitd-proto-cog","name":"proto-cog","canonicalUrl":"https://www.xpersona.co/agent/clawhub-nitishgargiitd-proto-cog","canonicalPath":"/agent/clawhub-nitishgargiitd-proto-cog","generatedAt":"2026-10-09T16:31:16.557Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-04-15T00:45:39.800Z","emptyReason":null},"description":"Build prototypes you can click. UI/UX wireframes, app mockups, and fully interactive HTML prototypes — from napkin sketch to clickable experience in one prompt. Landing pages, mobile app screens, SaaS dashboards, design systems, and user flows — prototyped and playable, not just pretty. Skill: proto-cog Owner: nitishgargiitd Summary: Build prototypes you can click. UI/UX wireframes, app mockups, and fully interactive HTML prototypes — from napkin sketch to clickable experience in one prompt. Landing pages, mobile app screens, SaaS dashboards, design systems, and user flows — prototyped and playable, not just pretty. Tags: latest:1.0.1 Version history: v1.0.1 | 2026-02-11T01:46:22.138Z | user proto-c","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1K downloads reported by the source. Last updated 4/15/2026.","installCommand":"clawhub skill install kn7a96cj9q65e0bhmzahv790en80ffqm:proto-cog","sourceUrl":"https://clawhub.ai/nitishgargiitd/proto-cog","homepage":"https://clawhub.ai/nitishgargiitd/proto-cog","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/nitishgargiitd/proto-cog","kind":"source"}],"safetyScore":84,"overallRank":62,"popularityScore":60,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Build prototypes you can click. UI/UX wireframes, app mockups, and fully interactive HTML prototypes — from napkin sketch to clickable experience in one prompt."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-04-15T00:45:39.800Z","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-04-15T00:45:39.800Z","emptyReason":null},"stars":null,"forks":null,"downloads":1027,"packageName":null,"latestVersion":"1.0.1","tractionLabel":"1K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-03-01T00:48:05.868Z","emptyReason":null},"lastUpdatedAt":"2026-04-15T00:45:39.800Z","lastCrawledAt":"2026-03-01T00:48:05.868Z","lastIndexedAt":null,"nextCrawlAt":"2026-03-02T00:48:05.868Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.1","createdAt":"2026-02-11T01:46:22.138Z","changelog":"proto-cog 1.0.1 changelog - Added `author: CellCog` and `dependencies: [cellcog]` fields to metadata - Updated dependency instructions to clarify \"`cellcog` skill\" is required - Minor formatting and metadata improvements for consistency","fileCount":2,"zipByteSize":4961},{"version":"1.0.0","createdAt":"2026-02-08T00:43:53.954Z","changelog":"proto-cog 1.0.0 - Initial release of the proto-cog skill. - Instantly prototype interactive UI/UX wireframes, app mockups, and fully functional HTML experiences from a single prompt. - Supports landing pages, mobile app flows, SaaS dashboards, design systems, and wireframes—fully clickable, not just images. - Real output: live interactive HTML prototypes (default), with optional static images or PDFs. - Requires integration with the CellCog skill for SDK setup and API access. - Includes best practices, supported features, prompt examples, and recommended chat modes to streamline the prototyping workflow.","fileCount":2,"zipByteSize":4951}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install kn7a96cj9q65e0bhmzahv790en80ffqm:proto-cog","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-nitishgargiitd-proto-cog/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-nitishgargiitd-proto-cog/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-nitishgargiitd-proto-cog/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-nitishgargiitd-proto-cog/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-nitishgargiitd-proto-cog/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-nitishgargiitd-proto-cog/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-09T16:31:16.556Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-nitishgargiitd-proto-cog/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-nitishgargiitd-proto-cog/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-nitishgargiitd-proto-cog/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-nitishgargiitd-proto-cog/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-04-15T00:45:39.800Z","emptyReason":null},"readme":"Skill: proto-cog\n\nOwner: nitishgargiitd\n\nSummary: Build prototypes you can click. UI/UX wireframes, app mockups, and fully interactive HTML prototypes — from napkin sketch to clickable experience in one prompt. Landing pages, mobile app screens, SaaS dashboards, design systems, and user flows — prototyped and playable, not just pretty.\n\nTags: latest:1.0.1\n\nVersion history:\n\nv1.0.1 | 2026-02-11T01:46:22.138Z | user\n\nproto-cog 1.0.1 changelog\n\n- Added `author: CellCog` and `dependencies: [cellcog]` fields to metadata\n- Updated dependency instructions to clarify \"`cellcog` skill\" is required\n- Minor formatting and metadata improvements for consistency\n\nv1.0.0 | 2026-02-08T00:43:53.954Z | auto\n\nproto-cog 1.0.0\n\n- Initial release of the proto-cog skill.\n- Instantly prototype interactive UI/UX wireframes, app mockups, and fully functional HTML experiences from a single prompt.\n- Supports landing pages, mobile app flows, SaaS dashboards, design systems, and wireframes—fully clickable, not just images.\n- Real output: live interactive HTML prototypes (default), with optional static images or PDFs.\n- Requires integration with the CellCog skill for SDK setup and API access.\n- Includes best practices, supported features, prompt examples, and recommended chat modes to streamline the prototyping workflow.\n\nArchive index:\n\nArchive v1.0.1: 2 files, 4961 bytes\n\nFiles: SKILL.md (10620b), _meta.json (128b)\n\nFile v1.0.1:SKILL.md\n\n---\nname: proto-cog\ndescription: \"Build prototypes you can click. UI/UX wireframes, app mockups, and fully interactive HTML prototypes — from napkin sketch to clickable experience in one prompt. Landing pages, mobile app screens, SaaS dashboards, design systems, and user flows — prototyped and playable, not just pretty.\"\nmetadata:\n  openclaw:\n    emoji: \"✏️\"\nauthor: CellCog\ndependencies: [cellcog]\n---\n\n# Proto Cog - Build Prototypes You Can Click\n\n**Build prototypes you can click.** UI/UX wireframes, app mockups, and fully interactive HTML prototypes — from napkin sketch to clickable experience in one prompt.\n\nEvery other AI design tool gives you static images. CellCog builds working prototypes — real HTML, real interactions, real user flows you can click through and share with stakeholders. Landing pages, mobile app screens, SaaS dashboards, design systems — prototyped and playable, not just pretty.\n\n---\n\n## Prerequisites\n\nThis skill requires the `cellcog` skill for SDK setup and API calls.\n\n```bash\nclawhub install cellcog\n```\n\n**Read the cellcog skill first** for SDK setup. This skill shows you what's possible.\n\n**Quick pattern (v1.0+):**\n```python\n# Fire-and-forget - returns immediately\nresult = client.create_chat(\n    prompt=\"[your prototype request]\",\n    notify_session_key=\"agent:main:main\",\n    task_label=\"prototype-task\",\n    chat_mode=\"agent\"  # Agent mode for most prototypes\n)\n# Daemon notifies you when complete - do NOT poll\n```\n\n---\n\n## Why Interactive Prototypes Matter\n\nStatic mockups create a fundamental gap: stakeholders see pictures, not experiences. The difference matters:\n\n| Static Mockup | Interactive Prototype |\n|--------------|---------------------|\n| \"Imagine clicking this button\" | Click the button, see what happens |\n| \"This would scroll to...\" | Scroll and see the content load |\n| \"The hover state looks like...\" | Hover and watch the animation |\n| \"Trust me, the flow makes sense\" | Walk through the flow yourself |\n\nCellCog generates **real HTML/CSS/JS prototypes** hosted on live URLs. Share a link, get feedback on the actual experience — not on someone's imagination of the experience.\n\n---\n\n## What You Can Prototype\n\n### Landing Pages\n\nValidate your messaging and design:\n\n- **SaaS Landing Pages**: \"Create a landing page for an AI writing assistant — hero, features, pricing, testimonials, CTA\"\n- **Product Launch Pages**: \"Build a launch page for a new fitness app with countdown and email signup\"\n- **Event Pages**: \"Create a conference landing page with schedule, speakers, and registration\"\n- **Portfolio Sites**: \"Build a personal portfolio landing page for a UX designer\"\n\n**Example prompt:**\n> \"Create an interactive landing page prototype for 'FlowState' — a productivity app for developers:\n> \n> Sections:\n> - Hero: 'Code in the zone. Stay in the zone.' with app screenshot and CTA\n> - Problem: Distractions kill developer flow (statistics)\n> - Solution: How FlowState blocks distractions intelligently\n> - Features: 3-4 key features with icons\n> - Pricing: Free, Pro ($12/mo), Team ($8/user/mo)\n> - Testimonials: 3 developer quotes\n> - Final CTA\n> \n> Style: Dark theme, developer-friendly, monospace accents\n> Make all buttons and navigation interactive.\"\n\n### Mobile App Screens\n\nDesign full app experiences:\n\n- **Onboarding Flows**: \"Create a 5-screen onboarding flow for a meditation app\"\n- **Core Features**: \"Prototype the main dashboard and navigation for a fitness tracking app\"\n- **E-commerce**: \"Build a product browse → detail → cart → checkout flow for a fashion app\"\n- **Social Features**: \"Prototype a profile page, feed, and messaging interface\"\n\n**Example prompt:**\n> \"Prototype a mobile food delivery app (phone-sized viewport):\n> \n> Screens:\n> 1. Home — restaurant grid with search and category filters\n> 2. Restaurant — menu with items, ratings, delivery time\n> 3. Item detail — customization options, add to cart\n> 4. Cart — order summary, delivery address, payment\n> 5. Order tracking — live status with map placeholder\n> \n> Make navigation between screens work with smooth transitions.\n> Style: Clean, modern, Uber Eats / DoorDash inspired.\"\n\n### SaaS Dashboards\n\nPrototype complex business tools:\n\n- **Analytics Dashboards**: \"Create a marketing analytics dashboard with real chart interactions\"\n- **Admin Panels**: \"Build a user management panel with tables, filters, and modals\"\n- **CRM Interfaces**: \"Prototype a sales pipeline view with drag-and-drop kanban board\"\n- **Settings Pages**: \"Create a comprehensive settings page with tabs, forms, and toggles\"\n\n**Example prompt:**\n> \"Prototype a SaaS project management dashboard:\n> \n> Left sidebar: Navigation (Projects, Tasks, Team, Reports, Settings)\n> Main area:\n> - Overview: KPI cards (tasks completed, overdue, in progress)\n> - Kanban board: Columns for To Do, In Progress, Review, Done\n> - Task cards with assignee avatars, priority tags, due dates\n> \n> Interactions:\n> - Sidebar navigation switches views\n> - Clicking a task card opens a detail modal\n> - Filter dropdown for project/team member\n> \n> Style: Clean, professional, Notion/Linear inspired.\"\n\n### Design Systems & Components\n\nBuild reusable design foundations:\n\n- **Component Libraries**: \"Create a UI component library: buttons, inputs, cards, modals, navigation\"\n- **Style Guides**: \"Build an interactive style guide showing typography, colors, spacing, and components\"\n- **Form Patterns**: \"Prototype common form patterns: login, signup, multi-step wizard, settings\"\n- **Navigation Patterns**: \"Create examples of sidebar nav, top nav, bottom tab bar, and hamburger menu\"\n\n### Wireframes\n\nQuick structural explorations:\n\n- **Low-Fidelity Wireframes**: \"Create grayscale wireframes for a blog platform — home, article, author pages\"\n- **User Flows**: \"Wireframe the complete signup → onboarding → first action flow for a project management tool\"\n- **Layout Explorations**: \"Show 3 different layout approaches for a real estate listing page\"\n- **Information Architecture**: \"Wireframe the navigation structure for an e-learning platform with courses, lessons, and progress tracking\"\n\n---\n\n## Prototype Features\n\nCellCog prototypes can include:\n\n| Feature | Description |\n|---------|-------------|\n| **Navigation** | Working links, page transitions, tab switching |\n| **Interactions** | Hover states, click actions, toggles, accordions |\n| **Forms** | Input fields, validation states, dropdowns, checkboxes |\n| **Modals & Overlays** | Popup dialogs, slide-out panels, tooltips |\n| **Responsive Design** | Adapts to desktop, tablet, and mobile viewports |\n| **Animations** | Smooth transitions, loading states, micro-interactions |\n| **Data Display** | Charts, tables, cards with realistic sample data |\n| **Dark/Light Themes** | Theme switching support |\n\n---\n\n## Output Formats\n\n| Format | Best For |\n|--------|----------|\n| **Interactive HTML** (Default) | Clickable prototypes hosted on live URL — share with anyone |\n| **Static Images** | Screenshots for documentation or comparison |\n| **PDF** | Wireframe documentation for handoff |\n\n**Interactive HTML is the default.** That's the whole point — prototypes you can click.\n\n---\n\n## Chat Mode for Prototyping\n\n| Scenario | Recommended Mode |\n|----------|------------------|\n| Individual pages, single components, wireframes | `\"agent\"` |\n| Full app prototypes with multiple interconnected screens, design systems | `\"agent team\"` |\n\n**Use `\"agent\"` for most prototypes.** Landing pages, individual app screens, and component designs execute well in agent mode.\n\n**Use `\"agent team\"` for full application prototypes** — multi-screen apps where navigation, state, and user flows need to work together cohesively.\n\n---\n\n## Example Prompts\n\n**SaaS landing page:**\n> \"Create a landing page for 'CodeReview.ai' — an AI code review tool:\n> \n> Hero: 'Ship better code. Ship it faster.' with demo video placeholder\n> Social proof: 'Trusted by 500+ engineering teams'\n> Features: AI-powered reviews, integration with GitHub/GitLab, security scanning\n> Pricing: Starter (free), Pro ($29/mo), Enterprise (custom)\n> \n> Dark theme, developer-focused, green accent color.\n> All navigation and CTAs should be interactive.\"\n\n**Mobile app prototype:**\n> \"Prototype a habit tracking app (mobile viewport):\n> \n> Tab bar: Today, Habits, Stats, Profile\n> \n> Today screen: List of today's habits with checkboxes, streak counts, and progress ring\n> Habits screen: All habits with edit/delete, add new habit button\n> Stats screen: Charts showing completion rates, longest streaks, weekly/monthly view\n> Profile screen: Settings, notification preferences, export data\n> \n> Tab navigation should work. Checking habits should animate.\n> Style: Minimal, calming, inspired by Streaks app.\"\n\n**Design system:**\n> \"Build an interactive design system for a fintech startup:\n> \n> Colors: Primary (deep blue), secondary (teal), accent (amber), semantic (success/warning/error)\n> Typography: Scale from h1 to body to caption with clear hierarchy\n> Components:\n> - Buttons (primary, secondary, ghost, destructive — each with hover/active/disabled states)\n> - Input fields (default, focused, error, disabled)\n> - Cards (simple, interactive, stat card)\n> - Table with sortable headers\n> - Modal dialog\n> - Toast notifications\n> \n> Show each component with interactive states. Professional, banking-grade aesthetic.\"\n\n**Wireframe exploration:**\n> \"Create 3 different layout approaches for an AI chatbot interface:\n> \n> Option A: Full-page chat (like ChatGPT)\n> Option B: Side panel chat with main content area\n> Option C: Floating chat widget\n> \n> Each should include: message input, conversation history, suggested prompts, and settings access.\n> Grayscale wireframes, focused on layout and information hierarchy.\"\n\n---\n\n## Tips for Better Prototypes\n\n1. **Describe the interactions**: \"Button opens a modal\" or \"Tabs switch content\" — tell CellCog what should happen, not just what should appear.\n\n2. **Reference existing products**: \"Like Notion's sidebar\" or \"Stripe's pricing page\" communicates more than paragraphs of description.\n\n3. **Specify viewport**: \"Mobile phone viewport\" vs \"Full desktop\" changes the entire design approach.\n\n4. **Include realistic content**: Real text, real numbers, real labels — not \"Lorem ipsum\". Prototypes with real content get better feedback.\n\n5. **State the purpose**: \"For user testing\", \"For investor demo\", \"For developer handoff\" — context shapes fidelity level.\n\n6. **Think in flows, not pages**: \"Signup → Onboarding → Dashboard\" is more useful than 3 disconnected page requests.\n\nFile v1.0.1:_meta.json\n\n{\n  \"ownerId\": \"kn7a96cj9q65e0bhmzahv790en80ffqm\",\n  \"slug\": \"proto-cog\",\n  \"version\": \"1.0.1\",\n  \"publishedAt\": 1770774382138\n}\n\nArchive v1.0.0: 2 files, 4951 bytes\n\nFiles: SKILL.md (10589b), _meta.json (128b)\n\nFile v1.0.0:SKILL.md\n\n---\nname: proto-cog\ndescription: \"Build prototypes you can click. UI/UX wireframes, app mockups, and fully interactive HTML prototypes — from napkin sketch to clickable experience in one prompt. Landing pages, mobile app screens, SaaS dashboards, design systems, and user flows — prototyped and playable, not just pretty.\"\nmetadata:\n  openclaw:\n    emoji: \"✏️\"\n---\n\n# Proto Cog - Build Prototypes You Can Click\n\n**Build prototypes you can click.** UI/UX wireframes, app mockups, and fully interactive HTML prototypes — from napkin sketch to clickable experience in one prompt.\n\nEvery other AI design tool gives you static images. CellCog builds working prototypes — real HTML, real interactions, real user flows you can click through and share with stakeholders. Landing pages, mobile app screens, SaaS dashboards, design systems — prototyped and playable, not just pretty.\n\n---\n\n## Prerequisites\n\nThis skill requires the CellCog mothership skill for SDK setup and API calls.\n\n```bash\nclawhub install cellcog\n```\n\n**Read the cellcog skill first** for SDK setup. This skill shows you what's possible.\n\n**Quick pattern (v1.0+):**\n```python\n# Fire-and-forget - returns immediately\nresult = client.create_chat(\n    prompt=\"[your prototype request]\",\n    notify_session_key=\"agent:main:main\",\n    task_label=\"prototype-task\",\n    chat_mode=\"agent\"  # Agent mode for most prototypes\n)\n# Daemon notifies you when complete - do NOT poll\n```\n\n---\n\n## Why Interactive Prototypes Matter\n\nStatic mockups create a fundamental gap: stakeholders see pictures, not experiences. The difference matters:\n\n| Static Mockup | Interactive Prototype |\n|--------------|---------------------|\n| \"Imagine clicking this button\" | Click the button, see what happens |\n| \"This would scroll to...\" | Scroll and see the content load |\n| \"The hover state looks like...\" | Hover and watch the animation |\n| \"Trust me, the flow makes sense\" | Walk through the flow yourself |\n\nCellCog generates **real HTML/CSS/JS prototypes** hosted on live URLs. Share a link, get feedback on the actual experience — not on someone's imagination of the experience.\n\n---\n\n## What You Can Prototype\n\n### Landing Pages\n\nValidate your messaging and design:\n\n- **SaaS Landing Pages**: \"Create a landing page for an AI writing assistant — hero, features, pricing, testimonials, CTA\"\n- **Product Launch Pages**: \"Build a launch page for a new fitness app with countdown and email signup\"\n- **Event Pages**: \"Create a conference landing page with schedule, speakers, and registration\"\n- **Portfolio Sites**: \"Build a personal portfolio landing page for a UX designer\"\n\n**Example prompt:**\n> \"Create an interactive landing page prototype for 'FlowState' — a productivity app for developers:\n> \n> Sections:\n> - Hero: 'Code in the zone. Stay in the zone.' with app screenshot and CTA\n> - Problem: Distractions kill developer flow (statistics)\n> - Solution: How FlowState blocks distractions intelligently\n> - Features: 3-4 key features with icons\n> - Pricing: Free, Pro ($12/mo), Team ($8/user/mo)\n> - Testimonials: 3 developer quotes\n> - Final CTA\n> \n> Style: Dark theme, developer-friendly, monospace accents\n> Make all buttons and navigation interactive.\"\n\n### Mobile App Screens\n\nDesign full app experiences:\n\n- **Onboarding Flows**: \"Create a 5-screen onboarding flow for a meditation app\"\n- **Core Features**: \"Prototype the main dashboard and navigation for a fitness tracking app\"\n- **E-commerce**: \"Build a product browse → detail → cart → checkout flow for a fashion app\"\n- **Social Features**: \"Prototype a profile page, feed, and messaging interface\"\n\n**Example prompt:**\n> \"Prototype a mobile food delivery app (phone-sized viewport):\n> \n> Screens:\n> 1. Home — restaurant grid with search and category filters\n> 2. Restaurant — menu with items, ratings, delivery time\n> 3. Item detail — customization options, add to cart\n> 4. Cart — order summary, delivery address, payment\n> 5. Order tracking — live status with map placeholder\n> \n> Make navigation between screens work with smooth transitions.\n> Style: Clean, modern, Uber Eats / DoorDash inspired.\"\n\n### SaaS Dashboards\n\nPrototype complex business tools:\n\n- **Analytics Dashboards**: \"Create a marketing analytics dashboard with real chart interactions\"\n- **Admin Panels**: \"Build a user management panel with tables, filters, and modals\"\n- **CRM Interfaces**: \"Prototype a sales pipeline view with drag-and-drop kanban board\"\n- **Settings Pages**: \"Create a comprehensive settings page with tabs, forms, and toggles\"\n\n**Example prompt:**\n> \"Prototype a SaaS project management dashboard:\n> \n> Left sidebar: Navigation (Projects, Tasks, Team, Reports, Settings)\n> Main area:\n> - Overview: KPI cards (tasks completed, overdue, in progress)\n> - Kanban board: Columns for To Do, In Progress, Review, Done\n> - Task cards with assignee avatars, priority tags, due dates\n> \n> Interactions:\n> - Sidebar navigation switches views\n> - Clicking a task card opens a detail modal\n> - Filter dropdown for project/team member\n> \n> Style: Clean, professional, Notion/Linear inspired.\"\n\n### Design Systems & Components\n\nBuild reusable design foundations:\n\n- **Component Libraries**: \"Create a UI component library: buttons, inputs, cards, modals, navigation\"\n- **Style Guides**: \"Build an interactive style guide showing typography, colors, spacing, and components\"\n- **Form Patterns**: \"Prototype common form patterns: login, signup, multi-step wizard, settings\"\n- **Navigation Patterns**: \"Create examples of sidebar nav, top nav, bottom tab bar, and hamburger menu\"\n\n### Wireframes\n\nQuick structural explorations:\n\n- **Low-Fidelity Wireframes**: \"Create grayscale wireframes for a blog platform — home, article, author pages\"\n- **User Flows**: \"Wireframe the complete signup → onboarding → first action flow for a project management tool\"\n- **Layout Explorations**: \"Show 3 different layout approaches for a real estate listing page\"\n- **Information Architecture**: \"Wireframe the navigation structure for an e-learning platform with courses, lessons, and progress tracking\"\n\n---\n\n## Prototype Features\n\nCellCog prototypes can include:\n\n| Feature | Description |\n|---------|-------------|\n| **Navigation** | Working links, page transitions, tab switching |\n| **Interactions** | Hover states, click actions, toggles, accordions |\n| **Forms** | Input fields, validation states, dropdowns, checkboxes |\n| **Modals & Overlays** | Popup dialogs, slide-out panels, tooltips |\n| **Responsive Design** | Adapts to desktop, tablet, and mobile viewports |\n| **Animations** | Smooth transitions, loading states, micro-interactions |\n| **Data Display** | Charts, tables, cards with realistic sample data |\n| **Dark/Light Themes** | Theme switching support |\n\n---\n\n## Output Formats\n\n| Format | Best For |\n|--------|----------|\n| **Interactive HTML** (Default) | Clickable prototypes hosted on live URL — share with anyone |\n| **Static Images** | Screenshots for documentation or comparison |\n| **PDF** | Wireframe documentation for handoff |\n\n**Interactive HTML is the default.** That's the whole point — prototypes you can click.\n\n---\n\n## Chat Mode for Prototyping\n\n| Scenario | Recommended Mode |\n|----------|------------------|\n| Individual pages, single components, wireframes | `\"agent\"` |\n| Full app prototypes with multiple interconnected screens, design systems | `\"agent team\"` |\n\n**Use `\"agent\"` for most prototypes.** Landing pages, individual app screens, and component designs execute well in agent mode.\n\n**Use `\"agent team\"` for full application prototypes** — multi-screen apps where navigation, state, and user flows need to work together cohesively.\n\n---\n\n## Example Prompts\n\n**SaaS landing page:**\n> \"Create a landing page for 'CodeReview.ai' — an AI code review tool:\n> \n> Hero: 'Ship better code. Ship it faster.' with demo video placeholder\n> Social proof: 'Trusted by 500+ engineering teams'\n> Features: AI-powered reviews, integration with GitHub/GitLab, security scanning\n> Pricing: Starter (free), Pro ($29/mo), Enterprise (custom)\n> \n> Dark theme, developer-focused, green accent color.\n> All navigation and CTAs should be interactive.\"\n\n**Mobile app prototype:**\n> \"Prototype a habit tracking app (mobile viewport):\n> \n> Tab bar: Today, Habits, Stats, Profile\n> \n> Today screen: List of today's habits with checkboxes, streak counts, and progress ring\n> Habits screen: All habits with edit/delete, add new habit button\n> Stats screen: Charts showing completion rates, longest streaks, weekly/monthly view\n> Profile screen: Settings, notification preferences, export data\n> \n> Tab navigation should work. Checking habits should animate.\n> Style: Minimal, calming, inspired by Streaks app.\"\n\n**Design system:**\n> \"Build an interactive design system for a fintech startup:\n> \n> Colors: Primary (deep blue), secondary (teal), accent (amber), semantic (success/warning/error)\n> Typography: Scale from h1 to body to caption with clear hierarchy\n> Components:\n> - Buttons (primary, secondary, ghost, destructive — each with hover/active/disabled states)\n> - Input fields (default, focused, error, disabled)\n> - Cards (simple, interactive, stat card)\n> - Table with sortable headers\n> - Modal dialog\n> - Toast notifications\n> \n> Show each component with interactive states. Professional, banking-grade aesthetic.\"\n\n**Wireframe exploration:**\n> \"Create 3 different layout approaches for an AI chatbot interface:\n> \n> Option A: Full-page chat (like ChatGPT)\n> Option B: Side panel chat with main content area\n> Option C: Floating chat widget\n> \n> Each should include: message input, conversation history, suggested prompts, and settings access.\n> Grayscale wireframes, focused on layout and information hierarchy.\"\n\n---\n\n## Tips for Better Prototypes\n\n1. **Describe the interactions**: \"Button opens a modal\" or \"Tabs switch content\" — tell CellCog what should happen, not just what should appear.\n\n2. **Reference existing products**: \"Like Notion's sidebar\" or \"Stripe's pricing page\" communicates more than paragraphs of description.\n\n3. **Specify viewport**: \"Mobile phone viewport\" vs \"Full desktop\" changes the entire design approach.\n\n4. **Include realistic content**: Real text, real numbers, real labels — not \"Lorem ipsum\". Prototypes with real content get better feedback.\n\n5. **State the purpose**: \"For user testing\", \"For investor demo\", \"For developer handoff\" — context shapes fidelity level.\n\n6. **Think in flows, not pages**: \"Signup → Onboarding → Dashboard\" is more useful than 3 disconnected page requests.\n\nFile v1.0.0:_meta.json\n\n{\n  \"ownerId\": \"kn7a96cj9q65e0bhmzahv790en80ffqm\",\n  \"slug\": \"proto-cog\",\n  \"version\": \"1.0.0\",\n  \"publishedAt\": 1770511433954\n}","readmeExcerpt":"Skill: proto-cog Owner: nitishgargiitd Summary: Build prototypes you can click. UI/UX wireframes, app mockups, and fully interactive HTML prototypes — from napkin sketch to clickable experience in one prompt. Landing pages, mobile app screens, SaaS dashboards, design systems, and user flows — prototyped and playable, not just pretty. Tags: latest:1.0.1 Version history: v1.0.1 | 2026-02-11T01:46:22.138Z | user proto-c","codeSnippets":[],"executableExamples":[{"language":"bash","snippet":"clawhub install cellcog"},{"language":"python","snippet":"# Fire-and-forget - returns immediately\nresult = client.create_chat(\n    prompt=\"[your prototype request]\",\n    notify_session_key=\"agent:main:main\",\n    task_label=\"prototype-task\",\n    chat_mode=\"agent\"  # Agent mode for most prototypes\n)\n# Daemon notifies you when complete - do NOT poll"},{"language":"bash","snippet":"clawhub install cellcog"},{"language":"python","snippet":"# Fire-and-forget - returns immediately\nresult = client.create_chat(\n    prompt=\"[your prototype request]\",\n    notify_session_key=\"agent:main:main\",\n    task_label=\"prototype-task\",\n    chat_mode=\"agent\"  # Agent mode for most prototypes\n)\n# Daemon notifies you when complete - do NOT poll"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: proto-cog\ndescription: \"Build prototypes you can click. UI/UX wireframes, app mockups, and fully interactive HTML prototypes — from napkin sketch to clickable experience in one prompt. Landing pages, mobile app screens, SaaS dashboards, design systems, and user flows — prototyped and playable, not just pretty.\"\nmetadata:\n  openclaw:\n    emoji: \"✏️\"\nauthor: CellCog\ndependencies: [cellcog]\n---\n\n# Proto Cog - Build Prototypes You Can Click\n\n**Build prototypes you can click.** UI/UX wireframes, app mockups, and fully interactive HTML prototypes — from napkin sketch to clickable experience in one prompt.\n\nEvery other AI design tool gives you static images. CellCog builds working prototypes — real HTML, real interactions, real user flows you can click through and share with stakeholders. Landing pages, mobile app screens, SaaS dashboards, design systems — prototyped and playable, not just pretty.\n\n---\n\n## Prerequisites\n\nThis skill requires the `cellcog` skill for SDK setup and API calls.\n\n```bash\nclawhub install cellcog\n```\n\n**Read the cellcog skill first** for SDK setup. This skill shows you what's possible.\n\n**Quick pattern (v1.0+):**\n```python\n# Fire-and-forget - returns immediately\nresult = client.create_chat(\n    prompt=\"[your prototype request]\",\n    notify_session_key=\"agent:main:main\",\n    task_label=\"prototype-task\",\n    chat_mode=\"agent\"  # Agent mode for most prototypes\n)\n# Daemon notifies you when complete - do NOT poll\n```\n\n---\n\n## Why Interactive Prototypes Matter\n\nStatic mockups create a fundamental gap: stakeholders see pictures, not experiences. The difference matters:\n\n| Static Mockup | Interactive Prototype |\n|--------------|---------------------|\n| \"Imagine clicking this button\" | Click the button, see what happens |\n| \"This would scroll to...\" | Scroll and see the content load |\n| \"The hover state looks like...\" | Hover and watch the animation |\n| \"Trust me, the flow makes sense\" | Walk through the flow yourself |\n\nCellCog generates **real HTML/CSS/JS prototypes** hosted on live URLs. Share a link, get feedback on the actual experience — not on someone's imagination of the experience.\n\n---\n\n## What You Can Prototype\n\n### Landing Pages\n\nValidate your messaging and design:\n\n- **SaaS Landing Pages**: \"Create a landing page for an AI writing assistant — hero, features, pricing, testimonials, CTA\"\n- **Product Launch Pages**: \"Build a launch page for a new fitness app with countdown and email signup\"\n- **Event Pages**: \"Create a conference landing page with schedule, speakers, and registration\"\n- **Portfolio Sites**: \"Build a personal portfolio landing page for a UX designer\"\n\n**Example prompt:**\n> \"Create an interactive landing page prototype for 'FlowState' — a productivity app for developers:\n> \n> Sections:\n> - Hero: 'Code in the zone. Stay in the zone.' with app screenshot and CTA\n> - Problem: Distractions kill developer flow (statistics)\n> - Solution: How FlowState blocks distractions intelligently\n> - Features: 3-4 key fe"},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn7a96cj9q65e0bhmzahv790en80ffqm\",\n  \"slug\": \"proto-cog\",\n  \"version\": \"1.0.1\",\n  \"publishedAt\": 1770774382138\n}"}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"Build prototypes you can click. UI/UX wireframes, app mockups, and fully interactive HTML prototypes — from napkin sketch to clickable experience in one prompt. Landing pages, mobile app screens, SaaS dashboards, design systems, and user flows — prototyped and playable, not just pretty. Skill: proto-cog Owner: nitishgargiitd Summary: Build prototypes you can click. UI/UX wireframes, app mockups, and fully interactive HTML prototypes — from napkin sketch to clickable experience in one prompt. Landing pages, mobile app screens, SaaS dashboards, design systems, and user flows — prototyped and playable, not just pretty. Tags: latest:1.0.1 Version history: v1.0.1 | 2026-02-11T01:46:22.138Z | user proto-c","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":878,"uniquenessScore":51,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-04-15T00:45:39.800Z","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-04-15T00:45:39.800Z","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-09T16:31:16.557Z","emptyReason":null},"items":[{"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":"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-04-10T18:48:31.762Z","createdAt":"2026-02-25T03:38:16.584Z","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"}]}}}