TypeUI 发布面向 AI 工具的 UI 微交互提示词库

Image 1: TypeUI logo Image 2: TypeUI logo TypeUICtrl K

Design skills Design systems for AI tools.Open design skills UI prompts Ready-to-use UI prompts.Open UI prompts UI Animations Preview motion and copy prompts.Explore UI animations Micro Interactions Small actions, clear feedback.Explore Micro Interactions UI Sound Effects Sound effects for your UI.Explore UI sounds UI Foundations The details behind better UI.Explore UI foundations Brand kit Logos, colors, and typography.Open brand kit UI/UX audit Accessibility and design checks.Open UI/UX audit

Insights Docs Changelog Roadmap Pricing

2.1k

Get TypeUI Sign in

Open menu

Micro Interactions

Explore 113 interactive UI micro interactions for buttons, forms, selection controls, modals, navigation, and more. Preview each behavior and copy its implementation prompt with TypeUI Creative.

Search micro interactions

Buttons Explore button micro interactions for confirmations, undo actions, copy feedback, loading states, and upload progress. Try each example and copy its implementation prompt. Explore all

Press

Restricted action

Denied action shake

Copy prompt

128

Toggle reaction state

Copy prompt

Workspace

Light appearance

Switch the preview theme

Swap state icon

Copy prompt

Choose an option

Reveal secondary actions

Copy prompt

Hold to confirm

Hold for 1.2s to confirm

Hold to confirm

Copy prompt

R e m o v e

Fluid action button

Copy prompt

Copy text

Copy feedback

Copy prompt

Remove item

Confirm reveal

Copy prompt

Confirm action Confirm action Confirm action

Action slide-out

Copy prompt

Add item Added

Roll reveal

Copy prompt

Sample files

sample-a.txt 2 KB
sample-b.txt 4 KB

Show files

Wall reveal

Copy prompt

Sample usage 75%

Show sample usage

Slide-off reveal

Copy prompt

Loading

Save sample

State morph

Copy prompt

Run refresh demo

Refresh spin

Copy prompt

Remove sample

Sample is ready.

Undo countdown

Copy prompt

Run loading demo

Bounce dots

Copy prompt

Run loading demo

Dual ring

Copy prompt

Run loading demo

Bar wave

Copy prompt

Run progress demo

Count ramp

Copy prompt

Run progress demo Run progress demo

Fill sweep

Copy prompt

Run upload demo

Upload progress

Copy prompt

2 sample files

sample-a.txt 0%
sample-b.txt 0%

Upload sample files

Local demo · no uploads

Multi-file upload

Copy prompt

Run loading demo

Slide bar

Copy prompt

Run loading demo

Shimmer

Copy prompt

Inputs Explore input micro interactions for password visibility, autosave, validation, formatting, character counts, and suggestions. Build forms that help users enter and correct information. Explore all

Adornments

Password

Reveal toggle

Copy prompt

Sample link

Copy confirm

Copy prompt

Username

Prefix reveal

Copy prompt

Weight

Suffix fade

Copy prompt

Note

Autosaves in this tab

Confirm delayed state

Copy prompt

Search projects

Design system

1 project found

Clear to show all projects

Clear fade

Copy prompt

Focus

Verification code

Type or paste four digits

Segment fill

Copy prompt

Typing

Release notes

Auto-grow

Copy prompt

Bio

0/80

Counter tick

Copy prompt

Headline

0 of 60 characters used

Ring drain

Copy prompt

New password

Strength fill

Copy prompt

Abstract

0 words

Count spring

Copy prompt

Topics

design motion

Chip pop-in

Copy prompt

Comment

Toolbar reveal

Copy prompt

Card number

Digit grouping

Copy prompt

Phone

Mask fill

Copy prompt

Post title

/blog/your-post-title

Build derived value

Copy prompt

Comment

Filter triggered suggestions

Copy prompt

Validation & Error

Name

At least 3 characters.

Inline validation

Copy prompt

Check the email address

Invalid submit shake

Copy prompt

Did you mean gmail.com?Use suggestion

Offer inline correction

Copy prompt

Password Confirm password

Confirm matching values

Copy prompt

Password

Caps Lock Off

Toggle Caps Lock to try

Reveal modifier warning

Copy prompt

Selection Explore checkbox, toggle, and radio micro interactions that reveal settings, update totals, filter results, and enable actions. Preview how each choice changes the interface. Explore all

Checkbox

Item 1 Item 2 Item 3

Select items to begin

Reveal contextual actions

Copy prompt

Option 1+10 Option 2+20 Option 3+30

Total 100

Recalculate derived value

Copy prompt

Select all

Item 1 Item 2 Item 3

0 selected

Select-all cascade

Copy prompt

Item 1 Item 2 Item 3

Animate completed item

Copy prompt

Text Images

3 results

Notes Text
Cover Images
Brief Text

Filter chips

Copy prompt

Release notes

Draft

I’ve reviewed this draft

Publish draft

Review before publishing

Enable dependent action

Copy prompt

Item 1 Item 2 Item 3

0 of 3 complete

Update derived progress

Copy prompt

Item 1 Item 2 Item 3

0 selected · minimum 2

Enforce selection threshold

Copy prompt

Email SMS Push

Selected: Email

Update selection summary

Copy prompt

Add a note

Reveal dependent content

Copy prompt

Toggle

Your sample text

Icon toggle group

Copy prompt

Show route

Route hidden

Toggle visual layer

Copy prompt

Compact rows

Item 1

Item 2

Item 3

Change display density

Copy prompt

Quiet hours

From Until

Reveal dependent settings

Copy prompt

Auto-renew

Access is active

Swap dependent timeline

