Design With
Mistral Vibe in
OpenDesign.

storefront-product.html · 1440px

4Review Before Handoff

1. 1

   Download the OpenDesign Desktop App

   Choose the package for your computer, install it and open the app.

   Download OpenDesign

   CHECKPOINT

   The desktop app opens. Already installed? Move to the next step; there is no need to download again.
2. 2

   Prepare Your Mistral Vibe Connection

   Follow the Mistral Vibe instructions in your installed version. Authenticate with your Mistral API key (BYOK) or local models — credentials stay on your machine.

   mistral-vibe README and setup (GitHub)

   # 1. Install Mistral Vibe CLI
   uv tool install mistral-vibe
   # or: pip install mistral-vibe
   
   # 2. Run the setup wizard to register your API key
   vibe --setup     # saves config to ~/.vibe/config.toml and ~/.vibe/.env
   #    or set it directly:  export MISTRAL_API_KEY=...

   From the Mistral Vibe setup notes in the published guide; check the vendor documentation for the current command.

   CHECKPOINT

   Confirm the intended agent and account. If it is unavailable, check compatibility before trying a larger task.
3. 3

   Run One Small Mistral Vibe Task

   Use a small brief so you can judge the whole loop, including one revision.

   Starter brief Copy

   Build a settings screen with a profile form and a save confirmation. Use my design rules. Check it at desktop and mobile widths.

   CHECKPOINT

   Open the result, test the save state and request one specific change. A generated file is the beginning of review, not the end.

To run OpenDesign from source, follow the technical quickstart instead.

1. 1

   Design Brief

   Plain language, three to six lines. Name the audience, the job of the screen and the platforms.

   • YouWrite the brief; attach a reference screenshot if you have one.
   • Mistral VibeReads the brief and the project’s instruction file; asks when something is ambiguous.
   • OpenDesignProvides the project, the prompt surface and the skill for the artifact type.
   • CheckConfirm the brief states the acceptance criteria. Adding them now is cheaper than after generation.

   New project · PromptMistral Vibe

   You

   Design the plate product page: photo, price, glaze and quantity, add to cart, three related pieces. Local model only.

   Mistral Vibe

   Understood. Running on the local Devstral model. Should the set discount appear as a second price line or as a note under quantity?
2. 2

   Design Constraints

   A design system and a few hard rules. This is what separates on-brand output from a generic look.

   • YouPick a design system; state breakpoints and any must-use components.
   • Mistral VibeLoads the DESIGN.md tokens and posture rules into context before writing a line.
   • OpenDesignShips the design-system library and binds the chosen one into the skill template.
   • CheckThe tokens match your brand. One accent, the right fonts, the right radius.

   DESIGN.md · OpenDesignbound

   background #fafafa foreground #262626 border #d9d9d9 accent #63fe13 display Albert Sans 800 radius 8px · pills 999px
3. 3

   Generate the Interface

   Mistral Vibe writes a self-contained HTML file: layout, styles, interactions and stable hooks.

   • YouWait, or answer a clarifying question. Nothing to configure.
   • Mistral VibePlans the sections, writes the HTML, CSS and JavaScript, runs the file and fixes what fails.
   • OpenDesignSaves the artifact into the project folder and indexes it for preview.
   • CheckNothing yet. Judge the file after it is rendered, not from the source.

   Project files3 files

   • storefront-product.htmlnew
   • config.tomlbound
   • DESIGN.mdread
4. 4

   Preview

   The file renders inside OpenDesign at the widths you asked for. This is where the design is judged.

   • YouSwitch widths, click through the interactions, leave comments on elements.
   • Mistral VibeReads your comments on the preview and prepares the next revision.
   • OpenDesignRenders the preview, exposes data-od-id targets for comments and edits.
   • CheckHierarchy, contrast, overflow at 390px, focus states, and whether the accent is used sparingly.

   Preview · 390pxComment mode

   Comment on · price

   Set discount as a small line under the price, not a second price.

   Comment on · photo

   Keep 4:5; do not crop the rim on the phone.
5. 5

   Revise and Verify

   Request changes by pointing at elements in the preview. Every revision is a new file; nothing is overwritten silently.

   • YouTurn comments into requests; decide when the task is done.
   • Mistral VibeApplies the changes in place and re-runs the file.
   • OpenDesignKeeps versions side by side; exports an image or the HTML when you are done.
   • CheckRe-check only the area that changed, then the whole page once at each breakpoint.

   Verification · v23 of 4

   • ✓Discount as a note under price
   • ✓Photo ratio held at 390px
   • ✓No horizontal scroll at 390px
   • Quantity control — checked by you