My AI Design Workflow That Doesn't Ship Slop

0:00There's a way to create beautiful designs, beautiful websites, beautiful apps, beautiful motion. And I just learned about it. And it's through this thing called Google MD. It's using skills. And the entire process of this is what we explain on this podcast. I had my friend Meng To, who's one of the best designers I know, come on and share his entire workflow to how to create jaw-dropping, beautiful designs that by the end of this episode, you will become a designer. You're going to be able to create better design than 99.99 % of this planet. And what does that mean? That means that your startup, your idea, your app is going to have a higher chance of getting people to install it, to buy it, to share it.

0:46And we all can use that. So enjoy the episode and I'll see you in there.

0:58Meng, welcome back. Second time on the pod. By the end of this episode, what are people going to get out of this? Google just came out with design.md. And this is one way to create a blueprint to take one beautiful design, whether you made it or not, and then spread throughout all the formats and the mediums for your startup idea. right so you can turn a beautiful design system that is created by a master in their craft like a designer and then you can turn that into motion design a landing page different sections of the landing page mobile design and so on so a lot of people struggle right now with you know this idea you know they start really strong with one shot and then suddenly they get into the the other pages and they suddenly have something more and more generic.

1:58So this is what we're going to be learning. I'm going to teach you all the tricks, remakes, iterate, what is the design system, typography, colors, all the things that people struggle in design. Perfect. In your world, I feel like a lot of people are talking about DesignMD. In my world, not that many people are talking about it, but they want to be able to create jaw-dropping beautiful designs, even if they're not a designer because we're using agents now, we're building startups, we're taking ideas out of our head, but we don't want a purple vibe-coded website or app. We want something that's beautiful, that's consistent.

2:40I'm excited for you to explain what DesignMD is. I'm excited for you to explain how you can actually get inspired by other designers and use some of their systems to create something of your own. Meng, thank you so much for being generous with your sauce and tactics and tips and tricks. There's no one I look up to more than you in this regard, so thank you. Yeah, I just want to mention something before we start. People don't realize how hard it is to get the right distribution, the marketing, and I want to thank you, Greg, because remember the first time I came to your podcast, I started with a$3 ,000 MRR and it shot up to$15 ,000 MRR just by going through your podcast.

3:25And obviously there's a ton of value over time. So, you know, to those who don't know, like going to, you know, Greg's podcast, it's like the bucket list, like the number one thing you want to, you know, reach towards too. And yeah, I prepared presentation, you know, slides and all that stuff because like, you know, Reply just introduced slides. and we started doing hyper frames. We started doing remotion. So I prepared all of this. As a designer, I feel very strongly about this. So let me just share my screen. First things first, I realize a lot of people are vibe coding their apps. They're vibe coding their startup marketing and so on.

4:09Everything I do today, including this tool that I'm showing you, which is my own notion with slides, is vibe-coded, and I made it by myself. So I also want to say that all of these images are all generated using the context of the title, and I'm using the new GPT image too. So with that said, I prepared the slides, and I want to go through one by one what is design.md. But first of all, I just want to also preface on what we're going to be discussing, the things that I want to teach everyone about design and how we get there, and then we're going to end with a demo. So these are the kind of five main points I want to go through.

5:05And then we're going to get started. design as i mentioned before design.md is just open source and i can find the tweet right here they have a 10 minute video you can watch it essentially what it means is that just the same way a lot of people are using agents.md or skill.md or soul.md for those who are using cloud or in this case, it's open cloud now. So basically, this is for designers. And if you want to take the soul of the design and you want to bring that to the agent and you want to bring a design system, the colors, the typography that makes the design beautiful, well, you port it and you put it all into an MD file and then you put it into your prom as an attachment and then boom, you have a beautiful design.

6:03So this is what design.md and you will see extremely efficient ways to use this across multiple medium, not just web design, but also, you know, like, you know, like motion design nowadays and slides. So, you know, for example. Quick break in the pod to let you know about a free workshop I'm doing that answers some of your biggest questions. The first is, in the AI age, what are some categories that are ripe for startup ideas? I'm going to outline a bunch of those different categories, the ones that I think the most opportunity is. Second is, there's a million AI tools out there. Which are the ones that matter when I'm trying to build a business?

