00:00:00 And finally, we are ready to, well, see something.
00:00:04 We are now ready focus on the design system and the UI foundation.
00:00:08 The visual language, the primitives, and base components, including the two shapes this product lives on.
00:00:16 Done when the design MD covers type, color, spacing and components, base components handle focus and keyboard, the swipe deck is operable by keyboard not
00:00:26 by drag alone.
00:00:27 Let's go ahead and architect the Design System and the UI Foundation by opening up a new Cloud Code window and simply telling it to architect Design system
00:00:37 and UI foundation.
00:00:38 Now it's proceeding to read all the important files, specifically the design-conversation.md file that is a part of the agentic engineering workflow.
00:00:49 You can see it has two things, such as design already built, or maybe we need to create and build one from scratch by starting with product vision and
00:00:59 a specific design.
00:01:01 So it says pre-flight done, up-to-date with origin main, spec location, dock specs, next number 0004, and we are ready to create the design system.
00:01:12 And it already inferred that we're working with Tailwind V4 and Schatzian, so it doesn't have to ask any questions about that.
00:01:19 So let's talk about the design source.
00:01:21 How should I get the visual design for this?
00:01:23 I will not pick this for you since it decides whether to develop builds to a real design or to the direction I propose.
00:01:30 If you have a Figma design, that's amazing.
00:01:32 You can just connect it or pass it over as a screenshot and it'll be able to build it off of it.
00:01:37 If you have any screenshots or images you wanna pass over to it, such as your own mock-up or apps whose look you want, you can also pass that and it'll
00:01:46 read the type, color, spacing, all of it.
00:01:49 Or if you don't have a design yet, it will suggest a full visual direction.
00:01:53 with typescale, palette, spacing, radiuses, the card shapes and more.
00:01:58 So this is of course an important question.
00:02:00 And at this point, I would do some research.
00:02:04 I will potentially open up a platform like Dribbble and search for a movie app UI or movie design.
00:02:14 Most of these will be mobile applications, I assume, but that's totally okay.
00:02:18 And you can see that they have very creative UIs.
00:02:21 Something like this, which is very interesting.
00:02:24 I mean, we can later on build this app as a mobile-first app, and I assume that most people will be invoking it and calling it on mobile,
00:02:32 maybe on their couch while they're searching for a movie on Netflix or something like that.
00:02:36 You more often have a phone in your hand than you do a laptop.
00:02:41 So maybe this is an important consideration for the app that we could build it mobile first.
00:02:47 So yeah, let's see what else do we have and whether any of the designs stand out.
00:02:51 All of these are very flashy, but sometimes a beautiful design is not at the same time the best design.
00:02:58 But in general, I like the visual direction of all of this designs.
00:03:03 Another app that I often search designs on is awards.
00:03:06 So right here, we can search for a movie app design as well, and then see what comes up right.
00:03:13 It seems like there's less movie designs right?
00:03:16 It's mostly just beautiful designs.
00:03:19 If you search on Google, you'll also be able to see some references.
00:03:22 Dribbble, as you can see, appears most often.
00:03:25 There's also Behance and there's Figma.
00:03:28 So you may already find a fully finished design on FIGMA or on platforms like UI8 as well.
00:03:35 You can UI 8 is one of the platforms where this design came from.
00:03:39 Premium and standard high quality movie streaming UI kit with 20 screens.
00:03:44 And this is actually looking Very modern and beautiful.
00:03:49 It's focusing on the movie posters, which I like.
00:03:52 and we can even live preview it right here.
00:03:55 Yeah, I like it.
00:03:56 It's simple, modern.
00:03:57 The only thing that's super important right are the movie posters.
00:04:00 But again, you would most likely have to do some additional research, try to find the design that you like.
00:04:06 For now, this one stood out to me.
00:04:08 So what I'll do is I will grab the live Preview, which in this case is just a series of images, and you can buy the full design for 20 bucks,
00:04:16 or in case we just grab a couple of Images.
00:04:18 So I'll save it as image right here.
00:04:21 This one is showing the movie details as well as the pages, but I will just call it reference one.
00:04:30 And we can proceed with saving a couple more references.
00:04:35 We won't have the shows, so we will remove this.
00:04:38 Um, and this is some kind of a filter and searching action.
00:04:45 and This is the library.
00:04:49 Okay, and some additional pages.
00:04:54 Okay.
00:04:54 Good.
00:04:57 Now, typically, I would just proceed with no design yet, suggest a direction.
00:05:01 And you know what, maybe we can do that, just to see where the app would take us, because the up is very specific.
00:05:08 It's about movie taste and recommendations, not just movie retrieval.
00:05:12 Before we provide any references or choose a specific product like Letterboxd, Netflix, or something else for a general direction,
00:05:19 i can ask it to propose a the direction and then we see how it looks like and we make further changes.
00:05:26 what lands in feature five and what waits for the feature that needs a foundation plus two cards and the app shell the header nav page container and assigned
00:05:35 out marketing shell more built up front some of it before we know what the page needs I would actually like to see how most of It will look together.
00:05:43 Theming I think movie apps are generally dark so I will go with dark only and then components shatian UI and as needed.
00:05:52 Let's see what it comes up with or whether it asks me any more questions on the visual direction that it will think of.
00:05:59 Yep, it'll ask more question to figure out before it hands us a finished mood board.
00:06:05 What register should the interface sit in?
00:06:07 This is one call that everything else hangs on, so I want to be explicit rather than implied.
00:06:13 Quiet Cinema, Poster Scariat, Near Black Surfaces, Restrained Neutral Text, Almost No Chrome, One Accent Used Sparingly.
00:06:21 The artwork is the only saturated thing on screen, fits a product whose content is film, posters and stills, and it ages well.
00:06:28 Yep, this is definitely what we wanna go for.
00:06:30 Type, what should the app be set in?
00:06:33 One Geometric Sans whole app.
00:06:35 Yep, I'm totally fine with this.
00:06:36 Ooh, color beyond the neutrals, how much?
00:06:39 1 accent, functional only.
00:06:42 Shape and destiny, How tight?
00:06:44 We wanna give it some room between the movies so we can keep it like this, the direction is settled.
00:06:50 And now it'll ask us about some more info about the components that we need.
00:06:54 The swipe card, What is on it while someone is reading the starter deck?
00:06:59 Poster, title, year, genre.
00:07:00 Yeah, I think this makes sense.
00:07:02 Buttons are primary.
00:07:04 Drag and keys both work.
00:07:06 Yep, this make sense, but I wanna make it mobile first.
00:07:09 So I want to provide the users with as native as possible experience on a mobile web device.
00:07:15 Button's primary, drag and key both works, But I make the experience as Native-like on mobile as possibly.
00:07:22 And for that matter, i want the design to be mobile-first, because I imagine most people will be using the app on their phones,
00:07:30 on the couch, while searching for a movie.
00:07:33 So it has to have that native feel.
00:07:36 And we can also make it an app that can be ran offline, potentially later on.
00:07:42 Okay, the feed pick card, what does one recommendation show?
00:07:47 Yeah, The reason sentence here matters and some actions that you can take in terms of save or dismiss.
00:07:53 Yep, that's good.
00:07:54 The app shell, What frames are resigned in page?
00:07:57 Top bar responsive to a bottom bar on mobile.
00:08:00 Yup, That's beautiful.
00:08:01 This is a phone first product for swiping.
00:08:03 Okay.
00:08:03 I love how it knew that without even me having to mention it in the last question.
00:08:08 And a button bar puts the deck within thumb reach.
00:08:11 Wonderful.
00:08:11 And it told me right here that mobile first with a native feel is now a stated constraint on this spec, not a nicety.
00:08:19 And drag is primary with buttons and keys as equal paths into the same handler.
00:08:23 Let me check what a rating actually stores before I ask about the deck controls.
00:08:28 A swipe stores one of the three states, like, dislike, or skipped, with no score, so the tech has three outcomes, not two,
00:08:34 which shapes the gestures.
00:08:36 Three outcomes.
00:08:36 3 ways to reach each.
00:08:38 How should they map?
00:08:39 Right like.
00:08:40 Left dislike.
00:08:41 Up skip.
00:08:42 Yep, this is the similar, I guess, Tinder-like structure.
00:08:46 What drives the drag and the animation?
00:08:48 This is the main thing.
00:08:50 Motion, formerly framer motion.
00:08:52 Yep, that makes sense.
00:08:54 Although I've heard that the React Spring is great for pure physics.
00:08:59 And then pairing it with use gesture could have similar impact.
00:09:04 But motion also covers the velocity, spring, physics, gesture handling, and more.
00:09:08 So it's going to be fine.
00:09:10 How far do we want to take the native fill in this app?
00:09:12 Well, great question.
00:09:13 Safe area insets and dynamic viewport units.
00:09:16 Sheets on mobile.
00:09:18 Dialogues on desktop.
00:09:19 Yes.
00:09:19 Haptic feedback on swipe commit.
00:09:22 I've actually never done this on a web app and I would like to see how it's going to handle it.
00:09:26 and then suppress web tells, tap highlight over scroll text selection.
00:09:31 Yes, we want to make it fully feel like a mobile application.
00:09:34 And then this is the term that I was trying to remember the progressive web application, the ability to run it offline later on.
00:09:42 So we can say installable now offline, later, this can be an additional feature that we work toward.
00:09:48 Which icons we want to use?
00:09:49 Lucid icons is fine, with Schatzian UI by default.
00:09:53 Estates, skeletons for loading, Illustrated empties, inline errors, yep, we definitely want those.
00:10:01 Spinners for Loading.
00:10:03 Plain text, empties, and errors.
00:10:05 No, we definitely want to make it pop.
00:10:08 So skeletons that make seem like there's going to be some content in there while they're loading, plus illustrated emptys,
00:10:14 which is going really make the app feel polished.
00:10:18 Placement, where do the two cards live?
00:10:21 Primitives shared, cards in their features.
00:10:23 Yep, this makes sense to me.
00:10:25 And then accessibility, what is the baseline this foundation guarantees?
00:10:29 We can go with this accessibility right here.
00:10:31 It is The Internet Standard.
00:10:33 The Design MD the Scope Pro asks for, What shape and where?
00:10:36 Docs DesignMD, the Written Source of Truth.
00:10:39 Yes, This makes Sense.
00:10:41 Oh, but it's saying that maybe we can get a live design route, the document and rendered page showing every token and component in the real app,
00:10:48 best for spotting the broken component.
00:10:50 And it is a route and an upkeep obligation you did not pick up earlier when I offered the kitchen sink.
00:10:56 Yeah, I think we could go with this one.
00:10:58 So we're going to get the docs but we are also going get live designer route to check it all in browser.
00:11:05 Posters, DMDB does not always have one, and the feed and deck are mostly poster.
00:11:09 We can design some kind of a fallback, but I believe for most popular movies it'll have it.
00:11:15 Transient success feedback, rating saved, added to watch list.
00:11:18 Where does it go?
00:11:19 Sonar toasts.
00:11:20 And then signed out.
00:11:22 You pick the shell option that includes the marketing frame, But feature 11 owns the Marketing.
00:11:27 So for now we can show just a minimal signed-out shell with no marketing content.
00:11:32 Yep, this sounds good to me.
00:11:34 I mean, again, does it take more time to answer all these questions than saying, hey, just design the design system for me and call it a day?
00:11:42 Sure.
00:11:42 But the amount of questions and the quality of the questions that we're getting is just unprecedented from anything I've seen with some other workflows.
00:11:50 This is real agentic engineering.
00:11:53 Okay, which font do we want to get?
00:11:56 I'm fine with this one.
00:11:58 The accent, warm amber gold.
00:12:02 Reads as projector light and marquee, sits in the film register without being literal and it is naturally high contrast.
00:12:08 I love it.
00:12:10 Design route, it's going to be dev only.
00:12:13 and references, no references for the design, this is good.
00:12:17 Okay, I'm really looking forward to this and I hope it'll be good, or no, but I know it will be, good but hope I'll like it as much as the one that I found online.
00:12:26 If not, then we'll try it again and we will see the difference between feeding it an already existing design and making it create one.
00:12:35 Do we need some Agent Skills and MCPs for Motion and Sonar and Lucid?
00:12:39 To be honest, I think it's going to be quite simple to implement it for just a couple of animations we have.
00:12:45 So, no, we can skip it, for now.
00:12:48 What data do the two cards render in Feature 5? There's no sign-in yet and no big stable content, so something has to fill them.
00:12:56 Real starter deck films, hard-coded reasons.
00:12:59 Fully hard coded features.
00:13:00 Oh, now we could go with the real starter decks films with hardcodes reasons, the nav in the shell, only destinations that exist grow per feature,
00:13:08 or all four destinations now, unbuilt ones show a coming soon page.
00:13:13 Yep, this is what I want to see just to get the full idea of the application.
00:13:17 Oh, and I forgot to tell it, it would be also good to have a splash screen on mobile devices to really simulate a real app loading up.
00:13:25 So maybe that's something we can do later on.
00:13:28 And very quickly, it created a spec and asks us whether we need to cross-verify it with another model.
00:13:35 Let me actually check it out first.
00:13:37 So it's right here on their specs 0004 design system.
00:13:42 We can check the rationale as well as the foundation itself.
00:13:46 designs what it looks like, the whole language is written in the docs design MD, user stories.
00:13:51 As someone on the couch with my phone, I want the rating films to feel like a native app rather than a webpage so that flicking through a deck is pleasant
00:13:59 enough that I finish it.
00:14:00 And as someone who does not use a mouse, i want every part of the deck and the feed reachable by keyboard so the product is usable at all.
00:14:08 as the engineer building features,i want to type color spacing components to use what we defined in this document.
00:14:15 And then we have some acceptance criteria.
00:14:18 The decision option to a token first system feature design.
00:14:23 Okay.
00:14:24 Surface, which components do we need?
00:14:27 How do they look like?
00:14:29 Yep.
00:14:29 All of this is amazing.
00:14:32 This is looking good to me.
00:14:34 So let's actually get it developed and then will be able to see just how good or how bad it looks like.
00:14:41 The spec is here, we just read it, so I'll say, looks good, go ahead and develop it.
00:14:48 It moved over to in progress and we'll have to use the develop skill to actually start developing the design system.
00:14:56 And this shows you the key part about our agentic engineering workflow.
00:14:59 You can see after running every architect, it actually edits the scope.
00:15:04 by adding additional information and tasks that it didn't previously have.
00:15:09 Before, the goal was just to design it, to say, architect the design system.
00:15:14 In previous versions of the agentic engineering system, we tried to put as many things immediately right here as possible,
00:15:21 but later we figured out that's wrong.
00:15:23 So, only after you run the architect, you actually get these additional points that the Agent can then use as the points of reference to get it developed.
00:15:32 So now we have to run Clear and then develop the design system and the UI foundation.
00:15:40 And this process is taking a long time.
00:15:43 I'm talking 10 plus minutes.
00:15:46 It split it into, I believe, 10 different steps.
00:15:50 tokens in globals.css the fonts and design md then chat cn init against the tokens button design route gated accessibility baseline focus ring reduced
00:16:03 motion layout primitives base components set native fields global swipe deck with motion server rendered pick card Installability,
00:16:11 manifest, icons, theme color, close the docs, every component visible on the design, and that's it.
00:16:17 And then it proceeded actually creating all of those, the full theme of our application and the components that we're going to be displaying across the
00:16:26 application as we continue developing it, even the downloadable icons for a mobile application.
00:16:32 This is amazing.
00:16:34 And then it proceeded testing everything out with Playwright.
00:16:39 You can see PlayRoute browser resize, PlayWrite code, it's running it, its locating it.
00:16:44 It's good overall, but it noticed two different things.
00:16:47 Then it is checking icon routes and valid posters.
00:16:50 And it doing some more thinking and comparing it with how it supposed to look like.
00:16:55 This is amazing.
00:16:58 It found a real defect on the full height deck page.
00:17:01 The instructions line sits under the fixed tab bar, fixing the shell height model.
00:17:06 So it's not even developing the design, but it is also fixing it itself.
00:17:10 And this is what matters.
00:17:11 Focus ring confirmed, amber at two pixels.
00:17:14 This is great.
00:17:15 Testing out the keyboard functionalities.
00:17:18 It's proceeding with the testing, But already we can start testing it ourselves.
00:17:23 What I'll do is I will open up the terminal, and run the application by running pmpm dev and running it on localhost 3000 or 3001. And here's how it looks like.
00:17:36 your feed, films picked for you, the Shawshank Redemption, The Godfather, Dark Knight.
00:17:42 Okay, so there's some good popular movies right here.
00:17:46 The search page looks something like this.
00:17:48 Even though it's not yet built, we can already see how it'll look like.
00:17:52 Same thing for the watch list or the import page and our account.
00:17:57 This is looking good, but I think the focus of this app is on mobile.
00:18:01 So if I move over to the mobile design by opening up the inspect element and maybe turning this entire thing dark, we should be able to see how it looks
00:18:12 like on something like an iPhone 14 Pro Max.
00:18:15 Yep, feels like a real app.
00:18:17 But if a reload, We should see the bottom bar at the button, but I don't see it here, maybe because it figured that we're still viewing this on desktop.
00:18:27 If I make it responsive and collapse it a tiny bit more, you can see that now at bottom, we do have a thumb bar that can navigate with.
00:18:36 feeling a bit more like a real mobile application.
00:18:39 So this is great, but I would still much rather prefer something like this.
00:18:45 Or even like, this, using a little bit of that iOS liquid glass design.
00:18:50 Love it or hate it, I think that's where a lot of the design is going.
00:18:55 Not this much though, so I much rather prefer this one right here.
00:19:00 So maybe we feed it into it so it gets a bit of a better idea where we're going and it can modify the design further.
00:19:06 It's good because it'll still be able to utilize the components itself, the bottom bar and all the other pieces, but it just has to change the Design a
00:19:13 little bit.
00:19:13 it looks like it's just finished as it is updating the spec status and the scope.
00:19:19 So the last thing to do is to just verify it.
00:19:22 But before that, I'll actually tell it to modify the design a tiny bit.
00:19:26 We can already start passing these references that I copied over into that VS Code window right here.
00:19:33 You have to hold the Shift key to drop it into the editor.
00:19:36 There we go.
00:19:38 And I'll say save to verify.
00:19:40 And then I tell it, I changed my mind a bit.
00:19:46 I much more preferred the design from the attached references.
00:19:51 So can you re-architect the Design System to still include the components you've created so far, but to modify design to this modern movie app look?
00:20:05 So again, in this case, it's important to re-invoke the architect skill because it'll need to, well, architect the new design system and then redevelop it.
00:20:15 So I'll say, and redevelope it afterwards.
00:20:21 We'll use the develop skill like this so it figures out what we need do.
00:20:26 And there we go.
00:20:26 The develop complete UI is done.
00:20:29 We can even run NPM run dev or PMPM dev to check it out on localhost one more time.
00:20:37 But you get the idea.
00:20:38 This is how it looks like.
00:20:40 And this right here is what it's like on mobile.
00:20:43 So in this lesson, you saw just how detailed the entire system is.
00:20:47 Not just forming the initial design, but the layout and the shell, the deck and pitch cards, and also the skeletons, rings,
00:20:55 loadings and everything else.
00:20:57 But yeah, in the next lesson let's challenge it further by passing custom references into it.
