Design product UI in code with Claude instead of Figma mockups

A Jane Street designer, once an AI skeptic, now does most design work with Claude Code instead of specs and Figma mockups.

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

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.

Builder recipe

Our own starting point, written from the source. Adapt it to your setup.

Stack

  • Claude Code

Steps

  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.

Starter prompt

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

Tags

Tool Figma
Industry Finance Software

Read the original

Related use cases

no count
NEW Coding

Design mobile apps by chatting with AI

Sleek turns a chat about an app idea into polished mobile app designs in minutes.

💰 $20,587 MRR, verified via Stripe on TrustMRR (synced 2026-10-15)Advancedby Stefano
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.