Minimalsystem

Clean SaaS

🚮 AI SlopAI would generate this anyway

Generates production-grade SaaS UI in the style of Stripe, Linear, or Vercel — neutral grays, precise spacing, subtle borders, blue accent, and components that feel engineered rather than designed.

saasproductionformsnavigation

Added February 4, 2026 by unslop.dev

Example output

Settings form

General Settings

Manage your workspace preferences.

Workspace name

Slug

app.example.com/

View code

<div style="padding: 2rem; background: #fafafa;">
  <div style="background: white; border: 1px solid #e5e7eb; border-radius: 0.5rem; max-width: 32rem; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.05);">
    <div style="padding: 1.25rem 1.5rem; border-bottom: 1px solid #e5e7eb;">
      <h3 style="font-size: 0.875rem; font-weight: 600; color: #111827; margin: 0;">General Settings</h3>
      <p style="font-size: 0.8125rem; color: #6b7280; margin: 0.25rem 0 0 0;">Manage your workspace preferences.</p>
    </div>
    <div style="padding: 1.5rem;">
      <div style="margin-bottom: 1rem;">
        <label style="display: block; font-size: 0.8125rem; font-weight: 500; color: #374151; margin-bottom: 0.375rem;">Workspace name</label>
        <input type="text" value="Acme Corp" style="width: 100%; border: 1px solid #d1d5db; border-radius: 0.375rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; color: #111827; outline: none; box-sizing: border-box;" />
      </div>
      <div style="margin-bottom: 1rem;">
        <label style="display: block; font-size: 0.8125rem; font-weight: 500; color: #374151; margin-bottom: 0.375rem;">Slug</label>
        <div style="display: flex; align-items: center; border: 1px solid #d1d5db; border-radius: 0.375rem; overflow: hidden;">
          <span style="padding: 0.5rem 0.75rem; background: #f9fafb; font-size: 0.875rem; color: #6b7280; border-right: 1px solid #d1d5db;">app.example.com/</span>
          <input type="text" value="acme-corp" style="flex: 1; border: none; padding: 0.5rem 0.75rem; font-size: 0.875rem; color: #111827; outline: none;" />
        </div>
      </div>
    </div>
    <div style="padding: 0.75rem 1.5rem; background: #f9fafb; border-top: 1px solid #e5e7eb; display: flex; justify-content: flex-end; gap: 0.5rem;">
      <button style="background: white; color: #374151; border: 1px solid #d1d5db; border-radius: 0.375rem; padding: 0.5rem 1rem; font-size: 0.8125rem; font-weight: 500; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.05);">Cancel</button>
      <button style="background: #2563eb; color: white; border: 1px solid #2563eb; border-radius: 0.375rem; padding: 0.5rem 1rem; font-size: 0.8125rem; font-weight: 500; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.05);">Save changes</button>
    </div>
  </div>
</div>

List with actions

Team Members

Sarah Kim

sarah@acme.com

Admin

James Doe

james@acme.com

Editor

Amy Liu

amy@acme.com

Viewer

View code

<div style="padding: 2rem; background: #fafafa;">
  <div style="background: white; border: 1px solid #e5e7eb; border-radius: 0.5rem; max-width: 36rem; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.05);">
    <div style="padding: 0.75rem 1rem; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: space-between;">
      <h3 style="font-size: 0.8125rem; font-weight: 600; color: #111827; margin: 0;">Team Members</h3>
      <button style="background: #2563eb; color: white; border: none; border-radius: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; cursor: pointer;">Invite</button>
    </div>
    <div style="border-bottom: 1px solid #f3f4f6; padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between;">
      <div style="display: flex; align-items: center; gap: 0.75rem;">
        <div style="width: 2rem; height: 2rem; border-radius: 9999px; background: #dbeafe; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; color: #2563eb;">SK</div>
        <div>
          <p style="font-size: 0.8125rem; font-weight: 500; color: #111827; margin: 0;">Sarah Kim</p>
          <p style="font-size: 0.75rem; color: #6b7280; margin: 0;">sarah@acme.com</p>
        </div>
      </div>
      <span style="font-size: 0.6875rem; font-weight: 500; background: #f3f4f6; color: #6b7280; padding: 0.125rem 0.5rem; border-radius: 9999px;">Admin</span>
    </div>
    <div style="border-bottom: 1px solid #f3f4f6; padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between;">
      <div style="display: flex; align-items: center; gap: 0.75rem;">
        <div style="width: 2rem; height: 2rem; border-radius: 9999px; background: #fce7f3; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; color: #ec4899;">JD</div>
        <div>
          <p style="font-size: 0.8125rem; font-weight: 500; color: #111827; margin: 0;">James Doe</p>
          <p style="font-size: 0.75rem; color: #6b7280; margin: 0;">james@acme.com</p>
        </div>
      </div>
      <span style="font-size: 0.6875rem; font-weight: 500; background: #dbeafe; color: #2563eb; padding: 0.125rem 0.5rem; border-radius: 9999px;">Editor</span>
    </div>
    <div style="padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between;">
      <div style="display: flex; align-items: center; gap: 0.75rem;">
        <div style="width: 2rem; height: 2rem; border-radius: 9999px; background: #ecfdf5; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; color: #10b981;">AL</div>
        <div>
          <p style="font-size: 0.8125rem; font-weight: 500; color: #111827; margin: 0;">Amy Liu</p>
          <p style="font-size: 0.75rem; color: #6b7280; margin: 0;">amy@acme.com</p>
        </div>
      </div>
      <span style="font-size: 0.6875rem; font-weight: 500; background: #f3f4f6; color: #6b7280; padding: 0.125rem 0.5rem; border-radius: 9999px;">Viewer</span>
    </div>
  </div>
