Here is my entry for #wonderchallenge
I built TokenTracker
TokenTracker is a B2B SaaS concept for production AI teams. It helps them understand model spend, routing, latency, and prompt-level usage in one place, so they can see where costs are coming from and make better decisions about which model to use to reduce cost and increase efficiency.
It solves a common problem for teams shipping AI features: once they start using multiple models, it becomes hard to tell why costs are rising or which requests are driving the bill. This app brings that visibility into a single, clear product experience.
I built it as a high-fidelity multi-page design project all in Wonder. I first defined the product direction, narrowed the idea to what could be built and currently possible in Wonder, created the design system and branding foundation, and then designed each page section by section using Wonder’s tools and chat keeping brand consistency across the pages . The final result is a polished concept that feels close to production.
For the app I have built following pages —
Home page
Pricing page
Documentation page
User Dashboard
Project Link https://app.wonder.so/asif-raeen/files/019f2b3f-bdd7-76e3-a6af-b7d2963a31e9
(https://app.wonder.so/asif-raeen/files/019f2b3f-bdd7-76e3-a6af-b7d2963a31e9)Product Walkthrough https://app.usebubbles.com/wyPwxqhPTXX4UmUmYoUKcR/token-tracker-product-walkthrough
(https://app.usebubbles.com/wyPwxqhPTXX4UmUmYoUKcR/token-tracker-product-walkthrough)X post link https://x.com/asifraeen_/status/2073718478125809781?s=20
(https://x.com/asifraeen_/status/2073718478125809781?s=20)LinkedIn post link https://www.linkedin.com/posts/asifraeen_wonderchallenge-ugcPost-7479486155676078080-NPfr/
0
32
DIGGS — The Unseen Hero of the Underground
I developed the core concept myself and used AI as a creative partner to refine, iterate, and expand the idea into a complete brand identity.
What is DIGGS?
DIGGS is the brand mascot for an underground construction and utility company. It embodies the people who work beneath our feet—building, maintaining, and protecting the essential infrastructure that keeps cities moving. Inspired by their resilience, teamwork, and challenging work environment, DIGGS is confident, dependable, and approachable, turning unseen underground work into a proud and recognizable brand identity.
Why a Mole-Rat?
The mole-rat wasn't chosen because it looks cute—it was chosen because it belongs underground places. Its ability to thrive in dark, confined environments mirrors the daily reality of underground construction crews. By making an overlooked animal the face of the brand, DIGGS shines a light on the unseen professionals whose work quietly keeps cities running..
Assets Created
To build a complete and consistent brand identity, I created following assets:
Mascot turnaround — DIGGS illustrated from four different angles with a consistent character identity.
Social media campaign — A four-slide educational carousel and a branded office poster.
Sticker packs — Two sticker collections featuring DIGGS in different poses and expressions, along with the company logo and 4. favicon.
Vehicle branding — Two branded company vehicles demonstrating real-world application.
Merchandise — Four work-related branded products (workwear and gear), including realistic retail packaging.
Promotional content — A hero scene of DIGGS at work, later used as the basis for a short animated introduction video.
Additional illustrations — Two cinematic scenes showing DIGGS working inside underground tunnels.
Creative Workflow
Concept Development: I first brainstormed the mascot concept independently, defining the brand story, personality, audience, and purpose. This led to the idea of DIGGS, a mole-rat representing underground workers.
Character Design: After researching the characteristics of mole-rats and the construction industry, I wrote detailed prompts and used Recraft Exploration mode to generate multiple mascot concepts. From the initial concepts, I selected the strongest design as the official mascot.
Character Consistency: Using the selected mascot as the master reference, I generated turnaround views from multiple angles to establish a consistent character model.
Brand Identity: I designed a custom DIGGS wordmark and favicon in Recraft V4.1 Vector, creating a unified visual identity for the brand.
The mascot reference images, logo, and favicon became the core brand assets for the project. I used them as locked references in every prompt to keep DIGGS visually consistent across all outputs, including marketing materials, merchandise, packaging, promotional illustrations, and other brand applications. This ensured a unified and recognizable identity throughout the entire project without losing the identity.
Project Link: https://www.recraft.ai/project/144238a8-2ebb-4b72-9b58-eb71d9ef7907
(https://www.recraft.ai/project/144238a8-2ebb-4b72-9b58-eb71d9ef7907)Project Walkthrough: https://app.usebubbles.com/jK95KRzqr7auxHaJU3etaT/recording-jul-02-2026
(https://app.usebubbles.com/jK95KRzqr7auxHaJU3etaT/recording-jul-02-2026)X post: https://x.com/asifraeen_/status/2072668838144131075
(https://x.com/asifraeen_/status/2072668838144131075)LinkedIn post: https://www.linkedin.com/posts/asifraeen_excited-to-share-diggs-a-brand-mascot-i-ugcPost-7478435820924755969-oyT1/
2
1
142
Project: SkinGlow
Prototype link: SkinGlow on Stitch (https://stitch.withgoogle.com/projects/9256027226045462713)
What I built
SkinGlow is a luxury skincare and beauty editorial prototype designed as a modern content + commerce experience. It includes seven key pages: Home, Blog Archive, Blog Single Post, Shop, Skincare Category, Product Page, and About Us.
How I used Stitch
I used Stitch as a core part of my design workflow to move from concept
to prototype through multiple rounds of iteration. I first explored
direct prompt-based generation, then used the redesign workflow to
create a stronger visual direction, and finally refined the prototype
using a more structured prompt and visual references to improve clarity,
consistency, and brand cohesion.
Workflow and process
My goal was to create an interface that feels alive, editorial, and
polished while maintaining a strong beauty-brand identity across every
screen. In the early prompt-generated versions, I was able to get decent
typography and color consistency, but spacing between sections and
components often felt uneven, and some layouts did not fully follow the
intended structure.
To improve the overall quality, I switched to the redesign approach and
generated a visual reference for the website. That step produced a much
more refined and professional-looking result, with stronger brand
consistency, better visual balance, and a clearer art direction.
However, when translating that visual direction back into a prototype,
some of the color and theme consistency became less reliable.
I then combined both approaches: detailed prompt writing, image-based reference guidance, and repeated refinement inside Stitch. That process helped me push the project further and arrive at a result that better represents the intended brand, layout system, and editorial feel.
What this project demonstrates
This submission shows Stitch as part of a real creative workflow rather than a one-step output. I used it to explore visual directions, iterate on
layouts, compare generation methods, and refine a multi-page prototype into a more polished experience.
Feedback on using Stitch
One of the strongest parts of Stitch for me was how quickly it helped
generate ideas and visual directions. The redesign workflow was
especially useful for producing high-quality references with stronger
aesthetic polish and brand identity.
The main challenge was consistency between stages of the workflow.
Prompt-based generation gave me better control over typography and color systems, but spacing and layout consistency still needed work. Redesign produced more visually polished outputs, but converting those into a prototype could sometimes reduce consistency in theme and visual system. Overall, Stitch was most effective when used iteratively, with structured prompts, reference images, and multiple refinement passes rather than relying on a single generation.
LinkedIn post https://www.linkedin.com/posts/asifraeen_googlestitch-uidesign-uxdesign-ugcPost-7468190556339412992-03IE/
X post https://x.com/asifraeen_/status/2062422333135147161?s=20
2
1
84
The Concept: What is this Template?
Creating narrative-driven, short-form video with consistent characters, synchronized voiceovers, and unified brand colors usually requires jumping between five different tools and manually syncing everything in a video editor.
This Template is an "AI Ad Agency in a Box." Built entirely in ElevenCreative Flows, it replaces a multi-step agency workflow by chaining specialized LLMs, TTS, Image, and Video models into one seamless pipeline.
You input a simple product idea or story prompt. The template automatically assigns distinct "AI roles" (A Narrative Architect, a Graphic Designer, a Concept Visualizer, and a Video Director). They talk to each other, mathematically calculate voiceover timing, maintain flawless character consistency, and output a broadcast-ready, fully lip-synced short-form video (or 5-part carousel) in a single click.
Deliverables: What You Get When You Hit "Run"
Instead of a single generation, this template delivers a complete, cohesive campaign package:
1x Broadcast-Ready Video/Audio Sync: A perfectly timed short-form video (e.g., 10 seconds) with dynamic cuts that match the emotional beats of the voiceover.
1x Studio-Quality Voiceover: An ElevenLabs TTS track, mathematically trimmed by the AI Voice Director to fit the exact time constraints of social media platforms, complete with natural pacing.
5x Scene-Consistent Visuals: Five generated scenes (Hook, Escalation, Climax, Outro) featuring absolute character consistency. The same character, wearing the same clothes, in the same lighting, across different shots.
Platform-Safe Assets: The AI automatically calculates negative space, ensuring the top 15% and bottom 20% of your video/images are visually clear so UI overlays (CTAs, TikTok captions, or logos) don't cover the subject.
How to Modify It & Make It Your Own
This template is built to be a blank canvas for marketers and creators. You can customize it instantly by modifying the input nodes:
Change the Brand DNA: Swap out the core input prompt to match your product. (e.g., Change "Sustainable incense brand" to "A luxury skincare launch" or "A cyberpunk video game trailer").
Upload Your Own Character: Swap the @Image reference with a photo of yourself, a client, or a specific AI influencer. The Prompt Compilers will automatically lock this face into the entire pipeline.
Customize the Duration: Need a 5-second YouTube Short or a 15-second TikTok? Just change the time-limit constraint in the "Voice Director" node, and the pipeline will automatically trim the script and adjust the video choreography to fit your exact time budget.
Change the Voice: Select a different ElevenLabs voice model to completely change the emotional vibe from "Corporate Professional" to "Intimate & Cinematic."
This is the template link https://elevenlabs.io/app/flows/LmjWx6LiYsFjvjTRtyJH
1
2
208
Project Overview: "2047 Toddler Gym"
The Concept: Screen time is rising, physical activity is falling, and children’s health is suffering. This video imagines the year 2047, where the damage from excessive mobile use is so widespread that specialized gyms for 2-to-3-year-olds now exist. To compensate for screen-induced health problems, tiny kids are shown dead-seriously bench pressing, squatting, and running on treadmills.
The Goal: While the visual is satirical, the warning is real. This was made purely to raise awareness and make parents think twice before handing a phone to a small child.
Build the Story Structure: Map out every scene sequentially, ensuring each carries one specific, unambiguous moment.
Refine with an LLM: Drafted and optimized the prompt using a separate LLM to make the language machine-readable. Human judgment was applied at every stage to ensure the tone and structure were correct.
Generate in Melius: Submitted the refined, tested prompt as a single input to generate all scenes at once.
Review and Quality Check: Conducted a manual review of each clip for consistency, expression, and timing. AI generates the content, but humans must judge if it works for the audience.
Experience with Melius AI Overall, the experience was positive. Melius is genuinely useful for short video projects, offering a logical interface and fast turnaround times. However, there are a few limitations.
What Works Well: Quick generation of short clips.
Excellent for projects with fewer than 10 scenes.
Areas for Improvement: The 10-Clip Limit: This is a hard ceiling that breaks the workflow for more complex projects.
Voice Generation: The chatbot unreliably follows voice commands, often ignoring or only partially applying instructions.
Platform Stability: The platform slows down during longer sessions. Tools occasionally freeze without throwing an error, requiring a page refresh to check progress.
Final Thoughts: Melius has immense potential and a solid core idea. If the team is open to it, I have specific, detailed suggestions to improve stability, voice control, and clip limits that I would be happy to share via a Notion page.
This is the canvas link of the project https://app.melius.com/projects/6d624463-df9f-44d7-a7f0-63d07c90e0a1/canvas/df5f6265-62c3-4594-ad49-001a28f52188
This is the link of linkedin post https://www.linkedin.com/posts/araeen_screentime-digitalwellbeing-parenting-activity-7462735226264334336-F2mq?utm_source=social_share_send&utm_medium=android_app&rcm=ACoAABlykYkB7dywhqhS1a0pzqPXSWZ3hJGLdTI&utm_campaign=copy_link
This is link of X post https://x.com/i/status/2056972956883144929
I have also unloaded screen recording of the entire workflow but since it is long videos it is taking time to upload and there is no time left for submission. Hence if possible, I'll add link of workflow later.
I have also unloaded screen recording of the entire workflow but since it is long videos it is taking time to upload and there is no time left for submission. Hence if possible, I'll add link of workflow later.
0
106
E-commerce Design: Transform Products into Visual Sales Story
0
5
Strategic Book Cover Design:Turning Words into Marketable Visual
0
5
Product Mock-Up Design for PoD Services
0
6