"okay, but I want Gemini3 to perform 10x for my specific use case" - Here is how

So Google's Gemini 3 really explode everyone's expectation. It's coding a front end capability is so much better than anything we have ever seen. But one thing people didn't quite realize is how different and important the prompting is for reasoning model like Gemini 3. In Google's own official doc they also mentioned that Gemini 3 is a reasoning model which totally change how you should prompt it. One critical component of those reasoning model like Gymni is those generated reasoning tokens. It is very different from other models where

we need to have a fully packed prompt to give all the possible context and logics to make it work well. In fact, quite often you will found the more prompts you give Gemini, the worse performances. And that's because it is designed to respond to direct and clear instructions. If you give it overly complex prompt, it may overanalyze variables and sometimes be limited by the process you include in those prompts. So it really needs a concise prog. But on the other side, it is also extremely sensitive and steerable as a model. Gymnast 3 can perform so differently based on simple instruction you give to it. For example, if I just prompted help me build a hello world page, even though it front end capability is great, it will still generate something like this. But with just one simple keyword like this with a linear style, it immediately creates something very different. You attach image reference the quality to a lot of UI details just be chromatically better. So as a model is extremely steerable and your prop can make a huge difference. The question is how do we actually come up with the right amount of prop that can make the most out of Gemini 3? Well, Entropic actually released this blog post recently called improve Sonic for front end design through skills. It basically introduces front-end design skew that you can install in cloud code and it is making model like son 4 generating almost close to gemini 3 level of design and the most interesting part for me is that this significant improvement is purely driven by a well-crafted prompt they put together that has good balance between concise and provide useful details and they uncover their exam method and process how do they systematically get most out of a cloud model through pro and context engineering and I think this method just apply across also different models including Gemini 3 and today I will articulate and break that down for you into a three-step process and take you through a real example of how do I craft a prompt that can get even small model output high quality X cali draw wireframes but before we dive into this from entropy example we already know that one single wellcraft prompt can completely transform motor behavior and this goes way beyond just front end design and HubSpot actually took this idea way further they build a library of fully tested cloud house skill prompts across sales, marketing and business operations based on their best practice learnings from hundreds of thousands business and those aren't generic prompts. They mirror exactly what I've been describing and you can connect directly via special HubSpot connectors. Then these prompts instantly become personalized using your real CRM context. So instead of writing generic outreach email, you get insights on real customer segments. So if you want a smarter cloud outputs, I highly recommend you go check it out. I have put a link in the description below for you to access. It's free, it's practical, and honestly one of the best collection I've seen for real business workflows. And thanks HubSpot for sponsoring this video. Now let's get back to how the entropic significantly improves the front end design output from models. The most interesting concept here is this distributional convergence which means during the sampling process the models predict token based on statistical patterns in training data and safe design choices that those work universally and offend no one dominates web training data. So at default those models almost always refer back to the safe design choices and this just apply to much more than front end design. It can be used for request debugging Python, analyzing data or even writing emails and the method to come up with this set of prompt is pretty consistent. You want to identify what are convergent defaults which means you want to get a good understanding for the specific task that you want model to do. What are outbox default behaviors and identify those convergent defaults that you don't like. Then provide very concrete alternatives and structure the guidance at the right altitude. In this very specific example, they start identify some key areas. The impact final design output where models default output is not that great which specifically are typography, animations, background effects and themes. Then translate all those things clearly into code that cloud can write. The key here is the right altitude of the prompt you put in. Often we will be writing two specific prompts where you just list out very specific step one 2 3 4 5 and get agent follow. But this often make your system to overfitting a few very specific scenario and make it vulnerable for the real world longtail use cases. And the key thing to get to just right level of altitude for the problem is going through this three-step process of

testing and identify those convergent default that you don't really like and then find a root cause about why model has that behavior. Then structure a guidance with concrete alternative behavior that you want model to follow and just repeat this process again again. So in the end you can come up with a wellcraft prompt that covers specifically those areas and generating stunning outputs consistently and one example here is typography. So I would just start by prompting model directly without any system prompt to see what kind of default results we will get. And when I asked to create a music player this default result it gave me it has this classic purple bluish color and this font that looks a bit boring. So what entropic did is that they add this section called use interesting fonts where it will give overall instruction they avoid using boring generic fonts which including inter robotto open sense lateral and default system fonts and here are some example that it give for different scenarios as well as some pairing principles like which type of font that work well together. So if I copy this and just put into the system prompt here as a section to cost those default behavior and generate again. Now you can see that it start using fonts that is not part of the outbox vanilla design. And really cool observation here is that once model improve one aspect of the design. It generally start improve across all the other behaviors like colors interactions and the UI model. That's why this improvement process is a iterative loop. You try to understand what are the exact things that actually change the model behavior and only add those ones because every new prompt section you add in might already impact some other behaviors. So you don't need to overly inject tokens. And similarly, we can add more sections for things like interactions, animations, and use high quality stock images to steer model to certain behaviors. Based on that, the result generated will be a bit fancier and crazier. If you want to learn exactly what Entropy wrote officially, you can just do /plugin marketplace at entropic/cloud code and then do /pluging install frontend design at cloud code plugins. This will add front-end design skew in your computer directly. If you're on Mac, you can open this cloud folder and inside plug-in marketplace entropic cloud code plugins. You should see this front end design skills and you can open the skill. md file to learn exactly the prompt that they wrote. And I use the same method to come up with a UI prompt that I found to get your mini 3. 0 be extremely creative on the UI generated. Meanwhile, I also want to show you how can you use similar methodology to tune the model for other different type of tasks. For example, I'm trying to teach super design agent

