🗣️Module 2Beginner · 60 min
Building Screens with Natural Language
Create multiple pages by describing them in plain English.
📖 Lesson Content
Building Screens with Natural Language
The Prompt → Result Loop
With @Solar, building a page is a conversation:
- You describe what you want in plain English
- @Solar creates the page with real components
- You review in the live preview
- You refine by describing changes
Prompt Patterns That Work
| What you want | Example prompt |
|---|---|
| Dashboard with metrics | "create a dashboard with 4 KPI cards and a line chart showing monthly revenue" |
| Data table | "add a page showing transactions: name, email, status, date, amount columns" |
| Form | "create a settings page with profile fields: name, email, role dropdown, save button" |
| Detail page | "add a customer detail page with contact info, status chip, and notes section" |
| Landing page | "build a landing page with a hero banner, 3 feature cards, and a call to action" |
Prompt Tips
Be Specific About Data
❌ "add a table" ✅ "add a transactions table with 5 columns: name, email, status, date, amount"
Mention Layout
❌ "add some cards" ✅ "add 4 stat cards in a row, stacked on mobile"
Reference Real Concepts
✅ "like the Portal reporting page" ✅ "similar to a Stripe dashboard"
Iterate
✅ "make the header bigger" ✅ "change the chart to a bar chart" ✅ "add a search field above the table"
How Pages Work
- Each page is a separate file
- Pages are automatically added to the sidebar navigation
- The live preview navigates to the new page after creation
- Existing pages are never modified when you add a new one
🏋️ Exercise
Hands-on practice for Module 2
📝 Module Quiz
Test your knowledge of Module 2 concepts.
Take the Quiz