Transform UI designs into production-ready code with AI
UI-Vis bridges the gap between design and development by using advanced AI to convert UI designs into accessible, standard-compliant code. Upload a design image or provide a text description, and UI-Vis will generate the corresponding code implementation with your preferred framework and styling approach.
- Multi-input Design Analysis: Process images, text descriptions, or URLs
- Multiple AI Provider Support: Use OpenAI, TogetherAI, or Ollama (local models)
- Framework Selection: Generate code for React, Vue, or vanilla HTML/CSS/JS
- Styling Options: Tailwind CSS, CSS Modules, or standard CSS
- Responsive Implementation: Mobile-first, adaptive layouts
- Accessibility-Focused: WCAG compliant code generation
- Real-time Preview: Visualize the generated UI instantly
- Export Options: Download complete projects or individual files
- Custom Configuration: Control complexity, styling, and interactivity
- Node.js 18.17.0 or higher
- npm, yarn, or pnpm
- An API key for at least one supported AI provider (OpenAI, TogetherAI)
- Alternatively, Ollama for local model execution
-
Clone the repository:
git clone https://github.com/fivelity/ui-vis.git cd ui-vis -
Install dependencies:
npm install # or pnpm install -
Set up environment variables:
cp .env.example .env.local
-
Edit
.env.localto add your AI provider credentials:# OpenAI OPENAI_API_KEY=your_openai_api_key # TogetherAI TOGETHER_API_KEY=your_together_api_key # Ollama (for local models) OLLAMA_BASE_URL=http://localhost:11434 -
Start the development server:
npm run dev # or pnpm dev -
Open http://localhost:3000 with your browser to see the application.
UI-Vis supports the following AI providers:
- OpenAI: Best quality with GPT-4 Vision for image analysis and GPT-4 for code generation
- TogetherAI: Cost-effective alternative using open models like Llama 3
- Ollama: Free, private option using locally-run models (requires separate installation)
For detailed setup instructions for each provider, see our provider-specific guides:
Generate code for your preferred tech stack:
- React: Components with hooks and modern patterns
- Vue: Vue 3 components with Composition API
- Vanilla: HTML, CSS, and JavaScript without framework dependencies
- Next.js: App Router components (experimental)
Choose your preferred styling method:
- Tailwind CSS: Utility-first CSS framework
- CSS Modules: Scoped CSS with class name isolation
- Vanilla CSS: Standard CSS with BEM naming convention
- CSS-in-JS: Styled components or Emotion (React/Next.js only)
- Enhanced Component Recognition: Improved accuracy for complex UI elements
- Animation Support: Generate animations and transitions
- Design System Integration: Import design tokens from Figma
- Component Library Export: Generate reusable component libraries
- API Mocking: Create mock APIs based on UI requirements
- Collaborative Editing: Real-time collaboration on projects
- Mobile App Generation: React Native and Flutter support
Contributions are welcome! See our Contributing Guidelines for details on how to get started.
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js team for the incredible framework
- Vercel AI SDK for simplified AI provider integration
- shadcn/ui for beautiful, accessible UI components
- All AI providers for their powerful models and APIs