Ahmad Rufai
Web developer that build functional and responsive websites.
New to Contra
Ahmad is building their profile!
Sketchle — Submission
What I Built
Sketchle is a drawing guessing game. A sketch reveals itself stroke by stroke on a canvas while a timer ring counts down. You type your guess — matching letters fill in as you go. Get it right and confetti goes off. Get it wrong and the answer types out letter by letter. Six rounds, eight different drawings, and at the end you get a ghost rating based on your score.
It's simple. It's playful. It works.
My Workflow
I followed six steps from idea to deployed app:
Research : I had an existing game project with a visual style I liked (3D pressable buttons, dot-grid background, bold typography). I imported it into Stitch so it could learn my design language.
Prompt : I asked Stitch to generate the core game screen: canvas area, circular timer ring, letter hint blanks, guess input, and a submit button. Streaming generation built the layout in real time.
Refine : This is where Stitch really shined. I clicked any element and typed what I wanted. Clicked the timer: "Make this a circular SVG ring, green at start, orange under 8 seconds, red under 3." Clicked the canvas: "Add stroke-by-stroke reveal." Clicked the result area: "100 confetti particles with gravity and rotation." Each edit took seconds and I could see the change immediately.
Animate : Stitch's canvas motion handled the heavy lifting. Confetti burst on correct guesses. Spring-bounce on the CORRECT badge. Slide-up animation on the revealed word. Fly-up-fade on the score pop. Grayscale desaturation on wrong guesses with a typewriter reveal. The timer ring transitions smoothly from green to orange to red with a pulsing effect.
Prototype: Stitch has an Instant Prototype feature (similar to what Figma offers) that let me link my four screens together into a clickable flow. I could navigate from the start screen through gameplay, to result states, to game over — all interactive, before touching any code. It helped me validate the flow without writing a single component.
Build : This is where things got interesting. I connected OpenCode to Stitch through their MCP (Model Context Protocol) integration. I configured a remote MCP server with my Stitch API key, then used tools like stitch_list_screens, stitch_get_screen, and stitch_apply_design_system to pull design data directly into my terminal. From there I wired the exported Tailwind CSS into a React app with a simple state machine handling the game flow, and deployed to Netlify.
How I Used Stitch
Stitch was the entire design engine for this project. Every visual element — the background with its radial glow and dot grid, the 3D pressable buttons with glass reflections, the timer ring, the confetti canvas, the typography system — was either generated or refined inside Stitch.
The features I used:
Codebase import : brought in my existing project so Stitch could match the design style
Streaming generation : created all four core screens from text prompts
In-place AI edits : refined the timer, canvas animations, confetti, and button states by clicking and prompting
Canvas motion : drove the confetti particle system, stroke reveals, badge animations, and score pop
Instant Prototype : linked screens into a clickable flow to test the experience before coding
Export : pulled out production-ready HTML with full Tailwind styling and keyframe animations
I also experimented with connecting OpenCode to Stitch via MCP. After setting up a remote MCP server with my API key, I could run commands like stitch_list_projects and stitch_get_screen to pull screen data and design system tokens from the terminal. It's not a polished integration yet but the potential is there.
Feedback on Stitch
The good: streaming generation is genuinely fast. In-place edits are the standout feature — being able to click any element and refine it with text feels natural and immediate. The Instant Prototype feature is solid, on par with Figma's, and saved me from building an interactive prototype separately. The Tailwind export was production-ready — I used the CSS almost verbatim.
The rough edges: fine-tuning complex animations takes multiple attempts. The canvas motion system is powerful but underdocumented — I had to experiment to get the confetti right. The MCP integration works but could be smoother; connecting OpenCode to Stitch involved some trial and error with authentication.
Prototype Link (https://stitch.withgoogle.com/preview/18195788814772180650?node-id=a71a54cf72084aad8c0fd120694e900e)
Live Link (https://skettchle.netlify.app)
Overall: Stitch cut my normal design iteration time from days to hours. For a challenge like this, that's the difference between submitting and not submitting.
2
66