---
name: tophive-design
description: "Design responsive websites, SaaS landing pages, admin dashboards, product UI and visual reviews using distinct website and application-UI workflows. Route typography, grids, information density and interaction appropriately; not Gutenberg product descriptions or Rank Math SEO."
---

# Web & UI Design

**Design the right artifact, then design it well.** This skill routes visual work through the established TOPHIVE Design Intelligence v2 principles. It is not a plugin that grants local filesystem, WordPress, Figma or deployment access.

## 1. Identify the deliverable

| Request | Route | Output |
|---|---|---|
| New product landing page, SaaS website or marketing section | **Website design** | Real product brief → distinctive direction → page architecture → prototype when requested |
| Redesign dashboard, plugin admin, app or component | **Product UI** | Existing screen analysis → interaction/state design → scoped changes |
| Review screenshot, typography, grid or motion | **Visual review** | Observations → actionable fixes → verify if implemented |
| Gutenberg product description, Rank Math, SEO copy | **Content/SEO** | Not a website-design request; use the requested content workflow |

**Critical guard:** "Design AnyLicense landing page" must **not** produce Gutenberg blocks, an SEO file, Rank Math settings or live product-page instructions. An existing product URL is **reference information**, not the destination for the new design.

## 2. Source precedence

Follow the user's latest goal and approved choices first. Read the target product's own `AGENTS.md`, verified code/docs, approved positioning and actual screenshots **when accessible**. Then apply these bundled references:

**Load only route-relevant references** — not the entire design brain for every task:

- **Website/landing page:** `references/WEBSITE-WORKFLOW.md` and selected website composition/typography rules from `references/DESIGN-PRINCIPLES.md`.
- **Admin dashboard / Product UI:** `references/UI-REVIEW.md` first. Use `DESIGN-PRINCIPLES.md` only for shared legibility, contrast, spacing and restrained motion; **exclude** its marketing hero scales, oversized section gaps, editorial asymmetry and landing-page storytelling.
- **Visual review:** `references/UI-REVIEW.md` and only the source relevant to the actual screenshot.

The full canonical library is `~/Documents/tophive-design-system/` **only if a tool actually has access to that Mac**. The bundled references are portable and sufficient for conceptual work. Never pretend to have opened inaccessible local files. Existing product engineering contracts always override sample tokens and layouts.

## 3. Execute the selected workflow

**Website design:** Verify product facts, audience, differentiator and real CTA. Unless a direction is already approved, propose **three materially different visual directions** and recommend one. Establish typography, grid, buyer story and motion. Build a standalone responsive prototype only when requested or already approved. Keep existing production untouched.

**Product UI / admin dashboards:** Inspect real workflows, navigation, tables, forms, controls, design tokens and existing application states first. Prioritize usable density, predictable alignment, accessible focus, permission and loading/empty/error/success states. Do not apply large marketing typography, decorative cards, huge section gaps or mandatory landing-page grids to operational UI. Do not propose three marketing art directions unless the user explicitly asks for exploration. Never copy marketing gallery CSS wholesale into an app.

**Visual review:** State what is visibly wrong, why it matters and how to fix it. Implement only within the user's requested scope.

For every route: use real product visuals or label mockups illustrative. Do not invent capabilities, release status, logos, pricing, testimonials or metrics. Review actual rendering at 360, 390, 768, 1024, 1440 and 1920 where tools permit; include focus, reduced motion, contrast, overflow and behavior. Report **PASS / FAIL / NOT TESTED**, not imagined verification.

## 4. Output style

Be decisive within the selected route. **Websites:** expressive typography, intentional whitespace, authentic product demonstration and varied section composition. **Product UI:** information hierarchy, efficient density, usable tables/forms, clear control states, consistent alignment and quiet motion. Avoid generic gradients, fake analytics and repeated decorative cards everywhere.

**Before delivery:** Check that the result is the artifact the user asked for. A design request should end with art direction or a visual prototype—not an unrelated content/SEO deliverable.