agentsclimarketplace

Web design

Skill JoshBuildApp/launchkit/skills/web-design

LaunchKit — build & launch a complete website with Claude Code. A bundle of skills (planning, design, UI/UX, frontend, SEO, accessibility, legal) that works worldwide with first-class Israel support (Hebrew/RTL, IS 5568, Israeli privacy law).

Install
npx -y skills add JoshBuildApp/launchkit --skill web-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

2.9 KB, as published. Nobody here has run it

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

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.