Claude Sessions: Amazon SP-API Setup & Building a 165-Feature Design System | Danny & Shubhash

Hey guys, welcome back to another episode of Cellar Sessions. This week is the Claude Sessions with me and Shabash. Today we've got a couple of things we're going to cover. We're going to look at front end and back end and now they would tie together. Shabash will be talking about APIs. This is not to be scary at all because obviously Claude does a lot of heavy lifting of the setting up. And then I'm going to go into design systems. I've just built a design system that has 165 features. A lot of the problems, especially what I see now, I mean everyone's making apps. It's in a special now community. You only have to go and look on LinkedIn. But apps are now kind of throw away, if you like. And you can see those generic purples and washed out purples and the types of fonts that they use. It's AI Slop basically. That's not criticism on anyone. The idea is if you want to avoid AI Slop, there are ways to do it. But I think when we look at applications now, they're the new ebook to join the main list or the new NAN flow. Comment flow in the comments. And I'll send you the flow which will be broken and add you to a funnel and talk to the life out of you and then write a bio all about myself until you are great I am and try and sell you a service to fix the broken flow. But anyway, should I ask welcome to the show what's going on brother? Hi, Danny. Yeah, thank you. It's good. Last four weeks, the team at Claude is on steroids and they have been pushing out updates and keeping us on toes with everything. Every day you wake up, there is a news about this new feature came out from Claude. So yeah, it's very interesting times to be alive in and yeah, it's time to get dialed in for a generational build. Yeah. So from last session that I was here, we talked about the foundation of things when it started this series like how important it is to document everything that you have in the business in terms of S of Bs in terms of whatever it is not inside the founders head, but actually documented. So once you have built that foundation, what happens next and this is what I want to talk about today and yeah, one of the themes of today is API SP API. So something like before I get into the bills of it, I need to talk about something that underpins it, which is a seller partner API. And when sellers hear API, they think it's a developer territory. It's not for us. So but it's not for them to worry about any of this. This may sound geeky and technical, but our friend Claude is there to do the heavy lifting for us. So yeah, the SP API registration would take around 30 minutes. Amazon approves that in two to three working days, sometimes we have seen it getting done quicker. But that gives you direct access to your own data. No third party tool taking cut, no subscription, no medillemen, you having direct access to your own data. And think about this like it's basically Amazon giving you a key to your own data warehouse, your sales, your inventory, your pricing, your orders, all of it, life and whenever you want it. So the process goes like this. You register as a developer, which again may sound scary developer, but it's basically just a form that Amazon asks. To fill that, you tell Amazon that you want to create an app, which is just clicking a button basically. And then you get refresh token, which is like a password, which lets your system talk to Amazon. And yeah, so this is what it is. So if I were to sum the steps up, there are five steps to it. Step one, register as a developer on cellar central 10 minutes. Once or the security questions properly, some questions would be like, how are you going to use the data? Are you going to store it safely? Is there any other third party data that you're using for? So reply no to them because you don't want to be shaken that outside of your own stuff. You say that we want to use it our own personal app for research and development for our own brand. And then yeah, you create an app and basically you tell Amazon that you want access to the data, catalog data, inventory, orders, pricing, everything. And then you self authorize. So you click a button, get it approved, you get the refresh token, save the token very carefully in a one password or any vault of your choice last past maybe. And then now connect to your system. Let Cloud code build all the integration for you. Just ask the right questions, just guide it. And yeah, that's that's the way to start it. These simple five steps follow it, build the app and get Cloud code to do the talking. And now, Danny, how many sellers do you think they know even this exists? We have been dealing with multiple high figures, seven sellers, seven high figure sellers. And they had no idea that they can do this themselves. So yeah, this is basically. Once you have this spot, there may be some back and forth. This is our that Amazon may not accept your application the first go. And the rejection is not basically complicated. The rejection would be basically some check box that you didn't check or like some answer that you gave, which didn't satisfy the Amazon needs. So again, reiterating that what Amazon asks for is that the data that you're collecting is going to be for your personal brand development. You won't be sharing the data and you'll be storing that safely. If you answer these questions correctly in plain simple English, we are good to go. We have seen sellers getting approved in less than 24 hours also. So if the answers are spot on. So yeah, once we have done this part, once we are over this stage, this is where things get interesting. Once the SP API is set up, once the app is approved, now what becomes possible is a gold mine for every e-commerce entrepreneur. Like you get access to live inventory levels across FBA inbound outbound. It replaces your manual seller checks that you have to dial in and do the sell us central checks manually. Some of us would be having a VA assigned just for this purpose to make sure that it is up to date properly. But it takes away that workload. Orders are synced in real time. So no more downloading the CSV reports every morning and making sure that it's uploaded and it's automated. Real time-fricing. We get catalog data with the parent child relationship. So yeah, no more of guesswork. We get sales and traffic data. So no more of like downloading the business reports. So again, so all of this process could be built inside a dashboard, like which could be a command center. Any CEO would love that your business owner, you want to work on the business, not in the business. So this gives you all the data in front of your screen, you can make some decision. And again, these are just the starting points to it. These are just the first steps to what you could unlock once you have unlocked the SBA API data, right? And again, if I were to give my honest answer on this, not everything would work perfectly out of the box. Not everything would work perfectly in the first go. Some stuff like the sales and traffic reports, it requires brand analytics access, which we believe also requires brand registry enrollment. Now those, those things, obviously, most sellers would have gone through it. But yeah, you may hit these roadblocks on this journey, but these roadblocks are just modes. Don't think of this as factors which should stop you from going ahead with this because this one thing is going to unlock so much potential from your Amazon brand. Sometimes Amazon has a two level permission, which isn't documented. So sometimes it may be a role that stops you from unlocking certain things. You may hit a 403 on analytics and points. So yeah, it's making sure that the permission levels are aligned. It's making sure that you're asking for the right check boxes in the permissions and whichever permission, whichever data level you want to unlock from Amazon's end, you want to make sure that you are in vital for the data. If you're not registered with a brand registry, there's no way that they're going to unlock their brand analytics report for you. So just make sure that you are aligned with what you're asking Amazon to do. But yeah, once this part is done, there may be some back and forth. Yes, but again, it's really doable. Just have to be on it. So yeah, SBA API is free. It's your data. And once it's connected, CloudCode can build dashboards. It could build your forecasting engines, alert, pull live data. Earlier, you mentioned Danny about the N10 workflows. So again, here's a secret. You don't actually have to build the N10 workflows yourself. CloudCode can do that for you. And it's like one of the easiest, it's like a no brainer basically. You just ask CloudCode to connect it to your N10. You don't even have to pay for it. You can do that locally. So yeah, these are some things which when sellers are the trenches themselves, they tend to overlook it and they just spend money on subscriptions and a lot of other data which are not so needed for them. But when you get access to your own data, when you're controlling it, you can You can tailor it to your own needs. Like, okay, this data is relevant for us in this stage of business. This data is not so much. For example, one of our recent clients, there are eight figure sellers, they're into health supplement brands. So whenever they launch any product, for them, certain metrics like keyword tracking is more important than any other thing that how are they performing in the skewer tracking. So then you have a custom dashboard built for yourself. You can choose which feature you want for which product at what stage of the business. Now this may sound very complicated. This may sound like, okay, very geeky and technically, but trust me, it is not none of us in the room are developers. We don't have a coding background. Yes, but you have to ask the right questions. You have to put your head down and spend some time with cloud code and let it do all the heavy lifting for you. So yeah, this is what unlocks here. Now one bit I want to talk about this is that what catches everyone attention is the advertising API. The advertising API is completely different from the SP API. So it's a different credential. It's a different registration. It's a different refresh token. And you cannot reuse your SP tokens for ads. It has to be two different tokens. It has to be two different processes. And I learned this hardware as well, my trial error, but I want the listeners of the shirt to understand this that you have to do it two ways. And if you have both of it, you have if you have unlocked the ads API as well. So the integration becomes amazing. It's like so fluid. All your packers spend all your air costs spend and all the forecasting stuff becomes so connected. Like you can see all the dots talking to each other. So yeah. So here is what I would want every listener to do this week. In fact, do it tonight. Go to cellar central. Look at the hamburger icon on the left hand side. Go to apps and services. There's an option called develop apps. That's the last option. Click on that. Register as a developer. It would take you 10 minutes. Amazon would approve that into two to three days. Once approved, create an app, select the roles. I would say start with catalog and inventory data. Those are the easiest ones and self authorize. You'll have credentials, open cloud code, paste the credentials and say, build me a dashboard that shows my current FBA inventory levels with days of stocks calculation. Cloud code will write the entire thing. You don't need to know Python. You don't need to know APIs. Just follow these steps and you'll get a gold mine. So yeah, that's, I think everyone listening to this. If you haven't done this, they should go and do this. Cool. Let me interject there. Few things just to be wary of, especially with the advertising API. We've been running the agency. What now? 2018 has eight years. And Alice has been working with Amazon APIs since about 2015, 2014. So we've got a lot of experience here. So there's one thing to plug in your APIs and there's another one to keep the uptime because Amazon's APIs are really bad. That's not to scare people off. It's just a four wall, right? So everything that she's about to say is perfect. Go ahead. Do everything you just instructed you to do. I read a couple of caveats. If you want to go through the paperwork and do the submission, my advice is you run an add-on, upwork, 50 bucks, you get someone who's worked with either the Amazon APIs or APIs in general and it's had submitted the necessary paperwork to either Amazon or other platforms because they're have a framework and they would understand it. Second to that, what I would do is keep older their details so that when the APIs go down, you can quickly hire them to do a review to see what the problems are. Right? So it gives you a little bit of guardrails. It's just a protection. Why do I say that? Because I don't think I could count on both hands and on my toes. How many times a Q4 issue Black Friday, Prime Day, where you left flying blind? Now of course you got access to the console but we developed all the very own technology. And so if you think you're going through and you have a large budget spend on campaigns, right? Let's say you go in add-on and launch or something and it goes down. There's a chance, depend on the size of your business and what you're running in terms of ads. You fly blind and you're scurrying around to get everything up again. You need to mitigate that time. And by doing that is to have someone on hand. So it's just a precaution. If you're just starting out, it's going to be months towards a year, maybe a bit longer until you reach a level where you're running campaigns and spending budgets of $1,000 a day. You won't risk it, right? If you're whatever you decide to build. Because remember, an API in build pretty much anything you want as long as you've got the end points, right? So people might want to build sophisticated tools with AI, forgetting or maybe not knowing is that AI is based on probability, not deterministically. So when you start to think about how that jacks opposes against live data, not only live data, but structured data that requires precision, you've got to think everything back down to your database. If you're doing it on a smaller scale, it doesn't matter so much, right? But the core thing is you need to get your paperwork in. While you're doing that in your back pocket, you've got that engineer who submitted the paperwork as your backup resource to bring them in if you get some issues where you've got downtime and your APIs going offline and your flying blind. Yes, of course, again, you can look in to sell a central, which just depends on how you're going to use it, but they're just some precautions I'm throwing. Absolutely. No, 100%. Those are the important beds. Yeah. At no point in my discouraging, I'm thinking, you know, there should be, keep your eyes open on that stuff. Because I think what people forget, when you're a little build around stuff, it's amazing, right? And it's so easy to build around stuff now, but you go from doing nothing to talking to claw, to ask claw to build you something. You got no security, architecture, information in place. You don't know how it's structured. You don't know how to map out schemas and databases and stuff like that. That's what you just got to be a bit careful of. What you should do though, is what you've just said, Shbas, and get your hands dirty, set it up as a little side project to begin with, and just run tests on it. And as you get more comfortable with it, you'll become more competent and then you become more confident. And then you keep rolling out from now. Absolutely. Yeah. Anything else that you wanted to add on the API front? No, I think I think we're good. I think everyone should go and start keeping the guardrails in mind and start playing with it. Yeah. And yeah, now that would be the back end of it. And I think the front end, obviously, you're working quite intensively in the design systems around it. So yeah, that's, yeah. Yeah. Okay. So, getting on to this is the most sophisticated design system that I've built so far. I think I probably built about 15 design systems in January last year because I could never get things to work or like them to work on the design side for our businesses. And obviously we launched design loop in beta. It has a come out of beta at the moment. I'm working on 2.0 because there's some things I want to do to make it a bit more scalable when I give access. Of course, it'd be free as well. You're just plugging the API keys. This is different because it's not about images and video. This is about you eyes and interfaces, UX experience and building stuff whereby we have this common thing in our industry mostly promoted by affiliate marketers. Pretty don't convert. But Nordist dog share is my take on it. There's no excuse for shit in my eyes. I understand the term pretty doesn't convert. Yeah, but I think that gets stretched to pre-don't convert is because I'm really good at writing lyrics but no good at the album cover. Do you understand what I'm saying? And so people have certain skills but sometimes it's framed in such a way because of their limited skills with design because they're a master with the pen. They just say pretty doesn't convert. In traditional sense, pretty doesn't convert if you don't fucking measure it. If you were fucking idiot. That's the difference. Yeah. But I think we get sold on this thing is that we get told all these things that you should do and pretty don't convert. And then I look at this stuff and it's garish, yellow background, black text. I mean, it just reminds me of affiliate marketing from 2005 off the Warrior Forum. Like, we got to think about progression. If you look at some of the break. through brands. Let's look at our community, yeah? I've been in it 10 years. That's mature. Give me five brands that are household name and then I'll sit on weight and you'll come up with two. Want to be the electronic company out of Shenzhen whose design work is shit up and the other one is Zulu Kitchen whose design work images products are shit up, right? So if really doesn't convert them we've got to think about Ralph Lauren, we've got to think about Apple, we've got to think about Sony, we've got to think about clothing brands, jewelry companies, all using quality. Yeah, I'm a big believer that up until maybe this year or late last year, sellers didn't have the budgets to get world-class design. But yeah, and that's really what's stopping the fresh old was I can't fall to pay 100 grand a year for a design and a lot of people use VAs because that's what allows their budget for. But now we haven't got any excuse. So the design system that I bill has 165 features. So what we've got to look at is there are some core things that happens with AI. Often when we see a lot of these tools that get developed, I'm saying this with a website with a purple graph around myself but bear with me because that's our brand colors, not AI brand colors, is default fonts. So you've got Intel, Intisory, Roberto, Ariel, these are all the same fonts that get used every time and sometimes from pairing to second to that is very important in terms of getting the UI or even down to design to pop. There's that there are pairings at work and there are pairings that don't work. Pure colors. Things we've Indigo accents and like often these come from what's called Tau Wind, CSS, defaults and then you've always got the same squared off three column layouts all the time. So then only here, quick tells on AI generated Slop. So what we've done with this build here, we've got cataloged 15 anti-patterns that will work against to push back against the design system in terms of its output because you want to go against not the grain but go against the AI Slop. So if we look at somebody's, is that purple to blue gradient in the hero at the top, most things are wrapped in cards and then you've got the arugraphs and then you've got icons that look like quite childish icons and emoticons. And then you've got things like flowed what's called floated animated orbs and things that don't really serve any purpose in the design. Sure. Then you've got things like a border radius around the cards, cranked up to like 24 pixels. Now I'm getting a little bit technical here and I'll dampen it down a bit in a minute. I'm just trying to give you an understanding of the sophistication of the system but the the thing what we've got to look at is how do we design stuff whereby we've also got a user interface and the UX person combined those skills with an eye for high quality design that also can render across multiple devices multiple browsers. There's some many different facets that you've got to think about right. So this pipeline that I've built is got 165 features 15 databases and it goes through four phases and what I did is I extracted 11 repos and then I was able to combine the best of those together. So then you've got like the first part of it is you've got your decision design build doing refine and it depends on where you are. Are you building a new website? Are you up to date in an existing design right? It really depends on what you're doing. There's going to be multiple layers but everything has to loop back in. There's over a star and an endpoint or there's we're coming in at this point. We've got the design system but now we want to put that in a refinement loop. So you got this side so you've got a nine section brief and this has 15 CSVs for this because this what locks in the design system for the brand everything from colors components and everything else. Now I one shot it as a test in the early stage of this design system. Are you stitch and literally Claude were able to go through the decision flow and be able to give me a natural language prompt and literally one shot I used it as a generic corporate finance site. It just locked in straight away like literally perfect whereas if you go back to say last year I would spend I used using what's called Poe. Poe was before I got into Claude code and you're sitting there fucking around pixel by pixel every part of the page going down like now I can just output it really fast and if you're not tried it take a look at stitch stitches by Google and it uses designers workflow right so when it maps it all out you're going to be able to generate output even though it's natural language most people fail with it because they'll just spend hours trying to go around writing prompts and trying stuff out. When you've got a sophisticated system and you've gone through the briefing you can do it in a single prompt and of course when you're using stitch you can create variations and it's very fast to use. I spent some time with it and this is something whereby combining with stitch or give you a bit more of a modern cut and edge flavor because you got to think about websites is a lot of times the way they're designed they're not dynamic in the meaning every once in blocks this block here this block here this text here these bullet points here do you understand so when you look at it it just looks very mechanical and especially if it's generated by a i-slop right so we've got design we've got desired design and build so we've got multiple production tools and use components that are more what's the word for it they're more modern right because the lot of the stuff that I see is when AI generates the slot it's for generic components because it has to be vanilla for everyone to absorb right so a lot of time when you get that blue bluey purple washed out gradient that is what Claude thinks that people would want on a generic level but he doesn't have eyes to see its work if you're just saying build me a dashboard as an example yeah yeah but there are so many other parts which I'll get into now if I go down I'm just coming through some of the notes here let me go down to so you've got to have quality gates so for instance the quality gates for me there's 25 different techniques as part of the refinements there's animation with 15 motion rules and again the anti-AI there's 15 detection rules and then what it does it gives you a gap analysis score out of 60 so what I did is I generated two examples I did the databril website obviously this is I just deployed these to Netlify to run these tests before deploying to production sell a session live landing page databril landing page right and with that before I run the design system for it it was a score 33 out of 60 now I've taken it up to 50 databril was 48 and that's brought it to sorry date before 48 and then after 55 so it's close to 16 now you think okay well out of 60 what we're talking about at that level and that level sophistication that's a huge jump right absolutely basically there is you can overcook things with too much animation going on in one of those I've cut 69% of the animation because what ends up happening is everyone's eyes are going like the issue working on the page and you want it to do something because you spent so much time on it but it's a way that calibrates thing and stops you overcooking because you end the day you've got to think about the experience for the end user yeah and of course when you can generate something of this magnitude that you would pay 10 15 grand from a large agency for you get carried away right because AI gives you this kind of gases you up makes you think like you genius, right? What do you know? Is AI is doing all the work? You're just speaking to it. So we have to look at each stage that we go through isn't just about building a page that looks good, going back to the comment pretty doesn't convert. It has to be very functional. It has to render correctly across different devices. Yeah. It has to meet user experience and rules that are met by from methodologies through the psychology of good design and obviously the focus around conversion. I'm just going to run through. I'm not going to do the whole 165. So this is part of when I mentioned to see it, speeds earlier, you can build for those verticals that would fit that space, whether that's a SAS company and these are converted into skills. Color palette. So we've got like a six-row color system, brown color overrides. On the typography side, we've got font pair and selection, weight and scale selection, Google fonts integration. Claude is actually helping you combine this information together. It really is is look at the design system. Here's 15 repos. Tell me what is missing and what is just noise. These are the things you got to think about because that's what's going to kill your conversions as well. It's not about just about the copy on the page. It's not about just about your offer because if your page loads and takes 15 seconds, you've already lost a customer. If your page doesn't render and it looks garish, there's no trust there. So when we look about conversion, we have to think every detailed level about conversion because before the V even read your copy, you could foul anyway. A lot of things around design is not about what you add is what you subtract because you have to get over the purest form in order for the end user to make a decision. And when we look at complexity, complexity causes in some cases confusion. So there's a completely different blend and Bernamine and all of this stuff works in the background. 90% of the 165 are just functional things in the background that's invisible to you. You haven't got to think about it because you're focused on being the created director to build in that landing page, build in that website, build in the front of that app. So image assets, hero background, hero deconstructed, crowd atmosphere, selection texture, speaker play, solder, section divide, product showcase, prompt template system. So it has all your brand variables in it. HIC and interaction design patterns. Yeah. Miller's law application, Hicks law application, Jacob's law application. What does that mean? So Hicks law application gives you a choice or a limitation. So it maximizes your options between five and seven. Miller's law is chunking of information. So it works in groups of plus or minus two, which works in line with Hicks law. Now this sounds all complicated again. You don't have to think about the complication because he's done for you in the background. What this does, he controls you from drifting off and going crazy on stuff. Error recovery, five-state completeness, sensible default, smart pre-fill and auto detection. Are you when you got your forms, right? If someone's come form on your website and everything looks pretty because pretty don't convert and then you got your copy and you really getting it all dialed in and suddenly the validation falls over on your form because you haven't got that on lock and that's not rendering on a mobile device where say most of the traffic's coming from. You just lost the customer. Yeah, heat maps so predicts user attention whilst it's not absolutely factual. It's a way that's been simulated just to give you an idea of where you will play stuff on the on the page. So one of the things that I do at the very beginning, if I'm building out something quick new, I'll get Claude to generate it based on the raw system that we have in place. I download and this is in stitch, generate download as it, Claude then creates a react H2ML and then it will all get against the brief, it will validate the UI at UX using this Pro Max skill. Then we'll be using an extracting form 24th century depth which is a really beautiful component library and for like mobile application, general web like your own website etc. And then we've got visual variant where we used nano banana to. Then we've got the quality gates mentioned earlier on but these are groups so design token extraction, color tokens, typography, spacing, contrast ratio, font size. Then you've got web design guidelines and within this is baked in is 100 plus rules, accessibility rules, spacing, typography rules, hierarchy rules, we've then got gate number three which is based around react to which it's developed in. Gate number four, composition patterns. Then we've got a visual explorer and it looks at different generations of color variants, color layouts, mood and component variation. So your website don't look like same freelaser cards, same tech, same nonsense and it's boring, right? You want to be able if you're trying to sell what you call a product that's premium and that's okay because pretty doesn't convert. What does premium signal think that looks good maybe? Yeah, I'm kind of state in the obvious but you think about trust. How can you say you sell a premium product? You don't know what the customer's thinking but if you put no effort into more than just the words, right? So we look at congruency. If you're using the words like premium and they look at your images and your product and it's not premium you add what a lack of congruency, right? Because what you're saying and what you're selling are two different things. So we have to be careful to stand back and not gas yourself on what we do because we're all here to sell our services, our products, our events, whatever it is, right? But it's also important to have outside counsel and self awareness. When you use the premium word is it really premium because we talk about the perception of premium but that doesn't wash we sell it like shoppers. That might work on primed marketers but customers are not primed marketers. So again we have to think about the language there. 10 skills. Claude UI workflow, the UI UX Pro Max, MDesign, Web Design Guidelines, React Best Practices, Composition Patterns, Algarid MacR, Webpref, Claude Lume workflow. Now my Claude Lume workflow is when I do feedback to Claude, I just hit Command Shift L. It instantly goes into Record mode and then I get Claude to pick up the URL from the browser, extract it and it gets all the feedback and as I'm doing it I'm shooting screenshot and giving Claude eyes. And that means that if I'm working on something and I've got to do feedback and there's 20, 30 things I want to change and then even when I'm suggesting these changes it will push back against those changes. So it doesn't fit the design system. This is what it's there for to protect you on that. In terms of the MCP integrations, stitch 21st century dev nano banana 2, I use the video transcriber with the Lume because it's part of the workflow and then I build in sequential thinking as well. But you know that's me I'm going to wrap there. Do you have any questions? No it was it was already fascinating because yeah I already saw some parts of it earlier in action when you see the video but looking forward to it when it comes out in the design look 2.0 and yeah I'm sure those metrics especially around all the laws that you mentioned. So sometimes we tend to think that yeah we don't know the law or we need to know the law and that's what the clarification is that no. Just to know that this law exists and that is being done for you in the background. So the thing the UI the UX or the user experience that comes out with it is very crisp and tailored to it. So yeah absolutely. All right let's wrap up here. So I don't know many people know this but we met in September that's when you introduce we do cloud code. They before that it became a household name in our industry. So yeah 100%. So yeah I'm looking forward to seller sessions, looking forward to delivering one of the things that I'm working on which would be prepared for the next episode of it is like how can we do the heavy lifting part without having to spend money on the tokens. So as a side experiment I had an old MacBook and I wiped it off clean. I wrote it in a clamshell mode now. I installed Olamma open source framework and I tried to run Quen the AI models locally basically on it now. So yeah looking forward to how the output is and sharing those learnings in the next session. Yep. Cool. All right. Well, let's wrap up there. And yeah, we'll catch up again in the next couple of weeks.