UI/UX Documentation

1. What is WokGen UI/UX

WokGen UI/UX is a design-to-code studio that generates production-ready front-end code from natural language descriptions. Unlike image generators, it outputs real, copy-paste-ready source code — React JSX, HTML with Tailwind CSS, Next.js App Router components, or self-contained Vanilla CSS HTML.

What WokGen UI/UX is NOT

WokGen UI/UX is not an image generator. It does not produce screenshots, mockups, or design files. Every output is runnable source code you can drop straight into your project. If you need pixel art or general images, use WokGen Pixel instead.

Who it's for

• Product teams building MVPs — scaffold a full landing page in minutes, not days.
• Indie hackers and solopreneurs — ship a polished SaaS marketing site without a dedicated designer.
• Front-end developers — skip boilerplate, get a working starting point for any common UI pattern.
• Designers prototyping in code — translate design direction into real components immediately.
• Agencies — accelerate client work by generating a first draft of landing pages and dashboards.

Use cases

2. Component Types

WokGen UI/UX supports 18 component types across four categories. Select the type before writing your prompt — it tells the model what structure and conventions to follow.

Sections

Page sections are the building blocks of marketing and product pages. Each generates a self-contained, full-width block ready to slot into any layout.

Navigation

Navigation components handle wayfinding — top bars, side drawers, and persistent navigation rails.

Components

Reusable UI components for displaying data, gathering input, and managing content.

Pages

Full-page templates that generate a complete layout — including multiple sections, navigation, and content areas in a single output.

3. Frameworks

Select your target framework before generating. The model tailors the output syntax, imports, and conventions to match your choice.

Choosing the right framework

• If you're unsure, start with HTML + Tailwind — it's the easiest to preview in a browser and copy into any project.
• For React/Vite projects, use React TSX.
• For Next.js apps using the App Router, use Next.js TSX — it avoids unnecessary 'use client' directives and follows Next.js conventions.
• For a self-contained file with no build tools, use Vanilla CSS — the output includes all styles inline.

4. Style Presets

Style presets give the model a strong visual direction — color palette, typography personality, spacing philosophy, and overall aesthetic. Select a preset that matches your brand or intended design language before writing your prompt.

5. Prompting Guide

The quality of the generated code is directly proportional to the specificity of your prompt. A vague prompt produces generic output; a detailed prompt produces something much closer to your vision.

Anatomy of a good UI/UX prompt

A strong prompt answers four questions:

1. What is the component? — "a pricing section", "a SaaS hero", "an admin sidebar"
2. What is it for? — "for a project management tool", "for a food delivery app"
3. What content does it contain? — tier names, feature list items, navigation links, stat labels
4. What is the design direction? — color hints, mood, layout preference (grid vs list, centered vs left-aligned)

Example prompts by type

Pricing section

Generate a SaaS pricing section with 3 tiers: Free, Pro ($29/mo), and Enterprise
(contact us). Dark theme. Monthly/annual toggle at the top. Pro tier highlighted
with a purple border. Feature list per tier: API access, custom dashboards, team
seats, priority support.

Hero section

SaaS analytics platform called "Chartly". Headline: "Turn your data into
decisions". Subtitle: real-time dashboards for engineering teams. Two CTAs:
"Start Free" (primary, indigo) and "Watch Demo" (ghost). Dark gradient
background with a subtle grid pattern.

Navbar

Company "Nexus" — logo on the left, navigation links: Product, Pricing, Docs,
Blog — Sign In (ghost) and Get Started (primary, purple) buttons on the right.
Sticky on scroll. Mobile hamburger menu.

Dashboard page

Admin dashboard for an e-commerce platform. Left sidebar with icons and labels:
Orders, Products, Customers, Analytics, Settings. Top header with search and
user avatar. Four stat cards at the top (Total Sales, Active Orders, Customers,
Revenue). Recent orders data table below.

Auth page

Sign-in page for a developer tool called "Forge". Centered card layout on a
dark background. Email and password fields, "Remember me" checkbox, Forgot
Password link, Sign In button. OAuth row: GitHub and Google. Link to sign up.

Prompting tips

