## *Mode* Mode is an AI visual canvas for product designers, design engineers, and code-adjacent product teams working against real product UI, codebase, components, and design-system context. This page gives a quick 360 of the company: what Mode is, who it is for, how the product works, how it is positioned, what it helps teams do, and how it compares to alternatives. The page is built from live note embeds plus generated publish-safe Markdown table snapshots sourced from Obsidian Base data. Domain (Pending Rebrand/Relaunch): https://modeinspect.com New website (WIP): https://go.modeinspect.com/wip ## What Mode is ![[company/GTM/3. launch-spine/items/00-current-working-spine#Current working spine]] ![[company/Product/product-overview#Product definition]] ![[company/Product/product-overview#Core promise]] ## Who Mode is for ![[company/Product/product-overview#Primary users]] ## How we explain Mode ![[company/GTM/2. wedges/README#Launch focus hierarchy]] ## Core positioning <!-- Generated publish-safe snapshot from Obsidian Base data. Edit source notes/properties, then rerun scripts/generate-publish-base-tables.py. --> Source base: `[[company/GTM/3. launch-spine/launch-spine.base]]` | Rank | Title | Public line | Short hook | Status | Type | | --- | --- | --- | --- | --- | --- | | 0 | [[00-current-working-spine|Current working spine]] | Mode lets Design Engineers snapshot a product screen, design on an ai visual canvas, share the result as a live prototype, and create a merge-ready PR for engineering review. | Design in code. Snapshot. Design. Share. PR. | draft | primary_launch_candidate | | 1 | [[01-visual-canvas-connected-to-real-product|Visual canvas connected to the real product]] | Mode gives Design Engineers a visual canvas connected to the real product, so they can design like they would in Figma, share live prototypes that use real product code, and turn proposed changes into PRs for engineering review. | A design canvas connected to the real product. | draft | primary_launch_candidate | | 2 | [[02-live-preview-to-reviewable-pr|Live product preview to reviewable PR]] | Mode gives Design Engineers a canvas connected to the real product, where visual design becomes a live product preview and proposed changes can move into a PR for engineering review. | Visual design becomes a live product preview. | draft | primary_launch_candidate | | 3 | [[03-portal-maps-design-to-live-product|Portal maps design to the live product]] | Mode gives Design Engineers a Figma-like canvas connected to the live product, so they can design visually, map changes through Portal, and send proposed product changes to engineers as a reviewable PR. | Design visually, map through Portal, send for review. | draft | product_literal_candidate | | 4 | [[04-review-ready-product-changes|Review-ready product changes]] | Mode lets Design Engineers design on a canvas connected to the real product, then turn the work into live previews and review-ready product changes for engineering. | From canvas to review-ready product changes. | draft | lower_risk_public_candidate | | 5 | [[05-design-canvas-for-the-real-product|Design canvas for the real product]] | Mode is the design canvas for the real product: visual like Figma, connected to the codebase, and built to move proposed changes into engineering review. | The design canvas for the real product. | draft | category_style_candidate | ## Market angles <!-- Generated publish-safe snapshot from Obsidian Base data. Edit source notes/properties, then rerun scripts/generate-publish-base-tables.py. --> Source base: `[[company/GTM/2. wedges/wedges.base]]` | Rank | Title | Focus | Stage | Role | Status | Public phrasing | | --- | --- | --- | --- | --- | --- | --- | | 1 | [[01-design-directly-in-the-real-product|Design directly in the real product]] | primary_launch | 01_top_of_funnel_category | Category wedge — main narrative hook | active_launch | The real product is the design surface. | | 2 | [[02-production-aware-ai-for-existing-products|Production-aware AI for existing products]] | primary_launch | 02_positioning_contrast | Comparison wedge — anti-app-builder guardrail | active_launch | Useful AI UI starts from the product you already have. | | 3 | [[03-fix-one-real-product-ui-issue|Fix one real product UI issue]] | activation_cta | 04_activation_cta | Activation wedge — first product action, not the opening hook | active_launch | Bring one real product UI issue and move it toward reviewable output. | | 4 | [[04-designers-propose-engineers-review|Designers propose, engineers review]] | primary_launch | 03_trust_workflow | Trust wedge — serious-team adoption boundary | active_launch | Designers can propose production-aware UI changes while engineers stay in the review path. | | 5 | [[05-design-qa-without-the-screenshot-ticket-loop|Design QA without the screenshot-ticket loop]] | supporting_launch | 05_supporting_proof_pain | Pain wedge — concrete proof/use-case angle under the activation wedge | supporting_launch | Design QA should not die in screenshots, tickets, and another backlog cycle. | | 6 | [[06-prototype-in-the-product-not-beside-it|Prototype in the product, not beside it]] | future_candidate | 06_future_adjacent | Future / adjacent wedge — use carefully after the core product-change story is understood | future_candidate | Explore the change inside the product context, not in a fake product beside it. | | 7 | [[07-design-system-context-as-the-constraint-layer|Design-system context as the constraint layer]] | supporting_only | trust_layer_underneath | Trust layer — credibility mechanism supporting multiple wedges, not primary market-entry story | supporting_only | Your design system should be the prompt — but only if the proof shows the constraint. | ## What Mode helps teams do <!-- Generated publish-safe snapshot from Obsidian Base data. Edit source notes/properties, then rerun scripts/generate-publish-base-tables.py. --> Source base: `[[company/Product/use-cases/use-cases.base]]` | Rank | Use case | Headline | Summary | Primary user | Outcome | | --- | --- | --- | --- | --- | --- | | 1 | [[live-prototyping|Live Prototyping]] | Prototypes that feel like the product. | Real data, dynamic states, breakpoints, and interactions. Stop pitching with mockups — pitch with the thing. | Product designers, Design engineers, Product teams | Share product-like prototypes that stakeholders can understand, test, and react to earlier. | | 2 | [[design-qa|Design QA]] | Design QA, in one loop. | Compare canvas to live build pixel-by-pixel. Spot drift, fix it, keep moving. No round-trips through Figma. | Product designers, Design leads, Design engineers | Catch and fix visual drift faster while keeping design QA close to the product surface. | | 3 | [[ship-prs|Ship PRs]] | Ship features straight from the canvas. | Push minor visual changes or new components as merge-ready PRs — with context, screenshots, and a clean diff. | Design engineers, Product designers, Frontend engineers | Move useful design work from the canvas into reviewable engineering artifacts without losing context. | ## Main competitors and alternatives <!-- Generated publish-safe snapshot from Obsidian Base data. Edit source notes/properties, then rerun scripts/generate-publish-base-tables.py. --> Source base: `[[company/Competitors/competitors.base]]` | Name | Web | Status | Lane | Target user | Mode comparison | | --- | --- | --- | --- | --- | --- | | [[aidesigner|AIDesigner]] | | watchlist | adjacent_substitute | AI UI design and MCP handoff users | functional_prototype_vs_real_product | | [[builder-io-fusion-visual-copilot|Builder.io Fusion / Visual Copilot]] | [https://www.builder.io/fusion](https://www.builder.io/fusion) | active | workflow_competitor | Web, product, marketing, and visual-development teams | existing_product_fidelity | | [[codux|Codux]] | [https://www.codux.com/](https://www.codux.com/) | watchlist | workflow_competitor | React teams doing component-level visual editing side-by-side with code | visual_code_with_guardrails | | [[frontman|Frontman]] | [https://frontman.sh/](https://frontman.sh/) | active | workflow_competitor | Frontend developers and product teams editing live product UI through browser/DOM context | existing_product_fidelity | | [[magic-patterns|Magic Patterns]] | [https://www.magicpatterns.com/](https://www.magicpatterns.com/) | active | workflow_competitor | Product teams and designers creating AI UI/component prototypes with design-system import and GitHub sync | visual_code_with_guardrails | | [[mowgli|Mowgli]] | | watchlist | adjacent_substitute | AI design canvas users | polished_prototype | | [[noon|Noon]] | [https://noon.design/](https://noon.design/) | active | workflow_competitor | Product designers who want to design visuals, interactions, and logic directly on product code | visual_code_with_guardrails | | [[onlook|Onlook]] | [https://www.onlook.com](https://www.onlook.com) | active | workflow_competitor | Designers, product managers, and design engineers building web UIs in real codebases | open-source visual AI code editor for closing the design-to-code gap | | [[paper|Paper]] | [https://paper.design/](https://paper.design/) | active | workflow_competitor | AI-native designers and teams using code-native canvases with agents | visual_code_with_guardrails | | [[pencil|Pencil]] | [https://pencil.dev/](https://pencil.dev/) | watchlist | workflow_competitor | AI-native designers/builders using design canvas plus code-agent workflows | code_adapts_to_designers | | [[plasmic|Plasmic]] | [https://www.plasmic.app/](https://www.plasmic.app/) | active | adjacent_substitute | Teams wanting visual building for React/codebase-backed websites and apps | existing_product_fidelity | | [[polymet|Polymet]] | [https://www.polymet.ai/](https://www.polymet.ai/) | active | workflow_competitor | Product teams using AI for product design and frontend code output | existing_product_fidelity | | [[puck|Puck]] | [https://puckeditor.com/](https://puckeditor.com/) | active | workflow_competitor | Teams embedding/customizing React visual editing with their own components and design system | visual_code_with_guardrails | | [[subframe|Subframe]] | [https://www.subframe.com/](https://www.subframe.com/) | active | workflow_competitor | Designers, design engineers, and product teams building React/Tailwind interfaces | visual_code_with_guardrails | | [[tempo|Tempo]] | [https://www.tempo.new/](https://www.tempo.new/) | active | workflow_competitor | Product/web builders, designers, and developers working around frontend code | visual_code_with_guardrails | | [[uxpin-merge-uxpin-forge|UXPin Merge / UXPin Forge]] | [https://www.uxpin.com/](https://www.uxpin.com/) | active | workflow_competitor | Design-system teams that want design with real coded React components | visual_code_with_guardrails | | [[windframe|Windframe]] | [https://windframe.dev/](https://windframe.dev/) | watchlist | adjacent_substitute | Developers and designers building Tailwind websites/UIs visually with AI | visual_code_with_guardrails | | [[wonder|Wonder]] | [https://wonder.design/](https://wonder.design/) | active | workflow_competitor | AI-native designers and product teams iterating on canvas with code context and React/Tailwind output | visual_code_with_guardrails | ## Product capabilities and limits ![[company/Product/product-capabilities-and-limits]]