Shamsudheen's postcard app: notebook sketches and Figma, then Claude Code
A design engineer ships a postcard app: paper sketches and Figma as the spec, then Claude Code in screenshot-led loops, live at postcard.ishamsu.com.
Done withFFigmaCCClaude Code
Self-initiated personal app on his employer's blog; not client work; start date unverified
WHAT THEY DID
Shamsudheen, a design engineer at Crescentic, describes shipping a digital postcard app by writing the story first, sketching structure on paper, locking a visual language from real postcards, designing flows and edge states in Figma as a spec, then building with Claude Code in small loops and correcting visual bugs by pasting screenshots.
STEP BY STEP
- Start from the feeling he wanted someone to have, not from a feature list.
- Write the story of why postcards matter and pull product decisions out of that story.
- Brainstorm in questions rather than asking AI to invent the product.
- Sketch structure on paper until the main flow is explainable.
- Build a visual language from real postcards he owned (linen, ink, sepia, postmark, handwritten).
- Design the main flow and edge states in Figma (blank card, long message, image proportions, mobile, front/back, hover/selected/loading/disabled, recipient view).
- Only then give Claude the project context, tokens, constraints and one piece at a time — not 'build me a postcard app'.
- Build through small loops: implement, run, compare with the design, paste a screenshot of what is wrong, ask for one focused correction.
- Ship to postcard.ishamsu.com with a launch checklist, then change the product after real feedback (the ocean / message-in-a-bottle feature).
HOW IT WENT
He reports deploying the app at postcard.ishamsu.com (titled Postcard Garden; HTTP 200 on 2026-11-08). After a friend said he had nobody to send a card to, Shamsudheen added an 'ocean' feature so a postcard can be sealed in a bottle for a stranger to find. He also says people later sent postcards made in the app back to him.
Reported results: He reports a live postcard maker at postcard.ishamsu.com. After launch he added an ocean feature so people without a recipient can send or find bottled postcards. He says people later sent him postcards made in the app.
WORTH KNOWING
A dated first-person write-up that treats Figma as a contract for the agent, shows a screenshot-instead-of-description debugging loop, and states a clear limit: AI made implementation faster but did not make taste, clarity or care automatic.
TRY IT
- Write the feeling and story before asking Claude to build, so the first prompt is not just 'build this app'.
- Design the main flow and awkward states in Figma so Claude has a contract, not a vague vibe.
- Paste a screenshot plus one sentence when something looks wrong, instead of describing the bug in words.
Rates the entry, not the tool.
Source: Shamsudheen · CrescenticOpen as a page
- Work done: not stated in the source (Unverified: the 7 Sep 2026 post does not give a calendar start date for the build. It describes work done before publication, including post-launch changes such as the ocean feature.)
- Source published: Sep 7, 2026
- On 4TC: added Nov 8, 2026 · checked Nov 8, 2026
About this source
Type: First-person workflow · Firsthand report · Demonstrated workflow
- Claude Code for Designers: From a Notebook Sketch to a Shipped App
Shamsudheen · Crescentic · Published Sep 7, 2026 (Byline 'September 7, 2026'; JSON-LD datePublished 2026-09-07T15:01:00.796Z. dateModified 2026-10-19T07:33:59.805Z.) · Checked Nov 8, 2026
First-person post on Crescentic, the studio where he works as a Design Engineer. Self-initiated personal app with a try-it link. No sponsorship of Claude Code or Figma found in the post.
Access: open - Postcard Garden
Shamsudheen · postcard.ishamsu.com · Publication date not stated (Live app; page title 'Postcard Garden'; undated.) · Checked Nov 8, 2026
Live app linked from the post (demonstrated artefact).
Access: open
Source check: Researched from the public page; not yet re-checked by an editor. Nobody at 4TC has tested this.
Claims and where they come from
- Shamsudheen writes that he used Claude Code as a designer to ship a postcard app: story first, paper sketches, Figma as the spec, and screenshots instead of bug descriptions. (reported) [1]
- The post byline and JSON-LD datePublished are 7 September 2026 (2026-09-07T15:01:00.796Z). The page also records dateModified 2026-10-19T07:33:59.805Z. (observed in the source) [1]
- He says he moved from notebook sketches into Figma and designed the main flow plus edge cases such as a blank postcard, a very long message, different image proportions, mobile layouts, front and back, interaction states, and what the recipient sees. (reported) [1]
- He says he began building with Claude only after he had a story, a visual language, a flow, a Figma design and constraints, and that the first prompt was not 'build me a postcard app'. (reported) [1]
- He says AI rarely produced the final version in one attempt, and that pasting a screenshot plus one sentence of context worked better than describing visual bugs in words. (reported) [1]
- He says he deployed the postcard maker at postcard.ishamsu.com. That URL returned HTTP 200 on 2026-11-08 with the page title Postcard Garden. (reported) [1][2]
- He says that after a friend told him he had nobody to send a card to, he built an ocean feature so a postcard can be sealed in a bottle and found by a stranger. (reported) [1]
- He says using AI did not remove the work: it changed where the work happened, made implementation faster, and did not make taste, clarity or care automatic. (reported) [1]
4TC interpretation
Our reading, not something the source says.
Many 'I built this with AI' posts start at the prompt. This one shows a designer delaying Claude until the story, paper structure and Figma states are specific enough that the agent is implementing a decision, not inventing one.
Designer impact
Alleged [1]
He says AI rarely produced the final version in one attempt, and that using AI did not remove the work: it made implementation faster but did not make taste, clarity or care automatic.
- Keep taste and structural decisions in writing, paper and Figma before asking an agent to code.
- Correct visual bugs with screenshots and ship only after someone else can open the live URL.
Established = documented by primary sources or the company’s own statements. Disputed = contested with evidence on both sides. Alleged = reported, not established.
Votes rate whether this entry was useful. They are not an endorsement of the tool, and don’t mean voters agree with the company’s practices.
Report an issue or correction
Share your own experience
4TC does not endorse a tool unless an explicit 4TC endorsement is shown.