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
Scaling a Dribbble Concept into a Full Layout with Wonder
I completely missed the deadline for the recent Wonder Challenge, but the experiment was just too good to leave in the drafts! I still want to share my process of getting to know @wonder and how it fits into a UI workflow as a technical co-pilot.
We all know the struggle: a beautifully crafted Dribbble shot rarely survives the jump to a full-scale product layout without losing its aesthetic. I wanted to see if Wonder could help bridge that exact gap.
The Experiment: I took a strict, two-screen conceptual UI I designed for a pastry brand (PUFFHS) and fed it into Wonder. My goal was ambitious: take these static screens and scale them into a comprehensive landing page and a detailed product page.
The Process: Did it work perfectly on the very first prompt? No. Like any AI co-pilot, it required some steering. I had to iterate on the prompts, refine the layout logic, and adjust the structure to make sure the clean, premium feel didn't turn into a generic wireframe.
The Result: After a few iterations, the output was genuinely impressive. We successfully generated a full, structured landing page and a product page natively within the canvas. The best part? Wonder managed to almost entirely preserve the original style, strict typography, and core design tokens.
It’s a fantastic look into how AI can handle the heavy lifting of architectural layout scaling, leaving designers more room to focus on the craft and art direction.
Here is a look at the transformation from a 2-screen concept to a full layout! 👇
https://app.wonder.so/kris-anfalova/files/019f3760-91e8-7eab-a92e-1b582aab6e56
Creative 😍
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
I built an operating system for my marriage.
MARRIAGE.OS is a fictional OS that treats a relationship the way software treats a system. It has a boot sequence, a live dashboard (trust level, comms uptime, a resentment queue, partner battery at 31%), a screen of the conditionals we actually run on (IF thermostat.touched_by(partner_a) THEN war()), an error log of every fight we've ever had (all resolved, eventually), and a shutdown screen that dims the lights and says goodnight.
The whole thing is a CRT terminal aesthetic: amber phosphor on near-black, scanlines, JetBrains Mono, a design system I kept consistent across all six screens.
How Wonder made it possible: I designed every screen with Wonder Chat, generating layouts from prompts and refining them on the canvas. The living glow behind the boot and shutdown screens is a Wonder shader, tuned by hand. Then I used Wonder's MCP to pull the design straight into code and ship it to a live URL. Canvas to code to deployed, no rebuild.
It's live here: marriage-os.gblackman.workers.dev
Link to Wonder file: https://app.wonder.so/user-b66760/files/019f161d-6250-7108-ab1b-6da6b3d02616
Twelve years of marriage, rendered as the longest-running system I own.
This is amazing
Finally brought this artwork to life in Framer.✨
Subtle motion, smooth interactions, and a seamless loop designed for a premium landing page experience.
Should I turn this into a full landing page? 👀
Amazing work
PUFFHS: Artisanal Pastry Landing Page Concept
Welcome to PUFFHS, a conceptual landing page designed for a premium artisanal bakery specializing in gourmet cream puffs. This project reimagines how we browse and buy high-end digital food products.
Most food e-commerce platforms and delivery apps rely on static, uninspiring grid layouts that fail to capture the true tactile appeal of the product. The challenge was to break away from standard UI patterns and create a digital shopping experience that is as mouth-watering and engaging as the pastries themselves, all while keeping complex dietary information accessible
To solve this, I experimented with a highly interactive, motion-driven approach. The core UX innovation is the "Reveal the Puff" mechanic. Instead of forcing users to read long paragraphs about the ingredients, I designed a seamless micro-interaction that allows them to virtually "slice" the dessert with a single click, instantly revealing the rich filling and texture.
Well now im hungry so it seems to be doing its job very well
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.
fifaworldcup2026
The World Cup is here and the whole world's watching. How are you designing for the world stage?
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?