• Specify counts — "3 pricing tiers", "6 feature cards", "5 nav links". The model defaults to 3 items if unspecified.
• Name your product — using your actual product name produces labels and copy that feel real rather than generic.
• Include key labels — name your CTAs, tiers, links, and section headings. Placeholder text is generic; real labels are immediately useful.
• State color preferences — "indigo accent", "red warning states", "green success badges". These reinforce the style preset.
• Describe layout — "two-column", "centered card", "full-width band", "grid of 3 columns on desktop, 1 on mobile".
• Mention responsive behavior — "mobile hamburger menu", "stack to single column on mobile".

6. Output Modes

After generation, the studio shows two tabs in the output panel:

Preview tab

The Preview tab renders the generated code inside an <iframe> — you see a live, interactive rendering of the component at desktop width. You can scroll within the preview and interact with any interactive elements (hover states, open/close toggles, tab switches).

• Preview is injected with the Tailwind CDN for HTML+Tailwind outputs so you see styles immediately.
• React/TSX and Next.js outputs are shown as static HTML in the preview (the actual JSX is in the Code tab).
• Use the preview to verify layout, spacing, and visual hierarchy before copying.

Code tab

The Code tab shows the raw source code exactly as generated — syntax-highlighted and copy-paste ready. A Copy button in the top-right of the panel copies the entire output to your clipboard.

• For React/Next.js outputs: one complete component file, ready to save as a .tsx file.
• For HTML+Tailwind: a complete .html file with Tailwind CDN included.
• For Vanilla CSS: a complete .html file with an embedded <style> block.

7. Using Generated Code

Copy the output from the Code tab and integrate it into your project. Instructions differ by framework:

React TSX

1. Copy the code from the Code tab.
2. Create a new file in your project, e.g. src/components/HeroSection.tsx.
3. Paste the code. The component uses a default export — import it as import HeroSection from './HeroSection'.
4. Ensure Tailwind CSS is configured in your project (tailwind.config.js and globals.css).
5. Drop the component into your page: <HeroSection />.

Next.js TSX

1. Copy the code from the Code tab.
2. Save it as a file in app/ or components/, e.g. components/PricingSection.tsx.
3. If the component uses interactivity (click handlers, state), add 'use client' to the top of the file.
4. Import and render in your page: import PricingSection from '@/components/PricingSection'.

HTML + Tailwind

1. Copy the code from the Code tab.
2. Open the file directly in a browser — the output includes the Tailwind CDN script tag, so styles work immediately with no build step.
3. For a production project with a build step, remove the CDN script tag and ensure Tailwind is processing your file via your tailwind.config.js content paths.

Vanilla CSS

1. Copy the code from the Code tab.
2. Save as a .html file. The output is entirely self-contained — no external dependencies, no CDN scripts.
3. Open in any browser. To extract into a CSS file, move the <style> block content to a separate .css file and link it.

8. Customization

Generated output is a starting point, not a final product. It is designed to be 80% of the way there — close enough to your vision that the remaining 20% is fast, targeted editing rather than building from scratch.

Changing colors

• Tailwind classes — find color classes like bg-indigo-600 or text-gray-900 and replace them with your brand colors (e.g., bg-brand-500 if you have a custom palette configured).
• CSS variables — for Vanilla CSS outputs, colors are often defined as CSS custom properties at the top of the <style> block. Update the variable values to retheme the entire component at once.
• Inline styles — some gradient backgrounds are defined as inline style props. These are clearly visible in the code and easy to swap.

Swapping placeholder content

• All text content is hardcoded in the component. Search for lorem ipsum, "Placeholder", "Feature name", or "Lorem" to find and replace generated copy.
• For image placeholders, swap the src attribute of <img> tags or background image URLs.
• Icon placeholders (SVG inline blocks or emoji) can be replaced with your preferred icon library components (e.g., Lucide, Heroicons).

Adjusting layout

• Grid columns — change grid-cols-3 to grid-cols-2 or grid-cols-4 to adjust item counts per row.
• Max width — the outer container typically uses max-w-7xl or max-w-5xl. Adjust to control content width.
• Spacing — padding and gap utilities (py-24, gap-8) are all Tailwind classes — easy to find and tune.
• Responsive breakpoints — responsive prefixes (md:, lg:) are already present in most outputs. Extend them to add more breakpoints.

9. Workspaces

Workspaces let you organize your generated components by project. Every generation can be saved to a workspace so your UI/UX components stay grouped, named, and easy to find later.

How workspaces work

