Plan Like a Pro in Claude Code

I'm about to show you a simple trick that will save you both time and tokens. Whether you're building an app, planning a slide deck, or you just want a visualized mental model of how a system works, what I'm about to show you is going to make that infinitely easier. It works in cloud code. It works in cloud co-work. And it works whether you're technical or non-technical. And once you see it, you're going to want to use this technique every single time. Let's jump in. All right. What you're looking at on your screen right now are a series of what are called asky art diagrams. Now these are extra visualized just to show you. But if I zoom into any one of them like this, this email template right here can be visualized just with normal characters. And you can visualize this in something like cloud code to be able to plan the design, the structure, the layout of anything you can imagine. Many cloud code users try to push a prompt and see exactly how it works and how it performs and then iterate from there blindly moving towards where they want to go where they could just do that from the very beginning. So instead of having clawed code write code that it's going to overwrite later. Why not just visualize and create a full blueprint and schematic of your landing page of your website of your database before you even commit anything to code? So let's say you don't know what asyart is. I'll show you a very simple example and then we'll branch off from there. So let's say you tag the claude code agent in cloud code whose role is to know everything about the configuration of how this works. Let me say this. Okay. Can you create an ask diagram showing someone who's never used cloud code how the cloud code system works when it comes to searching different functions and tool calls. So we'll submit this over and I'll show you what the result looks like. And after two minutes, you get this beautiful inline visualization right here where it breaks down the tools and search flow of cloud code. It breaks down the different methods it takes when it goes through a problem or a prompt, the seven core tools it has in its system and how they work and when to use it, and then all the three common workflows as well. Now, this just shows you a simple use case, but you can apply this to more complex scenarios. Now imagine you wanted to create a SAS analytics dashboard and you had a mental model for how it should look. Usually the average person will prompt something semi- lazily and send it over and be upset at the first version because it's not what they were thinking. But in reality, the same way we used to go on whiteboards and doodle and then send that doodle to our design team and then that design team would create a Figma or something similar and then it would go to the development team to build. You can skip that whole process just by using asi art. So in this case I said before writing any code create a ask key wireframe of a SAS analytics dashboard. Put a sidebar stat cards two charts side by side and a data table below. Now you can see right here we have some overlapping of the symbols but you get the general concept. You have the logo. It tells you it's going to have a sidebar here. You can visualize you're going to have a summary line of total users, revenue, conversion, MR, and you can see a schematic of exactly what you'd look to expect. So, as you go down, you can then make changes. So, this is great for multi-turn conversations. So, you worry about this being perfect. And then once it's perfect, you can go and actually build it with the confidence that you and Claude code are on the same path. Now, you can say two changes only. Make the line chart feel noticeably wider than the pie chart. And for the status column, change active, green implied to inactive, gray implied. Redraw the full wireframe. Now you can go back and now you have an adjusted version of our original dashboard. And you can make a few more annotations. In this case, I'm just emphasizing what colors they should be. And then I say build this as a React app and spin it up on local host, which just means spin it up on our local computer. And this is the result of the very basic prompts. So you can see we have the sidebar. we expect we have the main summary line, the revenue over time, the recent activity and the traffic sources. So if I were to pull up the image that we generated, it looks very similar to this and you can map out each and every part of the sidebar as well as the settings and then essentially you can use this as the bedrock to keep making different changes especially if you want to make more transformational ones. And you can see here just with a few basic prompts you get something looking like this and it has all the elements and components that we asked for. So at the left hand side we have the sidebar. We have the summary line of numbers right here. We have the revenue over time as well as traffic sources. And at the very bottom we have recent activity. And if we compare this to the image we created everything is exactly where you'd expect it to. So all of these map perfectly to the sidebar and the visualization matches as well as the overall look and feel. So despite the basic prompts, the ASKI art really set us up for success. But what happens if we run a similar prompt without any form of the ASKI diagram process? What do we get if it's not a very detailed, intricate prompt? Well, I ran this as an experiment and I said, "Build me a SAS dashboard. I want a sidebar, some stat cards, a couple charts, and a data table. Now, many of you might not even add this part, React and Tailwind. You might just have the first one. And this is the beautiful, breathtaking version that comes with that prompt, which is this. You have a fairly ugly vibecoded icon looking sidebar. You do have a summary line. It's just a matter of uh how beautiful it is. Then you have diagrams. you have the recent activity and it's barely legible. Now, is this an extreme case of super lazy prompting? Maybe. I have met people that do prompt like this. But what I'm saying is you could kind of prompt like this as long as you create this asky art to see exactly what it would look like and push back on it before it goes and actually puts it into production. But hey, maybe that's just an anomaly. Maybe that just works for that particular use case. Well, let's try it out. So when I say before writing any code, create an asy wireframe for a SAS landing page, navbar, hero with a product screenshot, social proof bar, features, and a footer. It gives us something like this. So I can tell that the lander is going to have these at the very top. And then we have sign in and get started. We have our hero statement, which is the fastest way to ship your next big idea. And then as you go down, we have some main content, some form of product screenshot, I would expect here. And then we have the trusted validation and then the features. Now, I can already see it's proposing some vibecoded icons. And this is great because I didn't hear, but you could intervene and say, "No, listen, I don't want this to look like some vibecoded website with these emojis and icons. Use very high quality icon art, etc." And then at the very bottom we have the footer and everything we expect there. And then you could say something like add a pricing section between features and footer. And then three side by side with a call to action button. And then I can say build this landing page for an AI writing tool called drafter. Use the wireframe as the exact specification. And again I can say spin it up on local host. We get something like this with the pricing. You can see right here free pro and enterprise. And if we look at the actual result of this and we go into the browser, this is what it looks like. Again, not breathtaking, beautiful. That part we can work on, but it's as expected. So, we have this hero screenshot of a product that doesn't exist. We have the trusted buy section. We have the everything you need to write fast. We have the pricing. And we have the footer. So using this technique just makes your iterations a lot more meaningful. You can iterate in cloud code before you ever change the code. And if you're non-technical and you find yourself spinning and getting stuck when you do all the hard work in cloud code from a basic visual perspective and then you're fully on the same page, then you can integrate it once versus doing it five or six times, then having to go back, rewire, and basically crossing wires with different versions of dead code. A lot of vibe coding horror stories just come from poor planning. Now, if we just said, "Build me a landing page for an AI writing tool called Drafter. Make it modern and clean with a hero, features, pricing, and footer." Obviously, again, a lazy version of that prompt. But it's the idea that that single prompt and lack of planning leads to something that looks as lackluster as this, where the coloring is not ideal. This looks more of a therapeutic reading based website. The pricing is pretty innocuous and it just doesn't look clean. It doesn't look crisp and doesn't look as inviting as this. Okay, so that's landing page and some form of dashboard. But can we apply this to a more business scenario, a more day-to-day scenario? The answer is yes. I've actually been using this for slide decks for clients for the past six months secretly. And now I'm giving you this nugget where you can draft a PowerPoint. exactly how it should look, where the text should lie, where every component should appear. And then when you go through this process and say something like, "Before making any slides, create asy art that will simulate a 10 slide deck about replacing manual reporting with automated dashboards. Show each slide as a labeled box with rough layout. And then I basically tell it no PowerPoint yet just to make sure that Claude code doesn't get too excited and invokes that PowerPoint skill and produces it in one shot. So now it shows me slide title one. It has some form of hero again. We have the problem slide that sets the tone. We have the cost of the status quo again contextual awareness setting the tone. We have the slide four what automated dashboards are the stack etc. So one key thing here is with slides, slides are very token intensive. Meaning if you create a slide deck with cloud code or co-work, you can find yourself if you iterate five, six, seven times at the end of your context window or completely out of tokens. So specifically for this use case, this can truly save you a lot of time tokens. So if we map this and we eventually tell it, okay, here are our changes. We want to change slide six and slide nine. Maybe you want to change the structure, add a different quote, and then you can say, "Build this 10 slide PowerPoint deck using the PowerPoint skill. Wireframe this exact specification, vary each slide layout, don't use one template for everything, etc." It then invokes the natural skill of PowerPoint creation. It goes through all of this code, which is not cheap on the token side, and then we get something like this, where it's exactly as we expected. We have this hero. We have this second that says the problem. And if you remember back at the terminal and we go all the way back up here initially, we had some form of emoji and then the process from left to right. This is the exact same thing, but it looks a lot better. So by you doing the thinking for claude code on the design and layout, it can focus on the beauty because this looks nice, crisp, and easy to look at. Same thing with the cost of the status quo. We have the next ones, the stack. We have the big quote that we changed. And we have some SWAT structured diagram. And the rest of this looks really clean. But more so than clean, because I'm about to show you an example that still looks good, but it's just unpredictable. You are offloading the thinking in many cases to claude code to do it for you based on a series of assumptions that are based on its training data. basically what it's seen in the past work and our roles as humans in the next months to years is to add that taste factor. The alternate reality of executing this prompt is you saying something like make me a 10 slide presentation but replacing manual reporting with automated dashboards and you would get something still respectable because cloud code is still good at design. You get something like this which looks fine but the entire direction and structure is completely up to clawed code. So it's going to make assumption on assumption. Now obviously this looks good but you might look at this and say directionally slides three to six aren't what I want. I want to go this way and then seven to eight I want to take in this different direction from a design standpoint. And as you do all that, you're going to be spending tons of times, tokens, and most importantly, not focusing on what matters, which is the actual content and delivery. Now, for the last example, I'm going to show you something slightly more technical, but still very useful. Because whether you're vibe coding an app or setting up your version of OpenClaw, you're going to need some form of database. And the average person who is non-technical just assumes that the database created is perfect and doesn't really get into the weeds as to how different things are stored. So this is the great equalizer. You could say something like create an ask key art diagram for a SAS app, user products, purchases, and audit logs. Show the relationships and let's assume you don't know what the word SQL means. Okay, it will create this visualization that shows you the different tables it's thinking about creating. So one's a user table. Now I'm going to teach a little bit of SQL in two seconds. So PK stands for primary key. This is basically how every table will be able to join to this particular table using this particular key. Meaning what is the common relationship between the users table and the purchasers table and the audit logs. All of them will have a form of customer ID. Now the other stuff I won't get into but you can visually see exactly how it's going to categorize and compartmentalize all the data in the database. And this is where you can also map out the relationships. So in plain English, you can read and say, "Okay, it seems like we have all the relationships we need to make this work." If you need to, you could say, "I need a subscriptions table, too." Now, you might not go to these ends of details. You might just say, "I need a table." It will add that table right here, subscriptions, and shows you how it will relate to the other tables. Because usually when things get hard in vibe coding, if it's not just hallucinated code or dead code, it's a lack of understanding of the relationships that you're asking Claude code to assume for you. And if you're looking at this and it still looks like gibberish, that's fine. You could still push Claude code to break this down, simplify it, make this diagram as if you're in seventh grade and it will do that. It's just the idea that when you are a visual person like I am, and many people are, you can use this to your advantage. And the scary reality is if you don't ask for a visualization and you accidentally misprompt, you might get cloud code just creating a series of SQL code that denotes what the databases look like, what it's about to do. And if you don't do something like this and you are non-technical, then you might accidentally lazily prompt and have Cloud Code show you exactly what the tables will look like, but you will have no idea what you're looking at because it might be a foreign language to you. So instead of staring at this yourself, you can ask it to visualize it. And once everything conceptually makes sense, you can then be the orchestrator, the conductor. It will run and execute this code to make it happen, but you don't have to be involved. Now, I've only shown you a handful of examples of where and how to use Aski Art to visualize pretty much anything you can imagine. I use this day-to-day to better understand every single new feature and concept that comes out. And I even created a bunch of skills from them because this gives you the power to have full visualization and understanding of each and every part of an intricate system. And if you don't want to go that far, then it's the best bet at planning something that is very visual in nature. So to help you get up and running, I'm going to make the good versions of the prompts I showed you available to you in the second link in the description below so you can play around and ticker yourself. But if you want to dive deeper into the world of claude code and get access to exclusive resources like my asky art skills, then you'll want to check out the first link in the description below for my early AI adopters community. And for the rest of you, if you found this video helpful and you found this technique something you can actually use in your day-to-day, I'd super appreciate if you leave a like and a comment on the video. It helps the video and the channel. I'll see you in the next one.

