Design Mode
Design Mode transforms Vyre Agent into a visual UI developer. Attach screenshots, Figma exports, or rough sketches — Agent builds the implementation directly from your visual reference.
Design Mode is currently in beta. It works best with React + Tailwind CSS projects. Support for Vue, Svelte, and additional styling systems is actively in development.
How it works
When you enter Design Mode (Cmd+Shift+D), the chat input expands to show an image attachment zone. Agent uses a vision-capable model to analyze your visual input and translates it directly into code.
The process:
- Attach an image (screenshot, Figma frame, mockup, or sketch).
- Add optional text instructions ("make the button primary color", "use our design system tokens").
- Agent identifies the components, layout, spacing, colors, and typography from the image.
- Agent generates the code using your existing codebase's design patterns and component library.
- A live preview renders in the right panel as Agent writes the code.
Supported frameworks
React + Tailwind CSS
Full support. Agent uses your tailwind.config.js to match your design tokens exactly.
React + CSS Modules
Full support. Agent generates scoped CSS that matches the component structure.
Vue 3 + Tailwind
Beta support. Agent generates SFC files with the correct script setup and template syntax.
Next.js App Router
Full support. Agent correctly places server vs client components and uses App Router conventions.
Working with Figma
The most precise workflow is to use Figma exports:
- In Figma, select a frame and use File → Export with "Copy link to selection."
- In Vyre, paste the Figma link into the Design Mode input. Vyre reads the Figma file directly (requires Figma API token in Settings).
- Agent sees exact pixel values, font sizes, color tokens, and component names from your Figma design.
Setting up Figma integration
- Go to Settings → Integrations → Figma.
- Click "Connect Figma" and sign in with your Figma account.
- Vyre will request read access to your team files.
- Once connected, paste any Figma frame URL into Design Mode.
Matching your existing design system
If your Figma design uses design system components, Agent will try to match them to your codebase's existing components. Add a comment in the design mode input like "use our <Button> component from @/components/ui" to steer Agent toward reuse over duplication.
Best practices
- Use screenshots of real UIs you want to replicate — Agent is excellent at reversing engineering existing products.
- Be specific about responsive behavior — "this layout stacks vertically on mobile below 768px."
- Reference your design tokens — "use our
--color-primaryCSS variable, not a hardcoded hex." - Start with a single component — Don't ask Agent to build an entire page from one screenshot. Break it into components.
The most powerful Design Mode prompt combines an image with a text description: "Implement this component [image]. Use our existing <Card> component, our Tailwind config, and match the spacing exactly."