Coding Β· Do this yourself

Design product UI in code with Claude instead of Figma mockups.

βœ… He says it changed the part of his job he was best at.

Who it’s for

People who build or maintain software, and non-developers who want a small tool made for them.

Adapt it to your industry

  • Shop owner: a small script that exports orders to a spreadsheet every night
  • Agency: a reusable starter template for client websites
  • Healthcare or legal office: a simple internal form that saves to a shared sheet

Step by step

  1. Install Cursor (cursor.com) or Claude Code, and open an empty folder for this project.
  2. Write a one-paragraph description of what you want in a file called README.md: who uses it, what goes in, what comes out.
  3. Open the AI chat panel and paste the prompt below, then let it propose a plan before it writes any code.
  4. Ask it to build the smallest working version first and run it. Paste any error message straight back into the chat.
  5. Test it with one real example from your work and write down what is wrong.
  6. Ask for one fix at a time. After each working change, save a copy (for example with β€œgit commit”).
  7. When it works, ask the AI to write short instructions so a teammate can run it.

Ready-to-copy prompt

Prototype this settings screen in our real component library with three layout options I can click through.

Start with AI

Opens the AI with this guide and the prompt filled in.

Cost
$0–20/month (free tiers or one AI plan)Our estimate
Time
1–2 weekendsOur estimate

How to make money from it

Pricing idea: Sell it as a small tool: a one-time setup fee plus a low monthly price for hosting and fixes, or a self-serve plan from about $10–50 a month.

Finding your first 10 customers

  • Fix a real problem for 3 people you already know, for free, in exchange for honest feedback.
  • Post a short demo video where your audience hangs out (X, LinkedIn, Reddit, a Slack or Discord group).
  • Ask each happy user for one introduction to someone with the same problem.

Ideas, not promises. Results vary.

Details: source, numbers and tags

What they did

Edwin Morris replaced spec docs, mockups and proposals with working prototypes built with Claude Code in the real stack.

How it went

He says it changed the part of his job he was best at.

Worth knowing

His earlier tries with Copilot, Cursor and Gemini on things he was already good at disappointed him.

Difficulty
IntermediateOur rating
Time to build
Not reportedOur estimate
Monthly cost
Not reported
Revenue
Not reportedWe only show revenue the source states
Engagement
324 HN points266 comments Β· fetched Oct 15, 2026

Original builder recipe

  • Claude Code
  1. Open the repo in your coding agent and describe the goal and constraints.
  2. Ask for a plan first, then let it implement in small, reviewable steps.
  3. Run the tests or the app after each step and feed errors back.
  4. Review the diff before merging.

Tags

Tool Figma
Industry Finance Software

Read the original

More ideas like this

no count
NEW Coding

Turn screenshots into working front-end code

Screenshot to Code converts a screenshot, mockup, recording or prompt into HTML/Tailwind, React or Vue, then refines it from plain-English follow-ups.

πŸ’° $4,768 MRR, verified via Stripe on TrustMRR (synced 2026-10-15)Advancedby Abi Raja

The Daily 5.

Five real AI agent use cases each morning, each with a recipe and a source. Plus a Sunday roundup. Free.