UI Design Optimizer

Goal

Produce a concrete, buildable UI output instead of generic design advice.

Inputs

• - Product/domain description (for example: SaaS dashboard, hiring tool, beauty SPA)
• Page type (landing page or dashboard)
• Preferred stack (HTML/CSS by default)

Data Sources

• - INLINECODE0
• INLINECODE1
• INLINECODE2
• INLINECODE3
• INLINECODE4

Required Workflow

1. 1. Read relevant rows from style/color/typography data.
2. Choose one style, one palette, and one typography pair with rationale.
3. Output a compact design spec:

1. 4. If user asks for implementation, generate runnable files (at minimum index.html + styles.css).
2. Return evidence with file paths and the selected dataset rows/slugs.

Quality Rules

• - Prioritize readability and accessibility (target WCAG AA contrast).
• Use consistent spacing, type scale, and component states.
• Avoid placeholder-only output when implementation is requested.
• Keep generated text UTF-8 clean (no mojibake).

Verification

When files are generated, verify:

• - files exist on disk;
• HTML references stylesheet correctly;
• selected style/palette/typography are reflected in CSS variables.

Script Helper

Use scripts/search.ps1 when quick lookup is useful:

CODEBLOCK0