Launched this week
tokenbridge.dev

tokenbridge.dev

Token your Design Vibe, Bridge to AI Code

3 followers

Visual design token configurator that generates AI-readable design rules. Perfect for Cursor, Copilot, and other AI coding tools. Configure once, export to 6 formats, let AI understand your design system instantly.
tokenbridge.dev gallery image
tokenbridge.dev gallery image
tokenbridge.dev gallery image
tokenbridge.dev gallery image
Free
Launch Team / Built With
Wispr Flow: Dictation That Works Everywhere
Wispr Flow: Dictation That Works Everywhere
Stop typing. Start speaking. 4x faster.
Promoted

What do you think? …

Austin Gao
Maker
šŸ“Œ
šŸ‘‹ 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