Tesslate's Reasoning Only UI generation model built on Qwen3-4B architecture. Trained to systematically plan, architect, and implement complete user interfaces across modern development stacks.
UIGEN-X-4B-0729 implements Reasoning Only from the Qwen3 family - combining systematic planning with direct implementation. The model follows a structured thinking process:
Problem Analysis — Understanding requirements and constraints
Architecture Planning — Component structure and technology decisions
Design System Definition — Color schemes, typography, and styling approach
Implementation Strategy — Step-by-step code generation with reasoning
This hybrid approach enables both thoughtful planning and efficient code generation, making it suitable for complex UI development tasks.
Complete Technology Coverage
UIGEN-X-4B-0729 supports 26 major categories spanning frameworks and libraries across 7 platforms:
Web Frameworks
React: Next.js, Remix, Gatsby, Create React App, Vite
Vue: Nuxt.js, Quasar, Gridsome
Angular: Angular CLI, Ionic Angular
Svelte: SvelteKit, Astro
Modern: Solid.js, Qwik, Alpine.js
Static: Astro, 11ty, Jekyll, Hugo
Styling Systems
Utility-First: Tailwind CSS, UnoCSS, Windi CSS
CSS-in-JS: Styled Components, Emotion, Stitches
Component Systems: Material-UI, Chakra UI, Mantine
Traditional: Bootstrap, Bulma, Foundation
Design Systems: Carbon Design, IBM Design Language
Create a navigation bar using React + Tailwind CSS with logo, menu items, and mobile hamburger menu
Complex Application:
Build a complete e-commerce dashboard using Next.js + TypeScript + Tailwind CSS + shadcn/ui with:
- Product management (CRUD operations)
- Order tracking with status updates
- Customer analytics with charts
- Responsive design for mobile/desktop
- Dark mode toggle
Style: Use a clean, modern glassmorphism aesthetic
Framework-Specific:
Design an Angular Material admin panel with:
- Sidenav with expandable menu items
- Data tables with sorting and filtering
- Form validation with reactive forms
- Charts using ng2-charts
- SCSS custom theming
Advanced Prompt Techniques
Multi-Page Applications:
Create a complete SaaS application using Vue 3 + Nuxt 3 + Tailwind CSS + Pinia:
Pages needed:
1. Landing page with hero, features, pricing
2. Dashboard with metrics and quick actions
3. Settings page with user preferences
4. Billing page with subscription management
Include: Navigation between pages, state management, responsive design
Style: Professional, modern with subtle animations
Style Mixing:
Build a portfolio website using Svelte + SvelteKit + Tailwind CSS combining:
- Minimalist layout principles
- Cyberpunk color scheme (neon accents)
- Smooth animations for page transitions
- Typography-driven content sections
Tool Calling & Agentic Usage
UIGEN-X-4B-0729 supports function calling for dynamic asset integration and enhanced development workflows.
Image Integration with Unsplash
Register tools for dynamic image fetching:
json
1{2"type":"function",3"function":{4"name":"fetch_unsplash_image",5"description":"Fetch high-quality images from Unsplash for UI mockups",6"parameters":{7"type":"object",8"properties":{9"query":{10"type":"string",11"description":"Search term for image (e.g., 'modern office', 'technology', 'nature')"12},13"orientation":{14"type":"string",15"enum":["landscape","portrait","squarish"],16"description":"Image orientation"17},18"size":{19"type":"string",20"enum":["small","regular","full"],21"description":"Image size"22}23},24"required":["query"]25}26}27}
Content Generation Tools
json
1{2"type":"function",3"function":{4"name":"generate_content",5"description":"Generate realistic content for UI components",6"parameters":{7"type":"object",8"properties":{9"type":{10"type":"string",11"enum":["user_profiles","product_data","blog_posts","testimonials"],12"description":"Type of content to generate"13},14"count":{15"type":"integer",16"description":"Number of items to generate"17},18"theme":{19"type":"string",20"description":"Content theme or industry"21}22},23"required":["type","count"]24}25}26}
Complete Agentic Workflow Example
python
1# 1. Plan the application2response = model.chat([3{"role":"user","content":"Plan a complete travel booking website using React + Next.js + Tailwind CSS + shadcn/ui"}4], tools=[fetch_unsplash_image, generate_content])56# 2. The model will reason through the requirements and call tools:7# - fetch_unsplash_image(query="travel destinations", orientation="landscape") 8# - generate_content(type="destinations", count=10, theme="popular travel")9# - fetch_unsplash_image(query="hotel rooms", orientation="landscape")1011# 3. Generate complete implementation with real assets12final_response = model.chat([13{"role":"user","content":"Now implement the complete website with the fetched images and content"}14])
Tool Integration Patterns
Dynamic Asset Loading:
Fetch relevant images during UI generation
Generate realistic content for components
Create cohesive color palettes from images
Optimize assets for web performance
Multi-Step Development:
Plan application architecture
Generate individual components
Integrate components into pages
Apply consistent styling and theming
Test responsive behavior
Content-Aware Design:
Adapt layouts based on content types
Optimize typography for readability
Create responsive image galleries
Generate accessible alt text
Inference Configuration
Optimal Parameters
python
1{2"temperature":0.6,# Balanced creativity and consistency (make it lower if quantized!!!!)3"top_p":0.9,# Nucleus sampling for quality4"top_k":40,# Vocabulary restriction5"max_tokens":25000,# Full component generation6"repetition_penalty":1.1,# Avoid repetitive patterns7}
