21:38Jay E | RoboNuggets · Tutorial
The ARMS Framework: A 4-Part Agentic OS for Claude Code
A creator walks through his own Claude Code command center and the four-layer system underneath it: Skills, Memory, Routines, and Applications.
August 21stThe argument in one line.
Claude's design output only looks professional once you feed it real design systems, fonts, and components instead of letting it invent from scratch, and each of those fixes becomes a reusable Claude Code skill.
Read if. Skip if.
READ IF YOU ARE…
- Someone building interfaces with Claude or Claude Code who keeps getting back generic, obviously-AI-generated layouts.
- A solo founder or vibe-coder who wants a repeatable design system instead of re-prompting from scratch on every project.
- Anyone already comfortable in Claude Code who wants to turn one-off design fixes into permanent, reusable skills.
SKIP IF…
- You want design theory or fundamentals — this is entirely tool-and-prompt tactics, not a course on how design works.
- You don't use Claude or Claude Code at all; nearly every tip depends on Claude Design or Claude Code specifically.
The full version, fast.
Claude Design and Claude Code both produce generic-looking interfaces by default, and every tip here fixes that the same way: stop letting Claude invent a design system from nothing and feed it real inputs instead, an existing design system copied from a gallery like styles.referral.design, real fonts from Fontshare or FontJoy, icon packs from Iconify, component libraries like 21st.dev and ReactBits, and reference documents like Apple's Human Interface Guidelines. Once a system exists, turn it into a reusable Claude Code skill so every future project starts from that look, then layer in motion, SVG icons, and a personal reference library that keeps compounding.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 00:33
01 · Intro
Cold open promising 25 tips from beginner to power-user level, plus bonus tricks the creator says he hasn't seen covered elsewhere.
00:33 – 04:22
02 · Easy tips: design systems, fonts, and copy
Building a first Claude design system from scratch or from a gallery like styles.referral.design, having Claude shortlist matches, building design systems as Claude Code skills, picking real fonts, matching brand copy patterns, and merging two design systems together.
04:22 – 10:05
03 · Intermediate tips: generation, references, and libraries
Connecting an image/video generator (Kie AI), reusing a finished project's design system, building a personal design-reference library, the Impeccable audit skill, a tone-of-voice skill, and pulling components from 21st.dev, ReactBits, and Canvas UI.
10:05 – 13:07
04 · Advanced tips: icons, motion, and Claude Code power features
Icon packs, SVG and Lottie animation, the Creator's Toolbox resource directory, turning Apple's Human Interface Guidelines into a skill, GSAP motion, the official /design canvas command, a custom /tweak slider skill, and turning a video transcript into timed motion graphics via Hyperframes.
13:07 – 13:32
05 · Wrap-up: build your own design operating system
Closes on the biggest idea: a personal micro-app that indexes every finished design and generated asset so Claude always has your own visual library to reference.
Lines worth screenshotting.
- Claude can turn any screenshot, deck, or website you already like into a structured design system with the colors, fonts, and components pulled out automatically.
- styles.referral.design hosts over 2,000 real design systems, including Mercury, Linear, and Apple, written in a format Claude can read directly and clone.
- Asking Claude to shortlist three design systems from a big gallery beats manually browsing thousands of options yourself.
- A Claude Code design system is just a skill file, which means Claude can read fonts, logos, and decks straight off your computer instead of requiring manual uploads.
- The fastest tell of a vibe-coded design is the default font, so swapping in a real pairing from Fontshare, Fontesk, or FontJoy instantly upgrades perceived quality.
- Feeding Claude the copy patterns of the top players in your niche keeps generated text from reading like obvious AI-speak.
- Two finished design systems can be merged in a single session, taking the typography from one and the color and motion from another.
- 21st.dev and ReactBits are open-source component libraries built specifically to be pasted straight into an AI coding agent.
- Downloading one full icon pack from Iconify or Flaticon in a single style gives Claude both ready-made icons and a consistent reference for any new ones it draws.
- Requesting icons, diagrams, and illustrations as SVG instead of raster keeps every graphic editable, recolorable, and animatable after Claude generates it.
- Lordicon's free Lottie files bring pre-baked animation to icons, a step up from static SVGs with zero extra animation work.
- Claude Code's official /design command opens an editable, Figma-like artboard canvas that already knows the project's rules and memory.
- A custom /tweak skill can drop a live slider panel for type, spacing, and color onto any HTML page, then bake the final values into the CSS once you're done.
- Turning a word-level video transcript into a prompt lets Claude find the exact moments where motion graphics would help and generate a timed clip for each one via Hyperframes.
- Apple's Human Interface Guidelines can be converted into a Claude Code skill so every app or mobile screen automatically follows real tap-target, type-scale, and contrast rules.
- GSAP (GreenSock Animation Platform) is the animation library most top agencies actually use for scroll-driven, professional-feeling site motion.
Feed Claude real inputs, not blank prompts, and it stops designing like an AI.
WHAT TO LEARN
Every trick in this video reduces to giving Claude a real reference, a design system, a font, a component, a guideline, instead of asking it to invent one from nothing, then packaging that reference as a reusable skill.
- Feeding Claude a real design system, whether cloned from a gallery or extracted from your own screenshots and decks, produces noticeably less generic output than asking it to invent one.
- Galleries like styles.referral.design hold thousands of real design systems written so Claude can read them directly, and Claude can pre-filter the gallery down to your niche instead of you browsing manually.
- Building a design system as a Claude Code skill instead of only in the web app lets Claude read fonts, logos, and decks straight off your computer.
- Swapping the default font for a real pairing from Fontshare, Fontesk, or FontJoy is one of the fastest, cheapest upgrades to how AI-generated design reads.
- Copy needs the same treatment as visuals: studying five real competitors' patterns before writing keeps generated text from reading as obvious AI-speak.
- Two finished design systems can be merged in one session, taking specific elements, like type from one and color and motion from another, rather than fully replacing either.
- Component libraries built for AI agents, like 21st.dev and ReactBits, let Claude drop in a proven section instead of designing one from scratch, which also saves tokens.
- Icons should come from a downloaded pack in one consistent style rather than Claude drawing each one individually, and requesting SVG format keeps every graphic editable and animatable afterward.
- Reference documents with real rules, such as Apple's Human Interface Guidelines, can be converted into a permanent skill so every future design follows real tap-target and spacing standards instead of a guess.
- GSAP is the animation library most professional agencies actually use for scroll-driven motion, and naming it directly in a prompt raises the ceiling on how polished a site can feel.
- A word-level video transcript can be turned into a prompt that has Claude locate the exact moments where motion graphics would help and generate a timed clip for each one.
- The end state all of this builds toward is a personal library where every finished design and generated asset is indexed, so future work always has your own material to draw from instead of starting cold.
Terms worth knowing.
- Design system
- A structured set of colors, fonts, spacing, and components that keeps every screen an AI agent generates visually consistent with a brand.
- Claude Code skill
- A custom slash command that packages instructions, files, or a design system so Claude Code can reuse it on demand across future sessions.
- GSAP
- GreenSock Animation Platform, a JavaScript animation library widely used for smooth, scroll-driven motion on professional websites.
- Lottie file
- A small, code-based animation format, used by sites like Lordicon, that plays a pre-built animation instead of showing a static image.
- Hyperframes
- A tool that takes timed motion-graphics prompts built from a video transcript and renders each one as a short MP4 clip.
- SVG
- Scalable Vector Graphics, an image format built from editable paths rather than pixels, so it resizes without blurring and can be recolored or animated.
Things they pointed at.
00:47toolClaude Design (claude.ai/design)
04:22toolFontshare / Fontesk / FontJoy
05:19toolKie AI
07:13resourceASD-STE100 Simplified Technical English standard
07:13resourceGoogle developer documentation style guide
06:42toolImpeccable design-audit skill (github.com/jbakaus)
08:11toolCanvas UI (canvasui.dev)
08:36toolIconify
08:36toolFlaticon
09:16toolLordicon (lordicon.com)
09:40toolCreator's Toolbox (creatorstoolbox.com)
10:50toolGSAP (GreenSock Animation Platform)
12:11toolHyperframes
Lines you could clip.
10:30
“Turn Apple's Human Interface Guidelines into a skill called /apple. Keep every number: tap targets, type scale, margins, contrast. Apply it whenever I design an app or mobile screen.”
07:13
“Turn this into a skill called /my-tone... from now on, every time I correct your wording, update the skill.”
13:07
“Have Claude build you a small micro app where every design that you finish shows up, where every image and video you generate is indexed.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
metaphoranalogy
These are the cloud design tricks that can take you from a complete beginner to creating beautiful websites, user interfaces, and motion graphics like the ones you're seeing in this video. So today, we're going from the easy stuff that anyone can do within minutes all the way to some advanced power user tricks, including some bonus ones that I haven't heard anyone else talk about.
And if you're new, my name is Jay. I spent over a decade working with brands you may know, have been in AI since my master's in data science. Now I'm running an AI business in one of the largest AI communities globally.
So let's dive into it, starting off with the easy ones. Number one, design systems. So this is where everything starts when you use Cloud or really any AI agent when it comes to design.
The simplest way to create one is to open Cloud Design at cloud .ai .design, go to design systems and hit create. Here you can describe your business, add your fonts, logos, and assets. And you don't even need to start from scratch because you can drop in a deck that you like, a website, or just a screenshot, turn that into a design system, and Cloud pulls out the colors, the fonts, and the components for you.
Number two, give Claude 2000 plus design styles. So there's a site called styles .referral .design, and it's a gallery of over 2000 real design systems like the ones from Mercury, Linear, and Apple. And they're written in a way that Claude can actually read with the colors, the type, and spacing all laid out.
And so what you can do is open the one that you like, copy the design system, paste that into Claude, mention any tweaks that you want, and Claude creates a high quality design system for you in one go. Number three, let Claude shortlist the top three. Now, here's a trick with that referral gallery and really any gallery of design systems that you find on the web.
It's that you do not need to browse it yourself because there are thousands of designs in that list, right? Instead, what you can do is to give Claude the link and say to just go through this gallery and find me three design systems that is closest to my business and give me the links to those. It then filters them down to your niche in one go, which is just much easier for you to find.
Number four is to build design systems directly in cloud code. Now, the cloud design web app that you may be used to, the web version at this URL, it is great, but it does have its limits. A big one is that it's web -based, so it can't really get to the files on your computer unless you upload them individually.
The good news is if you're already using Cloud Code or even Cloud Code work, creating a design system is just a matter of making a custom skill that holds that design system. For example, you can send this prompt to make a slash Duolingo skill, which creates material in that Duolingo style every time you invoke it. In fact, most of the other tips in this video also work in Cloud Code just because of how flexible that tool is.
Number five, fonts. So the fastest way to spot a vibe coded design is the font because beginners just leave whatever default Claude gives them.
A good tip then is to go to sites like Fontshare or Fontesk, which are both free, grab a font that actually fits your brand, and if you need a pairing of fonts, FontJoy would generate heading and body combos for you automatically. Then you can name these fonts in the prompt or upload the font file to your design system, and it instantly would upgrade the look of your designs.
And by the way, I've put every one of these tips into a detailed PDF guide, including all of the resources that I mentioned in this video. You can just send that to your AI agent and ask it which ones apply to your setup.
And the link for that is just in the description below. Number six is about copy. So if the words in your design sound like AI wrote them, then you've already lost your audience, even when the visuals look perfect.
And so what you should do is send a prompt like this where you ask Claude to study the top five players in your niche, note the patterns in what they all do in their copy, and then bake that into your design system. That way you start from best practice instead of AI speak that your audience can spot straight away. Number seven is to mix design systems.
One way to come up with an original professional design of your own is to mix and match design systems. Just open the system that you're working on, add other design systems to that chat, and tell Claude which bits to take from each, like the type from design number one and the color and motion from design number two, and it can merge them.
So what you actually end up with is a blend that looks like yours instead of a straight copy of a brand that you like. Okay, so those are the basics. And if you only did those, you'd already be ahead of most people using cloud and AI agents for design.
But the next ones are some intermediate tips to make your front -end designs and marketing materials even more professional. And by the way, if you want to learn how to build and sell AI systems that businesses actually pay for, then that's pretty much all we do over at the RoboNuggets community, where not only do you get access to the Cloud Living Masterclass, which we update every week and takes you from zero to mastery with the latest on AI, but you also get access to our agents.
as a service course, which walks you through how to actually get paid for all these AI skills that you are learning. You also get to be part of a genuinely great community of AI builders. In fact, you can see just some of the recent wins our members are getting from the program right here.
So if you want to start earning from AI, then check that just in the pinned comment below. Now back to the video. Number eight are images and videos.
Cloud design can't make images or videos on its own, but what you can do is to link cloud to a generator. Personally, I use KAI, which gives you most of the big image and video models in one place. And you also only pay for what you generate.
KAI is also one of the cheapest providers out there. So the easiest way to connect to it is to send a prompt like this to cloud code and let it set KAI for you. number nine is to reference another project so in cloud design when you start something new a good move is to grab the url of a project that you already finished in cloud design paste it into the new session and just say to use this project's design system and assets for what you're about to build and by the way this also works in cloud code so you just give it the name of a previous session or even ask claude to find it for you so that any work you've already done in a previous session can become your starting point Number 10 is to curate your own reference library.
In my view, your taste gets better the more great designs that you see. So to help with this, one of the best things that you can do is to build yourself a reference library from places like Dribbble, from Awards, and even X or Twitter. Basically anywhere that you see designs that you like.
For me personally, I built this simple Chrome extension called Rubric References so that one click saves the page I'm on with a screenshot and a note to my own reference library, which I can then open for inspiration or even have Claude reference for future builds. Number 11 is Impeccable. So Impeccable is a design skill with a whole set of commands that promise to deslop a website.
When you run it, it audits things like hierarchy, spacing, type, and accessibility, even empty states, and then it fixes them. It's really good for polishing and it turns a good draft into a professional one. Number 12, a tone of voice skill.
AI writing is really easy to spot, especially if you don't refine it with your own tone of voice. So what you should do is to build a tone of voice skill with Claude, with your list of banned words, the way you speak, and your own lines. And here's a prompt that you can use to start that process.
You can even add ready -made rules like best practice guides that are already out there. Like for example, the ASD STE 100 simplified technical English standard, even Google's developer documentation style guide, or even Apple's writing style. Number 13 is 21st .dev.
So this is a library of UI components, a lot of them shared by the open source community. And the best part is they're made to be handed straight to an agent. So you just copy one that you like, paste it into cloud and tell it to use this component.
and Claude would drop a proven section into your page instead of designing one from scratch, which also saves you tokens. Number 14 is ReactBits. This is the same idea, but more specialized.
ReactBits .dev is also a component library, but the ones here are a bit edgier. So animated text, glass cards, cursor effects, the kind of thing that you would see on high -end sites. A good tip is to find one you like, copy the code, and give it to Claude to add to your frontend or save it as part of your design system.
number 15 is canvas ui so canvas ui .dev has 35 effects that are really unique so if you want to stand out it's a great free resource for example it has liquid glass shatter and particle reveal effects all for free number 16 are icons so cloud can't draw good icons most of the time so instead what you can do is to go to iconify or flat icon download one whole pack a single style and hand the folder to cloud to use across your design system and not Not only do you get ready -made icons when you do this, but you've also given Claude good references for any future icons you want it to make in that same style.
Number 17 is to ask for SVGs. So when you ask Claude for new icons, illustrations, or diagrams, one of the best things you can do is to ask for them in the SVG format. That stands for Scalable Vector Graphics, so that it scales to any size without going blurry.
You can open the file and change the color by hand, and you can even have Claude animate these icons. So with SVGs, every graphic that you get back from Claude is editable and animatable. Number 18 is Lordicon.
So lordicon .com is a library of animated icons and thousands of them are actually free. So what you can do is find one, download it as a Lottie file, which is basically a small animation written as code, and drop it into Cloud to use it. Lottie files are like an upgrade on normal SVG icons because the animation here is already baked in.
Number 19 is the Creator's Toolbox. So if you only bookmark one thing from this video, make it creatorstoolbox .com, specifically their resources section. It's one directory of over 150 free design resources.
So you have animated components, 3JS effects, SVG icons, logo galleries, and even mock -up kits. It even lists a couple of the ones I mentioned in this video, like referral .styles. So overall, it's a great resource to bookmark.
All right, now let's go to some advanced tips. And remember, if any of these get too complex, you can grab that PDF guide in the description and just have Claude explain any of these in more detail. Number 20 is to feed your agent Apple's human interface guidelines.
So Apple publishes its human interface guidelines for free, which is basically their whole rulebook for layout, type sizes, tap targets, and color. So a good tip would be to turn that into a skill with a prompt like this so that when you design an app screen or a user interface screen, Claude can follow Apple's rules instead of guessing.
Number 21 is GSAP. So if you want the motion and interactivity on a site to feel world -class, what you should do is tell Cloud to use GSAP, which stands for Green Sock Animation Platform. It's a fast, reliable JavaScript library for smooth animations on web pages, and it's the animation library that a lot of top agencies use.
So you have scroll -driven sections, text that reveals as you view the page. GSAP handles all of that. Number 22 is slash design in Cloud Code.
So this one's for Cloud Code users specifically, because there's now an official slash design command for us. If you just type slash design, give it an idea or a screenshot, and it opens a canvas with editable artboards, a bit like what you would be used to in something like Figma. But the difference is that here, because it's Cloud Code, it would know your whole workspace, your rules, as well as your memory.
So when you iterate on a design, it already knows what you want and what you don't. Number 23 is slash tweak. So Cloud Design has this built in, which is the tweaks panel where your design gets controls for things like type, spacing and color.
So you can adjust it by hand through a slider. But if you're in Cloud Code, a good tip is to just build your own tweak skill, which is a skill that drops a slider panel onto any HTML page or front end that you make. That lets you polish your work and also hide the parts that you don't want.
Then it bakes the values back into the design when you're done. number 24 is transcript to motion graphics so this one's a crowd favorite and it's also how i make the animations in videos like this one But if you get the transcript of a video you just recorded with word -level timestamps, which you can do for free with a tool called Whisper, then ask Cloud to find the moments where an animation would help.
It can then build the graphics for those exact moments. It does this through a tool called Hyperframes, and it comes back with clips timed to what you said. And as a bonus tip, if you already have a strong design system, then use it so that the final animations don't look like vibe -coded AI designs.
And number 25 is to . So this is the last one, and it's where all of it comes together. Because what you can do is to have Cloud build you a small micro app where every design that you finish shows up, where every image and video you generate is indexed, so that you can easily find visual styles and references that Cloud can reach as well.
This differs per person, but for our own work, for example, I also built this element library where we reuse the 3D assets, motion animations, and SVG icons that fit our brand. So that is all of them as usual. Thanks for watching till the end.
And let me know if that was useful and what you think about this type of video. This is the second video where all of these animations that you saw were created by AI. So I'm also interested to know what you think about them.
I'll see you all next time. Cheers.
The Hook
The bait, then the rug-pull.
Twenty-five tips, sorted easy to advanced, for getting Claude and Claude Code to produce interfaces that look designed instead of default AI output, starting with feeding it a real design system and ending with a personal design operating system built entirely out of Claude Code skills.
Named ideas worth stealing.
00:00list
25 Claude Design Tricks (Easy / Intermediate / Advanced)
- Design systems basics
- Reference galleries
- Shortlisting with Claude
- Skills-based design in Claude Code
- Fonts
- Copy matching
- Merging design systems
- Image/video generation
- Reusing a project's system
- Personal reference library
- Impeccable audit skill
- Tone-of-voice skill
- 21st.dev components
- ReactBits
- Canvas UI effects
- Icon packs
- SVG requests
- Lordicon Lottie files
- Creator's Toolbox directory
- Apple HIG skill
- GSAP motion
- /design command
- /tweak skill
- Transcript-to-motion-graphics
- Personal design OS
The video's full numbered structure, tiered from beginner to power-user tricks for Claude-based design work.
Steal fora repeatable checklist for building out any AI design workflow from a blank slate
How they asked for the click.
VERBAL ASK
04:47product
“check that just in the pinned comment below”
a brief mid-roll pitch for the RoboNuggets community and Claude Living Masterclass, woven into the transition between tips, kept short enough not to break the tutorial's momentum
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
AFFILIATECommission earned if you click.
Visual structure at a glance.
