Continuing on Part 1 (setting up your developer environment) and Part 2 (defining your project to Claude Code), we are now jumping into Part 3, in which we are going to be building the landing page for our application.
In this post, we build on top of our “foundation” skill, with a sub-skill that creates our landing page. In case you missed the last two posts, here is a quick reference:
How To Build Any Web Application (Part 1): Your Development Environment
How To Build Any Web Application (Part 2): Define your project This post is going to be shorter than the first two, as we already went through most of the theory in Part 2, and this post is more of an execution-type thing. I will, however, add a few more points I forgot to mention in Part 2.
The Sub-Skill
This post works the same way as the previous: you install a skill in your Claude Code, then run it, and Claude Code handles everything for you.
Here is the skill [github.com/kubeden].
It also follows the same skill style, being in steps, with concrete instructions, and conditions to always ask for confirmation, and ask if unsure.
Disclaimer: I can’t guarantee that the landing page you are going to get from this skill is going to be what you are looking for, so I strongly urge you to continue iterating once you get your Claude Code finish the skill execution. The point of this entire series, is to give you a good foundation for you to be able to build any web application you want by giving you the basics of how web dev & ai agents work.
So, get the skill and install it in your Claude Code, then execute it, and in the meantime let’s talk about frontend & design.
Frontend: Design
Everything you need to know about design is consolidated in Tailwind and Shadcn.
Tailwind is a complete translation of all of CSS into easy-to-read classes. You can find the complete reference of all of their classes on their official documentation website: [here].
The concepts you need to understand to be able to iterate on design, are:
Placement: Positions (absolute, relative, sticky, fixed)
Spacing: Padding & Margin
Sizing: Font-size, height & width
Layout: Flex & Grid
Typography: letter-spacing, line-height
Colors: Background & Text
Borders: rounded vs square
Effects & Filters: glassmorphism (blur), box-shadow (neo-brutalism)
A good exercise to do, is to get a website you like, and really try to look at what makes it so that you like it. Then go in Claude Code, and ask it to re-create it by doing a web-search for it. Then iterate to make it yours.
Other than that, you can see that in the skill, we utilize the “component keywords” from Post 2: ‘hero → how-it-works → features → pricing → footer CTA’
My Result
Here is my result for transparency:
I think this is a good result from a one-shot. I believe this can be way better, though. Right now it feels kind of blunt, although it is warm and gentle. It is a little funny that it looks as it does, considering the fact the application I am building here is a calendar that has your Monday locked until you pay, and you are only going to be able to add a certain number of entries, until you get locked out due to “low calendar credits”… but anyway, this is out of the point.
Sorry.. I can’t… this is hilarious! “Start with one entry. See if it feels different.” — and the one entry, is literally ONE event that you are allowed to add… and not on Monday!
Closing
As I said, this one is going to be shorter, due to the fact we went through most of what you need in the previous post. The next post is going to be a longer one, as we are going to be executing our “functionality” skill, which will include a lot of in-depth requirements about how the backend works, how the dashboard looks, and all-in-all, it is going to require a lot more prompt engineering. It will also include a lot of concepts around security, data structures, and our frontend:backend communication.
Thank you for reading!
After-post notes
N1: All my posts are written by me.
N2: If this post inspired you to think, feel free to email me and start a discussion!
I love talking technology, and even so if you are, too, actively living in “the arena”.
You can find everything about me on denislavgavrilov.com/about
Thank you for reading and have a good one!