DocsQuick Start

Quick Start

Welcome to Genius UI! This guide will walk you through the core features and workflow to create your first interactive UI prototype.

Get Started

Visit genius-ui.design and sign in to begin creating prototypes.

Step 1: Describe Your Idea

Start by describing what you want to build using natural language. Genius UI supports multiple input methods:

Text Prompts

Simply describe your UI in plain English. Be specific about the layout, functionality, and style you want.

Try these example prompts:

  • “Create a stylish apparel store landing page with seasonal collection showcase, featured products, and quick shop section”
  • “Design a modern login form with Google, Github, and email authentication options, including form validation and responsive layout”
  • “A social media management dashboard showing analytics, scheduled posts and engagement metrics across platforms”
  • “Create a minimalist cake shop mobile app interface with clean product cards, simple navigation, and a streamlined ordering process”

Image to UI

Upload a screenshot, design mockup, or reference image. Genius UI will analyze the visual elements and recreate them as an interactive prototype.

Wireframes

Upload low-fidelity wireframes or sketches. Genius UI transforms them into polished, high-fidelity prototypes with proper styling and interactivity.

Step 2: Choose Your Platform

Before generating, select your target platform:

Desktop – Full-width layouts optimized for desktop screens

Mobile – Responsive mobile interfaces with touch-friendly elements

You can switch between platforms at any time to see how your design adapts.

Step 3: Customize Your Design

Genius UI offers powerful customization options to match your brand and design system. Click the settings icon in the input box to configure:

Theme Settings

Mode

  • Light – Bright backgrounds with dark text
  • Dark – Dark backgrounds with light text
  • Auto – Automatically adapts based on user preferences

Primary Color – Set your brand’s main color for buttons, links, and accents

Font Family – Choose from popular web fonts or use system fonts

Border Radius – Control the roundness of corners (sharp, moderate, or fully rounded)

Component Library

Icon Library – Select icon style:

  • Tabler Icons (default)
  • Heroicons
  • Lucide
  • Font Awesome

Styling – Choose design approach:

  • Auto – AI determines the best style for your content
  • Minimal – Clean, simple interfaces with minimal decoration
  • Modern – Contemporary designs with depth and personality
  • Playful – Vibrant, expressive interfaces with bold elements

AI Intelligence

Toggle AI-driven decisions for colors, fonts, and layout. When enabled, Genius UI automatically selects optimal design choices based on your content and industry best practices.

Step 4: Generate Your Prototype

Once you’ve entered your prompt and configured settings, click Generate or press Enter.

Genius UI will:

  1. Analyze your requirements
  2. Generate a fully responsive UI structure
  3. Apply your chosen theme and styling
  4. Create interactive elements and components
  5. Render a live preview in seconds

Step 5: Iterate and Refine

After the initial generation, use natural language to refine your design through multi-turn conversations:

Example refinements:

  • “Make the hero section taller”
  • “Change the button color to blue”
  • “Add a testimonials section after the features”
  • “Make the navigation sticky”
  • “Add hover effects to the product cards”
  • “Switch to a two-column layout”

Genius UI maintains context throughout the conversation, so you can make multiple changes without starting over.

Quick Edit Tips

Be Specific – “Make the header 20% taller” works better than “bigger header”

Reference Elements – “The blue button in the hero” helps identify what to change

One Change at a Time – Make incremental adjustments for better results

Undo with Conversation – Simply say “go back to the previous version”

Step 6: Export and Share

When you’re satisfied with your prototype, Genius UI offers multiple export options:

Copy to Figma

Click Copy to Figma to transfer your design directly into Figma without installing plugins. Your prototype maintains proper layer structure, naming conventions, and styling.

Note: This feature is coming soon!

Download Code

Click Download Code to get a fully functional HTML file. The code includes:

  • Semantic HTML structure
  • Embedded CSS styling
  • Responsive design
  • Interactive components

Use the downloaded code as:

  • A starting point for development
  • Reference for design specifications
  • Offline prototype for presentations

Publish and Share

Click Publish to deploy your prototype instantly. You’ll receive a shareable URL that:

  • Works on any device
  • Requires no hosting setup
  • Updates automatically when you republish
  • Loads fast with optimized assets

Share the link with:

  • Stakeholders for feedback
  • Users for testing
  • Developers for reference
  • Clients for approval

Platform Switching

Switch between Desktop and Mobile views at any time using the device icons in the header. Genius UI automatically adjusts layouts, typography, and spacing for each platform.

Tips for Best Results

Writing Effective Prompts

Be Descriptive – Include details about layout, sections, and functionality

Mention Industry – “for a fintech startup” or “luxury fashion brand” helps set the right tone

Specify Elements – List key components: “with a hero, features grid, pricing table, and footer”

Include Interactions – Mention animations, hovers, or transitions you want

Design Consistency

Use Project Settings – Configure global styles before generating to maintain consistency

Reference Previous Work – Mention “similar to the last design” when creating related pages

Build Design Systems – Create reusable component patterns across multiple prototypes

Iteration Strategy

Start Broad – Generate the overall structure first

Refine Details – Make specific adjustments to colors, spacing, and typography

Test Responsiveness – Switch platforms to ensure designs work everywhere

Gather Feedback Early – Share prototypes before investing in development

What’s Next?

Now that you understand the basics, explore more capabilities:

Need Help?

If you encounter any issues or have questions:

Happy prototyping!

OverviewText Prompting

© 2025 Genius UI. Transform any design to Figma.