• Create a workspace per product or client project — e.g., Chartly MVP, Client: Acme Corp.
• The UI/UX workspace keeps all your generated components together, separate from Pixel art assets and other generator outputs.
• Saved components retain their prompt, framework, component type, style preset, and generated code — you can view and copy them at any time without regenerating.
• Rename, duplicate, or delete saved components from the workspace panel.

Saving a generation

1. After generating a component you want to keep, click the Save button in the output panel.
2. Give it a descriptive name (e.g., Pricing section — dark 3-tier).
3. Select or create a workspace to save it into.
4. The component is now accessible from your workspace sidebar.

10. Credits & Plans

UI/UX generation is powered by large language models. Here's how usage and credits work:

Models used

Credit usage

• Standard generation is free. There is no HD tier for UI/UX code generation — code generation does not have an image quality distinction.
• Each generation request consumes a small amount of API quota, managed transparently. Normal usage (a few dozen generations per day) stays within free limits.
• If you hit rate limits, a brief cooldown period applies before you can generate again.

11. Limitations

WokGen UI/UX is a powerful first-draft tool, but it has known limitations you should be aware of before relying on it for production:

• Output is a starting point, not always production-perfect. Generated code may have minor inconsistencies — duplicate class names, slightly off spacing, or over-verbose markup. Review before shipping.
• Complex interactions need manual implementation. Animations, drag-and-drop, multi-step flows, and real-time data binding are beyond what a single-generation component can reliably produce. The output provides the static scaffold; you add the behavior.
• No animations generated yet. CSS keyframe animations and Framer Motion transitions are not currently included in generated output. Transition and hover classes are present, but full animation sequences require manual addition.
• No actual data binding. All data in generated components is hardcoded. To connect to a real API or database, you add useState, useEffect, or server-side data fetching logic yourself.
• Occasional over-engineering. The model sometimes generates more complex markup than needed for a simple component. Don't hesitate to simplify after copying.
• Long outputs may truncate. For very complex full-page components, the model may truncate near the token limit. If output looks cut off, try a more focused component type (a section rather than a full page) or break the page into multiple generations.

12. FAQ

Is the generated code accessible?

Yes, to a reasonable baseline. Generated code includes semantic HTML elements (<nav>, <main>, <section>,<button>), ARIA attributes where commonly expected (aria-label on icon buttons, role="dialog" on modals), and keyboard-focusable interactive elements. However, the output is not WCAG-audited and should be reviewed for accessibility compliance before shipping to production, especially for forms and modals.

Can I use the generated code commercially?

Yes. All code generated by WokGen UI/UX is released under the Apache 2.0 license. You can use it in commercial projects, client work, products, and open-source software without restriction. Attribution is not required.

Does it generate TypeScript?

Yes. Both React TSX and Next.js TSX framework options generate TypeScript (.tsx). Props are typed where they are passed explicitly, and the component signature uses TypeScript function syntax. For JavaScript output without types, use HTML + Tailwind orVanilla CSS.

Does it work with shadcn/ui or other component libraries?

Generated components use plain Tailwind CSS classes and do not import from shadcn/ui, Radix, or other component libraries by default. This keeps the output self-contained and portable. If you want to migrate to shadcn/ui components, use the generated output as a layout reference and swap primitive elements (buttons, inputs, dialogs) for their shadcn equivalents.

Can I regenerate just part of the output?

Not directly — each generation produces a complete component. To refine a specific part, either edit the code manually or regenerate with a prompt that describes the desired change. Regeneration is fast (typically 5–15 seconds), so iterating on prompts is usually the quickest path to the result you want.

What happens if I select the wrong component type?

The component type helps the model understand structure and conventions, but a mismatch just produces slightly less optimal output — it doesn't cause errors. If you selected Hero but your prompt describes a pricing section, the model will likely produce a reasonable pricing section anyway. For best results, match the type to your intent.

Is there a rate limit?

Yes. Generation requests are subject to per-user rate limits to ensure fair access for all users. If you see a rate-limit error, wait 30–60 seconds before retrying. For high-volume usage, contact us about team or enterprise plans.

Does it support dark mode?

Style presets like SaaS Dark and Dev Terminal produce components already styled in dark mode. For light-mode presets with automatic dark mode support, mention it in your prompt: with dark mode support using Tailwind dark: classes. The model will add dark: variants to the relevant Tailwind utility classes.