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
Building PULS – A Cycling App That Makes Every Ride Worth Sharing
PULS is a dedicated cycling tracker designed for riders who want more than just numbers. It focuses on clean ride tracking, meaningful progress, and beautiful achievement cards that are ready to share.
The app lets cyclists track distance, speed, elevation, cadence, and duration in real time. After every ride, users get a clear summary and can turn their performance into a custom visual card — complete with route map, key stats, and personal highlights — then share it directly to Instagram, WhatsApp, X, and more.
How I built it:
Step 1.
I started by writing a detailed Product Requirements Document using Claude through MCP. This PRD became the foundation for the entire product.
Step 2.
I used Flowstep to generate the initial UI designs directly from the PRD. This gave me a complete starting point for the full user flow — from onboarding and live tracking to ride summaries and the achievement card editor.
Step 3.
I moved everything into Figma to refine the design system, improve visual hierarchy, polish spacing, and make every screen feel consistent and premium.
Step 4.
Once the designs were finalized, I brought them back into Flowstep to create interactive prototypes and validate the experience.
Step 5.
Finally, I used Claude via MCP again to help turn the polished designs and prototype into a working product.
The result is a focused cycling app that combines accurate tracking with a shareable, aesthetic layer that most fitness apps still lack.
https://app.flowstep.ai/file?activeFileId=beabc6f4-e8a6-48f6-b457-0b91fdb15f62
Really like the focus on making each ride feel worth sharing, not just tracked. The achievement cards are a nice touch, and your workflow from PRD to Flowstep, Figma, prototype, and build feels very well thought out. Good luck
Thanks! Glad you liked it. 🙌
Loading this content connects you to Figma.
Figma privacy informationThe 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
Trending
Claude
Claude has entered the design space. How are you using it?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
Brand Design
The best brand designers are on Contra. Scroll to see what's trending in brand design. What are you building?
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?
Related posts
I built the product my team and I actually needed: Contestify 🏆
I'm active in a community of contest hunters — we're always chasing the next hackathon, design contest, meme battle, or AI video challenge. But every contest lives somewhere different: Devpost, Contra, Superteam, Lablab ai, social media. Keeping track across all of them, as a team, was chaos.
So I built Contestify with @Flowstep — one dashboard where my team and I can discover every contest in one place, save the ones worth chasing, track our submissions, build a portfolio of wins and prize money earned, and coordinate entries together through a shared Team Hub.
From an idea born out of my own community's frustration,entirely prompted into existence. This is what "build the product you wish existed" looks like when it's something you genuinely need.
Flowstep prototype:
informative😊
One of my biggest daily struggles is figuring out what to cook with the ingredients I already have.
I also tend to lose track of what's in my kitchen until it's too late.
So I used Flowstep to bring my idea to life and created Recipe Picks.
It's a prototype for a recipe recommendation app that suggests recipes based on the ingredients you have and your dietary preferences.
It helps you discover new meal ideas while reducing food waste.
Sharing my process in the comments.
Project link here
Meridial — Wealth Management Platform
For Meridial, I designed a system where the one thing that matters — portfolio drift — always surfaces first, no matter how many clients an advisor is tracking.
Signal over noise, even at 200+ portfolios. ⚪
The challenge:
Advisors managing dozens of portfolios need to instantly spot what's drifted from target — without digging through spreadsheets or noisy dashboards that bury the signal in data.
A dark, grain-textured UI gives Meridial a private-banking feel instead of typical fintech blue. The landing page proves the product directly in the hero with live allocation and drift cards, while the dashboard extends the same card system into radar charts, composition breakdowns, and a weekly digest — built so advisors can scan hundreds of portfolios at a glance.
A case in making complex portfolio data resolve into one clear signal.
The dark grain-textured UI gives this a truly exclusive private-banking feel. Did you animate the allocation drift cards and radar charts using Jitter or native Figma prototypes?