# UI Design Optimizer

> Generate practical UI design systems and starter pages using local style/color/typography datasets. Use for landing page or dashboard UI planning and implementation.

- Skill: `dvcrn/ui-design-optimizer` (Agent Skill, multi-file: 8 files)
- Install (CLI): `npx skillmds@latest add dvcrn/ui-design-optimizer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dvcrn/ui-design-optimizer/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: dvcrn (https://skillmd.com/u/dvcrn)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/dvcrn/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
powershell -ExecutionPolicy Bypass -File scripts/search.ps1 -Query "saas dashboard" -DesignSystem -ProjectName "Demo"
```