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
ā¢ Jun 17
š Building a full AI Story Generation app in Bubble.io, completely no-code.This is Part 1 of a brand new training series where we build a complete AI app from scratch, starting with the Figma flow and authentication system.Here is what we cover in
Part 1:
šØ Complete Figma app flow
š§ App planning and screen structure
š Signup and user registration
š Login workflow with best practices
š© Forgot Password implementation
š§ Planning scalable and clean Bubble apps
Figma to Bubble workflow
More coming soon: story generation logic, database design, dashboard, responsive UI, and deployment.
Perfect for Bubble beginners, no-code developers, AI app builders, students, and founders.
Watch Part 1 now: https://youtu.be/cFhHLRRHSuA
We are Devcipator, a no-code & low-code development agency specializing in mobile apps, web apps, SaaS products, and MVP development.We turn ideas into powerful digital solutions fast, scalable, and cost-effective.
š² WhatsApp: +92 308 9492688
š
Book a call: https://calendly.com/tassawarhussain/30min#BubbleIO
#NoCode #AIApp #BubbleTutorial #Figma #NoCodeDevelopment #Devcipator #StoryGenerator #AppDevelopment #LowCode #SaaS #AIAppBuilder #BuildWithBubble #NoCodeTools #TechSeries
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
ā¢ 2d
Kathputli - where stories come alive!
ā¢ Pick a story type, age, and language
ā¢ AI generates a brand-new story in real time, so every adventure is unique
ā¢ It understands whoās on stage and instantly adapts when new characters join
ā¢ Children use simple hand gestures to interact with the puppets and influence what happens next
ā¢ Every puppet has its own voice, personality, expressions, and emotions
ā¢ Stories end with a gentle moral, making them engaging, interactive, and meaningful
š© The Problem
We live in a digital era where children have access to more stories than ever before. But most digital storytelling is still passive, children tap a screen, sit back, and consume the same pre-written experience as everyone else.Thereās little room for imagination, interaction, or ownership.
The story doesnāt know who they are, what language they speak, what theyāre curious about, or what choices they want to make. And yet, every child imagines differently. We felt storytelling should be just as personal.
š© Our Solution
Inspired by Rajasthanās traditional Kathputli puppet theatre, we built Kathputli, an AI-powered storytelling experience where children donāt just watch a story unfold, they help create it. Instead of handing a child another video, we hand them the strings.
š© Built With
ā¢ Figma: designed the complete experience and storytelling flow
ā¢ Figma Make: rapidly prototyped the interactive product
ā¢ Figma Weave: created the puppet characters, expressions, and animations
ā¢ Google Gemini APIs: generated adaptive stories in real time
ā¢ MediaPipe: powered webcam-based gesture interaction
ā¢ ElevenLabs APIs: gave every puppet a unique and expressive voice
ā¢ Supabase: handled the backend and data layer
š© What Weāll Remember Most
This isn't a polished final product, it's the outcome of a few intense days of experimenting, rebuilding, refining prompts, and learning entirely new tools as we went.
Figma Make alone took us 170+ iterations to get the feel right. And with limited Weave credits, we often had just one shot to get a screen or a puppet right, which made every prompt count.
š© Where we'd take it next
ā¢ More characters, fuller emotions, and tighter lip-sync
ā¢ More languages and voices
ā¢ Story themes that grow from simple to complex with the child's age
ā¢ More interactive challenges, smoother animation, real-time object rendering
š© We didnāt just build with AI.
We learned how to design with it, collaborate with it, and tell better stories because of it.
And if thereās one thing we hope people take away from Kathputli, itās this: In a world built for endless consumption, maybe the most meaningful stories are the ones children get to shape themselves.
Kathputli, where stories come alive.
š Live Demo: https://kathputli.figma.site/
š§© Figma Community File: https://www.figma.com/community/file/1649568219068252685
ā¶ļø Social media post URL: https://x.com/shivam619tiwari/status/2067745369883369502
ā¢ 2d
Great work!!
Very proud to share my submission for Config Makeathon
Really think a lot of the design to my app to make it eye catching and look interesting.
The progress of the app went very smoothly with good planning.
- Brainstorming
- Interview
- Friends/Other user feedbacks
- Negative Opinions for improvements
- Figma Make and Figma Weave
- Ai
- Design Sketching
Now i made an app for All in One app to improve your life.
In the video you will see the WORKFLOW and APP-Walkthrough.
Site link: https://sled-series-18065698.figma.site/
Figma Community: https://www.figma.com/community/file/1649636892933916569/bearify
Built with Figma.
#ConfigMakeathon #Figma #ProductDesign #Design #Bearify @Figma @Contra @Contra HQ
ā¢ 2d
Putting together that much feedback and planning really shows in the final design. It is clear you took the time to gather input from different people and actually applied it instead of just going with your first idea.
The workflow looks smooth and the app seems well thought out. Definitely respect the effort you put into this
Design System Gen
A tool for rapid client project kickstart ā built with Figma Make + Claude API
The Problem
Every new client project starts the same way.
You receive a moodboard, some references, maybe a Pinterest link. You're expected to build something consistent ā across Figma Make, Cursor, Claude ā but there's no real foundation yet. No tokens. No rules. No shared context between tools.
Most designers spend hours on setup before writing a single prompt. I got tired of doing that. So I built a tool to eliminate that stage entirely.
What It Does
Design System Gen turns a client moodboard into a ready-to-use design system foundation ā in one click.
Upload the client's references ā the tool analyzes them across 8 dimensions:
Palette / Mood/ Typography/ Composition/ Lighting/ Texture/ Motion/ UI DNA
Hit "Apply all to form" ā the entire design system form fills automatically.
Then generate. You get 11 files, each tailored to a specific AI tool:
File:
figma-make.md For Figma Make Full design system context ā paste once, build everything in Make
design-system.css Any project All tokens as CSS custom properties, ready to import
tokens.json Figma Variables W3C Design Tokens ā import directly to Figma Variables
starter.tsx React / Next.js React component starter with all tokens already bound
cursorrules Cursor Cursor AI rules ā drop in root, it knows your design system
Claude.md Claude Projects Claude reads it automatically every session
DESIGN.md Documentation Human-readable design decisions and rationale
llms.txt Any LLM Machine-readable brand context, like robots.txt but for AI
components-api.md Dev reference Component props, variants, and usage documentation
prompts.md All AI tools Ready-made prompts for every AI tool in your stack
web-skills.md Component library in vanilla HTML/CSS ā buttons, cards, modals, nav
Every tool gets its own customized kit ā tokens, rules, prompts ā all consistent with each other. Not one generic output. A separate file per tool.
Figma Make Integration
In Figma Make: add two files at the start of a session and you're ready to build immediately.
Because the design system context is already loaded ā Figma Make knows your colors, tokens, spacing, component rules ā your prompts stay minimal. No need to re-explain the design system every time. You spend a fraction of the tokens you normally would.
A full landing page ā generated in a single run, with remarkably few tokens spent per prompt.
No back and forth. No prompt engineering from scratch. The context file already did that.
How It Was Built
Built entirely in Figma Make + Claude.
Published as a live web app via Figma Make publish ā vibecodingdsgen.figma.site
Powered by Claude API.
Claude processes the uploaded moodboard and returns structured output ā design parameters, tokens, and prompt sets ā all formatted specifically for each target tool.
Output connects directly to Figma Variables.
W3C Design Token format and can be imported into Figma Variables in three ways: via Tokens Studio plugin, through a Figma Make prompt, or using a custom Figma plugin ā for teams who want full control over the import flow or one special file
The entire tool ā UI, logic, API integration, file generation ā was built and shipped inside Figma Make. No external hosting. No separate codebase.
Why I Built This
Speed ā rapid kickstart for every new project, starting from the client's own references, not templates.
Consistency ā every AI tool in your stack speaks the same design language from day one.
Predictable output ā a base that only needs refinement, not rebuilding.
Token efficiency ā a full landing page was generated in a single run.
The tool is fully live ā you can explore the demo without any setup.
Want to generate your own design system? Add your Claude API key directly in the tool and try it with your own moodboard. The full generation takes 3ā4 minutes and produces all 11 files ready to use.
Linkedin
https://www.linkedin.com/posts/nataliatrusova_config-figma-share-7473584710724808704-YUVK/?utm_source=share&utm_medium=member_android&rcm=ACoAAAvbQN8B6uwRcvk-lCjSLHX3BLh7LL2LS0Y
#ConfigMakeathon #FigmaMake #DesignSystem #VibeCoding #ClaudeAPI
Fantastic work! š This is a very thoughtful and well-structured solution. I especially appreciate how deeply you've considered consistency and efficiency across the entire design workflow. š
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.
MagicPath
The canvas is infinite, and exploration is becoming the workflow. How are you using MagicPath?
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?