Proto Cog - Build Prototypes You Can Click

Build prototypes you can click. UI/UX wireframes, app mockups, and fully interactive HTML prototypes — from napkin sketch to clickable experience in one prompt.

Every 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.

How to Use

For your first CellCog task in a session, read the cellcog skill for the full SDK reference — file handling, chat modes, timeouts, and more.

OpenClaw (fire-and-forget):
CODEBLOCK0

All agents except OpenClaw (blocks until done):

from cellcog import CellCogClient
client = CellCogClient(agent_provider="openclaw|cursor|claude-code|codex|...")
result = client.create_chat(
    prompt="[your task prompt]",
    task_label="my-task",
    chat_mode="agent",
)
print(result["message"])

---

Why Interactive Prototypes Matter

Static mockups create a fundamental gap: stakeholders see pictures, not experiences. The difference matters:

Static Mockup	Interactive Prototype
"Imagine clicking this button"	Click the button, see what happens
"This would scroll to..."

Scroll and see the content load |
| "The hover state looks like..." | Hover and watch the animation |
| "Trust me, the flow makes sense" | Walk through the flow yourself |

CellCog 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.

---

What You Can Prototype

Landing Pages

Validate your messaging and design:

• - SaaS Landing Pages: "Create a landing page for an AI writing assistant — hero, features, pricing, testimonials, CTA"
• Product Launch Pages: "Build a launch page for a new fitness app with countdown and email signup"
• Event Pages: "Create a conference landing page with schedule, speakers, and registration"
• Portfolio Sites: "Build a personal portfolio landing page for a UX designer"

Example prompt:

"Create an interactive landing page prototype for 'FlowState' — a productivity app for developers:

Sections:

• - Hero: 'Code in the zone. Stay in the zone.' with app screenshot and CTA
• Problem: Distractions kill developer flow (statistics)
• Solution: How FlowState blocks distractions intelligently
• Features: 3-4 key features with icons
• Pricing: Free, Pro ($12/mo), Team ($8/user/mo)
• Testimonials: 3 developer quotes
• Final CTA

Style: Dark theme, developer-friendly, monospace accents

Make all buttons and navigation interactive."

Mobile App Screens

Design full app experiences:

• - Onboarding Flows: "Create a 5-screen onboarding flow for a meditation app"
• Core Features: "Prototype the main dashboard and navigation for a fitness tracking app"
• E-commerce: "Build a product browse → detail → cart → checkout flow for a fashion app"
• Social Features: "Prototype a profile page, feed, and messaging interface"

Example prompt:

"Prototype a mobile food delivery app (phone-sized viewport):

Screens:

1. 1. Home — restaurant grid with search and category filters
2. Restaurant — menu with items, ratings, delivery time
3. Item detail — customization options, add to cart
4. Cart — order summary, delivery address, payment
5. Order tracking — live status with map placeholder

Make navigation between screens work with smooth transitions.

Style: Clean, modern, Uber Eats / DoorDash inspired."

SaaS Dashboards

Prototype complex business tools:

• - Analytics Dashboards: "Create a marketing analytics dashboard with real chart interactions"
• Admin Panels: "Build a user management panel with tables, filters, and modals"
• CRM Interfaces: "Prototype a sales pipeline view with drag-and-drop kanban board"
• Settings Pages: "Create a comprehensive settings page with tabs, forms, and toggles"

Example prompt:

"Prototype a SaaS project management dashboard:

Left sidebar: Navigation (Projects, Tasks, Team, Reports, Settings)

Main area:

• - Overview: KPI cards (tasks completed, overdue, in progress)
• Kanban board: Columns for To Do, In Progress, Review, Done
• Task cards with assignee avatars, priority tags, due dates

Interactions:

• - Sidebar navigation switches views
• Clicking a task card opens a detail modal
• Filter dropdown for project/team member

Style: Clean, professional, Notion/Linear inspired."

Design Systems & Components

Build reusable design foundations:

• - Component Libraries: "Create a UI component library: buttons, inputs, cards, modals, navigation"
• Style Guides: "Build an interactive style guide showing typography, colors, spacing, and components"
• Form Patterns: "Prototype common form patterns: login, signup, multi-step wizard, settings"
• Navigation Patterns: "Create examples of sidebar nav, top nav, bottom tab bar, and hamburger menu"

Wireframes

Quick structural explorations:

