---
name: site-stylist
description: Give websites, landing pages, apps and custom boards a distinctive, audience-led visual identity instead of repeating a generic template. Use when building or redesigning a site, choosing an art direction, making a design more creative, or fixing sites that all look alike. Preserve an existing brand and functional UI unless a redesign is requested.
---

# Site Stylist

Create a coherent design with a reason to look the way it does. Make uniqueness
come from composition, content and visual language—not random decoration or a
new accent color on the same skeleton. Use this alongside the applicable build,
board or website skill; do not replace its permissions, saving or test workflow.

## Establish the design context

- Read the actual brief, existing implementation and supplied references first.
- Identify the audience, primary action, content, brand constraints and device.
- For an existing site, identify what must remain recognizable and functional.
  Make a small requested edit without silently restyling unrelated areas.
- Ask one focused question only when an unresolved choice materially changes the
  design. Otherwise choose a defensible direction and state the assumption.
- Distinguish client identity from the builder's identity. Do not automatically
  put Nexus navy/gold, branding or dashboard chrome on every client website.
- For Nexus boards, keep shared account controls and host navigation consistent;
  customize the owned content surface within the requested brand constraints.
- Compare only supplied, already-visible or explicitly authorized examples.
  Do not browse unrelated private projects to collect design references.

## Choose an art direction before building

Write a compact design fingerprint covering:

1. **Purpose and feeling:** the task and two or three useful character words.
2. **Composition:** information hierarchy, opening layout, page rhythm and density.
3. **Typography:** display/body relationship, scale, weight and reading measure.
4. **Color and material:** palette roles, contrast, texture and surfaces.
5. **Imagery and graphics:** relevant photos, illustration, diagrams or intentional
   absence of imagery; crop, placement and visual emphasis.
6. **Shape and interaction:** borders, corners, controls, motion and state feedback.
7. **Signature moment:** one memorable, relevant feature that serves the content.

Explain the direction briefly in ordinary language. Do not make the user approve
every token or expose a lengthy internal checklist. When genuine alternatives
would help, offer two or three meaningfully different directions—not three colors
of the same design. Do not generate extra mockups or assets without a task need.

## Avoid the template trap

- Do not repeatedly default to a centered oversized slogan, gradient background,
  three feature cards, testimonial strip and generic call-to-action footer.
- Do not make every app a dark sidebar dashboard or every section a rounded card.
  Use cards when the content benefits from grouping; otherwise use typography,
  spacing, dividers, tables, editorial flow or task-centered surfaces.
- For unrelated new sites, deliberately vary at least three structural dimensions
  from the recent visible examples: composition, type hierarchy, density, imagery,
  shape system or interaction. Color alone never counts as structural variation.
  Do not force this rule onto related pages of one brand or a constrained edit.
- Avoid stock-looking decoration: interchangeable emoji icons, gratuitous glass,
  meaningless charts, random blobs and gradients applied without a content reason.
- Do not ban a useful pattern just because it is common. Choose it intentionally
  and make the content, proportions and execution specific to this project.
- Reuse reliable code and accessible components freely. Change composition and
  content hierarchy when needed; do not reinvent working behavior for novelty.

## Implement a complete visual language

- Build the opening section and one representative content/interaction section
  first. Inspect whether the direction actually appears in the implementation.
- Carry the chosen type, spacing, shape, graphic and interaction rules through
  the whole experience. Do not mix five unrelated styles to appear creative.
- Let real content determine layout. Use concrete, accurate copy; do not invent
  customer results, testimonials, certifications, prices or business details.
- Use supplied or appropriately sourced/licensed assets when available. Use the
  image-generation workflow for a justified custom raster asset; use native
  SVG/CSS/canvas for suitable precise graphics. Respect offline preview policies,
  asset permissions and the actual delivery environment.
- Ensure every working-looking control performs its advertised action. Label
  proposed or disconnected controls as concepts; do not disguise a mockup as a
  functional integration, live analytics or an AI response connection.
- Persist the design fingerprint in existing project notes/metadata when the
  authorized workflow supports it, so later edits retain the identity. Do not
  add unnecessary files, leak internal prompts into UI, or overwrite user notes.

## Review before delivery

Check the actual rendered result where available, not just the source code:

- **Silhouette:** imagine both this and the recent visible designs in grayscale.
  Would the hierarchy and layout still distinguish unrelated sites?
- **Specificity:** could the title and logo be swapped with an unrelated business
  without changing the page? If yes, strengthen content-led composition.
- **Restraint:** keep one clear signature moment; remove decoration that competes
  with the primary task. Do not make the interface harder to use to look unique.
- **Usability:** check readable text, contrast, focus visibility, keyboard use,
  touch targets, zoom/reflow, reduced motion and meaningful interaction states.
- **Mobile:** check narrow screens, safe areas, scrolling, overflow and keyboard
  collisions. Preserve responsive behavior instead of shrinking the desktop UI.
- **Function:** retain navigation, data, tenant boundaries, existing integrations
  and accurate loading/error behavior. Do not start services or publish as part
  of a visual review without the user's authorization.

If a comparison fails, revise hierarchy or composition—not just colors. Honor a
user-requested minimal design or fixed brand over a novelty quota. Report the
chosen direction and what was actually checked. If browser/host inspection was
unavailable, say so; syntax checks do not prove visual quality or functionality.

## Calibrate, do not copy these as presets

- For a literary journal, consider typographic reading rhythm and expressive
  image crops rather than software-product feature cards.
- For a repair shop, make service discovery, practical trust evidence and the
  contact action prominent; use only verified business details.
- For a focused work tool, prioritize the task surface and state clarity instead
  of borrowing a marketing site's hero section.

Derive the actual direction from the brief. These examples illustrate different
reasoning paths, not a menu of fixed templates.