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"
```

# UI Design Optimizer

Implementation-first UI/UX skill for OpenClaw. It helps select style, color, and typography from local datasets, then produce a practical design spec and starter files.

## What This Version Improves (v1.1.0)

- Removes corrupted trigger patterns and metadata mojibake.
- Normalizes trigger patterns for stable matching.
- Keeps guidance focused on output quality and accessibility.
- Works with runtime path `skills/ui-design-optimizer`.

## Core Capabilities

- Design-system generation
- Style recommendation
- Color palette selection
- Typography pairing
- Industry-oriented guidance
- Accessibility checks (WCAG-oriented)

## Data Files

- `data/styles.csv`
- `data/colors.csv`
- `data/typography.csv`
- `data/patterns.csv`
- `data/rules.json`

## Typical Prompts

- `Design a landing page for a fintech product.`
- `Generate a dashboard design system for a hiring tool.`
- `Recommend color palette and typography for a wellness app.`

## Script Usage

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

## Validation

1. Check skill availability:

```powershell
openclaw skills check | findstr /I "ui-design-optimizer"
```

2. If available, generate a demo and verify file output in your target directory.

## Credits

Adapted from UI-UX Pro Max:
- https://github.com/nextlevelbuilder/ui-ux-pro-max-skill