UIai-ui-design · personal demo

AI Interface Design Rules

Interface and interaction rules for AI chat and agent front ends: design tokens, spring parameters, Chinese IME guards, streaming scroll — decided once, no rework.

Download ZIPBack to skills

What you get

• Token structure and spring motion parameters
• Guard rules for Chinese IME and streaming scroll
• Tool confirmation cards, a safe sandbox, and an acceptance checklist

Good for

• Building chat UIs, dialogs, or tool-call cards
• Your agent front end feels generically AI-made
• The team needs a React/Tailwind spec they can ship

Not a fit

• You need a whole-site visual direction. Use frontend-design
• You need inspiration references. Use ui-design-refs
• You need static diagrams. Use diagram-design

About this skill

You

Build an AI chat box to this spec: streaming output never jumps, IME composition never sends, tool calls go through a confirmation card.

How to use

1. Choose Copy skill and hand the spec to your front-end agent.
2. Say what to build: a chat box, tool cards, or the whole front end.
3. Walk the acceptance checklist: motion, IME, streaming, safety.