> ## Documentation Index > Fetch the complete documentation index at: https://www.magicpatterns.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # What is a Design > A design is one chat and one live, interactive preview that you build by prompting. A design is the basic unit of Magic Patterns. You describe a screen or flow in the chat, and the AI builds it as a working preview you can click through. Every follow-up prompt edits the same design and saves a new version you can go back to. Under the hood, every design is a small website. It can have as many pages as you need, each with its own route like `/settings`, and the code behind it is real front-end code you can read, download, or sync to GitHub. ## Start a design On your [dashboard](https://www.magicpatterns.com/dashboard), click **Create** and choose **Design**, then pick a starting point: * **Prompt**: describe the screen or flow you want. Attaching a screenshot helps a lot, since the models are good at recreating designs from images. See [How to Prompt](/docs/documentation/editor/how-to-prompt). * **Template**: start from a design your team saved as a [template](/docs/documentation/editor/templates), like your core dashboard or settings page. * **Import**: bring in a frame [from Figma](/docs/documentation/importing/import-from-figma), or [connect a GitHub repo](/docs/documentation/importing/connect-github) so the agent builds with your real components. * **Design system**: pick a [design system](/docs/documentation/design-systems/overview) and your first version already uses your colors, fonts, and components. ## Explore directions Try a few options before you commit to one. * **`/Inspiration`**: generates four variations of your design to compare. * **[Controls](/docs/documentation/editor/controls)**: compare intentional variants and tune options in Preview without asking the agent to regenerate. * **[Forking](/docs/documentation/editor/forking)**: copy the design to try a different direction without losing the original. ## Refine Once a direction is right, shape it in whichever way suits the change. * **Chat**: prompt for changes in your own words. Type `/` for chat modes like `/Ask` and skills like `/Polish`. * **Select Mode and Visual Edit**: click any element in Preview to point the AI at it, or edit its text, colors, and spacing yourself. See [How to Prompt](/docs/documentation/editor/how-to-prompt#select-mode-and-visual-edit). * **[Plan Mode](/docs/documentation/editor/plan-mode)**: for bigger changes, agree on a plan with the agent before it writes any code. * **[Multiple pages](/docs/documentation/get-started/adding-pages)**: add routes by asking for them, then use the Screens tab to see every page side by side. * **[Inline comments](/docs/documentation/collaboration/inline-comments)**: leave feedback on specific elements for teammates or for the agent. If a change goes wrong, open version history, preview an older version, and restore it. ## Ship When the design is ready, take it where it needs to go. * **[Share](/docs/documentation/editor/sharing)** it with teammates and stakeholders. * **[Publish](/docs/documentation/publishing/publish-url)** it to a live URL, or host it on a [custom domain](/docs/documentation/get-started/custom-domain). * **[Export](/docs/documentation/exporting/overview)** the code, or hand it to Cursor or Claude Code with the [Integration Skill](/docs/documentation/exporting/integration-skill) so it gets adapted to your codebase. ## Scale Save what you've built so the next design starts further along. Publish a design you like as a [template](/docs/documentation/editor/templates) your team can fork from. Set up a [design system](/docs/documentation/design-systems/overview) so new designs come out on brand, and [convert older designs](/docs/documentation/design-systems/using/converting-design-systems) to it when your brand changes. ## Designs and MagicOS A design works on its own, or as one file on a [MagicOS](/docs/documentation/magic-os/overview) canvas next to other designs, documents, and repos. Start with a single design when it's one page or a quick prototype. Use MagicOS when the work spans many screens and keeps producing more to do. See [When to use MagicOS](/docs/documentation/magic-os/when-to-use-magicos). ## Next step Generate your first design from a prompt, no design experience needed. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.