6:50I'll walk you through that. And lastly, how do you actually build a business with some of these AI tools? So I'm actually going to show you live how I do this with my ideabrowser.com team. And I can't wait to see you there. It's this Thursday at 12 p.m. Eastern. And if you go to the show notes, if you go to the description, you can click a link, RSVP, and learn a few things. I hope it'll get your creative juices flowing, and I'll see you back at the pod. I'm going to give you just some quick examples of what I created. So for example, when you have a design, right, you can sort of like take one design and using whatever medium, like whether it's React or HTML, you can create like a nice promo video or you can create like a slide.

7:40And this is all using the same DNA, which is the design.md. So as you do this, for example, this is a slide and this is a promo video You can see that this is two different approach to a design And this is the result And if you want, there's a ton of resources that allows you to save those design.md So one of them, obviously I created them myself, but they're totally free You can just download them Right now, my internet is super slow. So here you can see we have a lot of these design systems. And it's essentially just one file. You click here, you download it, and it contains all of this visual stuff.

8:28Typography, colors, spacing. And if you look at the, you know, the Markdown itself, if you've used Markdown, it's essentially a structured text with tables, titles, and code. And if you read through all of this, you have the weapons and the arsenal to essentially prompt efficiently. And you can sort of commit this to memory, and then it becomes your design. So it's very simple. You add all of this to prompt, right? And then it becomes the HTML or the design.md. The HTML is more like the sort of finished dish. And the MD file is more like the recipe. The skills are like the ingredients. So you put it all together and it becomes your design, which is what I just showed earlier.

9:31And that's a big deal because honestly why I wanted to have you on the pod is it's such an advantage to having scroll stopping design. The video you shared, the MP4 there that you shared, that was beautiful. and so I guess my question is like how do you if you're not a designer coming up with these systems yourself like from scratch is really hard so what's the process for finding you know for finding brands and identities that resonate with you Right. So, you know, coming back to the slide, right? Oftentimes, you know, people, they one shot something. They saw like a beautiful prompt. Oftentimes it's bigger than the code.

10:36They copy and paste that. They have no idea how it's done. And they also have no leverage on how to change it. So the first screen is not the hard part. So, you know, right now it is you kind of feel like you're the one who's always like telling AI what to do and you don't have control. And the question is, like, how do you solve this problem, which is a design drift? OK, you start something, you're kind of satisfied with it, but then you get into the other stuff and it becomes completely different. So that's why we need design.md. and you know you don't want to end up something like this you want to to end up with a system a process where you can bring whether it's a screenshot an html a design.md or all of those ingredients and recipes and back to your question greg there's a ton of resources that share all of these things but design.md is new most places they share templates right we all know uh you know like you go to a template and obviously i'm taking my mine as an example but you can go to any of the templates that you find on v0 lovable um you know all of these other place framer figma community for for people who are more familiar with designs and the problem with those is that they are highly close behind the techniques and the rectangles and the pixels of Figma or Framer of Webflow.

12:15But then how do you tell that to an agent? And that's the big question. So nowadays, you can go to new communities that share the actual blueprint, which is a design.md. So, for example, I want a design that looks like this, that has this animation, that has the blue color, that has these systems of, you know, beautiful typography and selections and buttons that, you know, I don't want everything. I don't want a whole template. I just want something to start with that I can tell my AI to start with that and then be consistent across the board. Now, if you only provide a portion of it or something too specific, the AI tends to sort of like take that too literally.

13:08But if you provide something more like a foundational system, like a process, agents.md and whatnot, not then you get something that gives more flexibility to your system when you're going to be working on new designs or new mediums or you know you want to be consistent across the board cool yeah i mean when i see this like first of all this is gorgeous um but what i would want to refrain from is like to your point duplicating that and just creating the same cookie cutter website you know because there's i'm sure you see this all the time like you you know you come across a website it's a shopify it's a wordpress it's a framer it's whatever and you're like i've seen this website before right i've seen this website um but it's another brand right and that like Cookie cutter doesn't work anymore.

14:09And it's the same reason you go into a downtown core city and all the buildings look the same, right? And you feel like there's homogeneous cityscapes that are existing now. Yeah, and I fully agree with you. Everything is so high. The baseline is so high nowadays, but also the baseline is also very generic. What used to be wow five, ten years ago now is generic, which is funny. Because if you look at the purple gradient, everyone was like, wow, purple gradient, I want to use that. But nowadays, if you see something with purple gradients, you just run. So I guess what I'm trying to say here is that we have evolved so much.

