AI-Native UI

Stylegeneral

Chatbot, conversational, voice, assistant, agentic, ambient, minimal chrome, streaming text, AI interactions. Best for AI products, chatbots, voice assistants, copilots, AI-powered tools, conversational interfaces.

Chatbot conversational voice assistant agentic ambient minimal chrome streaming text

#6366F1

#10B981

#F5F5F5

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs

Tasks done1,284+12% this week

Emailyou@example.com

Remember meContinue

Today

Review roadmapDone

Ship onboardingIn progress

Team sync3 pm

Prompt

Paste into any AI assistant before describing what to build — or attach it to a project below.

# Visual style: AI-Native UI

Keywords: Chatbot, conversational, voice, assistant, agentic, ambient, minimal chrome, streaming text, AI interactions
Primary colours: Neutral + single accent, #6366F1 (AI Purple), #10B981 (Success), #F5F5F5 (Background)
Secondary colours: Status indicators, streaming highlights, context card colors, subtle accent variations
Effects & animation: Typing indicators (3-dot pulse), streaming text animations, pulse animations, context cards, smooth reveals
Best for: AI products, chatbots, voice assistants, copilots, AI-powered tools, conversational interfaces
Do not use for: Traditional forms, data-heavy dashboards, print-first content

## Prompt keywords
Design an AI-native interface. Use: minimal chrome, conversational layout, streaming text area, typing indicators (3-dot pulse), context cards, subtle AI accent color (#6366F1), clean input field, response bubbles.

## CSS / technical
chat bubble layout (flex-direction: column), typing animation (3 dots pulse), streaming text (overflow: hidden + animation), input: sticky bottom, context cards (border-left accent), minimal borders

## Implementation checklist
☐ Chat layout responsive, ☐ Typing indicator smooth, ☐ Input always visible, ☐ Context cards styled, ☐ AI responses distinct, ☐ User messages aligned right

## Design system variables
--ai-accent: #6366F1, --user-bubble-bg: #E0E7FF, --ai-bubble-bg: #F9FAFB, --input-height: 48px, --typing-dot-size: 8px, --message-gap: 16px

Use it in an app

Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

Start building — free I already have an account

From UI/UX Pro Max (MIT, commit 477bcb2).View source