Build a website or app
From a page design to a working site, even if you never coded.
Best tools for this
Read these chapters
Claude · Chapter 3.1 · 3 min readClaudeFrom design to real website
Claude · Chapter 3.5 · 3 min readClaudeWhat Claude Code is
Claude · Chapter 6.1 · 3 min readClaudeCanvas: writing and code side by side
ChatGPT · Chapter 1.10 · 3 min readChatGPTCanvas
Gemini · Chapter 1.11 · 3 min readGemini
Ready prompts to copy
Design a landing page for my service
Goal. A page that explains my service and gets people to contact me, looking professional.
Open. Claude Design (paid plan); your design system if you have one.
A landing page for [service] by [business name], for [who]. Desktop width, then a phone version. Sections top to bottom: a headline that says the main benefit in under 8 words; one line under it; one big image area; three short reasons to choose us; a simple "how it works" in 3 steps; one customer quote; prices or "from [amount]"; a contact block with [phone / email / form]. Style: [warm / clean / bold], colors [brand or suggest], rounded buttons. One clear call-to-action button repeated twice. Tell me what you assumed so I can replace placeholders.
What you get · Watch out
What you get. A page on the canvas, then a phone artboard; Claude lists its assumptions.
Watch out. Have the headline and the three reasons written before you start. Replace every placeholder (hours, address, quote) before exporting. If stuck: Chapters 3.1, 3.2.
Goal. The landing page I designed becomes a real website I can put online.
Open. Claude Design (for the handoff) then Claude Code (Part 6), paid plan; an empty folder.
Build this design as a simple static website: one page, HTML and CSS, no frameworks, loads fast on phones. Keep the layout, colors and text exactly as designed. Replace placeholders: hours [hours], address [address], phone [phone], email [email]. Make the buttons work: Order opens [link], Menu scrolls to the menu section, Visit us opens a map link. Run it locally and give me the address to open. Then tell me, in plain words, three ways I could put it online and what each costs.
What you get · Watch out
What you get. A folder with the site, a local preview address, and hosting options explained.
Watch out. Hosting is a separate step with a small cost; decide that before building. Change the design and hand off again rather than editing the site by hand. If stuck: Chapters 3.5, 6.1.
Goal. My products listed in an online store, with descriptions, in an afternoon.
Open. Cowork with the Shopify connector (paid plan); a store account; product photos in a folder or attached. *Needs a tool outside Claude.*
I sell [what] to [who]. Brand voice: [3 words]. Here are my products: [name, price, sizes/variants, 2 facts each] and photos. 1. Write a product title, a 60-word description, and 3 bullet facts for each, in my voice. 2. Show me all of them in a table for approval. 3. After I approve, create the products in the store with the connector, in a collection called [name], as drafts (not published). 4. Tell me what is missing before I can publish (shipping, taxes, policies).
What you get · Watch out
What you get. A table to approve, then draft products in the store and a launch checklist.
Watch out. Create as drafts; publish yourself after checking prices. Facts about materials and sizes must come from you, not be invented. If stuck: Chapters 1.9, 2.10.