14:56And humans have a way to solve new problems and to adapt. And I think that's the real intelligence. And so I think the question nowadays for me is how do you deal with taste, right? How do you design something? How do you make ultra quick decisions, right? To take something, whether it's the ingredients, the recipe, the secret sauce. For me, the sweet secret sauce is the design, right? Because, you know, you don't want people to run away from your landing page. You don't want them to look at your brand and like, oh, shit, this feels like, you know, just like the 1 ,000 startup that I've seen over the past week.

15:44So if you focus on design enough, right, if you find these systems that you can bring to your own system that is flexible enough, then you can create something way more powerful. So I like to think of design.md like a design memory. And this is great because it can transfer between platform. So if you're working in Lovable and you like what you've done or in cloud design, and then you want to move it to Figma or you want to move it to, you know, to Cursor or to, you know, nowadays I use Codex a lot. I know a lot of people use cloud code, but you can totally do all of that stuff because you can carry this design.md and then you can commit it to memory by telling your AI, your agent, to remember.

16:45I mean, I do that all the time. Remember this, remember that. And I think agents nowadays are doing a pretty good job at trying to remember the workflow that you've just done. Because that workflow is unique to you. Like a lot of things that I make nowadays, I'm sure it applies to everyone out there who is making their own apps. First of all, for me, when I make apps, I look at what is the mode? What is something that I can do with my app that Notion cannot do or Figma cannot do? For me, that mode right now is the fact that everything is local. So, for example, this is all local. And because it's local, it generates these MD files across folders and nested folders that I can just open in codex and open that folder and tell my agent, look, I have a Greg Eisenberg podcast.

17:48I want you to prepare all of these screens. I want you to prepare, you know, 10 sections or 10 notes or do research. and it has all of that knowledge and it can create all of those files in one single go, which I think is such a big moat nowadays, right? You can't like, sure, some tools can do that, but one, you have to deal with tokens, you have to pay for them, you cannot run locally and you don't have your own workflow embedded into it. But nowadays you have something like OpenClaw or Codex or Cloud Code that can do all of that and it's so scary how good it is. 100%. You mentioned Cloud Design, you mentioned all these different platforms.

18:38We're talking about Google, so Google Stitch is another one. Can you show us how we can go from MD file plus HTML to creating something? Sure. First of all, I just want to start with sort of like, you know, getting the MD file, but also focusing on the design aspect. For me, it's really important, but not everyone's going to do that. But I think it makes sense to start with that. So, for example, you know, I don't know if you know Varian. Varian is also very good. Yes. Varian.com. you know I like tools like this because they allow me to get into the sort of creative stage which I think is incredibly important and essentially what you want to do is just to remix you know click one button remix click one button remix you find something that you like you remix and so on and so forth so that's why you know for me as someone who built Aura I also find it incredibly enticing so I go to community right and I find something that I like and you know, I just remix it really quickly.

19:52In one click, I have a bunch of skills. Like I mentioned before, skills are like ingredients. And, you know, if you go to some of these skills, you're going to see that some of them are so, so powerful. And this is your moat in design because you don't want to look generic. You don't want to have purple gradients. So the only way to do that is, for example, you create a skill for lasers okay so i know it sounds funny but whenever i create a landing page with lasers everyone clicks on it i don't know why but people love it so much because they love special effects right you go to a movie what you know you want to see special effects you want to see you know the avengers kind of you know doing these grand things so that's the mode right like nowadays just having the typography just having the colors is not enough unless it's a secondary page or unless it's something that is very serious but if you're talking about a landing page or a promo video or you know a slide you need a moat so uh yeah you know like remix super fast blah you know like uh you're gonna remix this click one button you know and then do that until you're happy.

21:06Once you're done with that flow, then you get into the prompt, right? So each skill has a prompt, so you can copy this. And anything, all of that stuff, like design MD and skills are free. And this is not why you should be paying money. You pay money because of tokens, you pay money for the finished results, such as a template, and sort of like the whole sort of automation and whatnot. So, you know, you're going to go to a template, you know, like, I don't know, let's go to this one. And then you're going to download both the HTML and the design.md. The reason why I'm saying HTML is that's, you know, design.md may not hold all the information that you need to create your first result.

