siteasy

Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft. Accessible to beginners, powerful enough for experts.

Good taste is trained, not innate — the ability to see beyond the obvious and recognize what elevates. Unseen details compound: when a feature works exactly as assumed, users proceed without a second thought. That is the goal.

Setup (non-optional)

Before any design work or file edits, pass these gates. Skipping them produces generic output that ignores the project.

1. Context gathering

Two files in the workspace or project root:

• PRODUCT.md — required. Users, brand, tone, anti-references, strategic principles.
• DESIGN.md — optional, strongly recommended. Colors, typography, elevation, components.

Use the Read tool to check for these files. If already read in this session, don't re-read.

If PRODUCT.md is missing, empty, or placeholder: run /siteasy setup, then resume. If the original task was /siteasy build, resume into /siteasy plan before any implementation.

If DESIGN.md is missing: nudge once per session ("Run /siteasy document for more on-brand output"), then proceed.

2. Register

Every design task is brand (marketing, landing, campaign, portfolio — design IS the product) or product (app UI, admin, dashboard, tool — design SERVES the product).

Identify before designing. Priority: (1) cue in the task itself; (2) the surface in focus; (3) register field in PRODUCT.md. First match wins.

Load the matching reference: references/brand.md or references/product.md. The shared design laws below apply to both.

Shared design laws

Apply to every design, both registers. Match implementation complexity to the aesthetic vision. Interpret creatively. Vary across projects — never converge on the same choices.

Color

• Use OKLCH. Reduce chroma as lightness approaches 0 or 100.
• Never use #000 or #fff. Tint every neutral toward the brand hue (chroma 0.005–0.01).
• Pick a color strategy before picking colors:
  • Restrained — tinted neutrals + one accent ≤10%. Product default; brand minimalism.
  • Committed — one saturated color carries 30–60% of the surface. Brand default for identity-driven pages.
  • Full palette — 3–4 named roles, each used deliberately. Brand campaigns; data viz.
  • Drenched — the surface IS the color. Brand heroes, campaign pages.

Theme

Dark vs. light is never a default. Write one sentence of physical scene: who uses this, where, under what ambient light, in what mood. If the sentence doesn't force the answer, add detail until it does.

Typography

• Cap body line length at 65–75ch.
• Hierarchy through scale + weight contrast (≥1.25 ratio between steps).

Layout

• Vary spacing for rhythm. Same padding everywhere is monotony.
• Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong.
• Run a Gestalt audit on every composition (proximity, similarity, closure, continuity, figure-ground, common fate, symmetry). See references/gestalt.md.

Motion

• Don't animate CSS layout properties.
• Ease out with exponential curves (ease-out-quart / quint / expo). No bounce, no elastic.

Absolute bans

Match-and-refuse. If you're about to write any of these, rewrite with different structure.

• Side-stripe borders. border-left or border-right > 1px as a colored accent on cards, list items, callouts.
• Gradient text. background-clip: text on anything other than display-only hero type.
• Glassmorphism as default. Blurs and glass cards used decoratively.
• The hero-metric template. Big number, small label, supporting stats, gradient accent.
• Identical card grids. Same-sized cards with icon + heading + text, repeated endlessly.
• Centered hero, centered text, dark image. Use an asymmetric split instead.
• Modal as first thought. Exhaust inline / progressive alternatives first.
• Inter font. Use Geist, Outfit, Cabinet Grotesk, or Satoshi.
• Serif fonts in software UIs or dashboards.
• AI Purple/Blue gradient aesthetic. Use neutral bases (Zinc/Slate) with singular, concrete accents.
• Pure black (#000) for large areas. Use off-black with a hint of hue (chroma 0.005+).
• transition: all. Always specify exact properties.
• ease-in on UI animations. Use ease-out or a custom curve.
• Durations > 300ms on UI feedback.
• Generic placeholder content. "John Doe", "Acme Corp", "99.99%". Use realistic names, organic numbers (47.2%), and picsum.photos/seed/{word}/width/height.
• Emojis in code, markup, or UI copy. Replace with proper icons (Radix, Phosphor) or SVG primitives.

Copy

• Every word earns its place. No restated headings, no intros that repeat the title.
• No em dashes. Use commas, colons, semicolons, or parentheses.

Commands