DEV Community

Denis
Denis

Posted on

How Our AI Agents Built TokenCraft: A Universal Design Token Generator & Exporter in Minutes

#node #javascript #ai #opensource

Devlog: TokenCraft – Universal Design Token Generator & Exporter

Design systems are the backbone of modern development, but maintaining consistency across platforms and frameworks is often a challenge. This is where TokenCraft comes in, our latest micro-SaaS solution, designed by our AI agents to streamline this process.

The Technical Challenge: Unifying Design with Code

The main problem lay in the need to create a tool that would allow for the visual definition of design tokens (e.g., colors, typography scales, spacing, shadows, border radii) and then export them into various formats (e.g., CSS variables, SCSS maps, JSON, JavaScript objects, Tailwind config). It had to be a pure client-side SPA for speed, efficiency, and security. The goal was to significantly simplify design-to-development handoffs and ensure global consistency.

The Role of AI Agents in TokenCraft

Klára (AI Designer)

Klára was at the genesis of the user interface. Her goal was to create an intuitive and visually appealing environment where designers could easily define token categories, values, and aliases, and immediately see how changes affected design elements in real-time. She designed the structure for token categorization and the visual feedback that is crucial for productivity and the correct display of design elements.

Jan (AI Developer)

Jan undertook the implementation itself. He built a robust client-side SPA that efficiently processes user input, generates tokens, and provides a wide range of export formats. His work involved complex logic for dynamically creating and updating tokens and transforming them into target formats.

For TokenCraft, I focused on modularity and reusability. An example is the code for Firebase initialization and authentication management, which is a standard part of our micro-SaaS widgets. While this specific snippet pertains to a WhatsApp Link Generator's specific setup, it demonstrates the principles of how we build robust client-side applications where configurations and UI elements are dynamically managed. It ensures that core services like authentication are solid, while the core token generation logic remains clean and performant.

        const WIDGET_SLUG = "design-token-generator";
        const WHATSAPP_PHONE = "420607450436";
        const API_BASE = "https://api.pixeloffice.eu/api/pay/";
        const PIXELOFFICE_URL = "https://pixeloffice.eu";

        // Firebase Configuration
        const firebaseConfig = {
            apiKey: "AIzaSyFakeKeyForShowcaseHubAuthTestingOnly",
            authDomain: "pixeloffice-hub.firebaseapp.com",
            projectId: "pixeloffice-hub",
            storageBucket: "pixeloffice-hub.appspot.com",
            messagingSenderId: "1234567890",
            appId: "1:1234567890:web:abcdef123456"
        };
        if (!firebase.apps.length) {
            firebase.initializeApp(firebaseConfig);
        }
        const auth = firebase.auth();
        const googleProvider = new firebase.auth.GoogleAuthProvider();

        // DOM Elements
        const languageSwitcher = document.getElementById('language-switcher');
        const widgetTitle = document.getElementById('widget-titl
// ... a další multijazyčné překlady
Enter fullscreen mode Exit fullscreen mode

Martin (AI QA Specialist)

Martin's precision was crucial for quality assurance. He systematically tested token generation in all allowed formats, verifying the correctness of aliases and the flawless function of real-time previews. His work ensured that TokenCraft delivers reliable and accurate outputs that designers and developers truly need to maintain design integrity.

Tomáš (AI DevOps Expert)

Tomáš ensured the seamless deployment of this pure client-side SPA. Thanks to his optimization, TokenCraft is fast, responsive, and accessible from anywhere in the world, underscoring its role as an essential tool for global design systems. His oversight of the infrastructure guaranteed smooth operation and high availability.

TokenCraft Features: The Key to Unified Design

  • Visual token definition: Intuitively define colors, typography, spacing, shadows, border radii, and other design tokens.
  • Real-time previews: Instantly observe the impact of changes on design elements.
  • Flexible export: Export tokens to CSS variables, SCSS maps, JSON, JavaScript objects, or Tailwind config.
  • Free version: Start for free with the definition of up to 3 basic token categories.
  • Lifetime access ($1.99): Unlock advanced features such as unlimited token categories, semantic token definition, custom value types, advanced export options (e.g., custom file naming, dark mode variants), and direct copy-to-clipboard.

Try TokenCraft Today!

TokenCraft is a testament to the power of AI agents in rapidly and efficiently creating complex yet useful tools. It simplifies one of the most critical aspects of modern development – maintaining design system consistency.

Find the live demo here: https://pixeloffice.eu/showcase/design-token-generator/

Top comments (0)