Does AI App Starter connect to a real model provider?

No. The composer, streaming and stop-control states run on deterministic local fixtures. Connecting an LLM provider is left to the consuming application.

Which screens are included?

The bundle includes Chat (/), Agents (/agents), History (/history), Settings (/settings).

Does it show what streaming and stop states look like?

Yes, in the Light + Dark source. Chat defines default, empty, thinking and streaming states, and a stop control stays visible whenever a response is streaming.

Is it a dashboard or admin template?

No. It is a three-zone chat shell (conversation list, thread, composer) for AI product prototypes, not a data table or CRUD surface.

Does it include auth or conversation persistence?

No. History and Agents run on local fixtures; authentication and persistence stay a boundary for the consuming application.

Can it be used with Cursor, Claude Code and Codex?

Yes. The bundle ships skills/cursor.md, skills/claude-code.md and skills/codex.md, plus implementation and remix prompts scoped to the chat-shell job — composer and streaming states, not a dashboard.

AI App Starter DESIGN.md Template

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.js Tailwind shadcn/ui TypeScript

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.

Open screen

Chat

Compose prompts and inspect message states.

source-template/components/ai-app.tsx

Open screen

Agents

Browse available agent configurations.

source-template/components/ai-app.tsx

Open screen

History

Search previous conversations and empty history states.

source-template/components/ai-app.tsx

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

DESIGN.md is the context

$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.

Install

Run pnpm install and start the local source template.

Load context

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

Extend

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

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
Status	Light	Dark	Usage
Success			Completed generations on light
Success Soft			Success state background on light
Warning			Rate limits, pending on light
Warning Soft			Warning state background on light
Danger			Errors, stopped runs on light
Danger Soft			Error state background on light
Info			Informational links on light
Info Soft			Info state background on light

More templates

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

$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.

$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 preview

Free

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.

$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.

A calm shell that lets AI output take the stage

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

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
Status	Light	Dark	Usage
Success			Completed generations on light
Success Soft			Success state background on light
Warning			Rate limits, pending on light
Warning Soft			Warning state background on light
Danger			Errors, stopped runs on light
Danger Soft			Error state background on light
Info			Informational links on light
Info Soft			Info state background on light

Preview

Purchase to unlock the complete system

Pages included