← Back to Skills / Marketplace / ai-saas
SKL · 19PRO

AISaaS.

Dark, precise, and charged with intelligence. The real design language of AI-native products — Perplexity, Cursor, Runway — not the generic chatbot aesthetic.

UNLOCK WITH PRO →
● Live preview · AI SaaS demo
● This is real CSS, not a screenshot
↗ New tab
01 · The Vibe

AI SaaS is the design language that's actually emerged for AI-native products — not the generic chatbot box aesthetic, but the real thing. The kind of interface that feels like it's thinking alongside you. Dark backgrounds, careful use of light, a sense that the product knows more than it's showing. Think Perplexity, Cursor, Runway — products that feel like they're from a few years ahead of where we are.

● Looks Like
PerplexityCursorClaude.aiCohere's dashboardRunway MLMidjourney's interfaceUdioThe AI products that feel like actual products, not research demos
02 · Best For / Avoid If
＋ Best For
+AI-powered SaaS products and tools
+Products with a chat or generative interface as a core feature
+AI infrastructure and API products
+Startups in the AI space who need to signal technical credibility fast
+Products where intelligence, speed, or capability is the primary thing you're selling
× Avoid If
×Your product has nothing to do with AI and the aesthetic would feel like you're pretending
×Your audience is non-technical and would find the dark minimal look cold or intimidating
×You need the product to feel low-stakes and approachable — this aesthetic signals power, not gentleness
03 · Design Philosophy
01

Dark signals intelligence

There's a reason every serious AI interface defaults to dark mode. It focuses attention, cuts visual noise, and creates a sense of depth that light interfaces can't pull off. The darkness isn't an aesthetic preference — it communicates that something complex and capable is running underneath. The interface is a window, and the dark background makes everything in it feel more significant.

02

Motion communicates cognition

AI interfaces feel intelligent partly because they move in ways that imply thinking — text streaming character by character, subtle pulse animations during processing, transitions that feel considered rather than automatic. These aren't decorative. They're how you communicate the invisible process of computation to someone who can't see it happening.

03

Restraint signals confidence

The best AI product interfaces show less than they could. A clean input and nothing else. One button. Empty space dominating, one key metric in the center. This restraint says the product knows what it does — it doesn't need to fill the screen with features to prove its value.

04 · Use With Claude / Cursor
Claude
01Open your Claude project
02Click 'Add files' in the Project Knowledge panel
03Drop in SKILL.md and DESIGN.md
04Start a new chat in the project — Claude follows the spec
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — Cursor references both files per request
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
Looking like every other AI tool
The dark background plus purple gradient combo is now the generic AI aesthetic. Push Claude toward something more specific — name a product you actually admire and ask for that level of distinctiveness instead of the category default.
! WARNING
Streaming text everywhere
Character-by-character animation is powerful in small doses and exhausting in large ones. Keep it to the primary AI output area only — not navigation, labels, or static content.
! WARNING
The indigo-to-purple gradient
It's been used by so many AI products it now reads as "AI startup" rather than any actual brand. Pick a more specific color or gradient direction if you want to stand out.
! WARNING
Neglecting the empty state
AI interfaces spend a lot of time waiting. The empty and loading states need as much design attention as the populated ones — they're usually what users see first.
● 07 · Download

Two files. That's it.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

UNLOCK WITH PRO →