to be able to design high quality xcali draw wireframes so it can be used to align with user about the specific design layouts and explore multiple different versions of design. At default model is not that great at producing high quality results consistently. But with bright prompt engineer I was able to get it produced much more high quality result and this is how I came up with that prompt. First thing you want to do is identify the convergent defaults. Basically you want to identify what are the models default behavior where does it fall short. The way we do that is firstly let's try with most basic and minimum prompt that helps you understand model's default behavior. In our specific case I'll just give bare minimum prompt. You're a professional UX engineer who creates clean xcal draw wframe designs. So here you can see that it didn't output the JSON we want. So I can turn on this JSON mode and start adding the first prompt only output JSON format as this specific structure. And here you can see I'm using the XML format. So XML format has been proven format to use especially when you have a large number of documents or files to input context in general has better performance than JSON structure. So with this one we can try again. However, nothing happened when I try to paste. I'm going to assume there are something wrong with JSON generated. So I paste in GBT and ask it help me identify any issue in JSON above. Now I can say star identify some issues like this model is making up some type that didn't really exist for x cali draw and also for lines it should not use the x y width and heights instead I should be using points coordinations so if we remove this two line items that has a wrong data format as well as circle then it does output result which didn't look very correct and we're going to like add more rules to it when those text element is not fourways as well as those layout is not exactly correct So with just a few quick tests, we already start identifying some gaps with models default behavior like using the wrong element schema, the wrong ways for text and layout alignment. And at this point, there's one common mistake that people often make is that you start adding rules to the prompt that is too specific or not instructing enough to actually change the model's fundamental behavior. And one thing I found really useful is actually try to understand why model's default behavior is like that. One thing I often do is that when model output result that I'm not really happy with, I can insert a next user message to be debug mode. Don't generate again. Just help me understand why do you set a width to be zero for type text and turn off JSON mode so I can regenerate it. And this is a really good way for you to identify the root cause and defects in Moto's knowledge. And here you can see that it says it set the weights to be zero because it saw the text will be rendered with intrinsic width which means it expect the weight to be dynamic auto resize based on the text content which is not actually the case in X categraw. This is a critical insights. So instead of just saying weights and height should not be zero I would tell you what's the right way to define it. The best way I found to make the text aligned is making sure the actual weights of the text element to be the same as the main container and just use text align property to control the specific position of text. And this is exactly what I put in there. And this is where your domain knowledge comes in because to provide those alternative solutions, I have to start developing understanding of the actual Xcraw JSON schema. What kind of property it has and what are the effective way to control those elements. Once I have this new prompt, I can delete the previous conversation history and try again. Great. So you can see this new version is a lot better than the previous one. But meanwhile, another very important thing when you write this prompt is that you want to making sure the guidance you give is at the right altitude. So one problem I had with JSON it generated at moment is that it includes things that we don't really need or didn't really impact the style like versions is deleted stuff like that. And in those type of scenario, it's very common or easy for us to give very specific concrete prompts like I can define for each type what are the specific properties they should include. But the ones that probably will work better is that you start articulating what is the reasoning behind those behavior. So instead of giving very specific instruction like this, I can just say only output properties that impact styling. Never output things like seed version things like that didn't really contribute to styling. So we basically repeat this loop a few times until you get prompt that cover all those default converts. Then you have wellcraft prompt for your specific scenario and use case and I use the same method to come up with a UI prompt that I found to get your mani 3. 0 be extremely creative on the UI generated like this is a one short example for a to-do app a fashion shoe brand landing page and a music recording UI and we just packed everything into a design agent with Gemini 3 on superdesign. deaf def that is capable to generate super high court UI generation and we also integrate with the wireframe capability too. So you can show you multiple different versions of wireframe to align ideas with you very quickly and you can mix match different wireframes UI together and ask AI to remix something new exactly in the way you want. So we're really excited about what we can do with all those new model capabilities came out for a fourstep product design agent. So if you're interested you can check out superdesign. dev. I hope you enjoy this video. Thank you and I see you next