# Human Saas UI

> Removes AI/vibe-coded UI slop and produces professional, trustworthy SaaS interfaces. Enforces muted palettes, Lucide/Phosphor icons over emojis, consistent hierarchy, dense quiet cards, real-data layouts, progressive onboarding, ethical confirms, and anti-template landing pages. Use when building or refactoring UI, dashboards, settings, or marketing pages, or when the user asks to make an interface look less AI-generated, more expensive, human-crafted, or Stripe/Attio-like.

- Skill: `oguzakkuss/human-saas-ui` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add oguzakkuss/human-saas-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/oguzakkuss/human-saas-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: oguzakkuss (https://skillmd.com/u/oguzakkuss)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/oguzakkuss/human-saas-ui

---


# Human SaaS UI

AI’nin varsayılan “bitmiş görünen” ekranını sök; kullanıcının işini bitiren, sakin ve güvenilir bir SaaS arayüzü kur.

Kaynak sentezi: Olly Rosewell SaaS UI — https://youtu.be/9d5fRVDkzRI ([rosewell.dev](https://www.rosewell.dev/)).

## Ne zaman kullan

- Yeni UI / dashboard / settings / landing yazarken
- “AI gibi duruyor”, “ucuz”, “vibe-coded”, “daha profesyonel” denince
- Mevcut arayüzü polish / redesign ederken

## İş akışı

1. **Tara** — [references/anti-slop-checklist.md](references/anti-slop-checklist.md) ile mevcut veya önerilen UI’yi gez.
2. **Ucuz kazançlar** — emoji→icon, tutarsız radius/font/verb, mor/glow/gradient gürültüsü, tekrarlayan KPI kart yığını.
3. **Tek intent** — Her sayfa bir soruya cevap versin; dekorasyonu ve ikinci niyeti sil.
4. **Kuralları sabitle** — Spacing scale, button height, radius, action verb’leri projede tek kaynak yap (markdown veya design tokens); AI’nın sayfalar arası drift’ini engelle.
5. **App vs landing**
   - App: muted chrome; renk sadece status / birincil aksiyon.
   - Landing: [references/landing-page.md](references/landing-page.md) — ürün screenshot, tek CTA dili, anti-template.
6. **Ürün UX** — [references/product-ux.md](references/product-ux.md): progressive onboarding, skeleton, confirm/complete, value tracker.
7. **Referans görseller** — Kullanıcı beğendiği site screenshot’ı verdiyse onu görsel otorite al; AI’ya “modern dashboard” bırakma.

## Sabit kurallar (özet)

| Konu | Kural |
|------|--------|
| Emoji | Dekoratif emoji yok → Lucide / Phosphor / Feather |
| Renk | Restrained base + tek accent; renk = veri durumu veya eylem |
| Tutarlılık | Aynı radius, type scale, spacing; aynı aksiyon = aynı fiil (`Delete`) |
| Layout | Sayfa = bir iş; analytics’i teams sayfasına taşıma |
| Kartlar | Buton sırasını `⋯` menüye; chip→icon; asıl metriği öne al |
| Veri | Gerçek / çirkin data ile test; truncate, empty, loading, error |
| Onboarding | Zorla tour yok; progressive; ilk adım belirgin + progress |
| Hız | Skeleton; >1s işlerde progress; boş beyaz bekleme yok |
| Güven | Destructive/expensive → confirm (+ gerekirse type-to-confirm) + completion state |
| Motion | Anlam taşımayan animasyon yok; load-more tercih (footer erişimi) |
| Landing | Alternating text/image template yok; stok foto yok; crop ürün UI; CTA metinleri aynı |

**Test sorusu (her öğe için):** Bu, kullanıcının geldiği işi bitirmesine yardım ediyor mu? Sadece dekorasyonsa sil.

## Çıktı beklentisi

- Önce neyin slop olduğunu kısaca söyle, sonra düzelt.
- Renk/typografi/spacing için tutarlı token’lar kullan; rastgele hex saçma.
- Örnekler için [examples/before-after.md](examples/before-after.md).

## Progressive disclosure

- Anti-slop detay → [references/anti-slop-checklist.md](references/anti-slop-checklist.md)
- Onboarding / hız / confirm → [references/product-ux.md](references/product-ux.md)
- Landing → [references/landing-page.md](references/landing-page.md)