Learning path map
Detailed content
🚀 Website from Scratch to Deploy
Research references, write a brief, build in parallel, and publish on the web.
Study sites that already work before inventing something from scratch.
Proven patterns prevent mistakes and speed up results.
Reference · validated pattern · adapt, don't copy.
Use the agent to analyze competitors and find gaps.
You find out where you can stand out before building.
Competitor · gap · differentiator.
A document that describes the site's purpose, audience, and style.
A clear brief = the right result on the first try.
Goal · audience · visual tone.
Generate several website proposals at once and compare them.
More options in less time, and you choose the best one.
Parallel · variation · choose.
Fix UI details one by one and prepare the SEO.
The details separate the amateur from the professional.
Small adjustment · metadata · get discovered.
Publish the site at a public URL, for free, in minutes.
A project only truly exists when it's live.
Deploy · public URL · domain.
🧩 Building Apps
The difference between a website and an app, databases, login, layers, and how to publish.
A website shows content; an app stores data and responds to the user.
Knowing what you want keeps you from building the wrong thing.
Static · interactive · state.
The place where the app stores data permanently.
Without a database, everything disappears when the page closes.
Table · record · persistence.
Each user signs in with their own account and sees only what belongs to them.
It’s the foundation of any app with more than one person.
Authentication · session · permission.
Build the app in parts, validating each one before moving on to the next.
Layer by layer prevents the chaos of doing everything at once.
Increment · validate · stack.
Simulate real app usage from beginning to end.
Catches bugs before users do and gives you confidence to publish.
Real workflow · bug · coverage.
Put the app online with the database and login working.
Only once it’s live will you find out whether the app solves the problem.
Deploy · production · real feedback.
🧩 Build Anything
First principles, a 5-step protocol, and the universal stack for any project.
Break any project down into its most basic elements.
Without blindly copying, you can solve problems you've never seen before.
Decompose · essence · from basics to the whole.
A fixed sequence that takes you from idea to finished project.
A repeatable method that always gets you past square one.
Step by step · repeatable · checklist.
A lean set of tools that covers almost everything.
Mastering a few tools is worth more than knowing many.
Stack · standard · reuse.
Define the target and collect data about it on the web.
The right data turns a vague idea into a real project.
Target · scraping · collection.
Review, complete, and organize the data into something useful.
Raw data is worthless; processed data is gold.
Validate · enrich · package.
Take initiative and use AI to improve the request itself.
People who take action and ask better questions get much more out of the agent.
Initiative · meta-prompt · iterate.
🎨 Design Systems
Design became code: extract an identity, use skills, and create a reusable system.
Design decisions become rules that the agent applies directly.
You direct the style without knowing how to open Figma.
Design as code · rules · consistency.
Turn good design principles into clear instructions.
"Make it look good" doesn’t work; explicit rules do.
Spacing · hierarchy · typography.
Design packages the agent applies to any project.
You reuse your visual style without having to explain everything again.
Skill · ready-made style · reuse.
Extract colors, fonts, and tone from a reference and apply them again.
Keeps everything on-brand effortlessly.
Palette · font · brand tone.
Add images, motion, and 3D effects to the project.
These touches make the result memorable.
Image · animation · 3D.
A kit with your design rules for all projects.
Everything you create comes out with the same identity.
System · tokens · reuse.