Ep 10: Small UI Tweaks + Claude "Playground" Skill

0:13Hello and welcome to another episode of

0:13Curiosity Builds. My name's Trevan and

0:16we're diving right back into the

0:17conundrum desk build. My Curiosity Build

0:19honoring the Slate Political Gabfest's

0:2220th anniversary, a podcast I've been

0:24listening to for over a decade. I'm

0:26using my interest and curiosity of that

0:28podcast to drive my learning in public

0:30while I build with AI. So, in the last

0:34episode, I rewrote my prompt by hand. We

0:37dialed things back again. Still not

0:40where I want it to be, but we're getting

0:43closer. So, I want to take this time to

0:47kind of show something I haven't shown

0:49yet. I want to show Claude code. So, for

0:53me, I've got Claude downloaded. I just

0:55go into my terminal and cursor and type

0:56in Claude and then it launches. Now

0:59Claude has got tons of tutorials and

1:02lots of publications about it. Right now

1:04the Claude code is so the Claude code.

1:07Man, I sound like an old man. Claude

1:09code is super awesome. It's always

1:11changing. They're always adding things

1:13to it. One thing that they have that I

1:15have come to lean on and we do a lot

1:18internally at Hypandra is the skill

1:20feature for Claude. And to be honest,

1:22maybe skills exist ubiquitously across

1:25LLMs, but I've only really used them for

1:26Claude, so I think it's an anthropic

1:29creation. However, they launched a new

1:32skill recently that Daniel's used a lot

1:34and I've seen a few videos on. It's

1:36called Playground. And what it does is

1:38it basically allows an HTML mockup of

1:41your website and various uh interfaces.

1:45So you can interact with it kind of

1:47tactilally through uh your mouse and you

1:51can adjust kind of how you want things

1:53to look in a kind of visual instant

1:56feedback way rather than through

1:58prompting which I think is very

2:00interesting especially for UI stuff. But

2:02there's certain individuals I I'm like

2:04this sometimes where you want that you

2:06need that in order to to think and see

2:10your ideas uh better and form them

2:14better is is getting that instant

2:16feedback getting that kind of like

2:17tactile I'm seeing this with my eyes but

2:21I'm doing it with my hands kind of

2:22thing. So I want to show you what that

2:24looks like. I haven't seen it myself yet

2:26on my own stuff. So we'll give it a try

2:28here. Let's open the playground skill.

2:41Yes, I am not sure how long this takes

2:41to spin up. So you might see us fade or

2:43might see us fade to black for a second.

2:45Uh but oh yeah, that's fast. All right.

2:48So the different templates available

2:51document critique uh difference uh in

2:54code

2:56uh concepts data we want design the

3:00first one of course. So

3:04design playground for the conundrum

3:07desk.

3:13So, this should spin up at least

3:13something that looks similar to what I

3:16have and then giving me interactive kind

3:20of like dials and adjustments for the

3:23UI.

3:29So, we'll see. We'll see how good it is

3:29and what it

3:31comes up with.

3:48Okay, we are back and it has done it.

3:48Take a look at this. So, yeah, set up a

3:52bunch of presets, gave us a a a very

3:56rough mockup of the conundrum desk,

3:59right? And now we can interact with

4:01these different UI things to handle the

4:06color, the padding, the font, things

4:08like that. There's some presets here.

4:11Not a ton of changes,

4:14but fun stuff.

4:16Very cool. Especially for those that

4:18need that instant feedback or you're not

4:19100% sure what you want to say. Even

4:22just doing some of this and changing it,

4:25it might not give you exactly what you

4:26want, but this can help you learn how to

4:28describe stuff, right? So, headline

4:31size, right? Make it really big. I do

4:34think I want it bigger. Now, let's give

4:37us a few quick tries and see what it can

4:39do. Body size, right?

4:44Button tracking.

4:51Interesting

4:51pill padding.

4:54We don't need any padding on them pills.

4:56Oh yeah. XY. I love that. Card padding

5:00should be the whole container. Yep.

5:09I love this. Sometimes when you're in

5:09prompting, it can get into a real battle

5:11to get these tiny little things just

5:13just right. So having something like

5:15this really nice this border radius.

5:19Okay, this is adjusting the the corners

5:22here. And I kind of want it to be more

5:23like a paper. Anyway, look at this paper

5:27shadow.

5:29Not much change there. Rule opacity.

5:32What is that? Oh,

5:35it's the outline there.

5:38I want it to be I want that to be more

5:40pronounced actually.

5:43I want that to be more pronounced.

5:45Actually, we don't want paper shadow

5:47blur to be too much either. Okay, nice.

5:51Well, let's uh let's see how this looks.

5:55Sorry, I might have been mumbling a

5:56little bit there. I'm just kind of like

5:58flabbergasted at just how how cool this

6:01is. Um, yeah. So, while I'm doing that,

6:05if you notice, it's it's adjusting a

6:07prompt down here. So, if I turn the desk

6:10tape off, it'll add that down here.

6:12Remove the desk tape decorations. If I

6:14put the desk tape back, it keeps the

6:16desk tape decorations on there. Then I

6:18can copy this prompt, go back over to

6:21Claude,

6:23type it in,

6:25and see if it makes those changes. Let's

6:27go over to the local preview.

6:31Oh, it might ask me a command first. No,

6:33I don't think so. It's going for it.

6:43Yeah, it's really interesting the

6:43different things that come out almost

6:45daily. This skill, this skill is just

6:48one of many um that I have yet to

6:51explore. Uh yeah, let's make edits here.

6:56And if we like them, we can keep them.

6:57If we don't, we can roll them back. But

7:00this was mostly just to kind of show

7:02this new skill that's available uh in

7:06claude code.

7:08And for those of you who are more

7:09tactile, they want you more spatial

7:12visual learners and doers, this is

7:14something that I think is going to be

7:16really handy. It's already really handy

7:17for me just in describing things, right?

7:21Pill padding. I mean, I knew these

7:23things, but I learned these over time

7:26slowly. Man, if this existed and I had

7:28been introduced to this skill, I

7:30probably would be leaning on this a

7:31little bit um right now. So, yeah. Look

7:35at that. There's my updates. There's our

7:37updates. It's already cleaner. I do like

7:40that. I don't like where the tape is,

7:42but I already like the things that we

7:45were just able to adjust on that.

7:47Yeah, it's doing

7:50it's doing work. Good job, playground

7:54skill. And I like it. I did think that

7:56these were too rounded. It's supposed to

7:58be a desk and paper. So, there's

8:00supposed to be some, you know, angles

8:01there. And then these inside boxes can

8:03be a little more angular or uh rounded,

8:06I guess. Yeah. Groovy, groovy, groovy,

8:11groovy. Well, let's commit these. Let's

8:14commit these changes and push them.

8:22All right. Well, I think I'll call that

8:22kind of like a little mini episode to

8:24kind of show the uh the Claude

8:27playground skill. So, don't forget to

8:30commit and stay curious and tune in next

8:32time. So, hopefully we'll be finishing

8:34up the conundrum desk.