YT YouTube2Text

YouTube2Text → Transcripts → Designing + Vibe Coding an iOS App Live (Claude Code)

Designing + Vibe Coding an iOS App Live (Claude Code) — Transcript

by Cecilia Kim · 6,697 words · 990 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00So, I'm trying something completely
0:01different with this video. Instead of my
0:02usual format where I walk you through
0:04the process after the fact, I'm going to
0:05design and code a brand new feature for
0:07my wedding app live. You're going to see
0:09the full thing, the research, the design
0:11decisions, the vibe coding, all of it
0:12happening in real time. If you've seen
0:14any of my past videos, you know I've
0:15been working on this app called Olwa,
0:16which stands for Our Little Wedding App.
0:18I covered the full design process in one
0:20video and the prototyping process in
0:21another one, but I recently realized
0:23that we were missing one of the main
0:24features of any wedding invite app,
0:26which is the actual RSVP. So, today
0:28we're designing and building it from
0:29scratch. [music] By the way, this video
0:30is not sponsored. It's just me and my
0:32tools and a feature that needs to exist.
0:34So, before we jump in, let me quickly
0:35show you where we're at with the app
0:36right now, just so you have some
0:37context. So, [music] in order to get to
0:39the app, you press on this app icon, and
0:42this is the main invite screen, and you
0:43can see all the little doodles here.
0:45They're moving around with fun
0:46animations, and they change sizes
0:48depending on the scroll. Once you click
0:49on the invite here,
0:51>> [music]
0:51>> it takes you to the details page of a
0:52particular wedding, so you can see all
0:54the details here, and you can also see
0:55the animations for the button, [music]
0:57and once you hit enter,
0:59it goes to the next screen, and this is
1:01basically the menu. You can [music] see
1:03all the little icons shimmying on the
1:05screen just to add a little bit of
1:06flair. And currently, I have the day-of
1:08schedule prototyped out, so if we click
1:10on that one, we can see the schedule
1:12here,
1:13>> [music]
1:13>> and this top schedule moves with the
1:16scroll.
1:17>> [music]
1:18>> Once you go back, I've also prototyped
1:20out this gallery
1:21just to add some photos of a wedding.
1:23You can add some from your camera roll,
1:25and you can delete as many as you want,
1:27and this is like a live photo wall for a
1:29wedding.
1:30>> [music]
1:30>> So, back on this menu screen, you can
1:32see that there's no option to RSVP for
1:34the wedding. So, it will live on this
1:35screen towards the top, probably, just
1:37to grab the user's [music] attention,
1:38and once the user has finished RSVPing,
1:40the messaging at the top will change.
1:42Now, here are the goals to make this
1:44RSVP process different than anything
1:45else out there. One, we're designing
1:47this as a mini onboarding experience,
1:49not just [music] a boring form. Number
1:50two, each question gets its own screen
1:52so that it reduces cognitive load.
1:54Number three, it keeps our existing
1:55scrapbook aesthetic with illustrations
1:57and animations throughout. [music] And
1:58number four, the whole thing should be
2:00fun and playful like you're flipping
2:01through a little book instead of filling
2:03[music] out paperwork. All right, so
2:04let's get started with the research.
2:08>> [music]
2:09>> All right, so let's get started
2:10researching what RSVPs actually need in
2:12a form. Let's look up wedding RSVP
2:15[music] forms. Just scrolling through,
2:18we can see one from The Knot.
2:20So, in general, they're saying that we
2:22need to know if they're attending, how
2:23many seats, the meal selection, and a
2:26lot more down here. On withjoy.com, they
2:29have 25 must-ask questions. [music]
2:31And they have something about a
2:32deadline. Again, there's the guest count
2:34and a lot more like accommodations and
2:37transportation. If we go to a different
2:39one, I like this one cuz it says it's
2:41based off of real data. So, it says
2:43[music] the key takeaways is the food
2:44dominates. Four questions is enough, so
2:46not too many. Keep in mind accessibility
2:49and engagement questions like song
2:50requests and messages really build
2:52excitement. So, [music] based on what
2:53I'm seeing across all of these, the
2:55essential questions keep coming up over
2:56and over. And it looks like the ideal
2:58RSVP should [music] take under 2 minutes
3:00for the guest to complete. So, with this
3:02in mind, I want to write down everything
3:05to include in our RSVP flow in Figma.
3:07And now, let's look at some competitors
3:09that I mentioned in my past videos.
3:10[music] One includes Partiful RSVP.
3:15So, for Partiful, we can see that it is
3:16very minimal. Guests tap going, maybe,
3:18or can't go, and they can verify with
3:21their [music] phone number, and they're
3:22pretty much done. It shows social proof
3:24for who else is attending, and it works
3:25for casual events, but it's way too
3:26simple for weddings since there's no
3:28questions about meals or a multi-step
3:29flow. The other competitor that I
3:31mentioned is called Luma. [music] So,
3:32for Luma, the name and email is
3:34required, and the host can add some
3:35custom questions, but there's no
3:37conditional logic or branching, and it's
3:39more of a registration form than an
3:40experience. So, what I'm realizing is
3:42that none of these are designed
3:43specifically for weddings. And Partiful
3:46is great for parties, but a wedding RSVP
3:48needs way more info. And the actual
3:49wedding platforms [music] like The Knot
3:51and Joy are functional, but they feel
3:52like filling out like a government form.
3:54So, there's a real opportunity here to
3:56make RSVPing actually feel fun [music]
3:58and on brand. All right, so now let's go
4:00to my favorite step, which is going on
4:02Mobbin. And here is the first place I
4:03look for you for [music] UX and UI
4:05inspiration. So, for now, let's look up
4:08RSVP [music] and see some iOS mobile
4:10screens. Like I said, if I see anything
4:12that I like, like this one, such as
4:14information here, I will screenshot.
4:17Or you can also copy, go to Figma, and
4:20paste. And it'll show you exactly where
4:22it came [music] from. So, here it says
4:23BFF. Or you can just drag in your
4:25screenshot cuz I'm using Clean Studio.
4:27Here's another [music] screen that I
4:28like. Let's keep looking.
4:31I like the way that this confirmation
4:33screen looks, so I'll take a screenshot
4:35[music] of that as well.
4:37And I like the gradients and the soft
4:39corners and shadows of this screen.
4:41[music]
4:42So, I'll keep that one, and let me drag
4:44those into Figma.
4:48Now, let's try event registration,
4:51and automatically change the screen type
4:53[music] to event detail, which is great.
4:55I like this one where it has a large
4:56image at the top, so I'll keep this one
4:59for my mood board. Same thing [music]
5:00with this one, I like the imagery at the
5:03top. Here's one with great information,
5:06and again,
5:07I'm just looking through. I don't want
5:08to spend too much time doing this
5:09because it can really be a time sink.
5:11I'll [music] just do two more.
5:13Maybe three more.
5:16So, now I'm going to look up survey just
5:18to see if they have anything as well,
5:20[music] since we will be asking survey
5:22type questions in our flow.
5:25I like the vibes of this one, the soft
5:27gradients.
5:28>> [music]
5:29>> I like the way that this one has the
5:31gradients as well, and how it's easy to
5:33look at all of the information. The icon
5:35use here is really great, too. And let's
5:37also try
5:39multi-step form. These look pretty
5:41similar to the survey search results. I
5:44do like this one where it has a huge
5:46illustration at the top and the [music]
5:47progress bar at the top as well. Same
5:49thing with this Walmart screen. So, now
5:51let's drag all of that into Figma.
5:55And again, you guys know that I do go on
5:57a screenshot [music] frenzy. I usually
5:58do a lot more than this. Like as you can
6:00see from my past designs, there's a lot.
6:03But I wanted to keep it a little bit
6:05more simpler since we already have a
6:06design language in mind. Now, let's go
6:08to Pinterest and [music] see wedding
6:11RSVP card design just to see what it
6:13looks like on a physical invite. [music]
6:16So, this one looks great. I also like
6:18the colors and the simplicity of these.
6:21Ooh, I like the shape of this one. I
6:24also like the illustrations in this one.
6:29And let's grab [music] those and pull
6:31those into Figma as well.
6:33Let's also type in scrapbook invitations
6:36since our design style is scrapbooking.
6:38It actually looks pretty similar [music]
6:40to what we had before. I like the
6:42multiple aspects of this one. This one's
6:44[music] a huge trending one right now
6:46and I thought this was very cute. And I
6:47really like things that feel very
6:49tactile. You can see the [music] paper.
6:51You can see elements like the wax seal.
6:53It all feels very physical and intimate.
6:55So, [music] normally I would go on a
6:57longer screenshot frenzy, but I will be
7:00cutting it off a little bit earlier
7:01right now.
7:03>> [music]
7:05>> All right. So, these are just to keep in
7:06mind in case we need it later for any
7:08screenshots [music]
7:09and reference photos while we're vibe
7:11coding. So, what I want to keep in mind
7:12is the UX. [music] So, things like
7:14progress indicators and for that one you
7:16can see it here and seeing how other
7:19apps show a multi-step flow. There's
7:20also card style selections. [music]
7:22There's radio buttons and there's pills.
7:25And I want to see which one feels more
7:26tappable and engaging. There are the
7:28illustration heavy screens, especially
7:29[music]
7:30the confirmation screens just to see how
7:32an app celebrates after you finish a
7:34flow. We also want to keep in mind in
7:36general other UX patterns such as skip
7:38buttons and optional question handling,
7:40any sticky footers [music]
7:41with any next and continue buttons like
7:43we see here. Also, I know these are
7:45screenshots, but we also want to keep in
7:47mind interactions and animations. Now,
7:48let's [music] look at some stuff for the
7:50RSVP banner and go back on Mobbin to
7:52look up inner, which is a common UI
7:55element. So, this is a good example of a
7:57banner, and [music] let's take some more
7:59screenshots.
8:00Here's another banner,
8:02which I like because it's very
8:03prominent.
8:05This one is full screen, which is
8:06different than the usual cards that we
8:08see. I like this dark mode version as
8:10well. There's a lot of [music] contrast,
8:11so banners need to be very evident and
8:13easily findable. So, yeah, I think we
8:15have some good options here. I usually
8:17organize them at the very end [music]
8:18just so that I don't lose the flow of
8:20getting all my screenshots at once. So,
8:22some different options that we have for
8:23the menu screen is the inline card
8:25approach like this one, where it's a
8:27card that sits at the top of the menu
8:28screen, and it blends in with the other
8:30menu items, but it stands out just
8:31enough to draw attention. Maybe we could
8:33have a textured [music] paper background
8:35on envelope icon with text that says
8:37RSVP to the wedding.
8:41We could also do a sticky [music] banner
8:43approach like this one, where there's a
8:44floating banner at the top that stays
8:46visible as you scroll. So, this feels
8:48the most urgent, but it might clash with
8:50the scrapbook vibe. And my most favorite
8:52approach is the section approach, where
8:54I just treat it like another section in
8:56the menu [music] list, but positioned at
8:57the very top, and it has the same visual
8:59language as the other menu items, but it
9:01might be slightly larger or with a
9:02subtle animation to draw the eye. So,
9:04the two states [music] that it
9:05definitely needs is one, the before
9:08RSVP, and the second state is after the
9:11RSVP, indicating whether the user will
9:12be going or not going. And if we go to
9:14the menu screen, [music] which is right
9:16here, since the menu screen already has
9:18items like registry, gallery, and all
9:19that stuff, the RSVP card should match
9:22that visual system, but feel like the
9:23primary action. I really want to make it
9:25feel like it's part of the menu, and
9:27it's not an interruption, but again, I
9:28still need it to draw attention.
9:30>> [music]
9:33>> All right, so now let's set everything
9:35up. So, today we'll be using Zeplin and
9:36Cloud Code since that's usually what I
9:38use for my prototyping. You can also use
9:39cursor, I recommend that one as well.
9:41And right now I have C-Max open, [music]
9:43and I've already navigated into my
9:45project folder. In here, let's rename
9:47our workspace [music] to Olwa setup, and
9:50let's add a few more tabs for the main
9:53flow,
9:56menu screen,
9:59animations,
10:02and maybe another one for testing on the
10:04simulator. For the main flow, this is
10:06where I'll do most of my vibe coding
10:07[music] for the RSVP flow. For the menu
10:09screen, this is dedicated to the RSVP
10:12section, so I can work on it in parallel
10:14with the flow. Animations, [music] of
10:15course, is for going back and forth
10:16tweaking animations and transitions, and
10:18of course the testing [music] is for the
10:20simulator and to make sure everything is
10:21working correctly. All right, so first,
10:23let's work on the main flow just to get
10:25everything [music] started. So, I'll say
10:26Claude, dangerously skip permissions,
10:30since this is just for prototyping,
10:32there's no back end involved right now,
10:33and there's no sensitive data. And let's
10:35also mention the Chrome flag, just in
10:37case it wants to pull up references
10:39live, and that means Claude has access
10:41to my Chrome browser. And also, let's
10:43set the effort [music] to ultra code,
10:45since this one's going to be pretty big
10:47update for the entire RSVP flow.
10:50I also want to make sure that the Xcode
10:51build MCP is connected so that I can see
10:53the simulator and make sure everything
10:55[music] is working correctly and I can
10:56see the results. All right, so for my
10:58first prompt, I'm going to be using
11:00Whisper flow, which is what I use to
11:01dictate everything, since it's a lot
11:03faster than typing. [music] So, let's
11:04say, I'm working on a wedding app called
11:07Olwa. The app already has an invite
11:08screen, menu screen, [music] and a day
11:10of schedule screen, and the design
11:12language uses burgundy and chartreuse as
11:14the color [music] palette, serif fonts,
11:16and a very scrapbook aesthetic with
11:17paper textures, layered elements, soft
11:19shadows, Polaroid style photos,
11:21hand-drawn doodles, and a wax seal for
11:23decorative elements. All of the existing
11:25screens have animations like shimmying
11:27doodles, items [music] appearing and
11:28disappearing on scroll, and playful tilt
11:30effects on interactive elements. I need
11:32you to match this exact design language
11:34for everything that we built today. Next
11:36after that, I will give it more context
11:38and say, "We're adding a new RSVP
11:40feature, so on the menu screen, I need a
11:42new section at the [music] very top that
11:44lets the user tap to start the RSVP
11:46process. The RSVP itself should be a
11:48multi-step flow like a mini onboarding
11:50where each question gets its [music] own
11:52screen. I want it to feel like you're
11:53flipping through a little book or a
11:54pamphlet and each transition between
11:56screens should look like a page turning.
11:59that we need are a welcome screen to
12:01start the RSVP, attendance confirmation
12:03with going, can't go, and maybe options.
12:05Number three is guest count and a plus
12:07one name. Number four, meal selection
12:09with visual cards. Number five, dietary
12:11restrictions with toggleable tags.
12:13Number six, [music] song requests. And
12:15number seven, a confirmation screen that
12:17summarizes their answers. If a user taps
12:19cannot go on the attendance screen, skip
12:20everything and go straight to the
12:22goodbye screen. For now, don't focus on
12:23the UI, just focus on getting the flow
12:26set up. Now, I want to take screenshots
12:28[music]
12:28of the current UI so that I can give it
12:30to Claude code.
12:35And let me add it to our chat.
12:38>> [music]
12:39>> And just for context, I'll say, "Here
12:40are screenshots of the existing app
12:42screen so you can match the design
12:43language exactly. Keep in mind the
12:45colors, [music] fonts, textures,
12:46shadows, and the overall scrapbook feel.
12:48The animations should be playful but not
12:50overwhelming and every screen should
12:51feel like it belongs in the same app."
12:53And press send and let's see what it
12:56comes [music] up with. I'm just going to
12:57give it time to do its thing and see
12:58what it comes up as the first pass. And
13:00this might take a while, so when we
13:02[music] come back, I'll continue with
13:03the live five designing and the five
13:04coding.
13:08All right, so now we're back. It's
13:09actually been 36 minutes [music] and in
13:11that time, it basically made the entire
13:13flow. So, it's up here in the simulator.
13:16We go through the normal flow and this
13:18is where it's created [music] the entry
13:19button. I do like the way that it looks.
13:21It matches the current aesthetic.
13:23There's a slight shadow to it so it
13:24looks uplifted [music] so that it's
13:25slightly more noticeable with the
13:27envelope here. I do want to make some
13:28changes and tweaks to the spacing, but
13:31let's just go through the flow to see
13:32what it did on the first pass. This is
13:34the intro screen [music] and this one
13:36looks good. I might swap out this first
13:38image for a nice fun illustration.
13:41I also see that the animation kind of
13:43goes the opposite direction, so I might
13:45fix that one and I don't mind these
13:47cards as well. They match the original
13:49entry button, so I like that. And I also
13:50like these icons. It's keeping that same
13:53green color and the burgundy color,
13:54which I like.
13:56Any guests in your party? I like this
13:58picker, too. Let's add Chris.
14:00>> [music]
14:01>> And for the meal, I also like these cute
14:03icons. Some of them aren't really
14:05related, but I think I'll go in and
14:06change those, too. Let me choose this
14:08one. And I also like this shimmer
14:10[music] effect down here. That's similar
14:11to the detail screen.
14:13Here are some accessible dietary needs.
14:16Continue and a song down here.
14:20And here's the confirmation screen. Once
14:22we send RSVP, [music] it looks like
14:24there's no second state for this, so
14:26we'll have to vibe code that in as well.
14:27But I think that is so great for a first
14:29pass. That literally took 36 minutes,
14:32but it [music] would have taken me
14:33multiple multiple days in order to get
14:35all of the screens correct, to connect
14:36all the screens together, do all the
14:38research, and also make sure all of the
14:40design and branding is consistent. So
14:43with this, let's get started working on
14:45the menu screen. Let's go to the menu
14:47screen tab. So for this one, let's
14:49dictate with WhisperFlow again.
14:52Add 30 pixels between the [music] RSVP
14:54banner and the schedules title text.
14:57Also get rid of the rounded corners on
14:59the banner and make sure that if a user
15:01says they are attending, we change the
15:03wording. And if they are not attending,
15:04we change the wording there, as well.
15:07>> [music]
15:08>> Make the green border 1 pixel thicker
15:10and make the shadow 20% darker.
15:14>> [music]
15:14>> I like to use specifics when I'm making
15:16design changes so that it isn't really
15:18guessing what I want. I feel like if I
15:19say, "Oh, add more space between the
15:21banner and the schedules title," it
15:23doesn't really know what to do with that
15:24because it could be 30 pixels versus 100
15:26pixels. So, I like to be very specific
15:28in terms of percentages and pixels, and
15:30I found that that's really helped. For
15:32the menu screen, I like the rest of it.
15:33I don't think there's anything else I
15:35want to do. I got rid of the corners
15:37because on the day of menu, we don't
15:38really use rounded corners, and I wanted
15:40to keep that design language. And
15:42there's already a slight shimmy effect
15:43on the envelope here just to grab the
15:45attention of [music] the user. So, we'll
15:46be keeping that. Now, let's go to this
15:48animations tab and let it know that the
15:50animation is kind of backwards, [music]
15:52and I might set this effort to ultra
15:53code as well just because I feel like
15:56animations need a little bit more higher
15:58thinking power than just normal code.
16:01For the book flipping animation between
16:03each of the RSVP flow screens, it seems
16:06to be [music] backwards where the next
16:07screen looks like it's coming down from
16:09the previous screen. I want it to be
16:11[music] opposite, like a person opening
16:12a book page. Can you fix the transition
16:15animation?
16:16>> [music]
16:16>> Great. So, now this will be working on
16:19the animations, and we'll let that run.
16:21[music] Now, looking at this menu
16:22screen, maybe we can use kind of a paper
16:25texture here to make it look like an
16:26actual wedding invite. So, let's go to
16:28Canva to see if we can find some [music]
16:31assets. So, we've started a new project
16:33on Canva. Let's go to elements and see
16:35what we can find. Paper texture.
16:39Ooh, I really like this one. Maybe we
16:41can shift it 90°. But, it seems [music]
16:44a little bit too square for our use
16:47case. I need something like this size,
16:49or maybe even this one.
16:52So, we'll keep [music] this. And next
16:54for the flow, let's see if we need
16:56anything else. For the won't you join
16:58us, let's do [music] some cute
17:00illustrations.
17:02Add another page.
17:05I really like this one. It's very simple
17:07and cute.
17:09Once we hit begin, let's add some for
17:12these icons.
17:15Um let's do a heart
17:17sticker.
17:19And this resembles our menu screen, so I
17:21wanted to keep that. [music] So, here's
17:23the heart.
17:25Let's look for the maybe sticker.
17:29I like this one.
17:32And look for a sad sticker for the
17:35regretfully decline. [music]
17:38And I like this one. Actually, I like
17:40the look of this one more.
17:43Maybe we can add [music] an illustration
17:45for this one as well. So, let's go back
17:47to wedding illustrations.
17:51I love the champagne tower.
17:54>> [music]
17:55>> So, there's one illustration, two.
18:00We can add a simple one like this.
18:02That's three.
18:04>> [music]
18:05>> I also like the candles. That's four.
18:10Here's a cute [music] cake, and that one
18:12is six.
18:15Ooh, I love these ducks, and that's
18:17seven. And I think [music] that's all we
18:20need for now. If we go back to our
18:22simulator, you can see that it's
18:23testing, [music] especially with the
18:25animations tab here. I have no idea
18:27what's going on, but I will let it
18:28handle it. All right, so I found some
18:30more assets, like some more
18:31illustrations, especially for the food
18:34menu options, and some paper texture
18:36just to use throughout the app. Because
18:38keep in mind, we want to make it feel
18:39like a scrapbook and like you're
18:40receiving a physical invite. So, I've
18:42exported all of these. I go to share,
18:44download. I usually do size two, but
18:46I'll just keep it one for now, and I
18:48select all of the pages. I've gone ahead
18:50and already done this and downloaded
18:52them here and added them to my Figma.
18:54So, once I pull them all into my Figma,
18:56I made sure I cropped them correctly,
18:57named them correctly, and then export it
18:59to whatever folder you have all of your
19:01assets for your app. So, while I was
19:03doing all of that, I went ahead and
19:04tried to make some more changes. So,
19:06here I use this paper background to try
19:08something new for this RSVP, and it
19:10doesn't really look great. It might be a
19:12little bit too dark, so [music] I might
19:13change the opacity there and maybe add a
19:15shadow. So, I'll let it know here. The
19:18background paper texture is a little bit
19:19too dark, so it's hard to read the text.
19:21Let's change the opacity of the
19:22background paper texture to around 50%
19:25and add a slight subtle shadow behind it
19:28so that it looks more noticeable.
19:30Also, for the text that says tap [music]
19:32to send your reply, use a handwriting
19:34script font.
19:36And if I don't like that, I probably
19:37will just revert to what we already had
19:39because I did like that. I just wanted
19:40to see and experiment to see what it
19:42looked like. Now, let's go back to the
19:43animations tab, and it looks like it's
19:45still working. It's been about 22
19:46minutes. It still did not get the
19:48animation correctly when I'm moving
19:49between the screens, [music] so it's
19:51definitely still working through that.
19:52Doesn't look like what I want it to.
19:56I've also added some pagination here as
19:58well.
20:01When I gave it the prompt for the
20:02animation, I said something like for the
20:04flow, I want the screen's transition to
20:06look like a page turning in a small book
20:08or pamphlet, and when the user taps next
20:10[music] or makes a selection, the
20:12current screen should flip to the right
20:14like a book page turning, revealing the
20:15next question underneath. I want there
20:17to be a subtle shadow when the page is
20:19turning to give it a little bit of
20:20depth, and then add those small dots
20:21[music] with pagination at the top like
20:23page two of seven in a handwritten font
20:25just so that the user knows where they
20:26are. So, I just talked to Cloud Code
20:28like a human being and be very specific
20:30in what I want, especially when it comes
20:32to animation. All right, so now you can
20:33see that it's finished the menu screen
20:35card, and I do like it a lot better
20:37because of the paper texture. I make
20:38make a little bit more tweaks because I
20:40can see a white border right here that I
20:41don't like, so I'll go ahead and fix
20:43that.
20:44There seems to be [music] a white border
20:46on the right side of the paper
20:47background texture of the RSVP banner.
20:50Can you get rid of that? And also, make
20:52the shadow in the background 20% darker
20:55so that it's a little bit more
20:56noticeable. Other than that, it looks
20:57great.
20:58I did want to talk about the placement
21:00of this RSVP banner here. I needed it to
21:02be at the top like I mentioned before
21:03because it is the most important action
21:05that the guest needs to take, in my
21:06opinion, since it is a wedding invite
21:08app. And the two states of asking a
21:10question and then the confirmation of if
21:12they are going to be there or not is
21:13important so that the guest feels a
21:15sense of completion. And if they come
21:16back to the app later, they should
21:18instantly see if they've already
21:19responded. Now, let's look at the
21:21animation and see if it did it right.
21:23First screen.
21:25Let's see what happens if I go
21:26backwards. [music]
21:32I see. Okay.
21:34Okay, so technically the animations are
21:36correct, but [music] it's flipped. When
21:37I press the continue button, the
21:39animation should be what currently
21:41happens when I hit the back button and
21:42vice versa. Can you just swap the logic
21:45[music] for that? Otherwise, it's great.
21:47Also, get rid of the stack of paper
21:49picking out on the right side.
21:52So now on the main flow tab, I also want
21:53to go ahead and add in the correct
21:55illustrations. And let me grab those
21:58illustrations now.
22:01For each step of the RSVP flow for pages
22:05one through [music] six, can you add an
22:07illustration that I've provided at the
22:10top of the screen, including page one?
22:12So instead of the image with our names
22:14on it, put in wedding illustration one.
22:16And then continue onwards.
22:20Also, use these for the food images
22:23instead of the icons.
22:26And use these as the images for the RSVP
22:29answer instead of the icons.
22:33All right, so I think we're at a good
22:35point now. All of my tabs have [music]
22:37stopped and completed building
22:39everything that I've wanted so far. So
22:41let me just quickly go through [music]
22:42everything just to make sure everything
22:44looks okay
22:46at the moment.
22:47And I can go through all of these in
22:48detail [music]
22:49right now. I actually added this button
22:51right here just to reset everything
22:53because as you can see, once we RSVP
22:55correctly, [music] the messaging changes
22:57here quickly. So now I can just reset it
22:59just for debugging and testing purposes.
23:01So after this, I wanted to go through
23:02the final build and talk about things
23:04that I would improve if I had more time.
23:06I think we're at a really good point
23:07right now. I still have some things that
23:08I want to change, but I know I'll be
23:10here all night. But, it's only been a
23:11few hours, so I think this is, again, a
23:13good stopping point.
23:17>> [music]
23:18>> All right, so now let's finally test
23:19this through the simulator and on my
23:21device. [music] So, one last time, let
23:23me just say, "Can you rebuild this for
23:25me so that we can start fresh?"
23:28>> [music]
23:29>> And you'll probably see this pop up on a
23:31new screen.
23:33Perfect. So, I think we have a new clean
23:35fresh build now. And if any of you have
23:37worked with Xcode before, you [music]
23:38know that doing that regularly really
23:40helps with making sure everything is
23:42accurate and works like you [music]
23:43intended. So, now let's go through the
23:44flow. This is the existing flow, and
23:47here we should see the RSVP banner. I
23:49don't think I have any notes for this
23:51one. Obviously, [music] if I put this in
23:52production, I'd get rid of this reset
23:54button because that's just for testing
23:55purposes. But, this RSVP banner looks
23:57great as is. I love that we kept the
23:59paper texture in the background, similar
24:01to the screen before with all of these
24:03different textures. [music] And as I go
24:04through this final build, I wanted to
24:06also go over things that I want to
24:08improve and probably work on
24:09>> [clears throat]
24:09>> at a later time. So, once we click in,
24:11here is page [music] one of seven with
24:13the pagination up top that I love with a
24:15huge illustration in the middle and just
24:17some details here. I think it'd be
24:18really cute if we had confetti or small
24:20sparkles floating around once we get
24:22into this first page. And maybe if we
24:23had an actual Polaroid photo of me and
24:25Chris on this [music] screen just to
24:27make it more personal. Now, let's hit
24:28begin. I actually really like this
24:30illustration and I think it's my
24:31favorite one. Another feedback I have
24:33for myself is I love drawing and I love
24:35illustration, so I think I would want to
24:36make custom illustrations [music] for
24:38this app. So, instead of the Canva
24:40assets, I would go in and add my own,
24:42maybe with a little bit of animation. If
24:43you've seen my Amy designs, you'd know
24:45what I'm talking about. Also here,
24:46[music] I replaced those icons with
24:48these sticker-like images, which are
24:49also Canva assets. And I really think it
24:51changes the whole vibe of the app. By
24:53including assets like these, it just
24:54makes it a a more fun, playful, and
24:56different than what you normally see on
24:58just AI generated apps. [music] So, here
25:00I will be joyfully accepting. And again,
25:02if you look at that page transition, I
25:05finally got it working where it looks
25:06like an actual book page. It's not too
25:09fast, it's not too slow, so I think this
25:11is perfect. Then for this card, maybe
25:13for the joyfully accepts, if someone
25:14clicks on it, it could have a selection
25:16animation that could trigger a small
25:18confetti burst just for the [music]
25:19joyfully accept since it's the response
25:21that we want. And I chose these cards
25:23instead of buttons because it feels more
25:24intentional and premium, and we need
25:26this branching logic. And if a user says
25:28regretfully declines, it'll [music] just
25:29skip right to the end of the flow so
25:31that we're not asking irrelevant
25:32questions. So, onto the next screen.
25:34This is who else is coming, and if you
25:36go more than one, we'll have another
25:37field here. So, let's say we say Chris
25:39is coming. Obviously, I want this
25:41illustration to be a bit larger and more
25:43relevant to the screen. [music] So,
25:44maybe it would be an illustration of
25:46chairs at a wedding, or maybe a doodle
25:48illustration of a table. And I also feel
25:49like the illustrations could have more
25:51movement, so that could add another
25:52element of a fun and scrappy [music]
25:54feel. Next up, let's go to the choosing
25:56the food meal. Again, this cake image is
25:59quite small. Maybe I could have used
26:00that espresso doodle from a past screen,
26:02but I did replace those [music] icons
26:04with actual illustrations. Again, these
26:06are all from Canva, but I do want to
26:07redo these illustrations myself, and I
26:09want to make sure that all of these
26:11illustrations are in the same form of
26:13art style as all of the illustrations
26:15throughout the app. So, these
26:16illustration styles are not [music] the
26:18same as the ones throughout the app. I
26:19would have to pick one or two just to
26:21make sure it's cohesive. Also, we need
26:22to keep in mind that if there are
26:23multiple guests, [music] like Chris in
26:25the screen before, and they would need
26:27to also be able to choose their meal as
26:28well. Maybe we would have some
26:29pagination down here so that you can
26:31choose which guest is choosing [music]
26:33which meal. So, for this one, let's go
26:34with a braised short rib. Oh, and
26:36another thing to note is probably at the
26:37bottom, I would add a note that says
26:39dietary [music] needs are on the next
26:41page just so that the user knows that if
26:43we need to know anything about any
26:44restrictions, it is included in the next
26:46screen.
26:47This is the dietary [music] needs
26:48screen. I do want to include a none pill
26:51instead of just saying skip just in case
26:52the user does not read this and also an
26:54other option so that if [music] a user
26:56presses other we can have a text field
26:58down here just in case there's something
26:59that's not included here and with all of
27:01that in mind maybe we would also have a
27:02skip button down here that is visible
27:05but not too prominent just in case again
27:07a user feels stuck in this flow.
27:09Now for the request a song page again I
27:12would want the illustration to be more
27:14in line with the screen so maybe we
27:15could have added that image of a disco
27:17ball here with some sparkles and
27:18confetti maybe some small doodle notes
27:20around here shimmying around and again
27:22adding that skip button down here just
27:24in case someone doesn't want to add any
27:25answer for this one. Now for the final
27:27confirmation screen this is the same
27:28illustration as the first page but I
27:30will change that one out and I did want
27:32to add a paper texture to the back of
27:33this and I just added [music] this last
27:35minute and I'm not a big fan of it I
27:36think there's better options for this
27:38and a better way [music] to integrate it
27:39into the screen but I think you can kind
27:41of get what I'm trying to go for here
27:42and maybe it's too much confetti but we
27:44could also do another confetti screen
27:46here maybe some flower petals like
27:47floating down the [music] screen just
27:49for some extra joy and animation and one
27:51other thing is that maybe we can also
27:53add some [music] Polaroid style images
27:55of me and Chris and Luna our dog just to
27:58again make it more intimate and personal
28:00and now we will send the RSVP [music]
28:01and it says that we will be attending I
28:03wanted to really make sure that
28:05everything felt alive but not too
28:07overwhelming and with all of the changes
28:08that I've just [music] mentioned it
28:10would probably need some tweaking
28:11because it could get overwhelming so I
28:13think this is a really great stopping
28:14point for me [music] to take a break
28:15from it come back to it later and see
28:17exactly what needs tweaking and now
28:19let's actually put it on my phone. So
28:21[music] what I do is I need to plug it
28:23into my computer and if you also use the
28:25same Wi-Fi I think it works that way as
28:27well go to Xcode here right here we
28:30change this [music] to my physical phone
28:32and press build.
28:35It says the build is succeeded and if we
28:37look here
28:38it pops [music] up on its own.
28:41So now let's go through the actual flow
28:42on my phone. So here is a normal flow
28:44that I've already gone through press
28:46enter
28:47And here is that banner. [music]
28:49Let's go and click through it. It looks
28:51good.
28:54The page animations look great. [music]
28:55Let's choose this first option. Let me
28:57add a guest here. So, I've added my
28:59guest.
29:00>> [music]
29:01>> Here is your meal selection, and let's
29:03go with that one.
29:05And any [music] dietary restrictions.
29:08And some requests that you would want to
29:10add.
29:11And the final confirmation screen.
29:14>> [music]
29:14>> And now the full prototype is in my
29:15hands.
29:20So, that was the full process of adding
29:21a brand [music] new feature to my
29:22wedding app, and that is from research
29:24and all the way to a physical prototype
29:26on my phone. And now it's already dark
29:27outside. This was definitely a different
29:29kind of video for me, and I'm not going
29:30to lie, I was pretty nervous about it,
29:32and I was kind of crashing out in the
29:33middle of it, not knowing if it'll work
29:34out. But with our pre-existing design
29:36language and the branding that we have
29:37for the app, it went a lot better than I
29:39thought, and a lot [music] faster than I
29:40thought. But all in all, I think there's
29:41something really valuable in seeing this
29:43process live. The decision making, the
29:45back and forth with the AI, the moments
29:47where something doesn't look quite
29:48right, and you have to figure out why.
29:49It's all [music] part of the process.
29:51Like I mentioned in the previous
29:52section, the RSVP flow definitely still
29:54needs some polish. There's still things
29:55that I want to tweak with the
29:56animations, and there's still some
29:57spacing that I need to get right. But
29:59the fact that it went from nothing to a
30:01fully working prototype with multi-steps
30:03and animations all in one session is
30:04amazing. I hope seeing my full process
30:06of my designing and my coding was
30:08helpful and made sense, especially with
30:10how much time I saved using multiple
30:11agents at the same time. This only took
30:13a few hours of my day today, otherwise
30:15it would have taken me weeks. If you
30:16want to see how I design the rest of the
30:17app, I have a full design process video.
30:19And if you want to see how I prototyped
30:20it and got it onto my phone, I have
30:22another video for that as well, and I'll
30:23leave a link in the description for both
30:25of those. Definitely let me know in the
30:26comments if you like this format, and if
30:28you want to see me build more live
30:29videos. Again, I hope this was helpful,
30:31and as always, thanks for watching, and
30:33I'll see you guys in the next one.
30:39>> [music]
30:46>> Oh.

About this transcript

This page contains the full transcript of Designing + Vibe Coding an iOS App Live (Claude Code) by Cecilia Kim, generated from the public captions YouTube serves with the video. The transcript has 6,697 words across 990 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.