name: web-design
description: Use when designing the look of a website — brand, color palette, typography, spacing, layout, and visual hierarchy. Triggers: "make it look good", "design my landing page", "pick colors/fonts", "the site looks off", "improve the visual design", choosing a style or building a design system for a site.
Web design
Make it look intentional, not decorated. Good web design is mostly restraint and consistency.
Global default
Color
- One primary brand color + a set of neutrals (grays) + one accent for CTAs. That's it.
- Define semantic colors: success / warning / error. Don't invent new ones per page.
- Check contrast as you go (see
web-accessibility) — pretty but unreadable is a fail.
Type
- Max 2 typefaces (often 1 is better). One for headings, one for body.
- Set a type scale (e.g. 12/14/16/20/24/32/48). Don't pick sizes at random.
- Body text 16px+; line length 60–80 characters; generous line-height (~1.5).
Spacing & layout
- Use a spacing scale (4/8/12/16/24/32/48/64). Consistent spacing reads as "designed".
- Strong visual hierarchy: the most important thing is the biggest/boldest/highest. One clear focal point per screen.
- Whitespace is a feature, not wasted space.
Mobile-first
- Design the small screen first, then expand. Most visitors are on phones.
- Touch targets ≥ 44px.
Consistency
- Reuse components and tokens (color, spacing, radius, shadow). A site that looks the same on every page feels trustworthy.
- Use real content while designing — real headlines, real images, real lengths.
🇮🇱 Israel
- RTL changes layout, not just text alignment. The whole composition mirrors: logo/nav flip, primary actions move to the right, icons with direction (arrows, chevrons) flip. Design RTL from the start, don't bolt it on (see
web-i18n-rtl). - Hebrew web fonts: use fonts with strong Hebrew glyphs — Heebo, Assistant, Rubik, Noto Sans Hebrew. Don't assume a Latin font has good Hebrew.
- Don't center long Hebrew paragraphs — right-align.
- If bilingual (Hebrew + English), test both; mixed LTR/RTL lines (numbers, English brand names inside Hebrew) need care.
🔌 Power-ups (installed skills)
frontend-design — distinctive, production-grade UI that avoids the generic AI look.brand-guidelines — apply a real brand color + type system to artifacts.theme-factory — preset or generated themes for landing pages and artifacts.- 🇮🇱
israeli-ui-design-system (RTL-first components + Hebrew typography), hebrew-tailwind-preset (Tailwind RTL + Hebrew font stacks).
Checklist
- [ ] 1 primary color + neutrals + 1 CTA accent
- [ ] ≤ 2 typefaces, defined type scale
- [ ] Consistent spacing scale
- [ ] Clear single focal point per screen
- [ ] Designed mobile-first, 44px touch targets
- [ ] Reusable tokens/components, not one-offs
- [ ] (Israel) RTL composition + Hebrew-ready fonts