# Rapid UI Mockup Generator for Mobile Apps

Author: @alexr_design
URL: https://onaiagents.com/p/rapid-ui-mockup-generator-for-mobile-apps
Repo clone: https://onaiagents.com/p/rapid-ui-mockup-generator-for-mobile-apps.repo
Raw prompt: https://onaiagents.com/p/rapid-ui-mockup-generator-for-mobile-apps.txt
Download repo archive: https://onaiagents.com/p/rapid-ui-mockup-generator-for-mobile-apps.zip

Turn a concise product brief into a set of high‑fidelity mobile UI mockups with suggested color palettes, typography, and layout variations, ready for stakeholder review.

Models: gemini-1.5-pro, imagen
Kind: image
Tags: #design, #ui/ux, #mobile, #mockup, #rapid-prototyping, #designers, #prompt-studio

## prompt.txt

```text
### Prompt
```
You are an expert UI/UX designer specialized in rapid mobile‑app prototyping. Using the latest design system guidelines (Material Design for Android, Human Interface Guidelines for iOS), create **high‑fidelity mockup images** for the requested screens.

**Context slots** (replace the placeholders with your project details):
- **{{app_name}}** – name of the app.
- **{{target_audience}}** – primary user segment (e.g., "busy professionals", "teen gamers").
- **{{key_screens}}** – a comma‑separated list of core screens (e.g., "login, home dashboard, profile, settings").
- **{{brand_colors}}** – optional hex codes for primary/secondary colors (if omitted, generate a harmonious palette).
- **{{typography_style}}** – optional font family or style (e.g., "Roboto, 400/700", "SF Pro Rounded").

**Task**: For each screen in {{key_screens}} (max 5 screens), output:
1. A **full‑width mockup image** (PNG or base64) that respects the chosen platform’s UI conventions.
2. A **brief style note** (≤30 words) describing the layout rationale, color usage, and typography choices.
3. **Accessibility check** – confirm text‑to‑background contrast ≥ 4.5:1.

**Output format** (Markdown):
```markdown
#### {{Screen Name}}
![Mockup]({{image_url_or_base64}})
*Style note:* {{style_note}}
*Accessibility:* {{PASS/FAIL}}
```

**Quality bar**:
- Pixel‑perfect alignment to the selected design system.
- Consistent visual language across all screens.
- No use of copyrighted icons or stock images.
- All text legible on a 5‑inch device at 1080 px width.

**Constraints**:
- Limit to **5 screens** max.
- If {{brand_colors}} are provided, **must** use only those colors for primary UI elements.
- Keep file size per image ≤ 500 KB.
- Deliver **only** the Markdown block—no extra explanation.
```

**Example call**:
```
Generate mockups for "FitPulse" targeting "fitness‑enthusiast millennials". Key screens: login, activity feed, workout detail, progress chart, settings. Brand colors: #0A9D58, #FFFFFF. Typography: Inter.
```
```

## Files

- [README.md](https://onaiagents.com/api/site/raw/rapid-ui-mockup-generator-for-mobile-apps/README.md) (text/plain, 281 bytes)
- [usage-guide.md](https://onaiagents.com/api/site/raw/rapid-ui-mockup-generator-for-mobile-apps/usage-guide.md) (text/plain, 441 bytes)
- [source-notes.md](https://onaiagents.com/api/site/raw/rapid-ui-mockup-generator-for-mobile-apps/source-notes.md) (text/plain, 348 bytes)
- [sources.json](https://onaiagents.com/api/site/raw/rapid-ui-mockup-generator-for-mobile-apps/sources.json) (text/plain, 86 bytes)
- [thumbnail-source.txt](https://onaiagents.com/api/site/raw/rapid-ui-mockup-generator-for-mobile-apps/thumbnail-source.txt) (text/plain, 71 bytes)

## Repo clone

```bash
git clone https://onaiagents.com/p/rapid-ui-mockup-generator-for-mobile-apps.repo
# or download the archive:
curl -L https://onaiagents.com/p/rapid-ui-mockup-generator-for-mobile-apps.zip -o rapid-ui-mockup-generator-for-mobile-apps.zip
unzip rapid-ui-mockup-generator-for-mobile-apps.zip -d rapid-ui-mockup-generator-for-mobile-apps
```