StylesBot
AI-Powered SaaS
The Challenge
As a Senior UX/UI Designer working with cross-functional teams, I repeatedly saw the same issue: style guides were scattered across multiple tools, workflows were slowed by repetitive tasks, and design-to-code handoff was inconsistent.
Without a central place to build, store, share, or a way to preview them on real interfaces, teams faced extra work, confusion, and inconsistent brand execution.
My Role and Goal
My goal was to build a fast, centralized AI platform that made style-guide creation simple, consistent, and developer-ready. I defined the vision, validated the problem, planned the roadmap, designed the full UX, engineered the AI/LLM pipeline, and implemented the freemium membership model with Stripe’s API.
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 designed the core interfaces and began developing the SaaS platform using Next.js, PostgreSQL, OpenRouter, and Google Gemini Flash 2.5 as the main LLM engine.
I built user authentication, project storage, the real-time preview engine, role-based access, the code exporter, and full Stripe integration to support the freemium and premium models.
After launch, user feedback revealed a strong need to see styles applied on real interfaces, so I designed and built the Live Preview feature and released it through an email campaign. It quickly became the top driver of users coming back to the platform and significantly improved user engagement. Since then, the platform has continued to evolve on a bi-weekly release cycle, with each update driven directly by user behavior, feedback, and new insights.
Ongoing Impact and Results
StylesBot transformed style-guide creation from a slow, manual workflow into a fast and automated AI-powered process. By centralizing brand assets, simplifying design-to-code handoff, and enabling instant style generation, the platform achieved strong early traction and positive user sentiment.
Creatives and developers reported significant time savings, higher consistency, and overall better workflow efficiency—reflected in rapid organic growth, a 98% satisfaction rate, and up to 80% reduction in manual setup work.
