Web Design & Development • AI Prototyping • Rive • Spline
Summary
I turned static Figma designs into a responsive, interactive website for Textme.bio—a link-in-bio platform empowering creators. By leveraging AI-powered tools and a mobile-first approach, I bridged the gap between design and development with minimal engineering.
I built interactive elements like dynamic calculators and revenue graphs, and crafted a lightweight, Rive-powered hero animation—all while establishing a cohesive, premium brand identity.
Impact
Details
Textme.bio
Product Designer & Developer
4 months
Nov 2024 – Feb 2025
Chat GPT
Bolt
Figma
Build.io
Mobbin
Spline
Context
What is textme.bio?
Textme.bio is a link-in-bio platform that lets creators sell products, offer memberships, and connect with their audience through SMS-powered engagement.
Seamless purchasing for e-books, courses, and bookings
Branded, mobile-first experience that feels personal
All-in-one platform for selling, marketing, and community-building
The Core Problem
How Do I Design a Responsive, Interactive Website That Translates Seamlessly from Figma to Code?
Designing a marketing website is challenging, but converting a Figma design into live, interactive code that preserves branding, responsiveness, and interactivity is even tougher.
This project required me to bridge the gap between design and development, crafting visually compelling, production-ready designs with minimal engineering intervention.
Why it Matters
My Process
Design & Development
How Do I Translate my Figma Designs into a Responsive Website?
I used a Figma plugin that leverages AI and computer vision to export my precisely structured designs—built with Auto Layout and Fill—directly into Builder.io, ensuring every component translated flawlessly.
Designed components with Auto Layout and Fill to translate to Flexbox.
Used Builder.io’s AI-powered Figma plugin to export HTML/CSS.
Iterated on breakpoints, text sizes, and spacing for optimal responsiveness.
Impact
The final website adapts flawlessly to all screen sizes, ensuring a smooth experience across devices while significantly reducing front-end development time.
What didn't work?
There are limitations of what AI can 'see' in the layers and how it translates the layer and styles into HTML/CSS:
Gradients Don’t Translate Well!
AI struggles to recognize gradients, often converting them into images or ignoring them entirely.
Gradients needed to be manually added using CSS properties. I used Figma Dev Mode to copy the exact gradient values and pasted them directly into the Builder.io code editor.
Viewport & Text Adjustments Were Inconsistent
AI struggled with element reordering, text scaling, and fill properties across breakpoints especially mobile.
I had to manually adjust layouts, corrected text fills, and ensured elements resized properly across devices.
Rive Hero Animation
How I Built an Engaging Hero Animation with Rive
Other methods like Lottie and CSS were too heavy and hard to edit. Rive was ideal—it’s lightweight (built on WebAssembly), fully responsive, and supports interactive features like mouse tracking and clicks.
Learned Rive to craft a smooth, interactive animation.
Optimized for fast loading and seamless playback.
Iterated designs for enhanced visual appeal without sacrificing speed.
Impact
The animation immediately captures attention, making the hero section engaging, modern, and memorable while remaining lightweight and scalable for future updates and revisions.
Branding and Style
How I Created a Cohesive Style and Brand
Impact
Interactive Dynamic Elements
How I Enhanced User Engagement and Conversions with Interactive Elements?
Many users expressed concerns with Textme.bio’s credit based payment system and its earning potential compared to other platforms. A static pricing chart wouldn’t be enough—users needed an interactive way to visualize how credits work and how textme.bio could help them maximize their earnings.
The goal was to increase conversions and legitimacy of the brand.
Research shows that interactive content generates 2x more engagement and can increase conversions by up to 40%.
So I designed to components in Figma and used Bolt.new to convert static designs into functional interactive components.
Impact
Increase engagement by 46% by providing an intuitive way to explore pricing and value. This makes the platform more transparent and helps convert hesitant users into paying customers.
Developed a Dynamic Credit Visualizer
Here user can select a potencial Plan and see see real-time calculations of credit usage, cost, and quickly compare tiers. This keeps the prcing transparent increasing user trust.
Interactive Credit Demo
Created a Graph Visualization
Developed a dynamic revenue graph that lets users set their expected views, membership pricing, and product costs to compare their potential earnings on Textme.bio vs. other platforms.
What Didn't Work
AI speeds up development, but it lacks intuition, struggles with context, and takes everything literally—much like a junior developer who needs every instruction spelled out. Garbage in, garbage out.
SVG Code Was Too Large for AI to Process
AI couldn't handle long SVG strings, often stalling, producing errors, or stopping mid-generation. Even simple icons became a bottleneck.
Rather than relying on AI, I copied and optimized SVG code manually after export, ensuring it remained lightweight, scalable, and properly rendered without overwhelming the system.
AI Misinterpreted Multi-Step Instructions
Complex prompts caused AI to make mistakes or generate incomplete code. It would mix up logic, apply styles incorrectly, or execute tasks in the wrong order.
I adjusted my approach by breaking down instructions into simple, single-step commands, guiding AI like a junior developer while using precise layer naming to improve accuracy.
Reflection
How I Grew as a Designer & Developer
This project sharpened my skills in merging design and development to create a responsive, interactive marketing website that drives conversions. I learned to use AI tools, dynamic visuals, and clear design strategies to ensure every element supports the product’s value.
What I learned
Responsive design and conversion-focused layouts
Leveraging AI for interactive user experiences and design-to-code workflows
Implementing dynamic animations for enhanced engagement
Next Steps
Refine and create micro-interactions
Clean up styling and optimize copy
Expand A/B testing to boost conversion rates
