StylesBot
AI-Powered SaaS
The Challenge
Cross-functional teams often struggle with fragmented handoffs, scattered style guides, and overlooked accessibility. Without a centralized ‘source of truth’ for UI tokens and WCAG compliance, teams face increased overhead, version conflicts, and inconsistent brand execution across platforms.
The Goal
The goal was to build an AI-powered platform that bridges the gap between creative vision and production code. By centralizing the workflow, the platform helps designers, developers, and agencies drastically reduce handoff time while ensuring brand consistency across web and mobile products.
StylesBot - AI-Powered Style Guide SaaS
StylesBot is my second end-to-end SaaS product, conceptualized, designed, and engineered entirely by me. It’s an AI-powered platform that instantly generates full style guides complete with color palettes, typography systems, UI tokens, and production-ready CSS/JSON exports.
Client:
StylesBot
Partners:
UX Media
Vibe Coding, SaaS Platform Design, UI/UX Design, API Integration, Stripe Payment Gateway, Automated Back-End Functions, TypeScript, Tailwind, PostgreSQL, Express, Drizzle ORM, AI APIs (LLMs), Stripe, Vite, Framer Motion, Shadcn UI, Passport.js, Zod.
Planning, Concept & Key Insights
After interviewing potential users: designers, developers, and PMs… I validated the need for a faster, more consistent way to create style guides.
The idea came from a common problem I faced myself: rebuilding style tiles and tokens from scratch for every project. I set out to create a tool that could generate complete, WCAG-checked style guides in under two minutes using a logo or short brief, powered by AI to analyze inputs and apply color psychology and design rules.
During planning, I mapped user journeys, defined the UX architecture, and outlined flexible generation modes (AI-Only, Co-Pilot, and Custom).
Subscription Model Design
I evaluated operational costs to support a true freemium model. Users can create an account without adding a credit card and generate up to 6 AI-powered style guides for free. From there, they have the flexibility to upgrade to a monthly or annual subscription, or purchase credit bundles instead.
This structure allows users to test the product without friction, decide if it’s the right fit, and choose a plan that matches their workflow. For the business, it creates a steady stream of insights from real usage, helping refine the product and optimize conversion over time.
What I Designed and Built
Once the product roadmap was defined and validated with early users, I rapidly prototyped the core interfaces using AI tools like Replit. I then moved to production, developing the full SaaS platform with Next.js and PostgreSQL, integrating Google Gemini Flash 2.5 via OpenRouter as the main LLM engine. To accelerate the process, I adopted a ‘vibe coding’ workflow, leveraging Cursor AI along with Sonnet and GPT models to handle the heavy lifting
The Figma Sync Plugin
Following the initial launch, user feedback identified a critical need for seamless integration with design tools such as Figma, Tailwind CSS, and Adobe, as well as for a Live Preview feature. Therefore, I developed a dedicated Figma Plugin rather than a simple API connection to handle the complexities of professional design systems. Connecting directly to the StylesBot architecture, the plugin automatically translates JSON tokens into native Figma Variables and creates structured collections for colors, text styles, and modes.
Promoted via an email campaign, this release quickly became the top driver of user retention. Since then, the platform has continued to evolve, with every update shaped directly by user behavior and feedback
Ongoing Impact and Results
StylesBot transformed manual style guide creation into a fast, AI-powered workflow. By centralizing assets and simplifying design-to-code handoff, the platform achieved strong early traction.
