# Design directly in the real product ## Short narrative The real product is the design surface. Mode should make the shift from detached mockups to product-native UI work feel obvious, exciting, and credible. ## Why this wedge matters Question it answers: > What is the big launch shift Mode wants people to believe? Narrative: > Mode makes the existing product the place where design work happens. A Design Engineer starts from the real screen, real components, and real constraints instead of translating a mockup back into the product later. This protects us from the bad interpretation: > "Is Mode just trying to replace Figma or make a prettier mockup tool?" The stronger story is: > Mode is for product-native design work: change the actual product surface with code, component, and design-system context intact, then move the change toward review. ## How it supports the launch spine This is the top-level category frame for the spine: > Mode lets Design Engineers change the actual product — using its real code, components, and design system — then move the work toward a PR or engineering review. For launch, this should stay one of the primary wedges because it explains the main market shift in one sentence. Pair it with a concrete first action so it does not stay abstract. ## Strategic bet The market will respond to the idea that product design is moving closer to the shipped interface. This wedge should differentiate Mode from Figma/handoff tools, generic AI app builders, and general coding agents by making the actual product the starting point. ## Why Mode is suited Mode can start from real product/code/component context and move a scoped UI change toward reviewable output. That lets the narrative be about changing the product that exists, not generating a new surface beside it. ## Product entry / CTA path Ask users to start from a real product screen or route and make one scoped UI change. ## Proof needed Show a real existing product surface, one visible change, component/context continuity, and an inspectable output path. Use `reviewable output` unless a real branch/diff/PR is shown. ## Launch-spine relevance This is the broadest category-making wedge. The current launch spine can use it as the main worldview while borrowing proof language from production-aware AI, engineering review, and one-real-UI-issue activation. ## Risks / confusions - Too broad if not paired with a concrete first action. - Could be heard as `replace Figma` or `designers bypass engineers`; keep engineering review in the path. - Needs proof quickly or it becomes abstract category language.