shadcn DESIGN.mdAI AppCursorClaude CodeCodexPaid source bundle

AI App Starter

A dark-first DESIGN.md for AI apps: deep space canvas, an indigo-to-violet brand gradient reserved for generative moments, calm neutrals, and streaming-aware states.

Preview

Image$29

Open the full preview to inspect theme and responsive behavior.

AI App Starter DESIGN.md template preview showing the product workspace layout

Purchase to unlock the complete system

The preview stays visible. The runnable source, DESIGN.md context, prompts, tokens, and implementation files become available after purchase.

What's in the $29 bundle

  • 4 dashboard pages: Chat · Agents · History · Settings
  • DESIGN.md
  • Tokens + CSS variables
  • Prompts + agent skills
  • 10 reusable components
  • Personal + commercial license
Next.jsTailwindshadcn/uiTypeScript

Stack: Next.js 15 · React 18 · TypeScript · Tailwind CSS · Lucide primitives

Source-backed gallery

Pages included

Every card maps to a route in the runnable source bundle. Open the matching preview path to inspect its route context, then use the ZIP for the runnable source.

AI App Starter Chat route screenshot
Open screen

Chat

Compose prompts and inspect message states.

source-template/components/ai-app.tsx

AI App Starter Agents route screenshot
Open screen

Agents

Browse available agent configurations.

source-template/components/ai-app.tsx

AI App Starter History route screenshot
Open screen

History

Search previous conversations and empty history states.

source-template/components/ai-app.tsx

AI App Starter Settings route screenshot
Open screen

Settings

Configure local workspace preferences.

source-template/components/ai-app.tsx

Public design system

A calm shell that lets AI output take the stage

The brand gradient is reserved for generate moments only — everywhere else the interface stays neutral so streaming output is the thing your eye lands on. Three-zone layout, prompt composer behavior, streaming and stop states, and semantic status are all specified — the parts most AI-chat starters leave undefined until launch.

Token roles

  • Indigo — Primary actions, brand
  • Violet — Gradient end, AI emphasis
  • Blue — Links, secondary accent
  • Dark Canvas — Deep app background
  • Dark Surface — Panels, message cards
  • Dark Surface Raised — Menus, active thread

Typography and rhythm

  • Display: Inter, -apple-system, BlinkMacSystemFont, sans-serif
  • Body: Inter, -apple-system, BlinkMacSystemFont, sans-serif
  • Spacing base: 4px
  • Scale: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64px
  • Responsive rules: Desktop (>1024px): three-zone layout with visible conversation list Tablet (768–1024px): conversation list collapses to a drawer

What is included in the download

The paid ZIP contains the runnable source, design contract and agent handoff artifacts. The public file tree is intentionally visible before purchase.

source-template/
DESIGN.md
README.md
prompts/implement.md
prompts/remix.md
tokens/tokens.json
tokens/css-variables.css
tokens/tailwind.theme.ts
skills/cursor.md
skills/claude-code.md
skills/codex.md
scripts/verify-bundle.mjs

Run locally

cd source-template && pnpm install && pnpm dev

Not included: authentication, database persistence, Stripe, email, analytics providers, authorization enforcement and production API credentials.

AI-agent workflow

How to use

$read DESIGN.md --agent codex

Read DESIGN.md with Codex before editing UI. Preserve local imports, responsive behavior, accessibility, and the existing local UI primitives.

01

Install

Run pnpm install and start the local source template.

02

Load context

Keep DESIGN.md, components.json, and tokens in the project root.

03

Extend

Use the prompts and local UI primitives before adding new patterns.

Related templates

Minimal SaaS DashboardA calm, data-dense SaaS operating system with warm neutral surfaces, graphite navigation, electric signal accents, and a strict 4px grid.SaaS DashboardA ready-to-code SaaS dashboard starter with responsive metrics, customer operations, revenue views, and a warm operational data interface with orange and green signal colors.

Tokens

Color system

Named roles from the template contract. Every swatch is keyboard-copyable and includes its intended use, so the palette stays meaningful outside this preview.

Brand

Surfaces

Text

Data visualization

Status colors

Light and dark status color tokens
StatusLightDarkUsage
SuccessCompleted generations on light
Success SoftSuccess state background on light
WarningRate limits, pending on light
Warning SoftWarning state background on light
DangerErrors, stopped runs on light
Danger SoftError state background on light
InfoInformational links on light
Info SoftInfo state background on light

More templates

Related templates

Explore other ready-to-use DESIGN.md templates for your next project.

Minimal SaaS Dashboard template preview$39
Dashboard

Minimal SaaS Dashboard

A calm, data-dense SaaS operating system with warm neutral surfaces, graphite navigation, electric signal accents, and a strict 4px grid.

SaaS Dashboard template preview$39
Dashboard

SaaS Dashboard

A ready-to-code SaaS dashboard starter with responsive metrics, customer operations, revenue views, and a warm operational data interface with orange and green signal colors.

Editorial Product Landing Page template previewFree
Marketing

Editorial Product Landing Page

A complete conversion system for product launches: warm editorial composition, signal-red action hierarchy, product evidence, section rhythm, copy limits, and mobile rules.

Admin Panel template preview$49
Dashboard

Admin Panel

Admin Panel DESIGN.md for Cursor, Codex, and Claude Code: Light + Dark themes, responsive table rules, semantic states, and Tailwind-ready exports.

Need to know

Frequently asked questions

Practical answers about this template, its implementation scope, and the source bundle.