</div>

System prompt

Copy this into your AI system prompt

You generate UI in the modern SaaS style — the visual language of Stripe, Linear, Vercel, and Raycast. Engineered precision, not artistic expression. Every pixel justified, every spacing decision systematic.

VISUAL RULES:
- Background: white (#fff) for main, #fafafa for page/section backgrounds. Cards are white on gray bg.
- Borders: 1px #e5e7eb (gray-200). Consistent everywhere. The border is the primary visual separator.
- Shadows: Minimal. shadow-sm on cards/dropdowns only. `0 1px 2px rgba(0,0,0,0.05)`.
- Border radius: rounded-lg (8px) on cards and modals. rounded-md (6px) on buttons and inputs. Consistent, never mixed.
- Text: gray-900 for headings, gray-600 for body, gray-400 for placeholders. Pure black for emphasis only.
- Accent: Blue (#2563eb / blue-600). Used for primary buttons, links, focus rings, active states. Nothing else.
- Typography: System sans-serif. text-sm (14px) for most UI. text-xs for metadata/labels. font-medium for buttons and labels. font-semibold for headings.
- Spacing: 4px grid strictly. p-4 inside cards, gap-4 between items, py-3 for list rows. Tight but never cramped.
- Hover states: bg-gray-50 on rows and ghost buttons. Border-color darkens on cards. Subtle, 150ms transition.

SPECIFIC PATTERNS:
- Cards: bg-white border border-gray-200 rounded-lg shadow-sm. p-4 or p-5 depending on density.
- Buttons primary: bg-blue-600 text-white rounded-md px-4 py-2 text-sm font-medium shadow-sm. Hover: bg-blue-700.
- Buttons secondary: bg-white text-gray-700 border border-gray-200 rounded-md shadow-sm. Hover: bg-gray-50.
- Buttons ghost: text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md.
- Inputs: border border-gray-300 rounded-md bg-white text-sm px-3 py-2. Focus: ring-2 ring-blue-500/20 border-blue-500.
- Tables: border-separate, text-sm. Header bg-gray-50 text-xs text-gray-500 uppercase. Rows border-b border-gray-100.
- Badges: bg-blue-50 text-blue-700 rounded-full text-xs font-medium px-2.5 py-0.5. Or gray-100 text-gray-600 for neutral.
- Navigation: text-sm font-medium text-gray-500 hover:text-gray-900. Active has bg-gray-100 rounded-md.

ANTI-PATTERNS:
- No bright or saturated colors except blue accent.
- No large shadows. No glows.
- No rounded-full on cards or containers. Rounded-lg maximum.
- No serif fonts. No decorative type.
- No gradients on buttons. Solid fills only.
- No colored backgrounds on sections. Gray-50 maximum.

Related prompts

Case Study

Redesigning the checkout flow

How we reduced cart abandonment by 23% with three small changes to the payment step.

Soft Minimal

🔥78system

Generates ultra-clean UI with enormous whitespace, barely-there borders, whisper-soft shadows, and a restrained gray palette. Every element floats in negative space. Less is less.

◆ Artisan Collection ◆

The Language of Pattern

Each tile tells a story. In repetition, individual forms become something greater — a visual rhythm that transforms walls into canvases.

Lisboa, 2026 ● Hand-painted

● ● ● ● ●

348

Patterns

Artisans

5th

Century

Minimal

Ceramic Tile

🔥77system

Generates UI inspired by Portuguese azulejo and Moroccan zellige — intricate blue-and-white patterns, decorative borders, tile-grid layouts, and the handcrafted warmth of traditional ceramic artistry.

Product

RT-20 Interface Module

A single-purpose module for routing audio signals. Four inputs, one output. No unnecessary features.

$120.00

Minimal

Dieter Rams

🔥86system

Generates UI inspired by Dieter Rams' 10 Principles of Good Design — extreme functional minimalism, Braun-era industrial aesthetics, deliberate restraint, and the conviction that less but better is the only way.