Join My Community: https://www.skool.com/earlyaidopters/about Get the ASCII Planning Prompts: https://markkashef.gumroad.com/l/ascii-planning --- A simple trick that saves you time and tokens. Instead of prompting Claude Code and hoping it builds what's in your head, you sketch it first with ASCII art — boxes, arrows, labels. 30 seconds of planning, first-try results. Works for dashboards, landing pages, slide decks, databases, and anything visual. Whether you're technical or not. --- Timestamps 0:00 - The Simple Trick 0:24 - What ASCII Art Planning Looks Like 1:16 - Why Most People Fight Claude Code 2:42 - Example 1: SaaS Analytics Dashboard 5:04 - Without ASCII (The Lazy Prompt Result) 6:11 - Example 2: SaaS Landing Page 8:00 - The Iterate-Before-You-Build Technique 8:28 - Without ASCII (Landing Page Comparison) 9:12 - Example 3: PowerPoint Slide Deck (10 Slides) 10:52 - Token Savings With ASCII Planning 11:06 - The Slide Deck Result 11:52 - Without ASCII (Slide Deck Comparison) 12:52 - Example 4: Database Schema (Supabase) 14:54 - Without ASCII (Database Comparison) 15:35 - Recap and How to Use This Daily 16:01 - Free Prompts + Community --- Book a Consultation: https://calendly.com/d/crfp-qz3-m4z #claudecode #ascii #wireframe #aitools #promptengineering #claudeai #anthropic #webdev #dashboard #n8n #supabase #powerpoint #aitutorial #vibecoding #aicoding