AI-Native Web Design Themes with Paper & Claude Code

All right. So, AI powered website things. Could this be something that we see more of? I created this proof of concept that I think is really freaking cool. So, let's say for instance, you're a designer. You're really good. You are working in paper. Let's say for instance now this right here, let's say this is your highly opinionated theme like your website theme. Right? So, how would you create a version of this that's easily replicable with modern AI tooling and would easily allow people to customize this with like a GUI of some sort. So, here's what the process would look like. You have your design. Let's say you also have the paper MCP server. You bring up cloud code in an empty folder. So, you type in for/blue dither. Now, that's the name of this little project I'm calling it. And you choose right over here, apply theme. All right. So apply theme will then grab your selected frame here in paper and create a theme out of it based on a name. All right. So we'll call it Gary theme. So what it's going to do is it's going to take a look at the entire design, any type of shaders that are in there and it's going to replicate everything one to one and extract it into like a style guide and also all the tokens and that all that good stuff. And here we are. So what's really cool about this is um you know once you're the designer and you package it up it gives you this option here to test out your theme to see if it's like a 1:1 ratio. So for instance we can use this area all these these variables over here extracted from the tokens and this is automatically populated so that you can then easily you know create adjustments and be able to change the shaders and do all this other cool stuff. So let's say for instance you're happy with this and you want to publish a theme so that others can use it as well as a part of their AI based workflow. Just do blue dither publish theme and say publish this theme under the name of Gary's theme. So you end up publishing to a marketplace where these blue dither themes exist and yours is called Gary's theme. So now anybody who wants that theme can run this command in a new folder or an existing project which could be vanilla. js react view anything that works on Vite. So let's say you have a new project and you want to use that particular theme called Gary's theme blue dither grab theme. We're going to go at Gary theme. So then perhaps we have like an elaborate PRD file already where the project's described and maybe we want to integrate that theme as a part of whatever our project's about. So use this theme and integrate it into a fresh vanillajs project or it could be rat react view whatever for our fictional surf shop. All right, that's the only context I'm giving it. All right, and here it is. And so notice how it says ride the endless wave uh tideline. So it created um you know basically just it updated the text alone based on our fictional project idea. Now here's the cool part. you'll be able to go in here as you know somebody who just purchased or downloaded a free theme or something and make adjustments based on you know what you want to see. For instance, maybe we'll make this lighter. We'll go ahead and take the prim primary color and maybe we'll make it a little bit darker. Let's come down to the shading section and maybe we'll use wave. Ah, okay. Maybe we'll make the uh headline size larger. Let's increase and fix this part. All right, that looks better. So now if I bring this in, I made the type responsive and fluid automatically. And there we go. And so you could do so much cool stuff with this because it automatically extracts all the potential shader options um based on the type that we chose originally in paper. So, I think this is a really super cool way that we could possibly see AI powered themes that are highly opinionated. And the reason being is unless you're already have that really good design eye. If you ask AI to generate a design, I don't care if it's using the best front-end design skill as a part of Claude or whatever, there's still going to be issues with the design. Usually, when it's totally AI generated this way, this is highly opinionated theme approach. you at least have a lot of, you know, degree of control that's quick and easy and you can just hit commit changes. It saves automatically without calling an LLM uh based on your vanilla react view project. And that way you just get up, you customize all the potential cho tokens that are part of that theme and there you go. You have a custom theme that's in a highly opinionated theme that you really like. And I think this is a really cool potential approach, like I said, with theming in the future. Let me know what you think. Uh, Blue Tither is actually out in the open, but I literally only worked on it yesterday, so there's a lot of issues with it. If somebody wants to like really try to take this over and really improve this editor portion, let me know. Hit me up.

I will see you all very soon. And goodbye.