Beautiful frontend designs using Claude Skills

Name: Beautiful frontend designs using Claude Skills
Uploaded: 2026-03-26T20:34:45Z
Duration: 25 min 43 s
Description: In this session I walk through a Claude Skill for frontend design, a simple workflow that helps you generate cleaner, more polished, and more aesthetically pleasing UI ideas without starting from scratch every time.

Video 1 of 3 · 25:43

Transcript

Auto generated by YouTube. Click any timestamp to jump to that moment.

Show

0:02in. Uh in the meanwhile, brief
0:03about me. I'm Rajesh
0:05I am the founder of CodePai
0:08is lovable for um e-commerce
0:11and previously I have worked at
0:13of companies like Zingga,
0:15and Walmart um in a product
0:17position. Right? Since last
0:19year, I've been a heavy heavy user
0:21cloud code. Um, and I thought some of
0:23sessions can help a lot of you
0:25to onboard onto cloud code and use
0:28for your daily product manager task
0:30your side gigs. So today's session we
0:32to cover we're going to see
0:34of how I use front-end design
0:37I think there has been lot of
0:39over last couple of months on
0:41They have been shipping features
0:43a crazy pace. skills is one of the
0:46important features that caught my
0:48and I'm going to demo to you u live
0:51terms of how I use some of these
0:53to make better front-end
0:55Okay. And I will maybe keep
0:58chat window on so that you guys can
1:01typing in if you have any doubts.
1:04you guys able to type in? Is my
1:06audible? Can you guys type in in
1:07chat? Okay, that's great. Okay,
1:09get started. I think we are 3
1:12in. Great. Um so I don't know
1:14many of you attended the last
1:16but we covered some of the basic
1:18anatomy of how a skill looks like how
1:21you use it and we covered a skill
1:23PDM maker where you um where you
1:25a simple oneliner in terms of the
1:27that you want to build. The demo
1:29I showed was a feature where I
1:31to integrate PayPal um with
1:34as users and I wrote a simple
1:36and it created a wonderful
1:38long PR for me along with
1:40user sequence diagrams, user
1:43analytics tables in terms of what
1:45track, what what not to track,
1:47case study, who it is for, user
1:50lot of different things,
1:51Um but again, a quick revision of
1:54is a skill. A skill is nothing but
1:56repeatable workflow of what you want
1:58build. Claude has too much of
2:01overall. It's like a huge uh
2:04base uh which is very
2:07into a small LLM. It's not
2:09it's big LM. When I say small,
2:11tokens of context window recently
2:13expanded to 1 million which is a
2:15respite but still it's still
2:17to 200k tokens for efficient
2:19and it can only do limited uh
2:22within that context window. Right?
2:24skill is a way for you to guide and
2:26the LLM to a definitive path.
2:28LLMs generally tend to reach the
2:31destination after you give a lot
2:33prompts, lot of guidances. So imagine
2:36going in concentric circles before it
2:38reaches it destination at the
2:40Right? Um with skills you can
2:42draw a radius from outer
2:45to the center of the
2:47Right? So it's the least
2:49path and obviously least
2:51tokens and least possible cost
2:53get to where you want to go. Um in a
2:56that is all skill is about
2:58So uh let's jump in. I'll share
3:00claude. Today we're going to see
3:02design. We'll create one one
3:04two websites using a front-end design
3:05and see how cloud performs and you
3:08can tell me whether it looks better
3:10any AI slob that you have faced or
3:12websites that you have created.
3:14Um great. Let's jump in. Um,
3:18I hope you guys are able to see my
3:21screen.
3:29opens entire thinking process. So you
3:32see what Claude is actually doing,
3:41X3 folder to Reactbase. Yes, perfect.
3:47what we want to do.
3:52these are the skills it is trying to
3:53right? Great. So, done. Copied the
3:57Design taste front end, high-end
4:00design, and minimalist UI. We'll
4:02couple of skills. High-end visual
4:04is all about when you go to a big
4:07or or UI agency, they charge
4:10a bomb. $100K, $200K to create
4:12UI experiences. High-end
4:15visual high-end visual design
4:17to replicate some of those
4:18Minimalistic UI is
4:20like you know your medium or
4:22which has simple monochromatic
4:26patterns which also look
4:27So we'll try both the skills
4:28Let me see if the skills are
4:33obviously not. So what we'll do
4:35is
4:38just have to reload my claude
4:41this should show up now.
4:44there you go. See project level
4:47I've got high-end visual design,
4:49taste, front end, and minimalist
4:51and user skills. These are some
4:54that I that I'm using recently.
4:56SEO maker feature breakdown is what
4:58have seen last time, which is about
5:00making my PR. Then there's a blog
5:03skill. Then there's a cloud skill
5:04I use to create and deploy
5:06in Azure. Right? But for this
5:08we'll use only two skills which
5:10high-end visual design and minimalist
5:12Okay.
5:14let's see
5:17um I am giving this command
5:20but typically based on the
5:22claude also has the ability
5:24pick the skill on its own right. So
5:26going to say use high-end visual
5:31create a
5:35say portfolio page portfolio page
5:41P
5:44is founder of codeb AI
5:49has 15 plus
5:53workx.
6:01some memory of my past. I think
6:03enhance and try to do some
6:05things. Uh but let's see what
6:07does, right? So I'm just giving a
6:08command uh use this particular
6:11which is high-end visual design to
6:13a portfolio page for Rajes who
6:16of code AI and has 15 years work
6:18in product management. Right?
6:21maybe
6:23black premium black and green color
6:29and green. Black.
6:34and white
6:44right? And maybe let's also
6:47a small screenshot
6:50how superbase looks.
7:12not necessary that you need to
7:14the skill every time you just
7:17the skills. Probably Claude has
7:19ability to trigger it automatically
7:21your description is short and Chris.
7:23because I have so many skills here,
7:25lot of design skills around it's very
7:27that it'll pick a random skill.
7:29the reason I had to mention
7:30Right? So let's see what
7:33is trying to do.
7:35great. It's looking through my
7:37through my base template. uh
7:40base template I only created
7:41we are limited in time and I
7:44to uh give a basic scaffolding
7:46claude can work around with but
7:48not mandatory with couple of
7:50cloud can also do the job for
7:52only thing is you know it's it's a
7:54of it's a bit timeconuming
8:04all mode only to ensure we have
8:07pace of execution
8:10but you can I generally don't do
8:11I generally work on this
8:14mode where claude gives me
8:16previews. I go through the previews
8:18I keep accepting them. Right. Um
8:21we got some chat.
8:27instead of snapshot from a third
8:29website, can you refer link or
8:32system let's say on Figma or on
8:35Uh good question, Nicl. You
8:37do that. Um you can there are a
8:40of MCPS for Figma which you can
8:42and then uh give Claude the
8:44to your link. There are some
8:48skills as well that you can install
8:50can go to a particular URL and
8:52the URL get some details for you
8:55the other way is obviously taking
8:58of screenshots from the website
9:00dump into claude claude uh can
9:03a decent enough design system
9:04through screenshots as well. So
9:06different mechanisms. One is have
9:09Figma skill or Figma MCP. Have a uh
9:13URL browser skill like um either
9:16crawl or you know browser use or
9:18other skill. And third is have your
9:20playright server running in your own
9:22So three four possibilities
9:24which you can make this happen. And
9:27if you have your own design
9:28written down somewhere in terms
9:30color palette, fonts etc. you can
9:33feed those in.
9:36hope that answers your question,
9:44questions you have. I'll take the
9:45on the flow. I think this will
9:47take a couple of minutes to run.
9:59to build but I mean the packages
10:01not installed. So it will not run.
10:05I'll do is please
10:09first
10:14This is something that I am aware
10:16So I give this command but otherwise
10:18itself can figure out after three
10:20four retries.
10:28install the package. So without
10:30the packages, it's trying to
10:32into node modules trying to figure
10:34how the application runs which will
10:36which will not work right.
10:39now it's installing all the uh
10:41from my package.json of my
10:44template and I think once it is
10:46it'll try to run the try to check
10:49there are any TypeScript errors and
10:51should be good to go.
10:58have guys while we uh talk. I think
11:01I'm sure you'll you'll have a lot of
11:03and don't be scared because I'm
11:06showing you a terminal with you know
11:08coding language going on even I
11:10understand a single line of maybe
11:11do understand a couple of lines but uh
11:14not mandatory to understand what
11:17is it writing what every element of
11:19is what the syntaxes are u but it's
11:23it's good to monitor at a high level
11:26ensure it's going in the right
11:27right and lot of things you
11:29are going to learn in Our cohort
11:31tomorrow will gear you up to
11:33you have the high level uh eagle
11:36vision in terms of monitoring the
11:39on the flight.
12:03went for some of the color patterns I
12:05Uh, okay. So, let's see where
12:09is running.
12:12show you the URL.
12:15We are on 5175.
12:26okay. We can iterate it as well but
12:29very different compared to regular
12:30slob right product thinking and again
12:33think this is uh this follows the
12:37color patterns of black white and
12:39I instructed it to do um I
12:42don't like the font it
12:44quite different elegant but
12:46I'll I'll tweak it around play
12:48later right it says from player
12:53founder I don't know what it means
12:54I'm sure it means from zinga to Code
12:57It tried to improvise quite a lot
13:00that's okay. Code AI, Walmart,
13:02where I worked. Uh, and then
13:06so it also has connect to
13:08Try codepai.
13:10right, this went in because claude
13:12a memory of you know what codep URLs
13:15Let's definitely
13:23random dude which will not work.
13:26but but look um
13:30is much more different from what
13:31would generate if I had asked Claude
13:34do this without writing any skills.
13:37Let's try to maybe use the same
13:39Um I'll pause for a moment. Any
13:42so far on this particular
13:54laptop level I have got a cloud.md
13:56I think there I have defined
13:58of lines about myself and my
14:00which I tend to use quite a lot.
14:03whenever I I use some things quite a
14:06I tend to save it at cloud.md that
14:08the memory at a laptop level. So it
14:10picked couple of information from
14:12particular file. Right.
14:20else before we try to try try a
14:22vanilla version without the skill
14:27maybe just for fun we can try
14:29skill right
14:31so
14:42see let's go to code two
14:56prompt.
15:13Great. It doesn't have any design
15:15And now I will say
15:23a go portfolio page for Rajes.
15:25I'll also attach the same screenshot
15:28that we are on a level playing field.
15:40go.
15:47from plain vanilla
15:52code without using any particular
15:54as such. It's only using my base
15:57couple of sad scene components
15:59I already have and it's trying to
16:01a website on top. Right? So let's
16:03what it does
16:06in the meanwhile I'll also show you
16:08couple of websites that I created um
16:12before coming into the session all
16:14was create were created using
16:16visual design right so this is
16:18that I created this is running
16:20my local server as you can see u I
16:22hey create me create a a beautiful
16:25conference landing page for me u
16:28AI product managers right it came up
16:31this beautiful design where AI
16:33product thinking.
16:36has got some schedule going on in
16:38of what is the itinerary for the
16:413 days.
16:43all the names of the builders and
16:46who are going to talk about or
16:48some sessions during during that
16:49Um I can enter my name and join
16:53weight list. Right?
16:56I can join the weight list and it has
16:59a FAQ section. So this entire design
17:02created by um by Claude on its own
17:05the skill which is the visual
17:08skill right and then let me see
17:12I can show you the other one.
17:21the one that we just created. Yeah.
17:25are we here? Okay.
17:29think this should finish in next 1
17:31or so.
17:43sure same problem will come up.
17:51please do
17:55first
18:10pretty fast because not really
18:13fast, but decently fast because I
18:15a basic scaffolding and it has
18:17work around the same scaffolding. But
18:19you had tried it from scratch, it
18:21have taken you double or triple
18:23amount of time, right? and then it
18:25have been stuck in some mistakes
18:28you had to help to um get out of
18:30So uh anytime you create any
18:33um if you have a basic
18:36or basic project structure
18:38uh you know already works or a
18:40template starting from that always
18:43a lot right and as we have seen in
18:45session the skills really enhance
18:48output that it generates um
18:51the front end design as we
18:52seen now.
19:01uh from the plain vanilla one
19:03the uh skill as well which will
19:07us a good comparative pointer.
19:18your questions in the chat section.
19:21to take those.
19:59my
20:26surprisingly better than the front
20:29design we skill we used which is
20:31nice but typically I mean uh it
20:35well in this particular scenario
20:3690% of the cases um when you use a
20:40like a front end design skill it
20:42generates a very very good
20:44right just like
20:46thank you I'll take a pause if
20:48have questions But I don't
20:51cool. Um, hey, so I think so as we
20:57seen, I think there are two ways to
20:59front- end applications on cloud.
21:01you give the prompts directly and
21:03to generate um using cloud codes
21:07abilities or you can use a skill
21:09the front-end visual design skill
21:11I've used to create more
21:13pleasing um visual
21:16Right? So these are some
21:19that we're going to teach uh in
21:20cohort coming up cohort. It's
21:24on um it's starting from
21:26So hope to see a lot of you
21:29there. And if you guys have any
21:31regarding the cohort that is
21:33up tomorrow uh happy to help you
21:35happy to answer some of those
21:50or what's the best way to
21:52uh best alien in front end using
21:56or integration is it possible to
21:59sure one second
22:06thanks Nish so this question is um
22:09know basically
22:11accessibility first development is
22:14which you know companies want
22:15do today rather than fixing wrong. So
22:18it's part of a front- end
22:20uh is what I understand. So
22:23do you capture that knowledge that
22:25you're building a front end uh
22:27or front end side of the
22:30make sure that you take care of your
22:31labels or you know best practices
22:34accessibility
22:35do we create a skill around
22:36or do we need to give um
22:39to the documentation
22:42the vak documentation like how does
22:44work
22:46that's a great question nichl so
22:48so this is how the skill looks like
22:50so we have used highend visual
22:52skill just now and this it's
22:56but an instruction set right so
22:58at what we are telling here I mean
23:00WCAG guidelines
23:03and other brand guidelines can also
23:05in here right so this is talking
23:07what is the spacing that we should
23:09what are the margins that should
23:10used what are the different font
23:12font colors if I need animations
23:16kind of animations what are what
23:17of frame or motions right these are
23:20which claw typically makes lot of
23:22So some intelligent UX
23:24has sort of given it given it a
23:27detailed instruction, right? Uh in
23:30same instruction set you can also
23:31in your uh WCAG A++ ratings,
23:36brand guidelines and lot of
23:39over there. So it can pick
23:41from the skill.
23:44it. Thank you. And the reason I
23:46is because you know it's the the
23:48documentation WCAG documentation is
23:51thousands of pages.
23:53can a onepage skill document really
23:57that? Um is something which is
24:00I'm not able to digest that like how
24:02a onepage skill document really
24:04that?
24:05that's a good question. So let me
24:07you.
24:13been in the last session but we
24:15about PM maker where um I
24:19we discussed about this structure.
24:21second let me go there. Yeah. So a
24:26uh this is how a typical um
24:29is structured right you got the
24:31file which is a single file.
24:33you you can also include lot of
24:36files right. Okay what are the
24:38guides? What are the examples?
24:40is what are the reference documents
24:42and these can like you can add lot of
24:45here lot of MD files over there
24:47sets and lot of examples so
24:50claude can follow to the team right
24:52I don't know I personally haven't
24:54thousand plus uh sheets or lines
24:58I mean lines definitely thousand plus
25:00of instructions I have not tried
25:03for the PR maker we had four
25:06folders for each and every
25:08like Analytics section had one
25:12example document uh which it had to
25:14Brand guidelines was one big
25:16Um then your sequence diagrams
25:19one big um document with lot of
25:21So it almost always follows
25:24same structure. Right? So you can
25:26give multiple files and claude
25:29open and load each of them
25:31It does a good job at
25:32I'm still not sure about what are
25:34upper limits or upper caps. uh but I
25:37definitely tried with 10 to 20
25:40files uh for the same skill.

Next: I Built PRDs 10x Faster with Claude (PM Hack)

Want the next one in your inbox?

Join 1,000+ Product Managers getting one deep dive every Friday.