proto-cogBuild 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.
Install via ClawdBot CLI:
clawdbot install nitishgargiitd/proto-cogBuild 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.
This skill requires the cellcog skill for SDK setup and API calls.
clawhub install cellcogRead the cellcog skill first for SDK setup. This skill shows you what's possible.
Quick pattern (v1.0+):
# Fire-and-forget - returns immediately
result = client.create_chat(
prompt="[your prototype request]",
notify_session_key="agent:main:main",
task_label="prototype-task",
chat_mode="agent" # Agent mode for most prototypes
)
# Daemon notifies you when complete - do NOT pollStatic 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.
Validate your messaging and design:
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."
Design full app experiences:
Example prompt:
"Prototype a mobile food delivery app (phone-sized viewport):
Screens:
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."
Prototype complex business tools:
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."
Build reusable design foundations:
Quick structural explorations:
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 |
| 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.
| Scenario | Recommended Mode |
|----------|------------------|
| Individual pages, single components, wireframes | "agent" |
| 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.
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."
Generated Feb 24, 2026
Create an interactive landing page prototype for a new SaaS product like an AI writing assistant or productivity app. Validate messaging, design, and user flow with stakeholders by sharing a live URL, enabling real-time feedback on hero sections, features, pricing, and CTAs without relying on static mockups.
Prototype a multi-screen onboarding experience for a mobile app, such as a meditation or fitness tracker. Build clickable screens with smooth transitions to test user navigation and engagement, ensuring the flow is intuitive before development begins.
Develop an interactive SaaS dashboard prototype for marketing analytics, featuring real chart interactions, filters, and data visualizations. This allows teams to explore and refine complex business tools, ensuring usability and functionality meet stakeholder needs.
Design a complete e-commerce prototype for a fashion or food delivery app, including screens for browsing, product details, cart, and checkout. Enable clickable navigation and transitions to simulate the user journey, helping identify friction points early in the design phase.
Build an interactive design system prototype with reusable components like buttons, modals, and navigation patterns. Create a style guide for typography and colors, allowing designers and developers to test and standardize UI elements across projects efficiently.
Offer prototyping as a service for SaaS companies to validate product designs before launch. Charge monthly or per-project fees for creating interactive dashboards and landing pages, reducing development costs and improving user adoption.
Provide prototyping services to design and development agencies for client projects. Use the skill to quickly deliver clickable wireframes and mockups, enhancing client presentations and speeding up approval cycles for mobile apps and websites.
Freelancers can leverage the skill to offer rapid prototyping for startups and small businesses. Create interactive prototypes for landing pages or app screens, charging per prototype to help clients visualize and iterate on ideas without full-scale development.
💬 Integration Tip
Install the cellcog dependency first and use the fire-and-forget pattern with agent mode; avoid polling by relying on daemon notifications for completion.
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
Build scalable, themable Tailwind CSS component libraries using CVA for variants, compound components, design tokens, dark mode, and responsive grids.
Create award-winning, memorable websites with advanced animations, creative interactions, and distinctive visual experiences. Use this skill when building sites that need to be exceptional—portfolio sites, agency showcases, product launches, or any project where "wow factor" matters.
Professional Figma design analysis and asset export. Use for extracting design data, exporting assets in multiple formats, auditing accessibility compliance, analyzing design systems, and generating comprehensive design documentation. Read-only analysis of Figma files with powerful export and reporting capabilities.
Searchable UI/UX design databases: 50+ styles, 97 palettes, 57 font pairings, 99 UX rules, 25 chart types. CLI generates design systems from natural language. Data-driven complement to ui-design.
Create logos, interfaces, and visual systems with principles of hierarchy, branding, and usability.