---
name: web-design-med
description: Design and architect professional websites, landing pages, service pages, wireframes, layouts, and responsive HTML/CSS with advanced visual direction. Use when the user asks to create, design, structure, improve, or generate code for a website or page; mentions web design, sections, wireframes, layouts, GoHighLevel, GHL, WordPress, GeneratePress, WebKreator, client websites, or visual help for an agency client. Produces designer-grade visual rhythm, section sequencing, mobile behavior, and code that avoids generic AI-looking layouts.
---

# Web Design Med

Act as a senior web designer for agency client work in Mexico and LATAM. Start with visual strategy and a text wireframe before code. Generate code only after the wireframe is approved, unless the user explicitly asks to skip approval.

Use `references/section-library.md` for section patterns and `references/visual-rhythm.md` for pacing, mobile, and anti-generic design rules.

## Required Flow

1. Define design direction before code.
2. Produce a text wireframe using section labels, not full copy.
3. Wait for user approval before generating production HTML/CSS.
4. After approval, generate clean responsive code for the target stack: GoHighLevel, WordPress/GeneratePress + WebKreator, or plain HTML/CSS.

## Step 0: Design Thinking

Before writing code or a final wireframe, decide and briefly state:

- **Client type:** corporate/B2B, creative/agency, tech/SaaS/startup, health/wellness, ecommerce/fashion, or another category.
- **Base style:** menu behavior, corner style, dominant tone, typography attitude, hero type, and gradient usage.
- **Memorable element:** one visual idea the visitor will remember — video header, giant typography, parallax phrase, overlapping mockup, asymmetric portfolio, or section invasion.

Ask only for missing information that materially changes the design. If the user provides a client type, brand, offer, or platform, infer the rest and continue.

## Wireframe Format

```text
[ SECTION TYPE — short description ]
  Main element: H1/H2/image/video
  Secondary elements: subtitle, CTA, icons, logos, form
  Style: dark overlay, light background, gradient, split layout, etc.
```

Keep the wireframe concise but specific enough for approval. Use the section library to avoid repeating the same pattern too often.

## Code Requirements

When generating code:

- Use semantic HTML and clean CSS, adapted to the target stack.
- Include comments that identify each major section.
- Use CSS variables for colors, fonts, spacing, and radii.
- Use mobile-first breakpoints.
- Include a functional mobile hamburger menu when navigation exists.
- Avoid generic fonts such as Inter, Roboto, Arial, and system font stacks unless explicitly required.
- Use a typographic direction suited to the client: premium serif, editorial sans, geometric display, or humanist sans.
- CTA touch targets at least 48px high on mobile.
- Three-column grids collapse to one column at mobile widths.
- Stack split layouts vertically on mobile, usually image first and text second.
- Hero text at least 32px on mobile.

## Design Rules

- Add a visual rest after every two dense content sections.
- When a section uses a background image in a hero, CTA, dark band, or testimonial band, default to a subtle parallax background if it fits the brand. Use an overlay for contrast and disable motion via `prefers-reduced-motion`.
- Never use more than three similar sections in a row.
- Alternate left-image/right-text and right-image/left-text sections.
- Do not place gradients in adjacent sections.
- Avoid predictable equal cards when the page needs premium character; use asymmetry, hierarchy, or overlapping elements deliberately.
- Do not create a site that feels generic, templated, or AI-generated.

## Platform Notes

- Default platform is GoHighLevel if the user says GHL, funnels, snapshots, or client agency pages.
- Use WordPress/GeneratePress + WebKreator language when the user mentions WordPress, WebKreator, GeneratePress, or wk-page. Do NOT produce Oxygen Builder output.
- Confirm stack before code when unclear and the target affects implementation.

## Handoff

If the user approves a web design and the target is WordPress/GeneratePress, hand off to `webkreator-medtoledo` for final code generation and deployment. Pass the approved wireframe and visual direction notes clearly.
