UI Description to Code

[ms-shashank]

Current file: app/src/lib/tools/ui-to-code.ts
Current model: qwen-3-coder-30b
Current approach: Single prompt asking for a complete HTML file. No HTML validation, no rendering check, no iterative refinement, no accessibility audit.

Problems with current approach:

• Generated HTML may have unclosed tags, broken CDN links, or JS errors.
• No verification that the page actually renders correctly.
• Accessibility is not considered (no ARIA labels, no semantic HTML).
• Responsive design claims are not tested.
• Single-pass means no self-correction on visual issues.

Upgrade plan:

Step	Agent	Action
1	UI Planner	Analyze the UI description. Identify: component hierarchy, layout type (flex/grid), interactive elements, responsive breakpoints, color scheme. Output a structured UI spec.
2	Code Generator	Generate the complete HTML file following the UI spec and selected framework.
3	HTML Validator	Programmatic: Parse the HTML using BeautifulSoup or html5lib. Check for unclosed tags, broken attributes, missing required elements (DOCTYPE, html, head, body).
4	Accessibility Checker	Programmatic: Scan for basic accessibility: alt text on images, ARIA labels on interactive elements, color contrast ratios, semantic HTML usage.
5	Refinement Agent	If validation or accessibility issues found, feed specific errors back and regenerate affected sections. Max 2 retries.

• You are free to enhance the agents stacks in the above plan layout, the above one is just for reference. You can enhance more if needed.

Model suggestions to start with:

• Step 1: Try deepseek-v3.2 or llama-4-maverick-17b for UI planning (structured but lightweight).
• Steps 2 and 5: Try qwen-3-coder-30b (current model, strong at frontend code). Also try kimi-k2.6 (agentic coding + has vision) or kimi-k2.5 (has vision, can reason about UI layout).

Model Selection Guidance

• You are free to pick any model from the Oxlo catalog based on your own testing and evaluation.
• The Models suggestions above, not mandates. Try them first, and if they do not meet the accuracy target, experiment with alternatives.

Compare against: Claude Sonnet 4.6 Thinking & ChatGPT 5.3 Thinking.

Acceptance criteria:

• Generated HTML must pass validation (no unclosed tags, valid structure) in 95%+ of cases.
• Basic accessibility requirements met (alt text, ARIA labels, semantic elements).
• Page renders correctly in a browser (verified by Playwright screenshot in the Python service).
• Overall quality matches or exceeds Claude Sonnet 4.6 Thinking & ChatGPT 5.3 Thinking on test cases.
• Overall accuracy at 80%+.