DNA

Inspiration

Design Native Accelerator (DNA) was inspired by a recurring problem I encountered while designing and shipping real-world digital products.

Across logistics platforms, SaaS dashboards, and early-stage tools, I repeatedly saw teams struggle with consistency not because they lacked design tools, but because defining a design system required time, experience, and early commitment. Individual builders, founders, and non-designers often skipped this step entirely, resulting in fragmented interfaces and costly rework later.

While attending Google Developer Group (GDG) events and exploring updates in Google’s AI ecosystem, I became particularly interested in Gemini’s ability to interpret abstract intent, reason across multiple constraints, and maintain contextual consistency. This led to a core question behind DNA:
Can AI help translate human design intent into structured, reusable systems rather than isolated UI outputs?

What it does

DNA is an AI-assisted design system generator that converts natural language input into structured design foundations.

Users describe their product goals, brand characteristics, and usage context in plain language. DNA then generates:

• Design tokens such as colour systems, typography scales, spacing, and component radii
• Foundational UI rules aligned with modern SaaS and B2B design patterns
• A coherent system structure that supports consistency, scalability, and iteration

Instead of producing final UI screens, DNA focuses on system-level outputs that help teams establish a reliable design foundation early in the product lifecycle.

How we built it

DNA was built using Google AI Studio with Gemini as the core reasoning model.

Gemini’s strength in multi-step reasoning and contextual understanding made it well-suited for interpreting qualitative design intent and mapping it to structured system decisions. Rather than using the model to generate visual artefacts directly, DNA leverages Gemini to reason about design rules, constraints, and relationships.

The system uses a guided AI flow where user inputs such as brand tone, product context, and usage scenarios are progressively translated into:

• Design tokens including colour palettes, typography scales, spacing, and radii
• Foundational component logic aligned with modern SaaS and B2B interfaces
• A scalable system structure that can be extended into design and development workflows

Instead of building a fully autonomous agent, DNA was intentionally designed as a controllable and explainable system. Prompts and constraints are structured to ensure outputs remain interpretable and reproducible, allowing users to understand and adjust how abstract concepts like “minimal”, “enterprise”, or “approachable” influence concrete design decisions.

This approach positions Gemini as a system-level reasoning partner rather than a black-box generator.

Challenges we ran into

One major challenge was defining appropriate boundaries for AI interpretation. Too much flexibility led to inconsistent systems, while too many constraints reduced adaptability.

Another challenge was avoiding over-automation. It was important to prevent DNA from becoming a one-click generator and instead design it as a collaborative tool that supports human judgement and iteration.

Building trust was also critical, particularly for designers and developers who are cautious of AI tools that claim to “design for you” without transparency.

Accomplishments that we're proud of

• Successfully translating abstract brand language into structured design tokens
• Producing coherent, system-level outputs rather than isolated UI artefacts
• Exporting production-ready components for developers in CSS, HTML, and Tailwind
• Designing an AI reasoning flow that is explainable, controllable, and extensible
• Creating a tool that is accessible to designers, developers, and non-designers alike

What we learned

This project reinforced that design systems are fundamentally decision systems, not just visual assets.

We learned that AI is most effective when it reduces repetitive cognitive load and helps formalise decisions, rather than replacing creative or strategic thinking. Balancing qualitative reasoning with deterministic structure was key to making DNA practical and trustworthy.

What's next for DNA

At the current stage, DNA has primarily focused on serving developers as a core target audience.

The system is already capable of exporting structured design outputs into production-ready formats, including CSS, HTML, and Tailwind. This allows developers to quickly establish consistent UI foundations and integrate them directly into their workflows.

The next major step after the MVP is to close the loop for designers. We plan to build a Figma plugin that enables DNA-generated systems to be exported directly into Figma, allowing designers to visualise components, construct flows, and iterate collaboratively. This will complete the design-to-code feedback loop and ensure parity between designer and developer experiences.

In parallel, we will continue refining our business plan, validating the value proposition for different user segments, and exploring opportunities to work with early partners. As the product matures, we aim to engage with venture capital and strategic partners who are aligned with our vision of making structured design systems more accessible and scalable.

Built With

• css
• firebase
• gemini3
• html
• javascript
• lovart