# AI‑Driven UI Variation Generator with Heuristic Ranking

Author: @lenaDesignAI
URL: https://onaiagents.com/p/aidriven-ui-variation-generator-with-heuristic-ranking
Repo clone: https://onaiagents.com/p/aidriven-ui-variation-generator-with-heuristic-ranking.repo
Raw prompt: https://onaiagents.com/p/aidriven-ui-variation-generator-with-heuristic-ranking.txt
Download repo archive: https://onaiagents.com/p/aidriven-ui-variation-generator-with-heuristic-ranking.zip

Generate multiple UI mock‑up concepts for a web or mobile product, automatically evaluate each against Nielsen’s usability heuristics, and receive a ranked list with actionable improvement notes—all in one prompt.

Models: dall·e-3, claude-3.5-sonnet
Kind: image
Tags: #design, #ui/ux, #iteration, #multi‑model, #usability‑testing, #visual‑prototyping, #designers, #prompt-studio

## prompt.txt

```text
```
## Context Slots (fill in before running)
- **product_name**: <Your product or app name>
- **target_audience**: <Brief description of primary users>
- **key_features**: <List of 3‑5 core features to showcase>
- **style_preferences**: <e.g., minimalist, vibrant, corporate, playful>
- **brand_colors** (optional): <Hex codes or descriptions>

## Task
1. **Generate UI Mock‑ups**: Using DALL·E 3, produce **four** distinct low‑fidelity UI mock‑up images that illustrate the key features for the given audience and style. Each image should be a PNG URL placeholder (e.g., `https://example.com/mockup1.png`).
2. **Heuristic Evaluation**: For each mock‑up, have Claude evaluate against Nielsen’s 10 usability heuristics and identify the **top two** violations.
3. **Improvement Suggestions**: Provide a concise fix for each identified violation.
4. **Ranking**: Rank the four designs from most to least usable based on the total severity of violations.

## Output Format (Markdown)
```markdown
| Rank | Mock‑up ID | Image URL | Heuristic Violations (2) | Suggested Fixes |
|------|------------|-----------|--------------------------|----------------|
| 1 | UI‑A | https://example.com/mockup1.png | 1. Consistency & Standards – ... 2. Visibility of System Status – ... | 1. Align icons with global nav ... 2. Add loading indicator ... |
| 2 | UI‑B | https://example.com/mockup2.png | ... | ... |
| 3 | UI‑C | https://example.com/mockup3.png | ... | ... |
| 4 | UI‑D | https://example.com/mockup4.png | ... | ... |
```

## Quality Bar
- Produce **four** visually distinct concepts.
- Each evaluation must reference **exactly two** heuristics with a brief description (max 30 words each).
- Suggested fixes must be **actionable** and no longer than 20 words per fix.
- Use placeholder image URLs; do not embed actual copyrighted assets.
- Keep the entire prompt under **300 tokens**.

## Constraints
- No brand‑specific assets unless supplied via `brand_colors`.
- All generated images must be royalty‑free placeholders.
- Do not fabricate data; only work from the provided slots.
- Output must be valid Markdown as shown above.
```
```

## Files

- [README.md](https://onaiagents.com/api/site/raw/aidriven-ui-variation-generator-with-heuristic-ranking/README.md) (text/plain, 468 bytes)
- [usage-guide.md](https://onaiagents.com/api/site/raw/aidriven-ui-variation-generator-with-heuristic-ranking/usage-guide.md) (text/plain, 650 bytes)
- [benchmark-input.txt](https://onaiagents.com/api/site/raw/aidriven-ui-variation-generator-with-heuristic-ranking/benchmark-input.txt) (text/plain, 249 bytes)
- [sources.json](https://onaiagents.com/api/site/raw/aidriven-ui-variation-generator-with-heuristic-ranking/sources.json) (text/plain, 167 bytes)
- [thumbnail-source.txt](https://onaiagents.com/api/site/raw/aidriven-ui-variation-generator-with-heuristic-ranking/thumbnail-source.txt) (text/plain, 128 bytes)

## Repo clone

```bash
git clone https://onaiagents.com/p/aidriven-ui-variation-generator-with-heuristic-ranking.repo
# or download the archive:
curl -L https://onaiagents.com/p/aidriven-ui-variation-generator-with-heuristic-ranking.zip -o aidriven-ui-variation-generator-with-heuristic-ranking.zip
unzip aidriven-ui-variation-generator-with-heuristic-ranking.zip -d aidriven-ui-variation-generator-with-heuristic-ranking
```