BEFORE YOU BEGIN
Open DEX Zero on iPad and connect to DEX Zero Hub on your Mac. You'll use the board to plan and refine the interface, then a coding agent in your Mac project to create the web files. You can also download the finished project and begin with an edit.
Forma is a fictional app. Use the sample amounts throughout this lesson.
01 / FIND THE IDEA
One screen.
One clear job.
Before asking for a design, decide what the app should help someone understand. Forma answers one small question: How is my month going?
Write three things on your board: money coming in, money going out, and what's left. Add a budget and a savings goal only after those three make sense.
Forma
A calm personal finance dashboard that helps someone see their monthly income, spending, budget, and savings goal at a glance.
You're ready when you can explain the app's purpose in one sentence.
02 / SKETCH THE SCREEN
Make the idea
something you can point at.
On the DEX Zero board, draw a large balance card, two smaller summary cards, a spending chart, and a short transaction list. Use your Pencil, or ask the connected agent to draw an editable first version.
Draw a fictional personal finance dashboard called Forma on this board. Use an editable vector drawing with a light background, generous spacing, dark sans-serif text, and a soft green accent. All text must be in English. Include June 2026, Available this month $2,960, Income $4,800, Spending $1,840, a $2,400 monthly budget with $560 remaining, and a Travel fund of $1,450 out of $2,000. Show Housing $980, Food $560, Transport $120, and Subscriptions $180 in a labeled chart. Add a small recent-transactions list. Keep the elements easy to select and change. Label the screen Fictional prototype.
Circle the part you want to change and type a focused request. Try moving the balance above the chart or giving the transaction list more room. Check the actual board after each change.
Keep the same Forma dashboard and all amounts. Make Available this month the first thing I see. Give the transaction rows more space and move the Travel fund beside the spending chart. Update the existing drawing rather than adding a second screen.
When the arrangement feels clear, ask the agent to turn it into a short implementation brief: sections, text, colors, interactions, and how the layout should change on a narrow screen.
Your drawing shows the hierarchy. Your brief describes what each part does.
03 / BUILD A FIRST VERSION
Take the brief
to your Mac.
Create an empty project folder on your Mac and open it with your coding agent. Paste the brief from your DEX Zero conversation and include a capture of the drawing as a reference. The Mac agent creates the files; the board remains your place to discuss the design.
Build a responsive fictional finance web app named Forma in this project using index.html, styles.css, and app.js. Use the approved brief and the reference sketch. Keep every label in English and all data fictional. Use a light paper background, Geist or system sans-serif, rounded cards, and a soft green balance card. Monthly income is $4,800. Expenses are Rent $980, Market basket $420, Transit pass $120, Lunch with friends $85, Coffee $55, and Subscriptions $180. Derive spending ($1,840), available ($2,960), and budget remaining ($560 of a $2,400 budget) from the transactions. Display a Travel fund of $1,450 out of $2,000. Add All/Expenses/Income filters and an accessible Add transaction form. Store money as integer cents, reject invalid amounts, and keep changes in memory. Make it work on mobile and desktop. Explain how to open and test the app.
Open the generated index.html in your browser. The first version should show the same information as the sketch, with working transaction filters and a form that updates the totals.
A WORKING REFERENCE
Compare your version with our Forma example, or use the project files as your starting point.
You have web files in your project and can open a working dashboard.
04 / MAKE ONE EDIT
Change a detail.
Keep the intent.
Pick one change you can judge easily. Try a new accent color, a clearer heading, or a better mobile layout. Explore it on your board, then give your Mac coding agent the same precise request.
Change Forma's balance-card accent from soft green to pale blue (#CDDFFF). Keep the layout, text, all fictional amounts, and transaction behavior unchanged. Show which CSS value changed so I can compare the two versions.
On narrow screens, place Available this month first, then Income and Spending side by side. Keep the savings goal and category labels readable at 375px wide. Make the transaction form work with a keyboard. Preserve the existing data and calculations.
Reload the browser and compare the result with your request. A drawing illustrates a proposed change; the browser shows whether the web app actually changed.
You can describe what changed and confirm that the app still works.
05 / REVIEW THE DETAILS
Try the app.
Then try to break it.
Check more than the first screen. A useful demo responds correctly when someone interacts with it.
- Add an expense of $42.50.Spending becomes $1,882.50, available money $2,917.50, and budget remaining $517.50.
- Filter by Income.The salary appears; expenses are hidden. Switch back to All.
- Try an invalid amount.Zero, negative numbers, and more than two decimal places should be rejected with a clear message.
- Use a narrow window and a keyboard.Read every amount, reach each button, and open, submit, and close the form.
- Reset the demo.The original totals return. The example keeps edits in memory and resets on reload.
Review Forma against this checklist: totals are derived from integer cents; a $42.50 expense gives spending $1,882.50, available $2,917.50, and budget remaining $517.50; filters work; invalid amounts show an error; transaction descriptions are treated as text; the form is keyboard accessible; and the layout is readable at 375px. Report what you actually tested and fix any failing behavior.
The interactions work, the amounts add up, and the page is readable on mobile.
06 / SHARE WHEN IT'S READY
Give the idea
a place on the web.
Deploy the finished project with your preferred web host. The downloadable Forma project is a static website: keep index.html, styles.css, app.js, and the font folder together.
If you use Vercel, follow its official deployment guide. Open the resulting preview on your Mac and iPad, test the same checklist, then share the version you're happy with.
Keep the fictional-data label visible. You've made a finance interface to learn with; adding real accounts and storing personal transactions would be a separate project.
Your web app has a shareable address and you have reviewed the deployed version.
YOUR NEXT SMALL STEP
Same idea.
Your own direction.
Try a different layout. Add a category. Sketch a second screen. Keep the changes small enough to understand, then keep going.