VibeCN — AI-First Next.js Starter Kit & Theme Editor
Designing and developing a token-optimized Next.js starter template with an AI-first component library, visual theme editor, and a freemium SaaS model — built for developers who ship with AI.
What needed solving
AI-assisted development is fast — but most starter templates and component libraries were not built with AI in mind. Developers using tools like Claude Code spend extra tokens on bloated file structures, deeply nested components, and unclear naming conventions. VibeCN solves this by providing a Next.js starter kit engineered from the ground up for AI efficiency: token-optimized components, flat file organization, clear naming, pre-built auth pages, settings panels, dashboard layouts, and a live visual theme editor that propagates changes across the entire app in real time.
Rules I worked within
Solo project — responsible for product design, full-stack development, theme editor architecture, and go-to-market strategy.
Components must be token-efficient for AI code generation while remaining readable and maintainable for human developers.
Visual theme editor needed real-time propagation of color, typography, spacing, and radius changes across all components without page reloads.
Freemium pricing model (Free / $3 Starter / $7 Pro) required balancing value across tiers to convert free users without gating core functionality.
Measurable outcomes
Designed and developed the full SaaS product solo — from brand identity and UI design through Next.js 16 + React 19 development to a live production product at vibecn.app.
Built a live visual theme editor for real-time color, typography, spacing, and radius adjustments that automatically propagate across the entire application.
Engineered a flat file structure with clear naming conventions and token-optimized components designed to reduce AI generation costs and improve output quality.
Launched a freemium model — Free tier with theme editor and 1 AI credit, $3 Starter with 3 credits, and $7/mo Pro with unlimited AI generation and priority support.
“The best developer tools disappear into the workflow — VibeCN bets that when your starter kit speaks the same language as your AI assistant, the gap between idea and shipped product shrinks to minutes.”