Update to CellCog

{
  "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.",
  "included_files": [],
  "name": "ui-prototype-wireframe-cellcog",
  "skill_md_contents": "---\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.\"\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\nUse the CellCog tools from this plugin's connector (`https://cellcog.ai/mcp`). The first time a tool runs, the user signs in with their CellCog account and clicks Approve.\n\n1. `cellcog_chat_create` with the brief as `prompt` (optionally `chat_mode` and `chat_tier`). It returns a chat id at once; the work runs in the background.\n2. Poll `cellcog_get_result` with that `chat_id` about once a minute. While it runs you get progress notes; when `complete` is true you get the final message and file links (valid 30 days), with previews of images and PDF pages.\n3. To iterate, `cellcog_chat_send` into the same chat. For files on the user's computer, open `cellcog_upload` and pass `upload:<upload_id>` in `attachments`; public https links can go in `attachments` directly.\n\nFor files, modes and tiers in depth, read the **cellcog** skill.\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\", chat_tier=\"flash\"` |\n\nNote: 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"
}