The "Claude Artifacts" Masterclass: 7 Prompts to Build Custom Apps in Your Browser

You don't need to be a coder. Learn how to use Claude’s new interface to build calculators, dashboards, and internal tools in seconds.

---

In this issue

The Problem: You are drowning in manual tasks, repetitive math, and broken spreadsheets.

Off-the-shelf software is expensive and bloated. Custom development costs a fortune that you don’t have.

Your margins are already tight, and you are wasting hours on administrative busywork instead of growing your business.

Today I am giving you the exact prompts you can use to build your own internal tools for free using plain English.

Free subscribers get the theory and the first tool.

Paid subscribers get the 6 additional copy-and-paste systems.

---

I was just reading a new survey from Hometap that dropped this morning. It turns out 78% of small business owners are deeply concerned about the current economic environment, yet the vast majority still expect their businesses to grow this year.

That’s the exact definition of the entrepreneurial spirit. You’re stressed about tight margins, you’re largely self-funding your operations, but you’re still pushing forward.

But you can’t grow if you are spending your nights fixing broken Excel formulas. You cannot scale if every client intake requires manual data entry. You need systems. You need tools. But you probably don’t have $20,000 to hand over to a software development agency.

Enter Claude Artifacts.

If you haven’t been paying attention to the recent Anthropic updates from last month, Claude Artifacts is a feature that lets you generate interactive, working web apps right inside your browser You don’t need to know how to code. You just need to know how to ask for what you want.

I want to tell you about a recent consulting client of mine. Her name is Avril and she runs a property management firm.

She manages about 40 residential units. Every single month, she has to calculate prorated rents, late fees, maintenance depreciation, and owner payouts. She was doing all of this across three massive, interconnected Excel workbooks.

These spreadsheets were a fragile house of cards. One day, a property owner called her, furious. Avril had accidentally dragged a formula down the wrong column and undercharged a tenant by $1,200. This meant the owner’s payout was short. Avril spent her entire Saturday night staring at a screen, trying to debug a macro that someone else built for her back in 2018. She was exhausted, losing money, and losing the trust of her clients. She could not afford to hire a developer to build a custom portal.

---

---

I sat down with Avril on a Zoom call and told her we were going to replace her broken spreadsheet with a custom web app. She instantly tensed up because she’s not a technical person. But I typed a plain-English prompt into Claude, asking it to build a “Property Management Prorated Rent and Payout Calculator” using Artifacts.

In about 15 seconds, Claude generated a clean, interactive dashboard right there on the screen. It had input fields for the move-in date, the base rent, the late fee percentage, and the maintenance costs. Avril typed in the numbers, hit calculate, and it spit out the exact owner payout. No macros. No broken cells. Just a working tool.

The lesson learned here is simple. We love to over-engineer our misery. We cling to broken systems because we think the alternative is too hard. But now, if you can speak, you can speak software into existence.

The Artifacts Setup Guide

1. Enable the Feature
   
   You can’t use this if it is turned off. Go to your Claude settings and toggle on the Artifacts feature. This tells the AI to render code visually instead of just spitting out raw text.

2. Define the Scope
   
   Artifacts run on standard web technologies (HTML and React). They are temporary web pages that live in your browser. They do not have a backend database unless you connect an API, so treat them as session-based calculators and visualizers.

Keep your tools focused on a single task.

Prompt 1: The ROI and Margin Calculator

Every single business owner needs to know their numbers. Whether you’re selling physical products, consulting hours, or digital courses, calculating your true margin after expenses is critical. This prompt builds a clean, visual calculator that does the math for you in real-time.

The Prompt:

“Act as an expert frontend developer and UX designer. I need you to build a single-page interactive ROI and Margin Calculator for my [Insert Industry] business. Use React and Tailwind CSS. The calculator needs the following input fields: [Input 1, e.g., Cost of Goods], [Input 2, e.g., Monthly Ad Spend], and [Input 3, e.g., Average Sale Price]. It should automatically calculate and display the Gross Margin, Net Profit, and Return on Investment in real-time as the user types. Make the design clean, modern, and professional. Add a visual chart to show the breakdown of costs versus profit. Add a button to reset the fields. Do not explain the code, just generate the Artifact.”

How to customize this:
Replace the bracketed text with your specific business metrics. If you run a landscaping company, your inputs might be “Hourly Labor Cost”, “Equipment Gas”, and “Client Retainer”. If you run an e-commerce store, your inputs might be “Manufacturing Cost”, “Shipping Fee”, and “Retail Price”.

Pro Tip:
Notice how I asked Claude to act as a UX (User Experience) designer and specified “Tailwind CSS”. This is the secret sauce. If you do not include this, Claude might give you a calculator that looks like a high school computer science project from 1999. Asking for Tailwind ensures the buttons are rounded, the colors are modern, and the interface is actually pleasant to look at.

---

The next six prompts will turn your browser into a fully functional operations hub. Upgrade to paid right now to unlock the exact tools you need to automate your proposals, track your inventory, and visualize your data without writing a single line of code.