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
Here is my submission for the #makeathon
FocusDock is a calming focus timer designed for work, study, reading, and deep focus sessions.
https://detach-lime-09329627.figma.site/
The idea started from a simple problem: most focus timers are functional, but they don’t feel personal or emotionally engaging. I wanted to create a timer that feels more like a small ritual, choosing your environment, placing your clock, setting the mood, and starting a focused session with intention.
With FocusDock, users can:
Choose a focus duration
Pick from different illustrated desk, shelf, and table backgrounds
Select a clock style
Place the clock naturally inside the scene
Start a clean, distraction-free focus session
Use ambient sounds or music to support concentration
The design direction is soft, calm, and minimal, using 2D illustrated backgrounds with clear surfaces where the clock can sit naturally. The goal is to make the clock feel like an object inside the workspace, not just a floating timer UI.
I’m using Figma’s suite of tools to explore the visual system, generate the interface direction, and build the interactive prototype with Figma Make. A big part of the challenge is making the experience feel polished: smooth transitions, thoughtful placement, responsive layouts, and a focus flow that feels simple but meaningful.
For me, this project is about turning time management into a calmer, more intentional experience.
social post: https://x.com/sir_hsn/status/2063623301201858694?s=20
more backgrounds
I was planning to using these backgrounds for the project, but I couldn't there is something broken made it impossible to do it.
more backgrounds
more backgrounds
Project live for community
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
Had a fun weekend building Merisole ☀️
Designed with Google Stitch.
I'm a senior product designer working on e-commerce sites every day, so my real question going into this challenge was practical: how easily does Stitch slot into my actual workflow? Could I use it to spin up a polished, client-ready option in a single sitting or even take it all the way to a shippable site?
To test that, I asked AI to create a fictional footwear brand, Merisole, and treated it like a real client project from brief to launch.
How Stitch fit into the workflow
Before generating anything, I wrote a custom design.md. Type scale, color tokens, spacing rhythm, the editorial tone I wanted Merisole to carry and uploaded it into Stitch as a design system. That single step is what made the rest of the build feel coherent.
Every screen Stitch streamed onto the canvas already spoke the brand's language, so I wasn't fighting drift between sections. This is exactly the part of my normal e-com workflow that usually eats hours! Getting AI tools to respect a brand spec was something that Stitch handled cleanly.
By the way, the stream on canvas feature was one of the coolest interactions I've seen so far! It was like having a designer design on your screen remotely through AnyDesk!
From there I worked mostly through in-place AI edits: clicking a section, telling Stitch "to add it to another variation," or "add a hover animation on the cards," and getting changes in seconds. The streaming generations meant I was reacting to a real interface taking shape instead of waiting for a static result.
The motion work is where Stitch surprised me most. Native hover states, shader backgrounds, and scroll-linked animation. All authored inside the tool, no handoff to a separate motion app, no code wrestling. Then I exported the build out to Netlify in one step.
New features I leaned on
Custom design.md - design system applied across the whole project (kept every screen on-brand from the first generation)
Streaming generations to canvas (the whole first pass)
In-place AI edits via prompts + point-and-click (most of the polish phase)
Native motion, hover states, and shaders on HTML canvas
Netlify export (final deploy)
Feedback on the platform
Coming at this from a daily e-com design seat: Stitch genuinely shortens the distance between brief and client-ready.
The design.md - design system flow is the underrated hero, uploading a brand spec once and having Stitch honor it across every streamed generation is the closest I've felt to "AI that respects a brand."
The streaming canvas is amazing to say the least!
It collapses the "describe - wait - judge - re-prompt" loop into something closer to direct manipulation. In-place edits felt the most like real design work. I stopped writing long prompts and just pointed at things. Two things I'd love next: An option to tweak elements without having to prompt it. And a way to save in-place edit "recipes" so I can reapply a vibe across sections without re-describing it.
Stitch didn't feel like an AI tool I was wrangling. It felt like a canvas that happened to understand what I meant. Merisole came together in a single sitting because of that, and I'm walking away convinced Stitch has a real place in how I'll pitch and build e-commerce work going forward.
Check it out:
Live site (really fun to click around): https://merisole.netlify.app
Stitch project: https://stitch.withgoogle.com/projects/834230787052196219
Amazing!
UFAB numericals + motion system for logo and numericals,
via Ebb Scandinavia.
The new logotype symbolized their mastery in CNC manufacturing.
Based on client feedback on early numeral explorations, I redesigned the set to feel coherent with the final logotype.
The numerals are now used on factory signage.
But the brand needed more ways to express smart connected manufacturing.
I built a motion system inspired by their CNC & measurement machines, where the same movement could carry across both letters and numbers.
This made the identity easier to extend without losing coherence.
Logotype: Ebb Scandinavia
Numericals: 1 AD, 1 designer (me)
Motion: me
Superb
I decided to re-imagine CapCut as a co-working space for creatives, where you can work all day (or all night), always fueled by free coffee on tap ☕
There's the "timeline lounge", where you can go when you want to network and share ideas, but also individual pods where you can go in and take a call or record audio 🎤
Essentially, this is a space that, much like the current CapCut brand, tailors itself for creatives and meets you where you're at, whether you're a morning person or night owl, or even if you're working away on your 5 to 9 until you can leave your 9 to 5.
Heck, bonus points if you are a video editor and you go there to edit using CapCut! (they should give out free memberships to whoever does that IMHO) 🤩
CapCut team, feel free to jump in on this idea - it's free for a limited time, all I ask is an invite to the grand opening 😉
This was all created by me, Sílvia Pinho, you can email me at hello@freelancingwithsilvia.com or find me on socials @freelancingwithsilvia
And, of course, you can see my vision and progress through the videos and images below 👇
oh, this is SUCH a solid concept that you brought to life. i could absolutely see this kind of development branching out from the brand in the future, & your integration of a clear color palette calls just the right amount of attention back to where logos are placed, never...
Challenges
View all
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.
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
portfolioreview
The best portfolios tell a story, not just show a grid. Share yours for feedback.
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?