{"id":"72c4be48-d69f-4db3-be0f-9e435b091260","entityType":"agent","slug":"clawhub-cellcog-ui-prototype-wireframe-cellcog","name":"Wireframe","canonicalUrl":"https://www.xpersona.co/agent/clawhub-cellcog-ui-prototype-wireframe-cellcog","canonicalPath":"/agent/clawhub-cellcog-ui-prototype-wireframe-cellcog","generatedAt":"2026-10-09T12:52:26.608Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-09T06:05:41.810Z","emptyReason":null},"description":"AI UI prototype and wireframe generation powered by CellCog. Interactive HTML prototypes, wireframes, app mockups, landing pages, mobile screens, SaaS dashboards, design systems, user flows. From description to clickable prototype in one prompt. Skill: Wireframe Owner: cellcog Summary: AI UI prototype and wireframe generation powered by CellCog. Interactive HTML prototypes, wireframes, app mockups, landing pages, mobile screens, SaaS dashboards, design systems, user flows. From description to clickable prototype in one prompt. Tags: latest:1.0.16 Version history: v1.0.16 | 2026-08-24T02:02:09.840Z | user Content updated. v1.0.15 | 2026-08-24T01:46:37.231Z |","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 4.1K downloads reported by the source. Last updated 10/9/2026.","installCommand":"clawhub skill install s176q1btpn094ats9b4f9hgfwx83knpk:ui-prototype-wireframe-cellcog","sourceUrl":"https://clawhub.ai/cellcog/ui-prototype-wireframe-cellcog","homepage":"https://clawhub.ai/cellcog/skills/ui-prototype-wireframe-cellcog","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/cellcog/ui-prototype-wireframe-cellcog","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/cellcog/skills/ui-prototype-wireframe-cellcog","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":72,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"AI UI prototype and wireframe generation powered by CellCog. Interactive HTML prototypes, wireframes, app mockups, landing pages, mobile screens, SaaS dashboard"},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-09T06:05:41.810Z","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-09T06:05:41.810Z","emptyReason":null},"stars":null,"forks":null,"downloads":4065,"packageName":null,"latestVersion":"1.0.16","tractionLabel":"4.1K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-09T06:05:41.809Z","emptyReason":null},"lastUpdatedAt":"2026-10-09T06:05:41.810Z","lastCrawledAt":"2026-10-09T06:05:41.809Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-10T06:05:41.809Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.16","createdAt":"2026-08-24T02:02:09.840Z","changelog":"Content updated.","fileCount":3,"zipByteSize":6614},{"version":"1.0.15","createdAt":"2026-08-24T01:46:37.231Z","changelog":"Content updated.","fileCount":3,"zipByteSize":6548},{"version":"1.0.14","createdAt":"2026-08-03T06:06:54.601Z","changelog":"Content updated.","fileCount":3,"zipByteSize":6513},{"version":"1.0.13","createdAt":"2026-08-02T22:03:47.782Z","changelog":"Display title updated.","fileCount":3,"zipByteSize":6518},{"version":"1.0.12","createdAt":"2026-07-17T03:42:23.380Z","changelog":"- Skill name updated to \"ui-prototype-wireframe-cellcog\" for clearer identification. - Description revised for improved clarity and keyword inclusion. - Extensive documentation content (SKILL.md) revised and retitled; now better aligned with the new skill name. - Obsolete file skill-card.md removed for cleanup and consolidation.","fileCount":3,"zipByteSize":6548},{"version":"1.0.11","createdAt":"2026-04-23T06:19:20.615Z","changelog":"- Added explicit requirements for system dependencies: now specifies Python 3 and CELLCOG_API_KEY are needed in the metadata. - No functional changes to skill logic or user-facing features. - Updated documentation only; usage, prompts, and examples remain unchanged.","fileCount":3,"zipByteSize":6394},{"version":"1.0.10","createdAt":"2026-04-14T17:32:58.404Z","changelog":"- Improved and shortened the description in SKILL.md for clarity and conciseness. - Updated instructions to clarify agent usage for fire-and-forget (OpenClaw) and blocking (all other agents). - No functional or code changes; documentation only.","fileCount":2,"zipByteSize":5237},{"version":"1.0.9","createdAt":"2026-04-13T01:01:24.831Z","changelog":"- Updated SKILL.md for clarity and conciseness. - Improved the usage example for Cursor/Claude/other agents; now includes import and client creation details. - Enhanced the skill description to better highlight interactive and playable prototypes. - No changes to functionality or features; documentation only.","fileCount":2,"zipByteSize":5200}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s176q1btpn094ats9b4f9hgfwx83knpk:ui-prototype-wireframe-cellcog","setupComplexity":"low","setupSteps":["Setup complexity is classified as HIGH. You must provision dedicated cloud infrastructure or an isolated VM. Do not run this directly on your local workstation.","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-cellcog-ui-prototype-wireframe-cellcog/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cellcog-ui-prototype-wireframe-cellcog/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cellcog-ui-prototype-wireframe-cellcog/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-cellcog-ui-prototype-wireframe-cellcog/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-cellcog-ui-prototype-wireframe-cellcog/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-cellcog-ui-prototype-wireframe-cellcog/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-09T12:52:26.602Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cellcog-ui-prototype-wireframe-cellcog/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cellcog-ui-prototype-wireframe-cellcog/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cellcog-ui-prototype-wireframe-cellcog/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-cellcog-ui-prototype-wireframe-cellcog/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-09T06:05:41.810Z","emptyReason":null},"readme":"Skill: Wireframe\n\nOwner: cellcog\n\nSummary: AI UI prototype and wireframe generation powered by CellCog. Interactive HTML prototypes, wireframes, app mockups, landing pages, mobile screens, SaaS dashboards, design systems, user flows. From description to clickable prototype in one prompt.\n\nTags: latest:1.0.16\n\nVersion history:\n\nv1.0.16 | 2026-08-24T02:02:09.840Z | user\n\nContent updated.\n\nv1.0.15 | 2026-08-24T01:46:37.231Z | user\n\nContent updated.\n\nv1.0.14 | 2026-08-03T06:06:54.601Z | user\n\nContent updated.\n\nv1.0.13 | 2026-08-02T22:03:47.782Z | user\n\nDisplay title updated.\n\nv1.0.12 | 2026-07-17T03:42:23.380Z | auto\n\n- Skill name updated to \"ui-prototype-wireframe-cellcog\" for clearer identification.\n- Description revised for improved clarity and keyword inclusion.\n- Extensive documentation content (SKILL.md) revised and retitled; now better aligned with the new skill name.\n- Obsolete file skill-card.md removed for cleanup and consolidation.\n\nv1.0.11 | 2026-04-23T06:19:20.615Z | auto\n\n- Added explicit requirements for system dependencies: now specifies Python 3 and CELLCOG_API_KEY are needed in the metadata.\n- No functional changes to skill logic or user-facing features.\n- Updated documentation only; usage, prompts, and examples remain unchanged.\n\nv1.0.10 | 2026-04-14T17:32:58.404Z | auto\n\n- Improved and shortened the description in SKILL.md for clarity and conciseness.\n- Updated instructions to clarify agent usage for fire-and-forget (OpenClaw) and blocking (all other agents).\n- No functional or code changes; documentation only.\n\nv1.0.9 | 2026-04-13T01:01:24.831Z | auto\n\n- Updated SKILL.md for clarity and conciseness.\n- Improved the usage example for Cursor/Claude/other agents; now includes import and client creation details.\n- Enhanced the skill description to better highlight interactive and playable prototypes.\n- No changes to functionality or features; documentation only.\n\nv1.0.8 | 2026-04-12T23:36:04.064Z | auto\n\n- Updated and condensed skill description and instructions for clarity and ease of use.\n- Added a new \"How to Use\" section with simplified code samples for OpenClaw and other agents.\n- Streamlined and shortened introductory material, removing duplication and reducing verbosity.\n- Broadened example prompts and usage scenarios for various prototype types.\n- Refined structure of documentation for quicker onboarding and reference.\n\nv1.0.7 | 2026-04-08T05:58:36.179Z | auto\n\n- Expanded and rewritten documentation for clarity and inspiration; emphasizes clickable, interactive prototypes over static mockups.\n- Detailed new prompt examples for landing pages, mobile apps, SaaS dashboards, design systems, and wireframes.\n- Added comparison of static mockups vs. interactive prototypes to highlight value.\n- Listed prototype feature support (navigation, forms, modals, responsive design, data display, etc.)\n- Clarified output formats and use of chat modes for different prototyping goals.\n\nv1.0.6 | 2026-04-06T05:07:47.666Z | auto\n\n- Shortened and clarified the description for easier understanding and broader usage scenarios.\n- Condensed documentation to focus on prerequisites, capabilities, supported prototype types, and output.\n- Explicitly listed CellCog's internal capabilities such as interactive HTML generation, image creation, and automated screenshot testing.\n- Simplified prototype and output sections for quick reference.\n- Added a \"Related Skills\" section with suggestions for dashboard (dash-cog) and brand (brand-cog) tools.\n\nv1.0.5 | 2026-04-03T01:44:03.711Z | auto\n\n- Added code example and documentation for OpenClaw agents with fire-and-forget usage.\n- Clarified the difference between OpenClaw and non-OpenClaw agent invocation in the prerequisites section.\n- Updated SDK usage instructions for improved clarity.\n- Other small documentation improvements in SKILL.md.\n\nv1.0.4 | 2026-04-03T00:08:24.612Z | auto\n\n- Updated quick start instructions for SDK usage with simplified Python example.\n- Added clear reference to the main cellcog skill for details on SDK functions, delivery modes, and file handling.\n- No feature or functionality changes; documentation and onboarding clarification only.\n\nv1.0.3 | 2026-04-02T03:34:07.525Z | auto\n\n- Changed the \"metadata\" emoji from βοΈ to π to better reflect prototyping.\n- No other changes to features, usage, or instructions.\n\nv1.0.2 | 2026-03-27T04:17:55.047Z | auto\n\n- Added supported operating systems (darwin, linux, windows) to metadata.\n- Added a homepage link to the skill metadata.\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.16: 3 files, 6614 bytes\n\nFiles: skill-card.md (2295b), SKILL.md (11321b), _meta.json (150b)\n\nFile v1.0.16:SKILL.md\n\n---\nname: ui-prototype-wireframe-cellcog\ndescription: \"AI UI prototype and wireframe generation powered by CellCog. Interactive HTML prototypes, wireframes, app mockups, landing pages, mobile screens, SaaS dashboards, design systems, user flows. From description to clickable prototype in one prompt.\"\nmetadata:\n openclaw:\n emoji: \"π\"\n os: [darwin, linux, windows]\n requires:\n bins: [python3]\n env: [CELLCOG_API_KEY]\nauthor: CellCog\nhomepage: https://cellcog.ai\ndependencies: [cellcog]\n---\n# UI Prototype & Wireframe - 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## How to Use\n\nFor your first CellCog task in a session, read the **cellcog** skill for the full SDK reference β file handling, chat modes, timeouts, and more.\n\n**OpenClaw (fire-and-forget):**\n```python\nresult = client.create_chat(\n prompt=\"[your task prompt]\",\n notify_session_key=\"agent:main:main\",\n task_label=\"my-task\",\n chat_mode=\"creative\",\n)\n```\n\n**All agents except OpenClaw (blocks until done):**\n```python\nfrom cellcog import CellCogClient\nclient = CellCogClient(agent_provider=\"openclaw|cursor|claude-code|codex|...\")\nresult = client.create_chat(\n prompt=\"[your task prompt]\",\n task_label=\"my-task\",\n chat_mode=\"creative\",\n)\nprint(result[\"message\"])\n```\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## Choosing Mode & Tier\n\n**Use `chat_mode=\"creative\"` for UI prototypes and wireframes** β the craft-first mode tuned for design taste, visual polish, and voice.\n\n| Scenario | Recommended |\n|----------|-------------|\n| Prototypes, wireframes, design systems | `chat_mode=\"creative\"` (default tier `\"core\"`) |\n| Maximum craft on high-stakes pieces | `chat_mode=\"creative\", chat_tier=\"max\"` |\n| Quick disposable drafts | `chat_mode=\"agent\"` (defaults to `\"flash\"`) |\n\nNote: `\"creative\"` has no `\"flash\"` tier. Agent Team (`chat_mode=\"team\"`) is reserved for deep research.\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\n---\n\n## If CellCog is not installed\n\n**Claude Code, Cursor, Codex + 70 more agents:** `npx skills add cellcog/skills --skill cellcog`\n**OpenClaw:** `openclaw skills install @cellcog/cellcog`\n**CellCog plugin users:** run `/cellcog-setup` (or `/cellcog:cellcog-setup` depending on your tool)\n**Manual setup:** `pip install -U cellcog` and set `CELLCOG_API_KEY`. See the **cellcog** skill for SDK reference.\n\nFile v1.0.16:_meta.json\n\n{\n \"ownerId\": \"kn7a96cj9q65e0bhmzahv790en80ffqm\",\n \"slug\": \"ui-prototype-wireframe-cellcog\",\n \"version\": \"1.0.16\",\n \"publishedAt\": 1787536929840\n}\n\nFile v1.0.16:skill-card.md\n\n## Description:\n\nWireframe helps agents use CellCog to generate interactive UI prototypes, wireframes, app mockups, landing pages, mobile screens, SaaS dashboards, design systems, and user flows.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[cellcog](https://clawhub.ai/user/cellcog)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers, designers, and product teams use this skill to ask an agent to create clickable HTML prototypes, wireframes, application screens, dashboards, design systems, and user flows for design iteration or stakeholder review.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Prompts and generated prototypes may be processed or hosted by CellCog, creating exposure for confidential product details or regulated data.\n\nMitigation: Use non-sensitive sample content unless CellCog's access, hosting, and retention terms satisfy the intended data handling requirements.\n\nRisk: The skill requires CELLCOG_API_KEY, so leaked or overbroad credentials could allow unintended CellCog usage.\n\nMitigation: Use a narrowly scoped API key, store it in the agent environment rather than prompts or files, and rotate it if exposure is suspected.\n\nRisk: Unpinned installation guidance can install a newer CellCog package or skill version than the one reviewed.\n\nMitigation: Prefer a pinned or reviewed CellCog release when running this skill in controlled environments.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/cellcog/skills/ui-prototype-wireframe-cellcog)\n- [CellCog homepage](https://cellcog.ai)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, configuration, guidance]\n\n**Output Format:** [Markdown guidance with Python examples and prototype output descriptions]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May produce hosted interactive HTML prototypes, static images, or PDF wireframe documentation through CellCog.]\n\n## Skill Version(s):\n\n1.0.16 (source: server 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.\n\nArchive v1.0.15: 3 files, 6548 bytes\n\nFiles: skill-card.md (2208b), SKILL.md (11304b), _meta.json (150b)\n\nFile v1.0.15:SKILL.md\n\n---\nname: ui-prototype-wireframe-cellcog\ndescription: \"AI UI prototype and wireframe generation powered by CellCog. Interactive HTML prototypes, wireframes, app mockups, landing pages, mobile screens, SaaS dashboards, design systems, user flows. From description to clickable prototype in one prompt.\"\nmetadata:\n openclaw:\n emoji: \"π\"\n os: [darwin, linux, windows]\n requires:\n bins: [python3]\n env: [CELLCOG_API_KEY]\nauthor: CellCog\nhomepage: https://cellcog.ai\ndependencies: [cellcog]\n---\n# UI Prototype & Wireframe - 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## How to Use\n\nFor your first CellCog task in a session, read the **cellcog** skill for the full SDK reference β file handling, chat modes, timeouts, and more.\n\n**OpenClaw (fire-and-forget):**\n```python\nresult = client.create_chat(\n prompt=\"[your task prompt]\",\n notify_session_key=\"agent:main:main\",\n task_label=\"my-task\",\n chat_mode=\"creative\",\n)\n```\n\n**All agents except OpenClaw (blocks until done):**\n```python\nfrom cellcog import CellCogClient\nclient = CellCogClient(agent_provider=\"openclaw|cursor|claude-code|codex|...\")\nresult = client.create_chat(\n prompt=\"[your task prompt]\",\n task_label=\"my-task\",\n chat_mode=\"creative\",\n)\nprint(result[\"message\"])\n```\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## Choosing Mode & Tier\n\n**Use `chat_mode=\"creative\"` for UI prototypes and wireframes** β the craft-first mode tuned for design taste, visual polish, and voice.\n\n| Scenario | Recommended |\n|----------|-------------|\n| Prototypes, wireframes, design systems | `chat_mode=\"creative\"` (default tier `\"core\"`) |\n| Maximum craft on high-stakes pieces | `chat_mode=\"creative\", chat_tier=\"max\"` |\n| Quick disposable drafts | `chat_mode=\"agent\"` (defaults to `\"flash\"`) |\n\nNote: `\"creative\"` has no `\"flash\"` tier. Agent Team (`chat_mode=\"team\"`) is reserved for deep research.\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\n---\n\n## If CellCog is not installed\n\n**Claude Code, Cursor, Codex + 70 more agents:** `npx skills add cellcog/skills --skill cellcog`\n**OpenClaw:** `clawhub install cellcog`\n**CellCog plugin users:** run `/cellcog-setup` (or `/cellcog:cellcog-setup` depending on your tool)\n**Manual setup:** `pip install -U cellcog` and set `CELLCOG_API_KEY`. See the **cellcog** skill for SDK reference.\n\nFile v1.0.15:_meta.json\n\n{\n \"ownerId\": \"kn7a96cj9q65e0bhmzahv790en80ffqm\",\n \"slug\": \"ui-prototype-wireframe-cellcog\",\n \"version\": \"1.0.15\",\n \"publishedAt\": 1787535997231\n}\n\nFile v1.0.15:skill-card.md\n\n## Description:\n\nWireframe helps agents use CellCog to generate interactive HTML prototypes, wireframes, app mockups, landing pages, mobile screens, SaaS dashboards, design systems, and user flows from a prompt.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[cellcog](https://clawhub.ai/user/cellcog)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers, designers, product teams, and agents use this skill to ask CellCog to create clickable UI prototypes and wireframes for landing pages, mobile apps, SaaS dashboards, design systems, and user flows.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Prompts and generated prototype content are sent to CellCog as external-service data.\n\nMitigation: Avoid including secrets, private customer data, regulated data, or unreleased internal details unless CellCog access controls, sharing settings, retention, and privacy terms have been reviewed.\n\nRisk: Hosted prototype links may be shareable outside the local machine.\n\nMitigation: Review generated links and sharing settings before distributing prototypes that contain sensitive or non-public content.\n\nRisk: The skill requires a CellCog API key.\n\nMitigation: Store CELLCOG_API_KEY in the agent environment or approved secret manager, and do not paste the key into prompts or generated prototype content.\n\n## Reference(s):\n\n- [Wireframe skill page](https://clawhub.ai/cellcog/skills/ui-prototype-wireframe-cellcog)\n- [CellCog homepage](https://cellcog.ai)\n\n## Skill Output:\n\n**Output Type(s):** [Guidance, Code, Shell commands, Configuration]\n\n**Output Format:** [Markdown guidance with Python code blocks and hosted prototype links]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [CellCog results may include interactive HTML prototypes, static images, or PDF wireframe documentation.]\n\n## Skill Version(s):\n\n1.0.15 (source: server release metadata)\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.\n\nArchive v1.0.14: 3 files, 6513 bytes\n\nFiles: skill-card.md (2224b), SKILL.md (11258b), _meta.json (150b)\n\nFile v1.0.14:SKILL.md\n\n---\nname: ui-prototype-wireframe-cellcog\ndescription: \"AI UI prototype and wireframe generation powered by CellCog. Interactive HTML prototypes, wireframes, app mockups, landing pages, mobile screens, SaaS dashboards, design systems, user flows. From description to clickable prototype in one prompt.\"\nmetadata:\n openclaw:\n emoji: \"π\"\n os: [darwin, linux, windows]\n requires:\n bins: [python3]\n env: [CELLCOG_API_KEY]\nauthor: CellCog\nhomepage: https://cellcog.ai\ndependencies: [cellcog]\n---\n# UI Prototype & Wireframe - 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## How to Use\n\nFor your first CellCog task in a session, read the **cellcog** skill for the full SDK reference β file handling, chat modes, timeouts, and more.\n\n**OpenClaw (fire-and-forget):**\n```python\nresult = client.create_chat(\n prompt=\"[your task prompt]\",\n notify_session_key=\"agent:main:main\",\n task_label=\"my-task\",\n chat_mode=\"agent\",\n)\n```\n\n**All agents except OpenClaw (blocks until done):**\n```python\nfrom cellcog import CellCogClient\nclient = CellCogClient(agent_provider=\"openclaw|cursor|claude-code|codex|...\")\nresult = client.create_chat(\n prompt=\"[your task prompt]\",\n task_label=\"my-task\",\n chat_mode=\"agent\",\n)\nprint(result[\"message\"])\n```\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\n---\n\n## If CellCog is not installed\n\n**Claude Code, Cursor, Codex + 70 more agents:** `npx skills add cellcog/skills --skill cellcog`\n**OpenClaw:** `clawhub install cellcog`\n**CellCog plugin users:** run `/cellcog-setup` (or `/cellcog:cellcog-setup` depending on your tool)\n**Manual setup:** `pip install -U cellcog` and set `CELLCOG_API_KEY`. See the **cellcog** skill for SDK reference.\n\nFile v1.0.14:_meta.json\n\n{\n \"ownerId\": \"kn7a96cj9q65e0bhmzahv790en80ffqm\",\n \"slug\": \"ui-prototype-wireframe-cellcog\",\n \"version\": \"1.0.14\",\n \"publishedAt\": 1785737214601\n}\n\nFile v1.0.14:skill-card.md\n\n## Description:
\nWireframe helps agents generate interactive UI prototypes, wireframes, app mockups, landing pages, mobile screens, SaaS dashboards, design systems, and user flows with CellCog.
\n\nThis skill is ready for commercial/non-commercial use.
\n\n## Publisher:
\n[cellcog](https://clawhub.ai/user/cellcog)
\n\n### License/Terms of Use:
\nMIT-0
\n\n\n## Use Case:
\nDevelopers, designers, and product teams use this skill to ask CellCog for clickable UI prototypes, wireframes, app screens, dashboards, design systems, and user-flow explorations from natural-language prompts.
\n\n### Deployment Geography for Use:
\nGlobal
\n\n## Known Risks and Mitigations:
\nRisk: Prototype prompts and related design context are sent to CellCog as an external AI design service.
\nMitigation: Use only when the user is comfortable providing a CELLCOG_API_KEY and avoid sending unreleased product plans, customer information, or sensitive internal business details unless approved.
\nRisk: Generated clickable prototypes can contain inaccurate flows, misleading UI states, or unsuitable sample content.
\nMitigation: Review generated prototypes before sharing, user testing, or using them for stakeholder decisions.
\n\n\n## Reference(s):
\n- [Wireframe on ClawHub](https://clawhub.ai/cellcog/skills/ui-prototype-wireframe-cellcog)
\n- [CellCog](https://cellcog.ai)
\n- [CellCog publisher profile](https://clawhub.ai/user/cellcog)
\n\n\n## Skill Output:
\n**Output Type(s):** [Code, Markdown, Guidance]
\n**Output Format:** [Markdown responses with prototype links and generated HTML/CSS/JS artifacts]
\n**Output Parameters:** [1D]
\n**Other Properties Related to Output:** [Default output is an interactive HTML prototype; static images and PDF wireframe documentation are also described as supported formats.]
\n\n## Skill Version(s):
\n1.0.14 (source: server release evidence)
\n\n## Ethical Considerations:
\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.
\n\nArchive v1.0.13: 3 files, 6518 bytes\n\nFiles: skill-card.md (2317b), SKILL.md (11183b), _meta.json (150b)\n\nFile v1.0.13:SKILL.md\n\n---\nname: ui-prototype-wireframe-cellcog\ndescription: \"AI UI prototype and wireframe generation powered by CellCog. Interactive HTML prototypes, wireframes, app mockups, landing pages, mobile screens, SaaS dashboards, design systems, user flows. From description to clickable prototype in one prompt.\"\nmetadata:\n openclaw:\n emoji: \"π\"\n os: [darwin, linux, windows]\n requires:\n bins: [python3]\n env: [CELLCOG_API_KEY]\nauthor: CellCog\nhomepage: https://cellcog.ai\ndependencies: [cellcog]\n---\n# UI Prototype & Wireframe - 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## How to Use\n\nFor your first CellCog task in a session, read the **cellcog** skill for the full SDK reference β file handling, chat modes, timeouts, and more.\n\n**OpenClaw (fire-and-forget):**\n```python\nresult = client.create_chat(\n prompt=\"[your task prompt]\",\n notify_session_key=\"agent:main:main\",\n task_label=\"my-task\",\n chat_mode=\"agent\",\n)\n```\n\n**All agents except OpenClaw (blocks until done):**\n```python\nfrom cellcog import CellCogClient\nclient = CellCogClient(agent_provider=\"openclaw|cursor|claude-code|codex|...\")\nresult = client.create_chat(\n prompt=\"[your task prompt]\",\n task_label=\"my-task\",\n chat_mode=\"agent\",\n)\nprint(result[\"message\"])\n```\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\n---\n\n## If CellCog is not installed\n\nRun `/cellcog-setup` (or `/cellcog:cellcog-setup` depending on your tool) to install and authenticate.\n**OpenClaw users:** Run `clawhub install cellcog` instead.\n**Manual setup:** `pip install -U cellcog` and set `CELLCOG_API_KEY`. See the **cellcog** skill for SDK reference.\n\nFile v1.0.13:_meta.json\n\n{\n \"ownerId\": \"kn7a96cj9q65e0bhmzahv790en80ffqm\",\n \"slug\": \"ui-prototype-wireframe-cellcog\",\n \"version\": \"1.0.13\",\n \"publishedAt\": 1785708227782\n}\n\nFile v1.0.13:skill-card.md\n\n## Description:
\nAI UI prototype and wireframe generation powered by CellCog. Interactive HTML prototypes, wireframes, app mockups, landing pages, mobile screens, SaaS dashboards, design systems, user flows. From description to clickable prototype in one prompt.
\n\nThis skill is ready for commercial/non-commercial use.
\n\n## Publisher:
\n[cellcog](https://clawhub.ai/user/cellcog)
\n\n### License/Terms of Use:
\nMIT-0
\n\n\n## Use Case:
\nDevelopers, designers, product teams, and other external users use this skill to request CellCog-generated wireframes, app mockups, landing pages, dashboards, design systems, and clickable UI prototypes from natural-language prompts.
\n\n### Deployment Geography for Use:
\nGlobal
\n\n## Known Risks and Mitigations:
\nRisk: The skill uses CellCog as an external service and requires an API key, so prototype prompts may include sensitive product or design details.
\nMitigation: Use the skill only when CellCog's account terms and data-handling expectations fit the task; avoid sensitive details unless approved.
\nRisk: Generated prototypes, copy, UI flows, or sample data may be inaccurate or unsuitable for production use without review.
\nMitigation: Review generated prototypes before sharing or implementation, especially for user-facing claims, regulated workflows, and design handoff.
\n\n\n## Reference(s):
\n- [ClawHub skill page](https://clawhub.ai/cellcog/skills/ui-prototype-wireframe-cellcog)
\n- [CellCog homepage](https://cellcog.ai)
\n\n\n## Skill Output:
\n**Output Type(s):** [guidance, code, shell commands, configuration]
\n**Output Format:** [Markdown guidance with Python code blocks and setup commands; CellCog requests may return hosted interactive HTML links, static images, or PDFs.]
\n**Output Parameters:** [1D]
\n**Other Properties Related to Output:** [Requires python3 and CELLCOG_API_KEY; depends on the CellCog integration.]
\n\n## Skill Version(s):
\n1.0.13 (source: server release evidence)
\n\n## Ethical Considerations:
\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.
\n\nArchive v1.0.12: 3 files, 6548 bytes\n\nFiles: skill-card.md (2519b), SKILL.md (11183b), _meta.json (150b)\n\nFile v1.0.12:SKILL.md\n\n---\nname: ui-prototype-wireframe-cellcog\ndescription: \"AI UI prototype and wireframe generation powered by CellCog. Interactive HTML prototypes, wireframes, app mockups, landing pages, mobile screens, SaaS dashboards, design systems, user flows. From description to clickable prototype in one prompt.\"\nmetadata:\n openclaw:\n emoji: \"π\"\n os: [darwin, linux, windows]\n requires:\n bins: [python3]\n env: [CELLCOG_API_KEY]\nauthor: CellCog\nhomepage: https://cellcog.ai\ndependencies: [cellcog]\n---\n# UI Prototype & Wireframe - 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## How to Use\n\nFor your first CellCog task in a session, read the **cellcog** skill for the full SDK reference β file handling, chat modes, timeouts, and more.\n\n**OpenClaw (fire-and-forget):**\n```python\nresult = client.create_chat(\n prompt=\"[your task prompt]\",\n notify_session_key=\"agent:main:main\",\n task_label=\"my-task\",\n chat_mode=\"agent\",\n)\n```\n\n**All agents except OpenClaw (blocks until done):**\n```python\nfrom cellcog import CellCogClient\nclient = CellCogClient(agent_provider=\"openclaw|cursor|claude-code|codex|...\")\nresult = client.create_chat(\n prompt=\"[your task prompt]\",\n task_label=\"my-task\",\n chat_mode=\"agent\",\n)\nprint(result[\"message\"])\n```\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\n---\n\n## If CellCog is not installed\n\nRun `/cellcog-setup` (or `/cellcog:cellcog-setup` depending on your tool) to install and authenticate.\n**OpenClaw users:** Run `clawhub install cellcog` instead.\n**Manual setup:** `pip install -U cellcog` and set `CELLCOG_API_KEY`. See the **cellcog** skill for SDK reference.\n\nFile v1.0.12:_meta.json\n\n{\n \"ownerId\": \"kn7a96cj9q65e0bhmzahv790en80ffqm\",\n \"slug\": \"ui-prototype-wireframe-cellcog\",\n \"version\": \"1.0.12\",\n \"publishedAt\": 1784259743380\n}\n\nFile v1.0.12:skill-card.md\n\n## Description:
\nGenerates CellCog-powered UI prototypes and wireframes, including interactive HTML prototypes, app mockups, landing pages, mobile screens, SaaS dashboards, design systems, and user flows.
\n\nThis skill is ready for commercial/non-commercial use.
\n\n## Publisher:
\n[nitishgargiitd](https://clawhub.ai/user/nitishgargiitd)
\n\n### License/Terms of Use:
\nMIT-0
\n\n\n## Use Case:
\nDevelopers, designers, and product teams use this skill to ask an agent to create clickable UI prototypes, wireframes, app mockups, landing pages, mobile screens, SaaS dashboards, design systems, and user flows with CellCog.
\n\n### Deployment Geography for Use:
\nGlobal
\n\n## Known Risks and Mitigations:
\nRisk: Prompts, uploaded assets, mock data, branding, and generated live prototype URLs may be shareable with CellCog or stakeholders.
\nMitigation: Do not include production secrets, real customer data, or confidential plans unless the service access and hosting model is acceptable for the deployment.
\nRisk: The skill depends on CELLCOG_API_KEY for CellCog access.
\nMitigation: Store CELLCOG_API_KEY as an environment secret and avoid embedding it in prompts, prototypes, repositories, or shared artifacts.
\nRisk: Generated prototypes may include shareable hosted URLs and realistic sample content.
\nMitigation: Review generated prototypes before sharing and replace sensitive or misleading content with safe mock data.
\n\n\n## Reference(s):
\n- [ClawHub skill page](https://clawhub.ai/nitishgargiitd/skills/ui-prototype-wireframe-cellcog)
\n- [Publisher profile](https://clawhub.ai/user/nitishgargiitd)
\n- [CellCog homepage](https://cellcog.ai)
\n\n\n## Skill Output:
\n**Output Type(s):** [Text, Markdown, Code, Shell commands, Configuration, Guidance]
\n**Output Format:** [Markdown guidance with Python SDK snippets; CellCog tasks may return hosted interactive HTML prototype links, static images, or PDF artifacts.]
\n**Output Parameters:** [1D]
\n**Other Properties Related to Output:** [Requires python3, the cellcog dependency, and a CELLCOG_API_KEY environment secret.]
\n\n## Skill Version(s):
\n1.0.12 (source: server release metadata)
\n\n## Ethical Considerations:
\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.
\n\nArchive v1.0.11: 3 files, 6394 bytes\n\nFiles: skill-card.md (2088b), SKILL.md (11124b), _meta.json (150b)\n\nFile v1.0.11:SKILL.md\n\n---\nname: proto-cog\ndescription: \"AI UI prototyping powered by CellCog. Interactive HTML prototypes, wireframes, app mockups, landing pages, mobile screens, SaaS dashboards, design systems, user flows. From description to clickable prototype in one prompt.\"\nmetadata:\n openclaw:\n emoji: \"π\"\n os: [darwin, linux, windows]\n requires:\n bins: [python3]\n env: [CELLCOG_API_KEY]\nauthor: CellCog\nhomepage: https://cellcog.ai\ndependencies: [cellcog]\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## How to Use\n\nFor your first CellCog task in a session, read the **cellcog** skill for the full SDK reference β file handling, chat modes, timeouts, and more.\n\n**OpenClaw (fire-and-forget):**\n```python\nresult = client.create_chat(\n prompt=\"[your task prompt]\",\n notify_session_key=\"agent:main:main\",\n task_label=\"my-task\",\n chat_mode=\"agent\",\n)\n```\n\n**All agents except OpenClaw (blocks until done):**\n```python\nfrom cellcog import CellCogClient\nclient = CellCogClient(agent_provider=\"openclaw|cursor|claude-code|codex|...\")\nresult = client.create_chat(\n prompt=\"[your task prompt]\",\n task_label=\"my-task\",\n chat_mode=\"agent\",\n)\nprint(result[\"message\"])\n```\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\n---\n\n## If CellCog is not installed\n\nRun `/cellcog-setup` (or `/cellcog:cellcog-setup` depending on your tool) to install and authenticate.\n**OpenClaw users:** Run `clawhub install cellcog` instead.\n**Manual setup:** `pip install -U cellcog` and set `CELLCOG_API_KEY`. See the **cellcog** skill for SDK reference.\n\nFile v1.0.11:_meta.json\n\n{\n \"ownerId\": \"kn7a96cj9q65e0bhmzahv790en80ffqm\",\n \"slug\": \"ui-prototype-wireframe-cellcog\",\n \"version\": \"1.0.11\",\n \"publishedAt\": 1776925160615\n}\n\nFile v1.0.11:skill-card.md\n\n## Description:
\nProto Cog helps agents create clickable UI prototypes, wireframes, app mockups, landing pages, mobile screens, dashboards, and design systems through CellCog.
\n\nThis skill is ready for commercial/non-commercial use.
\n\n## Publisher:
\n[nitishgargiitd](https://clawhub.ai/user/nitishgargiitd)
\n\n### License/Terms of Use:
\nMIT-0
\n\n\n## Use Case:
\nDevelopers, designers, and product teams use Proto Cog to turn written product or UI requirements into shareable interactive prototypes, wireframes, mockups, dashboards, design systems, static images, or PDFs.
\n\n### Deployment Geography for Use:
\nGlobal
\n\n## Known Risks and Mitigations:
\nRisk: Prototype prompts and generated UI content are sent to the external CellCog service.
\nMitigation: Avoid secrets, customer data, regulated data, realistic credentials, and internal-only product plans in prompts or generated prototypes.
\nRisk: Hosted prototype links may expose generated UI content beyond the intended audience if shared too broadly.
\nMitigation: Review hosted prototype links and generated pages before sharing them with stakeholders.
\n\n\n## Reference(s):
\n- [Proto Cog on ClawHub](https://clawhub.ai/nitishgargiitd/skills/proto-cog)
\n- [CellCog](https://cellcog.ai)
\n\n\n## Skill Output:
\n**Output Type(s):** [guidance, code, shell commands, configuration, HTML, images, PDF]
\n**Output Format:** [Markdown guidance with Python snippets; CellCog may return hosted interactive HTML, static images, or PDF outputs.]
\n**Output Parameters:** [1D]
\n**Other Properties Related to Output:** [Requires python3 and CELLCOG_API_KEY; review generated hosted prototypes before sharing.]
\n\n## Skill Version(s):
\n1.0.11 (source: server release evidence)
\n\n## Ethical Considerations:
\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.
\n\nArchive v1.0.10: 2 files, 5237 bytes\n\nFiles: SKILL.md (11059b), _meta.json (150b)\n\nFile v1.0.10:SKILL.md\n\n---\nname: proto-cog\ndescription: \"AI UI prototyping powered by CellCog. Interactive HTML prototypes, wireframes, app mockups, landing pages, mobile screens, SaaS dashboards, design systems, user flows. From description to clickable prototype in one prompt.\"\nmetadata:\n openclaw:\n emoji: \"π\"\n os: [darwin, linux, windows]\nauthor: CellCog\nhomepage: https://cellcog.ai\ndependencies: [cellcog]\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## How to Use\n\nFor your first CellCog task in a session, read the **cellcog** skill for the full SDK reference β file handling, chat modes, timeouts, and more.\n\n**OpenClaw (fire-and-forget):**\n```python\nresult = client.create_chat(\n prompt=\"[your task prompt]\",\n notify_session_key=\"agent:main:main\",\n task_label=\"my-task\",\n chat_mode=\"agent\",\n)\n```\n\n**All agents except OpenClaw (blocks until done):**\n```python\nfrom cellcog import CellCogClient\nclient = CellCogClient(agent_provider=\"openclaw|cursor|claude-code|codex|...\")\nresult = client.create_chat(\n prompt=\"[your task prompt]\",\n task_label=\"my-task\",\n chat_mode=\"agent\",\n)\nprint(result[\"message\"])\n```\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\n---\n\n## If CellCog is not installed\n\nRun `/cellcog-setup` (or `/cellcog:cellcog-setup` depending on your tool) to install and authenticate.\n**OpenClaw users:** Run `clawhub install cellcog` instead.\n**Manual setup:** `pip install -U cellcog` and set `CELLCOG_API_KEY`. See the **cellcog** skill for SDK reference.\n\nFile v1.0.10:_meta.json\n\n{\n \"ownerId\": \"kn7a96cj9q65e0bhmzahv790en80ffqm\",\n \"slug\": \"ui-prototype-wireframe-cellcog\",\n \"version\": \"1.0.10\",\n \"publishedAt\": 1776187978404\n}\n\nArchive v1.0.9: 2 files, 5200 bytes\n\nFiles: SKILL.md (11096b), _meta.json (149b)\n\nFile v1.0.9: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 os: [darwin, linux, windows]\nauthor: CellCog\nhomepage: https://cellcog.ai\ndependencies: [cellcog]\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## How to Use\n\nFor your first CellCog task in a session, read the **cellcog** skill for the full SDK reference β file handling, chat modes, timeouts, and more.\n\n**OpenClaw (fire-and-forget):**\n```python\nresult = client.create_chat(\n prompt=\"[your task prompt]\",\n notify_session_key=\"agent:main:main\",\n task_label=\"my-task\",\n chat_mode=\"agent\",\n)\n```\n\n**Cursor / Claude Code / Other agents (blocks until done):**\n```python\nfrom cellcog import CellCogClient\nclient = CellCogClient(agent_provider=\"openclaw|cursor|claude-code|codex|...\")\nresult = client.create_chat(\n prompt=\"[your task prompt]\",\n task_label=\"my-task\",\n chat_mode=\"agent\",\n)\nprint(result[\"message\"])\n```\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\n---\n\n## If CellCog is not installed\n\n**Cursor:** Run `/cellcog-setup` to install and authenticate.\n**OpenClaw:** Run `clawhub install cellcog` for SDK setup.\n**Other agents:** `pip install -U cellcog` and set `CELLCOG_API_KEY`. See the **cellcog** skill for SDK reference.\n\nFile v1.0.9:_meta.json\n\n{\n \"ownerId\": \"kn7a96cj9q65e0bhmzahv790en80ffqm\",\n \"slug\": \"ui-prototype-wireframe-cellcog\",\n \"version\": \"1.0.9\",\n \"publishedAt\": 1776042084831\n}\n\nArchive v1.0.8: 2 files, 5162 bytes\n\nFiles: SKILL.md (10889b), _meta.json (149b)\n\nFile v1.0.8:SKILL.md\n\n---\nname: proto-cog\ndescription: \"Powered by CellCog. UI prototypes and mockups. Interactive HTML prototypes, wireframes, and app mockups. Landing pages, mobile screens, SaaS dashboards, and user flows β clickable and functional.\"\nmetadata:\n openclaw:\n emoji: \"π\"\n os: [darwin, linux, windows]\nauthor: CellCog\nhomepage: https://cellcog.ai\ndependencies: [cellcog]\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## How to Use\n\nFor your first CellCog task in a session, read the **cellcog** skill for the full SDK reference β file handling, chat modes, timeouts, and more.\n\n**OpenClaw (fire-and-forget):**\n```python\nresult = client.create_chat(\n prompt=\"[your task prompt]\",\n notify_session_key=\"agent:main:main\",\n task_label=\"my-task\",\n chat_mode=\"agent\",\n)\n```\n\n**Cursor / Claude Code / Other agents (blocks until done):**\n```python\nresult = client.create_chat(\n prompt=\"[your task prompt]\",\n task_label=\"my-task\",\n chat_mode=\"agent\",\n)\nprint(result[\"message\"])\n```\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\n---\n\n## If CellCog is not installed\n\n**Cursor:** Run `/cellcog-setup` to install and authenticate.\n**OpenClaw:** Run `clawhub install cellcog` for SDK setup.\n**Other agents:** `pip install -U cellcog` and set `CELLCOG_API_KEY`. See the **cellcog** skill for SDK reference.\n\nFile v1.0.8:_meta.json\n\n{\n \"ownerId\": \"kn7a96cj9q65e0bhmzahv790en80ffqm\",\n \"slug\": \"ui-prototype-wireframe-cellcog\",\n \"version\": \"1.0.8\",\n \"publishedAt\": 1776036964064\n}\n\nArchive v1.0.7: 2 files, 5091 bytes\n\nFiles: SKILL.md (10934b), _meta.json (149b)\n\nFile v1.0.7: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 os: [darwin, linux, windows]\nauthor: CellCog\nhomepage: https://cellcog.ai\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**OpenClaw agents (fire-and-forget β recommended for long tasks):**\n```python\nresult = client.create_chat(\n prompt=\"[your task prompt]\",\n notify_session_key=\"agent:main:main\", # OpenClaw only\n task_label=\"my-task\",\n chat_mode=\"agent\", # See cellcog skill for all modes\n)\n```\n\n**All other agents (blocks until done):**\n```python\nresult = client.create_chat(\n prompt=\"[your task prompt]\",\n task_label=\"my-task\",\n chat_mode=\"agent\",\n)\n```\n\nSee the **cellcog** mothership skill for complete SDK API reference β delivery modes, timeouts, file handling, and more.\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.7:_meta.json\n\n{\n \"ownerId\": \"kn7a96cj9q65e0bhmzahv790en80ffqm\",\n \"slug\": \"ui-prototype-wireframe-cellcog\",\n \"version\": \"1.0.7\",\n \"publishedAt\": 1775627916179\n}","readmeExcerpt":"Skill: Wireframe Owner: cellcog Summary: AI UI prototype and wireframe generation powered by CellCog. Interactive HTML prototypes, wireframes, app mockups, landing pages, mobile screens, SaaS dashboards, design systems, user flows. From description to clickable prototype in one prompt. Tags: latest:1.0.16 Version history: v1.0.16 | 2026-08-24T02:02:09.840Z | user Content updated. v1.0.15 | 2026-08-24T01:46:37.231Z | ","codeSnippets":[],"executableExamples":[{"language":"python","snippet":"result = client.create_chat(\n prompt=\"[your task prompt]\",\n notify_session_key=\"agent:main:main\",\n task_label=\"my-task\",\n chat_mode=\"creative\",\n)"},{"language":"python","snippet":"from cellcog import CellCogClient\nclient = CellCogClient(agent_provider=\"openclaw|cursor|claude-code|codex|...\")\nresult = client.create_chat(\n prompt=\"[your task prompt]\",\n task_label=\"my-task\",\n chat_mode=\"creative\",\n)\nprint(result[\"message\"])"},{"language":"python","snippet":"result = client.create_chat(\n prompt=\"[your task prompt]\",\n notify_session_key=\"agent:main:main\",\n task_label=\"my-task\",\n chat_mode=\"creative\",\n)"},{"language":"python","snippet":"from cellcog import CellCogClient\nclient = CellCogClient(agent_provider=\"openclaw|cursor|claude-code|codex|...\")\nresult = client.create_chat(\n prompt=\"[your task prompt]\",\n task_label=\"my-task\",\n chat_mode=\"creative\",\n)\nprint(result[\"message\"])"},{"language":"python","snippet":"result = client.create_chat(\n prompt=\"[your task prompt]\",\n notify_session_key=\"agent:main:main\",\n task_label=\"my-task\",\n chat_mode=\"agent\",\n)"},{"language":"python","snippet":"from cellcog import CellCogClient\nclient = CellCogClient(agent_provider=\"openclaw|cursor|claude-code|codex|...\")\nresult = client.create_chat(\n prompt=\"[your task prompt]\",\n task_label=\"my-task\",\n chat_mode=\"agent\",\n)\nprint(result[\"message\"])"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: ui-prototype-wireframe-cellcog\ndescription: \"AI UI prototype and wireframe generation powered by CellCog. Interactive HTML prototypes, wireframes, app mockups, landing pages, mobile screens, SaaS dashboards, design systems, user flows. From description to clickable prototype in one prompt.\"\nmetadata:\n openclaw:\n emoji: \"π\"\n os: [darwin, linux, windows]\n requires:\n bins: [python3]\n env: [CELLCOG_API_KEY]\nauthor: CellCog\nhomepage: https://cellcog.ai\ndependencies: [cellcog]\n---\n# UI Prototype & Wireframe - 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## How to Use\n\nFor your first CellCog task in a session, read the **cellcog** skill for the full SDK reference β file handling, chat modes, timeouts, and more.\n\n**OpenClaw (fire-and-forget):**\n```python\nresult = client.create_chat(\n prompt=\"[your task prompt]\",\n notify_session_key=\"agent:main:main\",\n task_label=\"my-task\",\n chat_mode=\"creative\",\n)\n```\n\n**All agents except OpenClaw (blocks until done):**\n```python\nfrom cellcog import CellCogClient\nclient = CellCogClient(agent_provider=\"openclaw|cursor|claude-code|codex|...\")\nresult = client.create_chat(\n prompt=\"[your task prompt]\",\n task_label=\"my-task\",\n chat_mode=\"creative\",\n)\nprint(result[\"message\"])\n```\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 productivit"},{"path":"_meta.json","content":"{\n \"ownerId\": \"kn7a96cj9q65e0bhmzahv790en80ffqm\",\n \"slug\": \"ui-prototype-wireframe-cellcog\",\n \"version\": \"1.0.16\",\n \"publishedAt\": 1787536929840\n}"},{"path":"skill-card.md","content":"## Description:\n\nWireframe helps agents use CellCog to generate interactive UI prototypes, wireframes, app mockups, landing pages, mobile screens, SaaS dashboards, design systems, and user flows.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[cellcog](https://clawhub.ai/user/cellcog)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers, designers, and product teams use this skill to ask an agent to create clickable HTML prototypes, wireframes, application screens, dashboards, design systems, and user flows for design iteration or stakeholder review.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Prompts and generated prototypes may be processed or hosted by CellCog, creating exposure for confidential product details or regulated data.\n\nMitigation: Use non-sensitive sample content unless CellCog's access, hosting, and retention terms satisfy the intended data handling requirements.\n\nRisk: The skill requires CELLCOG_API_KEY, so leaked or overbroad credentials could allow unintended CellCog usage.\n\nMitigation: Use a narrowly scoped API key, store it in the agent environment rather than prompts or files, and rotate it if exposure is suspected.\n\nRisk: Unpinned installation guidance can install a newer CellCog package or skill version than the one reviewed.\n\nMitigation: Prefer a pinned or reviewed CellCog release when running this skill in controlled environments.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/cellcog/skills/ui-prototype-wireframe-cellcog)\n- [CellCog homepage](https://cellcog.ai)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, configuration, guidance]\n\n**Output Format:** [Markdown guidance with Python examples and prototype output descriptions]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May produce hosted interactive HTML prototypes, static images, or PDF wireframe documentation through CellCog.]\n\n## Skill Version(s):\n\n1.0.16 (source: server 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":"AI UI prototype and wireframe generation powered by CellCog. Interactive HTML prototypes, wireframes, app mockups, landing pages, mobile screens, SaaS dashboards, design systems, user flows. From description to clickable prototype in one prompt. Skill: Wireframe Owner: cellcog Summary: AI UI prototype and wireframe generation powered by CellCog. Interactive HTML prototypes, wireframes, app mockups, landing pages, mobile screens, SaaS dashboards, design systems, user flows. From description to clickable prototype in one prompt. Tags: latest:1.0.16 Version history: v1.0.16 | 2026-08-24T02:02:09.840Z | user Content updated. v1.0.15 | 2026-08-24T01:46:37.231Z |","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":1201,"uniquenessScore":51,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-09T06:05:41.810Z","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-09T06:05:41.810Z","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-09T12:52:26.608Z","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"}]}}}