• - Low-Fidelity Wireframes: "Create grayscale wireframes for a blog platform — home, article, author pages"
• User Flows: "Wireframe the complete signup → onboarding → first action flow for a project management tool"
• Layout Explorations: "Show 3 different layout approaches for a real estate listing page"
• Information Architecture: "Wireframe the navigation structure for an e-learning platform with courses, lessons, and progress tracking"

---

Prototype Features

CellCog prototypes can include:

Feature	Description
Navigation	Working links, page transitions, tab switching
Interactions

Hover states, click actions, toggles, accordions |
| Forms | Input fields, validation states, dropdowns, checkboxes |
| Modals & Overlays | Popup dialogs, slide-out panels, tooltips |
| Responsive Design | Adapts to desktop, tablet, and mobile viewports |
| Animations | Smooth transitions, loading states, micro-interactions |
| Data Display | Charts, tables, cards with realistic sample data |
| Dark/Light Themes | Theme switching support |

---

Output Formats

Format	Best For
Interactive HTML (Default)	Clickable prototypes hosted on live URL — share with anyone
Static Images

Screenshots for documentation or comparison |
| PDF | Wireframe documentation for handoff |

Interactive HTML is the default. That's the whole point — prototypes you can click.

---

Chat Mode for Prototyping

Scenario	Recommended Mode
Individual pages, single components, wireframes	INLINECODE0
Full app prototypes with multiple interconnected screens, design systems

"agent team" |

Use "agent" for most prototypes. Landing pages, individual app screens, and component designs execute well in agent mode.

Use "agent team" for full application prototypes — multi-screen apps where navigation, state, and user flows need to work together cohesively.

---

Example Prompts

SaaS landing page:

"Create a landing page for 'CodeReview.ai' — an AI code review tool:

Hero: 'Ship better code. Ship it faster.' with demo video placeholder

Social proof: 'Trusted by 500+ engineering teams'

Features: AI-powered reviews, integration with GitHub/GitLab, security scanning

Pricing: Starter (free), Pro ($29/mo), Enterprise (custom)

Dark theme, developer-focused, green accent color.

All navigation and CTAs should be interactive."

Mobile app prototype:

"Prototype a habit tracking app (mobile viewport):

Tab bar: Today, Habits, Stats, Profile

Today screen: List of today's habits with checkboxes, streak counts, and progress ring

Habits screen: All habits with edit/delete, add new habit button

Stats screen: Charts showing completion rates, longest streaks, weekly/monthly view

Profile screen: Settings, notification preferences, export data

Tab navigation should work. Checking habits should animate.

Style: Minimal, calming, inspired by Streaks app."

Design system:

"Build an interactive design system for a fintech startup:

Colors: Primary (deep blue), secondary (teal), accent (amber), semantic (success/warning/error)

Typography: Scale from h1 to body to caption with clear hierarchy

Components:

• - Buttons (primary, secondary, ghost, destructive — each with hover/active/disabled states)
• Input fields (default, focused, error, disabled)
• Cards (simple, interactive, stat card)
• Table with sortable headers
• Modal dialog
• Toast notifications

Show each component with interactive states. Professional, banking-grade aesthetic."

Wireframe exploration:

"Create 3 different layout approaches for an AI chatbot interface:

Option A: Full-page chat (like ChatGPT)

Option B: Side panel chat with main content area

Option C: Floating chat widget

Each should include: message input, conversation history, suggested prompts, and settings access.

Grayscale wireframes, focused on layout and information hierarchy."

---

Tips for Better Prototypes

1. 1. Describe the interactions: "Button opens a modal" or "Tabs switch content" — tell CellCog what should happen, not just what should appear.

1. 2. Reference existing products: "Like Notion's sidebar" or "Stripe's pricing page" communicates more than paragraphs of description.

1. 3. Specify viewport: "Mobile phone viewport" vs "Full desktop" changes the entire design approach.

1. 4. Include realistic content: Real text, real numbers, real labels — not "Lorem ipsum". Prototypes with real content get better feedback.

1. 5. State the purpose: "For user testing", "For investor demo", "For developer handoff" — context shapes fidelity level.

1. 6. Think in flows, not pages: "Signup → Onboarding → Dashboard" is more useful than 3 disconnected page requests.

---

If CellCog is not installed

Run /cellcog-setup (or /cellcog:cellcog-setup depending on your tool) to install and authenticate.
OpenClaw users: Run clawhub install cellcog instead.
Manual setup: pip install -U cellcog and set CELLCOG_API_KEY. See the cellcog skill for SDK reference.