---
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, GHL, GoHighLevel, Oxygen, WordPress, 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

## Overview

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 or stack-specific code.
4. After approval, generate clean responsive code for the target stack: GoHighLevel, Oxygen/WordPress, plain HTML/CSS, or the existing project stack.
5. If the next step is Oxygen JSON, hand the approved HTML/design to `oxygen-json-med`.

## 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, such as 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

Use this format before code:

```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, or adapt to the user's 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 the user explicitly requires them.
- Use a typographic direction suited to the client, such as premium serif, editorial sans, geometric display, or humanist sans.
- Make CTA touch targets at least 48px high on mobile.
- Make three-column grids collapse to one column at mobile widths.
- Stack split layouts vertically on mobile, usually image first and text second.
- Keep 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, testimonial band, or visual rest, default to a subtle parallax background if it fits the brand. Use an overlay for contrast and disable motion through `prefers-reduced-motion`.
- Never use more than three similar sections in a row.
- Alternate left-image/right-text and right-image/left-text sections.
- Alternate dark and light overlays when using image-heavy 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 Oxygen/WordPress language when the user mentions Oxygen, WordPress, Design Sets, or import/export.
- Confirm stack before code when unclear and the target affects implementation.

## Handoff

If the user approves a web design and asks for Oxygen output, pass the final HTML or section structure to `oxygen-json-med`. If the user asks for a mega menu or complex navigation, design the page structure here and let `mega-menu-med` handle detailed menu behavior after this skill.
