UI Design Optimizer

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

• data/styles.csv
• data/colors.csv
• data/typography.csv
• data/patterns.csv
• data/rules.json

Required Workflow

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:
   • layout pattern
   • color tokens
   • typography tokens
   • interaction rules
4. If user asks for implementation, generate runnable files (at minimum index.html + styles.css).
5. 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:

powershell -ExecutionPolicy Bypass -File scripts/search.ps1 -Query "saas dashboard" -DesignSystem -ProjectName "Demo"