AI products are often described as if the intelligence were the whole product. It is not. The model can be brilliant, but somebody still has to wait for it, understand it, correct it and occasionally stop it doing something ambitious to the wrong customer account. That awkward territory between intent and outcome is interface design.
AICSS, created by Kevin, is a useful collection of small components for that territory. None of them attempts to make AI look like magic. They make its state, evidence and consequences legible. That is a much better use of pixels. Below are fourteen patterns from the library, rebuilt as working light-mode demos so the interaction can be judged rather than merely admired in a code block.
Thinking State: make latency say something
The spinner has enjoyed a remarkably long career despite producing no evidence of employment. A thinking state can do better. A short label and restrained shimmer acknowledge that work is happening without turning delay into theatre. The wording matters: “Checking routes” is useful; “Thinking deeply” is a tiny press release.
Good loading copy describes the current activity in language the user recognises. It should also survive failure gracefully. If the task stalls, the same area needs to become an explanation and a route forward, not an immortal animation. For longer work, preserve the previous result, show elapsed time when it matters and respect reduced-motion preferences.
Thinking + Reasoning: show the route, not a synthetic diary
The thinking and reasoning pattern separates the answer from the supporting activity. That distinction is valuable. People may need to know which sources were checked, which tools ran and where an error occurred. They rarely need a theatrical transcript pretending the model’s hidden workings are minutes from a committee meeting.
Use disclosure progressively. Keep the result prominent, make the evidence available and let diagnostic detail stay folded until somebody needs it. Trust grows from useful provenance and honest uncertainty, not from a scrolling monologue wearing a lab coat.
Orbs: motion should carry meaning
Orbs give an agent a small visual vocabulary: idle, listening, thinking and responding. Used well, motion becomes ambient status. Used enthusiastically, it becomes a desktop lava lamp with API access.
The useful move is to assign each behaviour a stable meaning. Keep amplitude modest, avoid colour alone as the state signal and provide an equivalent label for assistive technology. An orb can add warmth to a voice or agent experience, but it should never be the only witness to what the system is doing.
File Diff: make consequences inspectable
When an agent edits something consequential, the interface should make the change boringly obvious. The file diff pattern places additions and removals side by side with enough context to judge them. It turns “the AI updated it” into a reviewable proposition.
This applies far beyond code. Contract clauses, pricing assumptions, itinerary details and customer records all benefit from before-and-after evidence. In work such as my enterprise product design, reversibility is not an advanced feature. It is what allows automation to be trusted in the first place.
Image Generation: show progress without faking precision
The image generation pattern gives visual work a frame, progress and context. That sounds simple because it is simple. It is also far better than leaving a blank rectangle on screen while a percentage counter invents confidence.
A useful generation state keeps the prompt or task visible, distinguishes queueing from rendering and makes cancellation or retry possible. Once complete, show the resulting asset at a useful size with obvious download and revision actions. The transition from waiting to evaluating is the whole interaction; the confetti is optional.
Text Response: typography is part of intelligence
A model may produce paragraphs, lists, tables, warnings and links in a single response. The text response pattern treats that output as designed content rather than escaped database material.
Readable measure, calm hierarchy and sensible spacing do more for perceived quality than another glowing gradient. Actions such as copy, retry and feedback belong near the response, but should not compete with it. If everything looks actionable, the answer starts to resemble an aircraft cockpit designed by a social network.
Streaming Text: pace the arrival, preserve the reading
Streaming text reassures people that a response has begun, but it can also make reading oddly athletic. The interface should not yank the viewport, reflow settled paragraphs or make the cursor the most important character on screen.
Stream when early content is useful. Buffer when fragments would be distracting. Let people interrupt, keep controls stable and allow the page to stop auto-scrolling when they move back to inspect something. Speed is valuable; composure is also a product feature.
Inline Citations: put evidence beside the claim
The inline citation pattern keeps provenance close to the sentence it supports. This is much more useful than a ceremonial pile of links at the bottom, where sources go to be technically present and practically ignored.
A citation should reveal its title, publisher and relevant passage without losing the reader’s place. It should also distinguish strong sources from merely available ones. Evidence is not decoration. When an answer informs a commercial or operational decision, traceability becomes part of the task.
Code Block: make generated code usable
The code block pattern combines syntax, language context and a copy action in a restrained container. Generated code needs this because copying is usually the actual next step, not a fringe benefit discovered after selecting forty-seven lines by hand.
Keep line wrapping deliberate, make long samples scroll safely and announce copy success without moving the layout. If code is incomplete or illustrative, label it. A polished block can still contain a dangerous command; visual confidence must not impersonate technical certainty.
To-do List: turn decomposition into accountability
Agents often split work into steps. The to-do list pattern makes that plan visible as changing state rather than narrated optimism. Pending, active, complete and failed tasks provide a compact operational picture.
The list should reflect real system events, not a predetermined animation. Let people see dependencies, open the result of a completed step and understand why another is blocked. This is particularly useful in enterprise workflows, where “done” may mean approved, synchronised and auditable—not simply that the agent has stopped typing.
Data Table: structure the output for action
The data table pattern recognises that many AI answers are really temporary datasets. Rows and columns allow comparison, sorting and selection in ways a charming paragraph cannot.
The model should explain how the data was assembled and the interface should preserve source links, units and missing values. Then let users act: filter, export, inspect and correct. Tables are not where design goes to retire. They are where confident prose is forced to meet specific numbers.
Comparison Table: help a decision happen
A comparison table organises alternatives around shared criteria. The crucial design decision is not the grid; it is which differences deserve attention. An AI can summarise options, but it should not quietly choose the weights that define “best”.
Expose assumptions, allow criteria to be adjusted and keep unknowns visibly unknown. Highlighting a recommendation is useful when the reason is equally prominent. Otherwise the table becomes a confident opinion arranged into columns.
AI Agent Input: the composer is a control surface
The AI agent input pattern treats the prompt box as more than a textarea with excellent marketing. Attachments, model choices, context and enhancement tools all shape the request before the agent begins.
Those controls should reveal what will be included and what the system can access. Attachments need visible states; keyboard behaviour must be predictable; destructive or expensive modes should not hide behind a sparkle icon. The best composer gives people leverage without requiring them to become prompt engineers on Tuesdays.
Approval Card: authority belongs in the interface
The approval card is the most important pattern in the set because it draws a boundary around agency. Before an agent sends, purchases, deletes or changes permissions, the person responsible should see exactly what will happen and make an explicit choice.
Good approval is specific, contextual and reversible where possible. It explains scope, cost and destination, then records the decision. “Allow” and “Deny” are only useful if the surrounding copy names the action. Human-in-the-loop design is not a modal dropped into the process at the last minute; it is a model of responsibility made visible.
The pattern behind the patterns
Taken together, these components describe a more mature idea of AI-native design. The interface communicates state, shows evidence, preserves agency and makes consequences inspectable. It does not ask users to trust intelligence as a brand attribute.
That is also the standard I apply in complex product work: reduce hidden state, keep ownership clear and make the route from suggestion to decision understandable. You can see that thinking across my case studies and product design work, where the interesting challenge is rarely generating an answer. It is fitting that answer into a system people can safely operate.
AICSS is valuable because it makes these ideas concrete. Copy the component, certainly. More importantly, copy the discipline behind it. A capable agent still needs an interface that knows when to speak, when to explain and when to ask permission.
