tokenbridge.dev

👋 Hey Product Hunt! I'm Austin Gao, creator of tokenbridge.dev ## 🎯 Why I Built This As a developer working with AI coding tools like Cursor, I faced a recurring problem: AI would generate beautiful code, but the UI was inconsistent. Colors were off, spacing was random, and typography didn't match my design system. I tried writing detailed design rules in .cursor rules files, but it was tedious and error-prone. I needed a better way. ## 💡 The Solution tokenbridge.dev provides a visual configurator where you can: 1️⃣ **Configure Design Tokens Visually** No more writing CSS by hand. Use an intuitive interface to set colors, fonts, spacing, and more. 2️⃣ **Preview in Real-Time** See your changes instantly with actual UI components. What you see is what your AI will generate. 3️⃣ **Export to 6 Formats** Get AI-readable rules that work with your tools: - **Design Rules Skill** - Comprehensive package for AI tools - **Cursor Rules** - Direct .cursorrules file - **Antigravity Rules** - Architecture drift prevention - **CSS Variables** - Universal web format - **JSON Tokens** - Programmatic access - **Tailwind Config** - For Tailwind projects ## 🚀 What Makes It Special ✨ **AI-First Design** - Every export format is optimized for AI understanding 🎨 **Real-time Preview** - No guessing, see results instantly 🌍 **Full i18n** - English & Chinese support 🌓 **Dark Mode** - Complete theme support 📦 **Open Source** - MIT License, host it yourself if you want ## 🎁 Try It Now Visit: https://tokenbridge.dev The whole flow takes less than 5 minutes: 1. Configure your design tokens 2. Preview with real components 3. Export in your preferred format 4. Import into Cursor/AI tool 5. Let AI generate consistent UI ✨ ## 💭 I'd Love Your Feedback - What design system challenges do you face with AI tools? - What export formats would you like to see? - Any features you'd like added? Thanks for checking it out! 🙏 #VibeCoding #DesignSystem #AITools #Cursor #WebDev