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.
StylesBot is built to help designers, developers, and brands save hours of manual work, offering instant, professional-grade visual systems with zero design skills required.
Planning & Concept
The idea began with a problem I often encountered: building style tiles and tokens for every project from scratch. I outlined key features for a better, smarter solution powered by AI. In this phase, I structured the UX architecture, mapped user journeys for three primary personas (designers, businesses, developers), and defined flexible generation modes: AI-Only, Co-Pilot, and Custom. I also leveraged LLMs early in the planning phase to validate ideas, structure flows, and generate technical scaffolding—saving countless hours in research and iteration.
AI + UX Engineering
StylesBot leverages LLMs to generate intelligent brand systems, offering multiple modes to fit various user needs, from complete automation to fine-tuned manual control. Core features include AI-generated color palettes with HEX, RGB, CMYK, and WCAG accessibility checks, smart typography with Google Font pairings and live CSS previews, export options for style tokens in both JSON and CSS formats, a real-time style guide dashboard, industry-specific presets (such as Tech, Healthcare, Finance…), and dynamic theme transitions for dark and light modes.
All UX flows and interface elements were designed with modularity and responsiveness in mind. The result is a sleek, fast, and intuitive tool built with Framer Motion, Shadcn UI, and a unified design language.
Full-Stack Development
The entire backend runs on a Node.js/Express server with PostgreSQL and Drizzle ORM. I implemented a robust authentication system using Passport.js with encrypted sessions, developed an AI prompt pipeline that integrates OpenRouter, DeepSeek, and Gemini, and built a dynamic credit system with role-based access controls. Stripe was integrated to handle monthly and annual subscriptions, while schema validation across the backend was enforced using Zod. The architecture is fully modular and API-based for scalability and maintainability, and I created custom CLI tools for generating style tokens and managing database migrations. All backend features were optimized for performance, security, and long-term scalability.
Design System + Exports
Each generated style guide includes color swatches with consistent naming conventions and exportable CSS variables, paired typography systems with adjustable scale sliders, and UI token previews such as button styles, radius, and padding. Export-ready files are available in both CSS and JSON formats, complete with developer notes. To ensure accessibility, I also built a smart contrast checker and opacity scale generator, helping every brand system meet WCAG compliance.
Growth & Marketing
As a solo founder, I’m also leading the entire marketing and content strategy for StylesBot. This includes building a marketing website with dynamic, animated sections; producing demo videos and branded visuals using tools like CapCut and Adobe Suite; and launching our social media presence and email newsletter automation.
What’s Next
I’m currently working on adding upcoming features to the roadmap, including the ability to share each Style Guide with a custom URL, a Figma plugin integration, and including more UI token generations for the brand style and code.
