The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
š³ Pinch: brief your kitchen, get a costed menu back
(yes, like a pinch of salt)
My family ran a restaurant. Full house, busy nights, and somehow still not enough to cover the loan. The prices underneath us crept up quietly, and we only saw it when it was too late.
That's the problem I built Pinch to solve.
āļø How it works: Brief it like you'd brief a sous chef and it designs the whole menu, every dish costed in your kitchen's own real prices. Snap a supplier invoice and it flags the dishes whose margin just slipped.
I built it with my brother-in-law, a working pastry chef who briefed and tested every build. He is also a hotel pastry chef who has to dream up new themes every week and still hit a food-cost target on every single dish! It was fun having to learn more about their processes and admin work behind it. Being creative and protecting the margin at the same time is exactly the job Pinch is built for.
š ļø How I built it: Planned with Claude , built it in Figma Make, generated every watercolour illustration in Figma Weave from one spec, and took the design tokens into Figma as variables over MCP. This was my first time generating images and assets with AI. I wanted them to read as clearly AI made but not as slop, so I held every illustration to one watercolour spec for a consistent hand. Weave is new to me, so a few are still a little raw, which is part of learning a tool in public.
To keep it cohesive rather than thrown together, the whole app runs on a small design system: two typefaces on one size ramp (Fraunces for display, IBM Plex Sans for text), a single palette, and shared radius and elevation tokens across every surface, with the colour roles contrast-checked to WCAG AA. That consistency is what keeps an AI-built app from feeling vibe-coded (a bit) š
It runs live on Render, which I honestly could not have shipped without.
Every number is honest. Real food-price data from the UK, US and PH or your own invoices, anything estimated says so, nothing faked.
š§ A pinch of salt. Never pinching pennies.
š Try it live (no login): pinch-e6su.onrender.com
Built in Figma.
š½ļø Open the files:
ā¢ Figma Make file: https://www.figma.com/make/RUUfn1EDR4ANsf19ZaHe6c/Pinch-Figma-Make?t=ayTG8P1m7gpSjObv-1 (where Pinch was born. Make shaped the vision and the front end. It then grew on GitHub with Claude Code, so the live app has evolved beyond this file. The live URL is the current product.)
ā¢ Figma Design File (end to end frames and design tokens) https://www.figma.com/design/nUTH2kMrU7ANPAc0L2B8Bp/Pinch-Design-System?node-id=161-2&t=ivmgeSl19yWwWmQU-1
ā¢ LinkedIn post: https://www.linkedin.com/posts/activity-7472659310100115456-Lv8N
Thank you! means a lot š
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
For the #ConfigMakeathon, I created Book Trace. It is a reading journal app that helps you capture thoughts while you read, and leave a personal trace when you finish.
[Concept]
Book Trace turns the experience of reading into something you can hold onto. Instead of forgetting what a book meant to you, you leave a Trace ā one sentence, one emotion, one word. The app also reads what you wrote and tells you what kind of reader you are, with book recommendations matched to your type and genre.
[Project Overview]
For this submission, I designed:
- Onboarding flow;
- Still Reading experience with in-the-moment note capture;
- Finished flow with the full Trace journey;
- Reader Identity system with personalized recommendations;
- Library with saved traces;
- UI Kit and design system.
[Workflow]
I built the full product from concept to prototype in Figma. UI Kit, component library, and interactive flows all in one file.
[My Experience]
What I loved most about this challenge was how it pushed me to think about the full user journey, not just screens, but emotions. Book Trace started as a simple idea and grew into something that feels genuinely personal.
Figma made it possible to move from rough concept to polished prototype without ever leaving the workspace.
Thank you to the Figma team for a challenge that made me build something I actually want to use!
Live project
LinkedIn post
Community link
If this resonates with you, a like, comment goes a long way. Thank you š
Amazing!
There was something special about opening a random website as a kid and finding a weird little game someone made just because they could.
No accounts. No downloads. No tutorials.
Just click, play, and see what happens.
I missed that feeling, so I built MusicO-Rama.
A tiny browser music toy where you place blocks, make strange melodies, record them, and take them with you when you're done.
Try it: https://vest-lead-82909641.figma.site
Community Post: https://www.figma.com/community/file/1648260448639799408
Awesome!
I built Interactive Earth History Explorer for the Config Makeathon.
Interactive Earth History Explorer
The web app allows users to travel through Earth's history by scrolling through a timeline and interacting with a 3D globe. Users can explore:
Geological eras and major Earth events
The evolution of life on Earth
Ancient civilizations and historical milestones
Important locations associated with historical events
Multimedia content such as images, animations, and descriptions
āāāāāāāāā
Target Users
Students and educators
History enthusiasts
Parents looking for interactive learning tools
āāāāāāāāā
Traditional methods of learning history and geology are often:
Text-heavy and difficult to visualize
Presented as static timelines that lack interactivity
Disconnected from geographical context
āāāāāāāāāā
Solution
The web application provides an immersive and interactive learning experience by combining:
š Interactive 3D Globe, š
Scrollable Timeline, š¼ Rich Content Cards, āØ Immersive Storytelling
āāāāāāāā
My process: Pen and paper ā Figma make ā Using Figma make to generate ideas ā Prompting it out as perfectly as I can get it to work ā Connected to Figma server ā Deployed
live site : https://lnkd.in/g7RFUR5t
This is sooo cool man..... is it possible fr me to like check it out i mean the live preview
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
MagicPath
The canvas is infinite, and exploration is becoming the workflow. How are you using MagicPath?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. Whatās yours right now?