FR EN
Aurélien Biard Interface designer

Asma.ds, an AI-driven design system

asma.dsprojet personnelAI Driven Design System

Context

Designing an agentic system

AI tools that can generate code and interfaces are gradually changing the way I can design a product. But the faster generation becomes, the more one question matters:

How do you pass a product’s design rules on to an AI, rather than just asking it to generate an interface?

Asma.ds was born from that question. I wanted to experiment with building a Design System that is not just a component library in Figma, but a structured source of truth that different actors can understand and use: designer, developer and AI.

The goal was to formalise what is usually scattered across Figma, documentation, code and decisions made along the way.

Asma.ds thus became a lab to explore the relationship between Design System, DesignOps, code and AI.

The team

  • Aurélien BiardProduct Designer / Design Technologist

    I lead the project and make the design decisions (product thinking - Design System structure - UX/UI choices - tokens and design principles - components and behaviours - guidelines - documentation & validation of results)

  • Claude CodeDevelopment agent

    Generating guidelines & tokens - building the design system (Figma - code - GitHub) - sync workflow: the agent that can build and evolve the system from the rules I defined.

  • Chat GPTDesign and thinking agent

    A design and structuring partner to explore product problems, work on documentation and think about how the system should be understood by an AI.

Workflow

Aurélien Biard

Product thinking / UX / UI

ASMA DS GUIDELINES
Chat GPT
  • design / rules
  • documentation
  • exploration
Claude Code
  • build agent
  • implementation
  • GitHub / Figma
ASMA DS ASMA OS

Tasks & achievements

  1. Structuring the Design System

    • Overall system architecture
    • Organising foundations, tokens, components and patterns
    • Structuring variable categories
    • Defining relationships between primitive, semantic and alias tokens
    • Managing Desktop / Mobile modes
    • Setting up a consistent naming convention

  2. Design tokens

    • Defining colour primitives
    • Building semantic tokens
    • Managing aliases
    • Typography, spacing, dimensions, states, etc.

  3. Designing components

    A set of components meant to cover the needs of a business application.

  4. Documentation & guidelines

    • Component documentation
    • Usage rules
    • States and behaviours
    • UX guidelines
    • Accessibility
    • Use cases
    • Relationships between components
    • Rules meant to be understood by a human but also interpretable by an AI

  5. Figma → Code → AI

    Setting up a structure that lets information flow between:
    Design System → Figma → documentation → code → AI
    The challenge is to limit interpretations and divergences between the different environments.

This portfolio was itself built with Asma.ds, a concrete application of the Design System to a real product, from its foundations to its interface.

The next step

Asma.ds is the first step: building the system’s language and rules. The next step is to use this system to build a real product: Asma.os

Asma.os is a personal software environment to structure my day-to-day work: companies, contacts, projects, notes, references and tasks. The goal is not simply to create yet another productivity app. It is above all about putting Asma.ds to the test in a real product and continuing to experiment with a new design and development workflow assisted by AI agents.

View the GitHub repo(new tab)