Copy prompt

Hide preview

Your sample content

Update masked preview

Copy prompt

Radio

Standard Express Priority

3 days 0 credits

Update linked values

Copy prompt

First Second Third

First Item

Second

Third

Item in First destination

Move shared item

Copy prompt

Name Email Note

Name

Swap dependent controls

Copy prompt

Viewer Editor Owner

Read Allowed

Edit Not allowed

Manage Not allowed

Update option matrix

Copy prompt

One step Two steps Three steps

Step 1
Step 2

Rebuild dependent steps

Copy prompt

Modals Explore modal micro interactions for confirmation, validation, drag dismissal, and unsaved changes. Help users complete focused tasks while preserving their work and keyboard focus. Explore all

Open sheet

Drag down to dismiss

Copy prompt

Open blocking modal

Backdrop-click nudge

Copy prompt

Open modal

Error shake

Copy prompt

Open modal

Confirm completed action

Copy prompt

Open modal

Gate exact-match action

Copy prompt

Open modal

Hold to trigger action

Copy prompt

Open modal

Block unsafe dismissal

Copy prompt

Drawers Explore drawer and bottom-sheet micro interactions for edge gestures, linked backdrops, and expanding panels. Try pointer controls and keyboard alternatives. Explore all

Open drawer

Navigation

Home

Library

Edge swipe open

Copy prompt

Open sheet

Drag-linked backdrop

Copy prompt

Item 1 View details

Open to see details

Expand shared surface

Copy prompt

Item 1

Item 2

Item 3

Collapse

Collapse persistent panel

Copy prompt

Tooltips Explore tooltip and hover-card micro interactions for useful context, link previews, and shared hover delays. Keep supporting information accessible to mouse and keyboard users. Explore all

Shipped by@vertical two hours ago

Hover card

Copy prompt

Preview the details in the motion guide, with every duration and curve.

Link preview

Copy prompt

Hover, focus, or tap

Warm delay group

Copy prompt

Toasts Explore toast micro interactions for undo actions, asynchronous results, and swipe dismissal. Give users clear feedback and a way to recover from a change. Explore all

Archive conversation

Undo countdown toast

Copy prompt

Save snapshot

Promise toast morph

Copy prompt

Trigger toast

Swipe to dismiss toast

Copy prompt

Step navigation Explore step-navigation micro interactions for progress, validation, returning to completed steps, and remaining time. Make multi-step forms and onboarding flows easier to follow. Explore all

1 Start Step 1
2 Review Step 2
3 Done Step 3

Step 1 of 3.

Stepper progress

Copy prompt

1 Name Step 1
2 Review Step 2
3 Done Step 3

Name

Enter a name to continue

Block invalid advance

Copy prompt

1 Start
2 Review
3 Done

Continue to start

Return to completed step

Copy prompt

Choose a layout 1 / 3

Time remaining 2 min

Update remaining time

Copy prompt

Lists Explore list micro interactions for reordering, pinning, archiving, inserting, and previewing items. Keep changes understandable without losing the user’s place. Explore all

Why measure the height?

A hardcoded max-height eases wrongly and breaks the moment content changes.

Why clip the content?

Why 250ms?

Accordion

Copy prompt

In progress

Design tokens Empty states

Done

Nav rewrite

Select an item to move

Move between groups

Copy prompt

1 Ingest
2 Transform
3 Validate
4 Publish

Drag to reorder

Copy prompt

Items 0 pinned

Item 1

Item 2

Item 3

Pin item to top

Copy prompt

Items 3 items

Item 1

Item 2

Item 3

Archive item with undo

Copy prompt

Items 2 items

Item 1

Item 2

Insert new list item

Copy prompt

1 Item 1 2 Item 2 3 Item 3

Selected item

Item 1

Sample content for the first item.

Preview selected item

Copy prompt

Sliders Explore slider micro interactions for range selection, snap points, tooltips, scrubbing, and before-and-after comparisons. Try precise pointer and keyboard feedback. Explore all

Drag thumb

Copy prompt

XS S M L XL

Stepped snap

Copy prompt

Drag or use arrow keys

Tooltip thumb

Copy prompt

0 25 50 75 100

Tick highlights

Copy prompt

25 – 80

Dual-thumb range

Copy prompt

Before

After

Before / after compare

Copy prompt

Slide 1

Slide 2

Slide 3

Slide 4

Slide 1 of 4

Snap carousel

Copy prompt

Drag past either end

Rubber band overdrag

Copy prompt

4:24 12:34

Scrubber preview

Copy prompt

Stops: 0, 25, 50, 75, 100

Magnetic detents

Copy prompt

Update level icon

Copy prompt

Cards Explore card micro interactions for expanding details, flipping content, revealing actions, swiping, and shared-element transitions. Give each interaction a clear purpose and result. Explore all

FrontFlip to the other sideBackFlip back to the front

Flip card

Copy prompt

Details

Expandable

Copy prompt

Sample card

Card not saved.

Hover, focus, or tap

Action reveal

Copy prompt

1 of 4Card 1

Left Right

Card 1 of 4

Swipe to dismiss

Copy prompt

Card 1

Card 2

Card 3

Card 1 of 4

Stacked deck cycle

Copy prompt

Sample card View details

Shared element expand

Copy prompt

Let us handle your UI Give your AI coding tools the design systems, UI prompts, downloads, and MCP resources they need to build cleaner interfaces for you. Improve your UI with TypeUI

Image 3: TypeUI logo Image 4: TypeUI logo TypeUI TypeUI gives AI coding tools curated design systems, UI prompts, and layout variations so they can generate cleaner, more consistent interfaces.

Newsletter

Get updates

Social accounts