22:01It does hold sort of like the typography, colors, the foundation, the spacing. Some of them, including my own, holds also the WebGL, which I find, for those who don't know, WebGL is the animation that powers the laser, right? Without WebGL or 3GS, which is for 3D, you don't have any of that stuff. You only have the typography and some of the reveal animations and some of the rules. So that's why these two elements here for me is really important. And that's what gives you these beautiful animation that makes your site a lot more unique. It goes from, you know, zero to 50 or 50 to 80 real fast.

22:43And so, yeah, I would download the two of them. And, you know, back to here. So we already had the demo. So I might as well show you guys. On Aura, you can go to design.md. this is where you're going to find all of this stuff the design and then you you take something that you like and you add that to your prompt so the same way that i download design.md and html i add up to my prompt and now i'm ready to to tell what i want for my landing page so for example i and say something like, okay, create a landing page for my startup call, you know, I don't know, like Aura, and I know, really original.

23:31So, and then it's going to be a chat app that is, you know, that is using AI, and that ships stuff to people, to their email, whatever. So let's see what it does. Okay. So now we have the design.md, we have the HTML, and then we're just going to create it. Let's hope for the best. But, you know, this obviously, you don't have to use Aura, you can just use whatever tool that you want. I just wanted to show you that that's essentially what you're supposed to do. You download the two files or just a design.md, however you want that to be. and then you start creating your page through that system.

24:19And from there, you can generate more elements, more sections, because you have the design.md always with you. And also you can bring that to another platform. It's not specific to one platform. And what's your take on Google Stitch? I haven't gone deep in it. Right. So for me, honestly, as someone who builds a startup using tokens, you know, it's really unfair, to be honest, because they're able to give all of these stuff for free. And I just realized, you know what, like I spent almost half a million dollars in token for my startup right now. Right. It's insane. So, yeah, you can do basically the same thing.

25:10I don't know if this is the correct one, but, you know, like create the landing page for Aura. And, you know, you're going to select web and you're going to select 3.1. Now, what makes it different is that it has an infinite canvas. Oh, I don't know what's going on here. but it's also doing stuff differently. And this concept of attaching design to AMD, which I feel very strongly about, is still new to a lot of platforms. So as someone who works in AI, your mode is basically you have to be new. I'm sure anyone can relate, but when there's a new model that comes, you have to talk about it. Otherwise, you're kind of losing a lot of that sort of edge that you have all over all of these companies.

26:09So the same way with tools, you know, and the same way when you build a startup, you have to utilize all the best technologies and tools. And in this case, we're using a design.md, it's recreating exactly that foundation that we saw on Aura. And, you know, it's going to create the same consistent design. whether it's from here or on Aura. In this case, I use two different designs. So that's why we have two different designs. But if, you know, in this case, I'm using AuraList and the other one, I use the one that I click earlier. But, you know, here I can just say, you know, create the footer and it's going to create like add the footer and it's just going to create the footer.

26:56But you can see the design using this technique gives me exactly what I want. It also, you know, it also adapted to my design, to my brand, to my copywriting. And then from here, you can use skills, right? Like, for example, I love to use skills like, if you go to skills, copywriting skill. So this is going to improve your copy by 100%. You know, it's going to look at your text and it's going to make it so much better. So skills, design.md, HTML, all of these things, if you merge all of them and blend all of them together, you create something really, really powerful. And, you know, to visualize all of this, you know, this is a new tool that I built, which is called Newform.

27:52you know you can sort of like in one click i turn this you know which is a motion design right i go to prompt and i have all of these skills that are already saved and then i can just click oh i want laser i'm gonna click on laser and then you know i can just create another one and another one so i love the idea of queuing which is why we have a different products is because like queuing is is such a powerful idea that I use all the time. Nowadays, I create like three, four products. At the same time, I have like multiple chats with sub agents on across all of them. So that's why, you know, I wanted to create something way more focused on the creative aspect.

28:34And on top of that, we also have the remix type. Again, all of these are prompts, by the way, like I'm not like, you know, keeping anything behind closed doors, you don't have to use my tools at all. But, you know, I just want to show you visually how it is like to turn something into mobile, right? Or, you know, if I go here to mobile, you're going to see that I have turned my designs into mobile design. Beautiful. You know, I mean, if you look at this, it's hard to tell if this is made by a human or by AI. But I can guarantee you 100 % that this was made by AI. and from here I can just say okay I want a slide deck okay I want you know a motion design I want the hero section of you know and then I'm doing six design at the same time which is so good so good for the creativity it kind of reminds me of how mid-journey works you know on mid-journey you kind of I haven't used mid-journey in like a year and a half maybe but that concept around you can generate multiple things.

