Speaker A
Everyone
Explore 7 essential UI components used by top AI startups to create intuitive, effective, and visually appealing AI tools.
Key Takeaways
- A large, functional prompt box is crucial for user engagement in AI tools.
- Memory and history features transform AI interactions into manageable workspaces.
- Inline editing and confidence indicators enhance usability and trust.
- Visual feedback during loading and research steps improves user experience.
- Modern UI effects like soft glass and subtle animations elevate the product’s perceived quality.
Summary
- Most AI startups use a large prompt box as the central UI element to engage users immediately.
- Effective prompt boxes preview various input types like PDFs, images, and code blocks for better usability.
- Contextual chips and mode toggles help tailor AI responses to specific tasks, enhancing user confidence.
- Deep integrations with tools like Google Drive, GitHub, and Figma improve workflow and functionality.
- Generation history and memory panels allow users to retrieve, manage, and control AI interactions persistently.
- Inline AI editing enables fast, contextual revisions directly within the output, reducing friction.
- Showing AI’s research process and confidence indicators builds trust and transparency with users.
- Loading animations and skeleton screens improve perceived speed and user experience during delays.
- Dark soft glass UI effects with subtle animations convey a modern, premium aesthetic.
- Free Figma design files are provided to help designers implement these UI components.
Full Transcript — Download SRT & Markdown
Speaker A
and their mother seems to have an AI startup now.
Speaker A
And they all look remarkably similar.
Speaker A
Like this, this, this, oh, and this.
Speaker A
But here's the thing, some of these UIs are actually really good.
Speaker A
So, in this video, we're breaking down the most clever design patterns in modern AI tools, real examples, UI components you can steal, and a few I've built myself to give away for free at the end.
Speaker A
First, if you're not starting with a giant prompt box, you're doing it wrong.
Speaker A
It seems to be the go-to for most prompt-based tools.
Speaker A
And honestly, it's not a terrible design choice, it gets the user trying the tool immediately.
Speaker A
Very effective.
Speaker A
And it also gives a much cleaner aesthetic above the fold, kind of like Google.
Speaker A
Also, very effective.
Speaker A
In fact, it's so effective that ChatGPT and Gemini have both ditched their landing pages entirely.
Speaker A
The moment you land, you're in the interface.
Speaker A
That says a lot.
Speaker A
But just having an input field isn't enough, a great prompt box also has to feel useful.
Speaker A
That means previewing PDFs or images like these blocks in Claude, and grouping large inputs like code blocks so they don't take over the chat.
Speaker A
Replit does this well, pasting code instantly compresses into a clean, viewable block.
Speaker A
If the AI has broad use cases, then context taking is also very helpful, think chips that change the mode like brainstorm, data, and email to get better answers.
Speaker A
Cursor does this nicely, allowing you to add code context to the chat, which gives you the confidence that the AI knows what you want before you even say it.
Speaker A
And as AI gets more capable, we're starting to see deep integrations, think buttons that connect to Google Drive, GitHub, Figma, or even internal tools.
Speaker A
You can also build progressive disclosure right into the input, for example, a button to toggle advanced mode or a token cost estimate right above your input.
Speaker A
And of course, this should all feel fast.
Speaker A
Any loading indicators need to be short, looping, and fluid.
Speaker A
Like Notion AI's three bouncing dots, or Claude's rotating star animation.
Speaker A
All of this makes the prompt box go from just an input to the control panel for an intelligent product.
Speaker A
If your product outputs text, code, or even images, generation history is essential.
Speaker A
Tools like ChatGPT organized by session in a vertical list of previous runs.
Speaker A
Others like Notion AI tie generations to the original document block.
Speaker A
The core design principle is retrievability.
Speaker A
That means previewing the first line or short snippet of each generation, allowing deletion of chats, and crucially, allowing search, which turns your history into a workspace, not a waste basket.
Speaker A
Now, let's talk about memory.
Speaker A
Generation history is a record of what happened, but memory is a record of what matters.
Speaker A
Memory is a huge opportunity here, if your AI has persistent memory, you absolutely need to show it and let users control it, in our component, we're giving users a dedicated memory panel where they can see the storage space, bulk delete irrelevant content, and add key facts to persistent memory.
Speaker A
ChatGPT has implemented this, but most tools still hide memory in settings or don't expose it at all, which is wild.
Speaker A
One of the smartest UX patterns we've seen recently, especially from tools like Claude, is inline AI editing, just highlight any part of the response and type exactly what you want changed.
Speaker A
It's fast, contextual, and removes friction.
Speaker A
This pattern is also showing up in newer writing tools, Lex.page lets you rephrase a sentence in line with few keyword shortcuts.
Speaker A
Notion AI gives you contextual buttons like improve writing or fix spelling directly under each paragraph.
Speaker A
The idea is to keep this short and compact, so we've just added a few quick selectors and some keyboard shortcuts.
Speaker A
For the user, it feels like real-time revision, not regeneration.
Speaker A
And speaking of real-time revision, here's a tool that does that for your cover letters.
Speaker A
This is a job listing from OpenText.
Speaker A
Here's part of the cover letter I wrote, and this is part of the cover letter I had Final Round's material generator write.
Speaker A
They were virtually identical, but mine took me about 30 minutes to write, and this took about one.
Speaker A
All I had to do was upload my resume and paste in the job description, then just hit generate and you'll get a strong cover letter customized to that company.
Speaker A
If you want to check it out, it'll be the first link in the description down below.
Speaker A
Back to the video.
Speaker A
Some AI tools don't just generate, they show their work too.
Speaker A
Take Perplexity, it'll show you exactly which steps were taken during research, you'll see documents retrieved, sources cited, and even a flow of logic across multiple hops.
Speaker A
This kind of UX makes the product feel intelligent.
Speaker A
It shows the user that the AI isn't just pulling answers from the void, it's doing the work, referencing material, and showing its trail.
Speaker A
And frankly, it looks kind of cool too.
Speaker A
In our component, we're simulating a mini research trail with three animated steps, searching docs, extracting quotes, and drafting answer, these fade in one by one, so the AI feels like a collaborator, not a black box.
Speaker A
Next, users hate waiting.
Speaker A
Actually, users hate waiting without feedback.
Speaker A
But when you show the AI thinking, even delays become part of the experience.
Speaker A
There's a reason why tools like Notion AI, ChatGPT, and everyone else stream their responses word by word.
Speaker A
That trickle of output turns delay into anticipation.
Speaker A
Skeleton loading like in Reloom plays a huge role here too, when you're generating a wireframe, the canvas shows placeholders, images, and text box with shimmer effects.
Speaker A
So the layout feels alive, then when the content's ready, it slots exactly into place.
Speaker A
In our component, we built a simple loading animation and shimmer effect where the text will eventually appear, it's a tiny thing, but it makes your product feel like it's working alongside the user.
Speaker A
A lot of AI outputs feel confident, but aren't.
Speaker A
The solution, confidence indicators.
Speaker A
Amazon Comprehend does this well, if you ask it who was president in 2009 and it returns Barack Obama, it also shows a confidence score, maybe 97%.
Speaker A
If the model's not sure, it might show 61% or flag the result as unverified.
Speaker A
Twitter would really benefit from that.
Speaker A
Visually, we're using a pill-shaped bar below each AI response with a label like high confidence or unverified, we even let users click it for the specific numeric confidence value.
Speaker A
Since startups are trying to exude technological supremacy.
Speaker A
We're seeing the return of this dark soft glass effect everywhere, you've probably seen it before on pages like GitHub with dark backgrounds, blur, striking gradients, and ever so subtle animations.
Speaker A
In Figma, it's super easy to build, you drop a rectangle with some transparency, add a subtle gradient, blur the background, and top it off with a one-pixel border and soft inner shadow.
Speaker A
We're doing exactly that in our component, plus we're adding a gentle shimmer that runs across the border for a subtle animation.
Speaker A
Think of it like a luxury glass effect.
Speaker A
And that's how to design like every single AI startup.
Speaker A
I hope you learned something, Figma files are below to download, and I'll see you in the next one.
Topics:AI startup UIprompt box designinline AI editinggeneration historyAI memory panelconfidence indicatorsloading animationssoft glass UIAI tool designFigma UI components
![The Wounded Spirit – Timothy Keller [Sermon] — Transcript](https://i.ytimg.com/vi/pkL3R27ZV1o/maxresdefault.jpg)
