Make your Coda AI views look like your brand
AI views in Coda and Superhuman Docs build a working app on your table in a few prompts. Left alone, that app looks like every other AI-generated screen.
For Coda and Superhuman Docs builders who want AI views that match their brand
Instant access, no cost
What you’ll be able to do
- Turn your website URL into a written design system with hex codes, fonts, spacing and CSS tokens, using one prompt in ChatGPT or Claude.
- Point an AI view at your design system page in plain language, so the app it builds uses your colors and type.
- Spot the AI view gotchas before your team opens the app: copied views are forks, outside systems are off limits for now, and it adds features you didn't ask for.
What’s inside
- A plain-language guide to what a design system is, built around four layers: tokens, components, patterns and guidelines
- A checklist of what a brand design system covers, from color jobs and type scale to focus states and tap target sizes
- Six steps for building one when you aren't a designer, starting with the website you already have
- The WCAG AA contrast thresholds for body text, large text, icons and input borders
- The copy-paste prompt: give it a website URL and get back an 11-section design system with ready-to-paste CSS tokens and a confidence rating
- What to do with the output once you have it, including how to hand it to an AI tool
Before you download
- Do I need to be a designer to use this?
- No. Scott isn't one either. The Keel Training design system in the video was generated with Claude, and the prompt in this doc does the same job from any website URL.
- Does the prompt only work in Claude?
- It works in ChatGPT, Claude or any AI tool that can open web pages. Turn on web browsing first. If the AI can't open the site, the prompt tells it to ask you for page text or screenshots rather than invent hex codes.
- How do I get an AI view to follow my design system?
- Save the output as a page in the same doc. Then tell the AI view to follow the design system on that page, either in your first prompt or in the edit chat afterwards. Plain language is enough.
- Can AI views pull data from Jira, Salesforce or Gmail?
- Not during the public beta. AI views work with the Coda data in your doc, and they can store extra data inside the app itself, like the evolving fox in the task tracker from the video.
Full transcript
Holy moly, I cannot believe it built this, and according to my brand notes. Oh my gosh.
All right, so we're going to look at AI views in Coda, or Superhuman Docs. If you don't know what these are, buckle up, because this might shock you. They are one of the biggest launches that Coda has done in the past five years, easily. You're able to build full-blown applications on top of your Coda data with a few prompts. So I'm going to show you from the very start how to build them, but also a ton of pro tips that Coda themselves didn't even know were possible. So jump in with me, let's follow along.
So first off, what are AI views? AI views are just another way to view your normal Coda data. When I press add view, I have all my normal options here, like table, board, timeline, cards and more, and I have an AI view. When you build an AI view, you end up with a completely custom application built from scratch on top of your Coda data that is in sync with it. So if I'm able to say "launch clients" here, and I'm in Coda and that changes, you'll see that all of these things will change as well inside of my table.
All right, so let's start building one and talk about best practices. And then I'm going to show you how to integrate your own design system, so every view you make isn't bland, boring AI slop but is custom to you or your business's brand. So stick around to the middle for that.
All right, so let's go build one of our own views. Now let's click on this, and what you're met with is a screen with a prompt box. It's going to look really similar. There are some examples or starters that you can do. They actually run a quick prompt over your data, so these are likely relevant to the table on which you're building already. But let's just build one ourselves. We're going to say: I want to build a task management system for myself. There should be a button to add a new task, which gives a pop-up to add new tasks, and there should be a snooze feature that allows me to snooze and hide tasks for a certain number of days.
Now if we do that, you're going to see that it opens up a chat window on the right-hand side here, and it's going to start thinking about it. Next up, what you're going to see is that it's going to look at your data and then it's going to start interviewing you. It's going to ask you questions about the application you're going to build. So the first one: how should your open tasks be laid out? Let's have a dense, sortable table. How should snoozing work? Quick presets, anchored pop-up. So depending on how complex your table is, or how complex or not complex your prompt is, it's going to ask you more or fewer questions. Now we're going to go ahead and build it, and we can watch it build.
Now while it's building, I want to cover a couple of things, or gotchas. First off, I'm recording this right after this was launched in public beta. So if you're watching this in December, January or 2027, things might have changed. Look for a newer video; I will have posted that already. But as it is today, if I come out of this and I press edit, that's how I reopen my editing experience.
If I come to these three dots up here, you're going to see a couple of different things: files, versions and show debug tools. Files are pretty much worthless, especially if you're non-technical. There's nothing you could do with them, but it's giving you insight into the code that's being written to generate your application. Versions is pretty nice. As you start iterating with more and more prompts to change it after it generates, it's going to give you more versions, and you can actually restore old versions. My guess here is they're going to build a whole sandbox environment where, as a developer, you can develop a version and wait until it feels custom enough and fine-tuned enough to launch to your team. So take a look at both of those things.
As for other things, there's no way as of right now to copy your view of an app and place it on another table. So let's say you had a list here, and for your team you had the department-specific tasks, and you wanted a view of your table. In Coda we're used to having a view of a normal table. I can't add a view of this app. So when you add an application like this into your document, it's only accessible in a single spot, on a single page, so you cannot duplicate that. You can right-click on this and copy AI view. That's a unique feature. If you do that, it says it's copied to clipboard; paste it by adding a view to any table. I could then come to here and press that, and now you'll see it says paste Task Buddy. That doesn't give you a true view of the application. It could be slightly different, because AI is building it. It's going to build basically a forked copy of it. It should look and feel really similar, but it won't be the exact same one. So that's really important to know.
All right, so now I'm going to give you guys a power tip. We see here this is our application that was built in AI views. It's nice, it's editable, and it's connected to my data. Great, I can add a task: what needs doing. But this is just AI slop. It's just randomly generated UI. So this is a power tip. What you're going to do, depending on your brand or how you want it to look, is get a design system set. Now our team owns something called Keel Training. We do AI training on Claude and ChatGPT, and so I uploaded our design system here, with hex codes, types and more. I didn't do this all myself. I'm not a designer, but I did generate this design system using Claude. If you want to know how you can more easily develop design systems, just look at the description. I've got some tips there for you, a resource that you can grab to easily develop your own design systems.
But what I can do here, in my tasks, and how I got Task Buddy to look so familiar to our brand, is I just say edit, and it's able to access this page inside of my document. So I can say: modify the entire brand and feel so that it's referencing our design system on the design system page inside this document. Now I didn't have to use any technical references. I just told it in plain language: hey, inside of this document I have a design system, go ahead and put that in. You'll see right now it's absorbing our design decisions, and it's reading the page, so it's reading our page. I haven't actually done this in a second chat before. When I built this first AI view here that's finished, I actually did it in the very initial prompt: please ensure that you follow the design system. So that is a pro tip to get these apps to start looking like you want them to look, because that is one of the most important things in an AI view: that it looks and feels like you want it to look and feel, or else you're not going to use it. So as this one gets modified, we're going to have a second version of it, and you'll be able to see that soon.
Let's start talking about some limitations that it has right now. So one limitation is you can't make arbitrary API requests. If that sounds like jargon to you and you have no idea what that is, all that means is it can't call other systems automatically: Jira, Salesforce, Gmail. It's only interacting with your table data. In my idea, it will probably be able to interact with outside data eventually, via sync tables and other Pack mechanisms, but for now, especially in this beta, it's primarily restricted to your native Coda data.
It can do things that are completely outside of the data, though. You'll see here I have a little fox that evolves. It's bold and quick. I'm going to go ahead and evolve him up. Let's get ten more. Six, five, four. Great, evolved into Ember. He's on form three of four. So you'll see that this little foxy is, woohoo, fully evolved now, because I did my task list. There's nothing in the raw table. I don't have any additional columns that support what level I am, fox, aurora, this or that. So the application itself, while built on this table as the back end, stores more data than just the table data itself. Inside of the code, it's storing data about how many forms there are, what the animal looks like, and all those different things. Woohoo, my power boost is on. So your AI views can store data within themselves to augment or supplement what you have going on.
Holy moly, I totally forgot to show you the finished product. So we just asked our code assistant to create our AI view according to our design system, pointing back to our design system page, and sure enough, it did it. It edited and modified it quite a lot.
There are a couple of other things I noticed about this, though. When it finished, it's adding in features that you didn't even ask for, so be aware of that when you're creating AI views. I would go and test them before giving them out to your team. So a couple of examples. Number one, this is pretty nice: on top of these status bars, I can click and it sorts them. I can sort alphabetically if I click there. I never asked for that. It didn't tell me it was doing that; it just did that. Not that I'm against that feature, but it goes to show you that the AI might develop things that it thinks are helpful, which is nice, because you can't anticipate everything yourself, but just be aware of it.
And then there are other things you're going to want to be able to tweak, like the task. I can barely even see this task at all. Can't see it at all. So this is where your second round of edits comes in. I would want to come in and say something like: on the open tab, where I'm looking at open tasks, it's so tiny that I can't even read the task name. That task name column should be the largest column available so I can see it, and also wrap the text. I also want to be able to click on each row. I don't know where in the row, but somewhere in the row, I want to click on it and have it open a dialogue where I can see the task's details in some sort of pop-up.
All right, so we're going to let that go. While it does, one other tip for you. I'm not necessarily a product designer. I don't know the exact best way to do things. So where should I click on this row to open it? I don't know. I can trust the AI to do that for me, though. Coda is going to be able to build that application and make those product decisions for me. So let's look at this last edit and see what it does. It's going to do something exciting, and then we'll wrap up.
All right, so it's done it for us. You'll see now that the task name column is much larger. I can still edit it, and I can click on each one and have it pop up, and close it. So that's really, really nice. So that is the power of AI views. There's so much more to come. This product is going to continually be updated, so make sure that you check out our channel often. We're going to have more videos on this, more best practices. Check out the description for resources, and make sure to subscribe and follow.