29:45And what's really cool about this is you get into this flow state of, okay, I want this, I want that, I'm going to queue this up. And it's really fun. I agree. The concept of queuing is not new per se. I'm just saying a lot of the things that we do, see here, it just transforms into mobile. And a lot of the things we do can just be transferred so easily because we have this concept of skills and design.md, right? Yeah. So one of your guests, for example, was talking and he calls himself a skills maxi, which I find it really funny because I totally agree. For me, I don't put anything in my agents.md because I have my design.md, which I use per project, and then I have my skills, which I use per workflow.

30:36and if you only change the agent.md oftentimes you know first of all it costs a lot more tokens but also it's too general like it doesn't apply to every single workflow out there so here i added the laser and here i turn it into a slide you know like again it's so so fun to queue and to sort of like expand your creativity across all of this stuff so you have something like aura lovable v0 which allows you to chat and sort of like evolve into something into a product but i think what people sort of underestimate a lot is the design aspect which is you know how do you come up with new sections that are unique right how do you uh you know work on the creativity and how do you learn about all of this stuff because if you don't learn this stuff you know you're just focusing so much on the chat and you're just chatting, chatting, and then giving commands and the AI do all the work for you, then you're not making any decision, or at least you're not making the best decision for your product.

31:44Can you quickly go back? I'm just curious more than anything, like the skills section of New Form, I think it's called? Yes. What happens when I click there? Yes. So you have access to, right now we have 63 skills, about I'm adding more every day. So for example, you have a skill for skeuomorphic design. For those who don't know, skeuomorphic design is kind of like the realistic design that Apple used to use before the flat design. And it's a prompt. It's just a prompt. And you can copy this prompt and you can just tell your agent to use this skill and then to apply that. So for example, you're going to have something a little bit more embossing, you know something like like this design for example you know it has some of these you know shading and stuff like that a lot of people still love that i love that when it makes sense for example if you do like a dj app you might want something with a little bit more realistic you want a button that is lickable as steve jobs says well yeah you need a skewmorphic design right And we also have a skill for the 3D.

32:54So this little globe here that you put, well, that's 3D, and then you can move that on top of the text, which makes it look really nice. So every skill can be anything. It can be like a batch design, like this one. And you can have... All of these are also copyable. So, for example, if you only want just the colors, you can just copy the colors or you just want the typography. So not only do you learn how to sort of like add to your arsenal all of these keywords that you did, what is font smoothing? What is sound font? What is system font? What is a body font? Or what is the secondary color? What is a secondary button?

33:41So all of these things are really useful when you chat with your AI agents. And sometimes I condense it into just one word. Okay, fix the spacing, fix the gap, fix this, fix that. And it's just so powerful to learn all of this stuff because it's all part of the design of.md. And it holds so much richness to how you can manage your design. And it must be cool for you because you've been teaching designers for years now. And these are mostly trained designers. Now anyone is a designer. That's such a good point, honestly. When I first started, most designers were not coding. And nowadays, everyone is coding, including non-designers.

34:36you know before like 10 20 years ago everyone was using photoshop and then sketch and then figma but nowadays everyone is a designer and everyone is kind of like downloading a template on html or design.md and then suddenly they have the most beautiful landing page sure they one shot it sure they don't know how to change it or make it better but they still have an amazing one shot you know one shot prompt uh but what i want to teach here is the whole workflow so that you don't end up with just a one shot shot thing and how do you you know can you guess how many prompts that i use to build these products just give me a number how many prompts do you think i use it's definitely without one shot i don't know a couple dozen a couple dozen 20 25 at least a thousand yes this is how obsessive one can be wow when it comes to creating yes like i'm building four products right now uh you know aura new form well this i don't really count it as a product i have a dream cut which i'm going to be revealing soon it's a mac app and you know i'm also rebuilding design code from scratch.

35:57So four products all at once, and I'm not even including a side product like this one, which honestly, I love using it just because I'm able to tell my agent to write everything for me. And I'm able to just generate these images, these YouTube covers using a history of my portrait that I save into this because there's no tool that does this, You build tools literally because nothing else is doing it. And there's nothing else that has a slider that says, okay, I want this to be exactly or I want this to be loosely inspired. Have you seen this UI before? I've never seen that. And I see a lot of products.