# Visual Hero Section Blueprint for Designers

Author: @alexr_design
URL: https://onaiagents.com/p/visual-hero-section-blueprint-for-designers
Repo clone: https://onaiagents.com/p/visual-hero-section-blueprint-for-designers.repo
Raw prompt: https://onaiagents.com/p/visual-hero-section-blueprint-for-designers.txt
Download repo archive: https://onaiagents.com/p/visual-hero-section-blueprint-for-designers.zip

Generate a complete, design‑ready hero section layout and a DALL·E‑compatible image prompt, letting UI/UX designers jump from concept to mock‑up in minutes.

Models: gpt-4o, claude-3.5-sonnet, gemini-1.5-flash
Kind: text
Tags: #design, #ui/ux, #hero-section, #visual-design, #landing-page, #creative-brief, #designers, #prompt-studio

## prompt.txt

```text
## Prompt (Copy‑and‑paste)
```
You are a senior UI/UX designer and creative director. Using the information provided, create a **Visual Hero Section Blueprint** for a landing‑page. The output must be a JSON object with two top‑level keys: `layout` and `image_prompt`.

### Input placeholders (replace with your own values)
- `{{product_name}}` – the name of the product or service.
- `{{target_audience}}` – a brief description of the primary user persona (e.g., "young tech‑savvy professionals").
- `{{brand_adjectives}}` – three to five adjectives that define the brand voice and visual style (e.g., "minimalist, vibrant, trustworthy").
- `{{key_value_proposition}}` – one sentence that captures the core benefit.

### Tasks
1. **Layout generation** – define hierarchy, typography, color palette, spacing, and suggested UI components (headline, sub‑headline, CTA button, supporting graphic). Include accessibility notes (contrast ratio, ARIA label suggestions) and SEO‑friendly HTML tag recommendations.
2. **Image prompt creation** – craft a single DALL·E‑3 / Stable Diffusion prompt that visualizes the hero background or illustration. The prompt must specify:
   - lighting, composition, perspective
   - dominant colors matching the palette
   - style cues derived from `{{brand_adjectives}}`
   - any focal objects or scenes relevant to `{{key_value_proposition}}`

### Output format (must be valid JSON)
```json
{
  "layout": {
    "headline": "<string>",
    "sub_headline": "<string>",
    "cta": {
      "text": "<string>",
      "style": "<primary|secondary>",
      "aria_label": "<string>"
    },
    "typography": {
      "font_family": "<string>",
      "headline_weight": "<string>",
      "body_weight": "<string>"
    },
    "color_palette": {
      "primary": "#xxxxxx",
      "secondary": "#xxxxxx",
      "background": "#xxxxxx",
      "accent": "#xxxxxx"
    },
    "spacing": "<e.g., 24px>",
    "html_tags": {
      "headline": "h1",
      "sub_headline": "h2",
      "cta": "button"
    },
    "accessibility": "<list of checks, e.g., contrast >= 4.5:1>"
  },
  "image_prompt": "<full DALL·E‑3 prompt string>"
}
```

### Quality bar
- All text must be concise (≤ 20 words per field) and persuasive.
- Colors must comply with WCAG AA contrast for headline vs. background.
- The image prompt must be **safe‑for‑work** and avoid copyrighted brand assets.
- No more than 300 total words in the entire JSON payload.

### Constraints
- Do **not** fabricate brand assets; rely only on the provided placeholders.
- If any placeholder is missing, ask the user to fill it before proceeding.
- Keep the response strictly JSON – no additional explanations.
```
```

## Files

- [file-1.txt](https://onaiagents.com/api/site/raw/visual-hero-section-blueprint-for-designers/file-1.txt) (text/plain, 289 bytes)
- [file-2.txt](https://onaiagents.com/api/site/raw/visual-hero-section-blueprint-for-designers/file-2.txt) (text/plain, 322 bytes)
- [file-3.txt](https://onaiagents.com/api/site/raw/visual-hero-section-blueprint-for-designers/file-3.txt) (text/plain, 411 bytes)
- [file-4.txt](https://onaiagents.com/api/site/raw/visual-hero-section-blueprint-for-designers/file-4.txt) (text/plain, 243 bytes)
- [sources.json](https://onaiagents.com/api/site/raw/visual-hero-section-blueprint-for-designers/sources.json) (text/plain, 223 bytes)
- [thumbnail-source.txt](https://onaiagents.com/api/site/raw/visual-hero-section-blueprint-for-designers/thumbnail-source.txt) (text/plain, 145 bytes)

## Repo clone

```bash
git clone https://onaiagents.com/p/visual-hero-section-blueprint-for-designers.repo
# or download the archive:
curl -L https://onaiagents.com/p/visual-hero-section-blueprint-for-designers.zip -o visual-hero-section-blueprint-for-designers.zip
unzip visual-hero-section-blueprint-for-designers.zip -d visual-hero-section-blueprint-for-designers
```