{ "schemaVersion": "1.0", "item": { "slug": "proto-cog", "name": "proto-cog", "source": "tencent", "type": "skill", "category": "开发工具", "sourceUrl": "https://clawhub.ai/nitishgargiitd/proto-cog", "canonicalUrl": "https://clawhub.ai/nitishgargiitd/proto-cog", "targetPlatform": "OpenClaw" }, "install": { "downloadMode": "redirect", "downloadUrl": "/downloads/proto-cog", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=proto-cog", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "installMethod": "Manual import", "extraction": "Extract archive", "prerequisites": [ "OpenClaw" ], "packageFormat": "ZIP package", "includedAssets": [ "SKILL.md" ], "primaryDoc": "SKILL.md", "quickSetup": [ "Download the package from Yavira.", "Extract the archive and review SKILL.md first.", "Import or place the package into your OpenClaw setup." ], "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "Download the package from Yavira.", "Extract it into a folder your agent can access.", "Paste one of the prompts below and point your agent at the extracted folder." ], "prompts": [ { "label": "New install", "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete." }, { "label": "Upgrade existing", "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run." } ] }, "sourceHealth": { "source": "tencent", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-05-07T17:22:31.273Z", "expiresAt": "2026-05-14T17:22:31.273Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-annual-report", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-annual-report", "contentDisposition": "attachment; filename=\"afrexai-annual-report-1.0.0.zip\"", "redirectLocation": null, "bodySnippet": null }, "scope": "source", "summary": "Source download looks usable.", "detail": "Yavira can redirect you to the upstream package for this source.", "primaryActionLabel": "Download for OpenClaw", "primaryActionHref": "/downloads/proto-cog" }, "validation": { "installChecklist": [ "Use the Yavira download entry.", "Review SKILL.md after the package is downloaded.", "Confirm the extracted package contains the expected setup assets." ], "postInstallChecks": [ "Confirm the extracted package includes the expected docs or setup files.", "Validate the skill or prompts are available in your target agent workspace.", "Capture any manual follow-up steps the agent could not complete." ] }, "downloadPageUrl": "https://openagent3.xyz/downloads/proto-cog", "agentPageUrl": "https://openagent3.xyz/skills/proto-cog/agent", "manifestUrl": "https://openagent3.xyz/skills/proto-cog/agent.json", "briefUrl": "https://openagent3.xyz/skills/proto-cog/agent.md" }, "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "Download the package from Yavira.", "Extract it into a folder your agent can access.", "Paste one of the prompts below and point your agent at the extracted folder." ], "prompts": [ { "label": "New install", "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete." }, { "label": "Upgrade existing", "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run." } ] }, "documentation": { "source": "clawhub", "primaryDoc": "SKILL.md", "sections": [ { "title": "Proto Cog - Build Prototypes You Can Click", "body": "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." }, { "title": "Prerequisites", "body": "This skill requires the cellcog skill for SDK setup and API calls.\n\nclawhub install cellcog\n\nRead the cellcog skill first for SDK setup. This skill shows you what's possible.\n\nQuick pattern (v1.0+):\n\n# Fire-and-forget - returns immediately\nresult = client.create_chat(\n prompt=\"[your prototype request]\",\n notify_session_key=\"agent:main:main\",\n task_label=\"prototype-task\",\n chat_mode=\"agent\" # Agent mode for most prototypes\n)\n# Daemon notifies you when complete - do NOT poll" }, { "title": "Why Interactive Prototypes Matter", "body": "Static mockups create a fundamental gap: stakeholders see pictures, not experiences. The difference matters:\n\nStatic MockupInteractive 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\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." }, { "title": "Landing Pages", "body": "Validate your messaging and design:\n\nSaaS Landing Pages: \"Create a landing page for an AI writing assistant — hero, features, pricing, testimonials, CTA\"\nProduct Launch Pages: \"Build a launch page for a new fitness app with countdown and email signup\"\nEvent Pages: \"Create a conference landing page with schedule, speakers, and registration\"\nPortfolio Sites: \"Build a personal portfolio landing page for a UX designer\"\n\nExample prompt:\n\n\"Create an interactive landing page prototype for 'FlowState' — a productivity app for developers:\nSections:\n\nHero: 'Code in the zone. Stay in the zone.' with app screenshot and CTA\nProblem: Distractions kill developer flow (statistics)\nSolution: How FlowState blocks distractions intelligently\nFeatures: 3-4 key features with icons\nPricing: Free, Pro ($12/mo), Team ($8/user/mo)\nTestimonials: 3 developer quotes\nFinal CTA\n\nStyle: Dark theme, developer-friendly, monospace accents\nMake all buttons and navigation interactive.\"" }, { "title": "Mobile App Screens", "body": "Design full app experiences:\n\nOnboarding Flows: \"Create a 5-screen onboarding flow for a meditation app\"\nCore Features: \"Prototype the main dashboard and navigation for a fitness tracking app\"\nE-commerce: \"Build a product browse → detail → cart → checkout flow for a fashion app\"\nSocial Features: \"Prototype a profile page, feed, and messaging interface\"\n\nExample prompt:\n\n\"Prototype a mobile food delivery app (phone-sized viewport):\nScreens:\n\nHome — restaurant grid with search and category filters\nRestaurant — menu with items, ratings, delivery time\nItem detail — customization options, add to cart\nCart — order summary, delivery address, payment\nOrder tracking — live status with map placeholder\n\nMake navigation between screens work with smooth transitions.\nStyle: Clean, modern, Uber Eats / DoorDash inspired.\"" }, { "title": "SaaS Dashboards", "body": "Prototype complex business tools:\n\nAnalytics Dashboards: \"Create a marketing analytics dashboard with real chart interactions\"\nAdmin Panels: \"Build a user management panel with tables, filters, and modals\"\nCRM Interfaces: \"Prototype a sales pipeline view with drag-and-drop kanban board\"\nSettings Pages: \"Create a comprehensive settings page with tabs, forms, and toggles\"\n\nExample prompt:\n\n\"Prototype a SaaS project management dashboard:\nLeft sidebar: Navigation (Projects, Tasks, Team, Reports, Settings)\nMain area:\n\nOverview: KPI cards (tasks completed, overdue, in progress)\nKanban board: Columns for To Do, In Progress, Review, Done\nTask cards with assignee avatars, priority tags, due dates\n\nInteractions:\n\nSidebar navigation switches views\nClicking a task card opens a detail modal\nFilter dropdown for project/team member\n\nStyle: Clean, professional, Notion/Linear inspired.\"" }, { "title": "Design Systems & Components", "body": "Build reusable design foundations:\n\nComponent Libraries: \"Create a UI component library: buttons, inputs, cards, modals, navigation\"\nStyle Guides: \"Build an interactive style guide showing typography, colors, spacing, and components\"\nForm Patterns: \"Prototype common form patterns: login, signup, multi-step wizard, settings\"\nNavigation Patterns: \"Create examples of sidebar nav, top nav, bottom tab bar, and hamburger menu\"" }, { "title": "Wireframes", "body": "Quick structural explorations:\n\nLow-Fidelity Wireframes: \"Create grayscale wireframes for a blog platform — home, article, author pages\"\nUser Flows: \"Wireframe the complete signup → onboarding → first action flow for a project management tool\"\nLayout Explorations: \"Show 3 different layout approaches for a real estate listing page\"\nInformation Architecture: \"Wireframe the navigation structure for an e-learning platform with courses, lessons, and progress tracking\"" }, { "title": "Prototype Features", "body": "CellCog prototypes can include:\n\nFeatureDescriptionNavigationWorking links, page transitions, tab switchingInteractionsHover states, click actions, toggles, accordionsFormsInput fields, validation states, dropdowns, checkboxesModals & OverlaysPopup dialogs, slide-out panels, tooltipsResponsive DesignAdapts to desktop, tablet, and mobile viewportsAnimationsSmooth transitions, loading states, micro-interactionsData DisplayCharts, tables, cards with realistic sample dataDark/Light ThemesTheme switching support" }, { "title": "Output Formats", "body": "FormatBest ForInteractive HTML (Default)Clickable prototypes hosted on live URL — share with anyoneStatic ImagesScreenshots for documentation or comparisonPDFWireframe documentation for handoff\n\nInteractive HTML is the default. That's the whole point — prototypes you can click." }, { "title": "Chat Mode for Prototyping", "body": "ScenarioRecommended ModeIndividual pages, single components, wireframes\"agent\"Full app prototypes with multiple interconnected screens, design systems\"agent team\"\n\nUse \"agent\" for most prototypes. Landing pages, individual app screens, and component designs execute well in agent mode.\n\nUse \"agent team\" for full application prototypes — multi-screen apps where navigation, state, and user flows need to work together cohesively." }, { "title": "Example Prompts", "body": "SaaS landing page:\n\n\"Create a landing page for 'CodeReview.ai' — an AI code review tool:\nHero: 'Ship better code. Ship it faster.' with demo video placeholder\nSocial proof: 'Trusted by 500+ engineering teams'\nFeatures: AI-powered reviews, integration with GitHub/GitLab, security scanning\nPricing: Starter (free), Pro ($29/mo), Enterprise (custom)\nDark theme, developer-focused, green accent color.\nAll navigation and CTAs should be interactive.\"\n\nMobile app prototype:\n\n\"Prototype a habit tracking app (mobile viewport):\nTab bar: Today, Habits, Stats, Profile\nToday screen: List of today's habits with checkboxes, streak counts, and progress ring\nHabits screen: All habits with edit/delete, add new habit button\nStats screen: Charts showing completion rates, longest streaks, weekly/monthly view\nProfile screen: Settings, notification preferences, export data\nTab navigation should work. Checking habits should animate.\nStyle: Minimal, calming, inspired by Streaks app.\"\n\nDesign system:\n\n\"Build an interactive design system for a fintech startup:\nColors: Primary (deep blue), secondary (teal), accent (amber), semantic (success/warning/error)\nTypography: Scale from h1 to body to caption with clear hierarchy\nComponents:\n\nButtons (primary, secondary, ghost, destructive — each with hover/active/disabled states)\nInput fields (default, focused, error, disabled)\nCards (simple, interactive, stat card)\nTable with sortable headers\nModal dialog\nToast notifications\n\nShow each component with interactive states. Professional, banking-grade aesthetic.\"\n\nWireframe exploration:\n\n\"Create 3 different layout approaches for an AI chatbot interface:\nOption A: Full-page chat (like ChatGPT)\nOption B: Side panel chat with main content area\nOption C: Floating chat widget\nEach should include: message input, conversation history, suggested prompts, and settings access.\nGrayscale wireframes, focused on layout and information hierarchy.\"" }, { "title": "Tips for Better Prototypes", "body": "Describe the interactions: \"Button opens a modal\" or \"Tabs switch content\" — tell CellCog what should happen, not just what should appear.\n\n\nReference existing products: \"Like Notion's sidebar\" or \"Stripe's pricing page\" communicates more than paragraphs of description.\n\n\nSpecify viewport: \"Mobile phone viewport\" vs \"Full desktop\" changes the entire design approach.\n\n\nInclude realistic content: Real text, real numbers, real labels — not \"Lorem ipsum\". Prototypes with real content get better feedback.\n\n\nState the purpose: \"For user testing\", \"For investor demo\", \"For developer handoff\" — context shapes fidelity level.\n\n\nThink in flows, not pages: \"Signup → Onboarding → Dashboard\" is more useful than 3 disconnected page requests." } ], "body": "Proto Cog - Build Prototypes You Can Click\n\nBuild 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\nPrerequisites\n\nThis skill requires the cellcog skill for SDK setup and API calls.\n\nclawhub install cellcog\n\n\nRead the cellcog skill first for SDK setup. This skill shows you what's possible.\n\nQuick pattern (v1.0+):\n\n# Fire-and-forget - returns immediately\nresult = client.create_chat(\n prompt=\"[your prototype request]\",\n notify_session_key=\"agent:main:main\",\n task_label=\"prototype-task\",\n chat_mode=\"agent\" # Agent mode for most prototypes\n)\n# Daemon notifies you when complete - do NOT poll\n\nWhy Interactive Prototypes Matter\n\nStatic mockups create a fundamental gap: stakeholders see pictures, not experiences. The difference matters:\n\nStatic Mockup\tInteractive Prototype\n\"Imagine clicking this button\"\tClick the button, see what happens\n\"This would scroll to...\"\tScroll and see the content load\n\"The hover state looks like...\"\tHover and watch the animation\n\"Trust me, the flow makes sense\"\tWalk 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\nWhat You Can Prototype\nLanding Pages\n\nValidate your messaging and design:\n\nSaaS Landing Pages: \"Create a landing page for an AI writing assistant — hero, features, pricing, testimonials, CTA\"\nProduct Launch Pages: \"Build a launch page for a new fitness app with countdown and email signup\"\nEvent Pages: \"Create a conference landing page with schedule, speakers, and registration\"\nPortfolio Sites: \"Build a personal portfolio landing page for a UX designer\"\n\nExample prompt:\n\n\"Create an interactive landing page prototype for 'FlowState' — a productivity app for developers:\n\nSections:\n\nHero: 'Code in the zone. Stay in the zone.' with app screenshot and CTA\nProblem: Distractions kill developer flow (statistics)\nSolution: How FlowState blocks distractions intelligently\nFeatures: 3-4 key features with icons\nPricing: Free, Pro ($12/mo), Team ($8/user/mo)\nTestimonials: 3 developer quotes\nFinal CTA\n\nStyle: Dark theme, developer-friendly, monospace accents Make all buttons and navigation interactive.\"\n\nMobile App Screens\n\nDesign full app experiences:\n\nOnboarding Flows: \"Create a 5-screen onboarding flow for a meditation app\"\nCore Features: \"Prototype the main dashboard and navigation for a fitness tracking app\"\nE-commerce: \"Build a product browse → detail → cart → checkout flow for a fashion app\"\nSocial Features: \"Prototype a profile page, feed, and messaging interface\"\n\nExample prompt:\n\n\"Prototype a mobile food delivery app (phone-sized viewport):\n\nScreens:\n\nHome — restaurant grid with search and category filters\nRestaurant — menu with items, ratings, delivery time\nItem detail — customization options, add to cart\nCart — order summary, delivery address, payment\nOrder tracking — live status with map placeholder\n\nMake navigation between screens work with smooth transitions. Style: Clean, modern, Uber Eats / DoorDash inspired.\"\n\nSaaS Dashboards\n\nPrototype complex business tools:\n\nAnalytics Dashboards: \"Create a marketing analytics dashboard with real chart interactions\"\nAdmin Panels: \"Build a user management panel with tables, filters, and modals\"\nCRM Interfaces: \"Prototype a sales pipeline view with drag-and-drop kanban board\"\nSettings Pages: \"Create a comprehensive settings page with tabs, forms, and toggles\"\n\nExample prompt:\n\n\"Prototype a SaaS project management dashboard:\n\nLeft sidebar: Navigation (Projects, Tasks, Team, Reports, Settings) Main area:\n\nOverview: KPI cards (tasks completed, overdue, in progress)\nKanban board: Columns for To Do, In Progress, Review, Done\nTask cards with assignee avatars, priority tags, due dates\n\nInteractions:\n\nSidebar navigation switches views\nClicking a task card opens a detail modal\nFilter dropdown for project/team member\n\nStyle: Clean, professional, Notion/Linear inspired.\"\n\nDesign Systems & Components\n\nBuild reusable design foundations:\n\nComponent Libraries: \"Create a UI component library: buttons, inputs, cards, modals, navigation\"\nStyle Guides: \"Build an interactive style guide showing typography, colors, spacing, and components\"\nForm Patterns: \"Prototype common form patterns: login, signup, multi-step wizard, settings\"\nNavigation Patterns: \"Create examples of sidebar nav, top nav, bottom tab bar, and hamburger menu\"\nWireframes\n\nQuick structural explorations:\n\nLow-Fidelity Wireframes: \"Create grayscale wireframes for a blog platform — home, article, author pages\"\nUser Flows: \"Wireframe the complete signup → onboarding → first action flow for a project management tool\"\nLayout Explorations: \"Show 3 different layout approaches for a real estate listing page\"\nInformation Architecture: \"Wireframe the navigation structure for an e-learning platform with courses, lessons, and progress tracking\"\nPrototype Features\n\nCellCog prototypes can include:\n\nFeature\tDescription\nNavigation\tWorking links, page transitions, tab switching\nInteractions\tHover states, click actions, toggles, accordions\nForms\tInput fields, validation states, dropdowns, checkboxes\nModals & Overlays\tPopup dialogs, slide-out panels, tooltips\nResponsive Design\tAdapts to desktop, tablet, and mobile viewports\nAnimations\tSmooth transitions, loading states, micro-interactions\nData Display\tCharts, tables, cards with realistic sample data\nDark/Light Themes\tTheme switching support\nOutput Formats\nFormat\tBest For\nInteractive HTML (Default)\tClickable prototypes hosted on live URL — share with anyone\nStatic Images\tScreenshots for documentation or comparison\nPDF\tWireframe documentation for handoff\n\nInteractive HTML is the default. That's the whole point — prototypes you can click.\n\nChat Mode for Prototyping\nScenario\tRecommended Mode\nIndividual pages, single components, wireframes\t\"agent\"\nFull app prototypes with multiple interconnected screens, design systems\t\"agent team\"\n\nUse \"agent\" for most prototypes. Landing pages, individual app screens, and component designs execute well in agent mode.\n\nUse \"agent team\" for full application prototypes — multi-screen apps where navigation, state, and user flows need to work together cohesively.\n\nExample Prompts\n\nSaaS landing page:\n\n\"Create a landing page for 'CodeReview.ai' — an AI code review tool:\n\nHero: '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)\n\nDark theme, developer-focused, green accent color. All navigation and CTAs should be interactive.\"\n\nMobile app prototype:\n\n\"Prototype a habit tracking app (mobile viewport):\n\nTab bar: Today, Habits, Stats, Profile\n\nToday 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\n\nTab navigation should work. Checking habits should animate. Style: Minimal, calming, inspired by Streaks app.\"\n\nDesign system:\n\n\"Build an interactive design system for a fintech startup:\n\nColors: Primary (deep blue), secondary (teal), accent (amber), semantic (success/warning/error) Typography: Scale from h1 to body to caption with clear hierarchy Components:\n\nButtons (primary, secondary, ghost, destructive — each with hover/active/disabled states)\nInput fields (default, focused, error, disabled)\nCards (simple, interactive, stat card)\nTable with sortable headers\nModal dialog\nToast notifications\n\nShow each component with interactive states. Professional, banking-grade aesthetic.\"\n\nWireframe exploration:\n\n\"Create 3 different layout approaches for an AI chatbot interface:\n\nOption A: Full-page chat (like ChatGPT) Option B: Side panel chat with main content area Option C: Floating chat widget\n\nEach should include: message input, conversation history, suggested prompts, and settings access. Grayscale wireframes, focused on layout and information hierarchy.\"\n\nTips for Better Prototypes\n\nDescribe the interactions: \"Button opens a modal\" or \"Tabs switch content\" — tell CellCog what should happen, not just what should appear.\n\nReference existing products: \"Like Notion's sidebar\" or \"Stripe's pricing page\" communicates more than paragraphs of description.\n\nSpecify viewport: \"Mobile phone viewport\" vs \"Full desktop\" changes the entire design approach.\n\nInclude realistic content: Real text, real numbers, real labels — not \"Lorem ipsum\". Prototypes with real content get better feedback.\n\nState the purpose: \"For user testing\", \"For investor demo\", \"For developer handoff\" — context shapes fidelity level.\n\nThink in flows, not pages: \"Signup → Onboarding → Dashboard\" is more useful than 3 disconnected page requests." }, "trust": { "sourceLabel": "tencent", "provenanceUrl": "https://clawhub.ai/nitishgargiitd/proto-cog", "publisherUrl": "https://clawhub.ai/nitishgargiitd/proto-cog", "owner": "nitishgargiitd", "version": "1.0.1", "license": null, "verificationStatus": "Indexed source record" }, "links": { "detailUrl": "https://openagent3.xyz/skills/proto-cog", "downloadUrl": "https://openagent3.xyz/downloads/proto-cog", "agentUrl": "https://openagent3.xyz/skills/proto-cog/agent", "manifestUrl": "https://openagent3.xyz/skills/proto-cog/agent.json", "briefUrl": "https://openagent3.xyz/skills/proto-cog/agent.md" } }