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

AI SaaS.

Dark, precise, and charged with intelligence. The design language of AI-native products — Perplexity, Cursor, Runway.

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 emerged for AI-native products. 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 and focus. The darkness 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. These are functional — they 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.

04 · Use With Claude / Cursor
Claude
01Click 'Customize', then go to 'Skills'
02Go to 'Create Skills' and upload the skill.md file
03Put the design.md file in your project's knowledge base
04Mention the skill name as you build — Claude applies it automatically
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 — mention the skill name to invoke it automatically
★ 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.
! WARNING
Streaming text everywhere
Character-by-character animation is powerful in small doses and exhausting in large ones. Use it only for the primary AI output area.
! WARNING
The indigo-to-purple gradient
It's been used by so many AI products it now reads as a generic category default. 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

Beautiful designs in minutes.

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

UNLOCK WITH PRO →