feat: design mode initial docs

Author: devvaannsh

docs/02z-design-mode.md

@@ -0,0 +1,48 @@
+---
+title: Design Mode
+---
+
+**Design Mode** is a layout that hides the code editor and gives the entire window to your **Live Preview**. It is built for visual-first work: chatting with the AI while you watch changes land in the preview, editing your page directly in Live Preview Edit Mode, or testing how your design looks at different device sizes.
+
+<!-- Add a video here showing the toggle going from the normal layout into Design Mode and back. The editor should disappear, the Live Preview should take over the editor area, and the sidebar should stay visible. -->
+
+## Why use Design Mode
+
+- **Pair with the AI Chat panel.** Ask the AI to make a change and watch it land in the preview as the code changes, without glancing at the editor.
+- **Edit visually with Live Preview Edit Mode.** Click elements, drag them, change text, and swap images directly in the page (Pro feature).
+- **Test responsive designs.** With Device Preview (Pro), check how your page looks on phone, tablet, and desktop sizes without losing horizontal space to the editor.
+
+## Entering Design Mode
+
+There are two ways to enter Design Mode:
+
+- Click the **Design Mode** button *(pen icon)* near the top of the **Control Bar**, the narrow vertical strip between the sidebar and the editor.
+- Click the **fullscreen** button *(expand icon)* in the Live Preview toolbar, right after the reload button.
+
+Both buttons toggle the same mode. Click either one again to exit.
+
+<!-- Add an image here showing both entry points side by side: the Control Bar Design Mode button (pen icon) and the Live Preview toolbar fullscreen button (expand icon), each with an arrow pointing to it. -->
+
+## The Design Mode layout
+
+In Design Mode the code editor is hidden and the Live Preview takes over its space. The sidebar (file tree) and the Control Bar stay visible, and the AI Chat panel keeps its position if it is open.
+
+If the Live Preview was not already open when you entered Design Mode, Phoenix Code opens it for you.
+
+<!-- Add a side-by-side image here comparing the normal layout (sidebar | editor | live preview) with the Design Mode layout (sidebar | live preview filling the rest of the window). -->
+
+### Hiding the sidebar
+
+To go even more focused, click the **toggle sidebar** button *(double left-arrow icon)* just below the Design Mode toggle in the Control Bar to hide the sidebar. Click it again to bring the sidebar back.
+
+## Working with the AI Chat panel
+
+Design Mode is the recommended way to work with [AI Chat](./Pro%20Features/ai-chat). The AI Chat panel keeps its position when you enter Design Mode, so you can chat on one side and watch the maximized preview update on the other as the AI works.
+
+<!-- Add a video here showing the AI Chat panel and a maximized Live Preview side by side, with the user typing a request and the change appearing in the preview as the AI runs. -->
+
+## Working with Live Preview Edit Mode
+
+[Live Preview Edit Mode](./Pro%20Features/edit-mode-live-preview) is an independent toggle, but it pairs naturally with Design Mode. Enter Design Mode for the room, then click the pen icon in the Live Preview toolbar to enable Edit Mode and start clicking, dragging, and editing elements directly in the page.
+
+> Live Preview Edit Mode is a Pro feature. Design Mode itself is free.