Irresistible by humans. Scaled by AI.

Currently Design System Lead at PUMA, connecting design, brand, product, CRO & UXR, engineering, content, marketing, and AI, so a global brand can move fast and still feel like one.

Portrait of me in a grey quarter-zip sweater in front of a bookshelf.
LughniDesign System Lead
01/ 06

Design System

Leading the design system of a global brand and scaling it to 25 countries across channels.

Overview

What it covers, how it is structured, and how it is governed.

Visual brand language→Tokens→Components→Patterns→Templates

Web and App UI Unification

Bringing web and app onto one shared visual language: the same tokens and components on every screen.

€120
40414243
Add to bag
€120
40414243
Add to bag
WebApp

Scaling Design

Consistent tokens, UI, and patterns across platforms.

90%

Adoption by Designers and Engineers up to 90%

Built a design system the team actually uses.

02/ 06

Design Ops

Founding an AI prototyping culture, and the operations that keep the system running as it grows.

AI Prototyping

Made prototyping with AI part of the team's workflow, turning ideas into working, on-brand prototypes in hours.

Figma Make
Create a product listing page for running shoes, with filters and a two-column grid.
Done. Built with the design system: Grid/Products Card/Product Chip/Filter
Live prototype
Running24 items
AllNitroRoadTrailSale
Sort byNewest ▾
New
Road Pro€120
-20%
Trail X€140
Daily€95
Tempo€160
-20%
Race€110
Easy Run€130
-20%
Long Run€150
Speed€85

Data-Driven Design

Figma Make prototypes become A/B tests, with Claude Code and Gemini writing the test code in the A/B testing platform, so decisions come from real user data.

Figma MakeClaude CodeGeminiA/B testing

AI Prototyping for Every Role

Bringing AI prototyping into each role's daily work, so anyone with an idea can build it and test it.

DesignProductCRO & UXREngineeringContentMarketing

Guardrails and Adoption

Clear ownership, simple rules, and training and champions in each team, so AI-made work stays on-system. The work behind 90% adoption.

Tools and Impact

Shared libraries, prompts and Figma Make starting points built on the system, with results in speed, quality and tests shown to leadership.

03/ 06

People Management

Leading a dedicated design system team, collaborating with a diverse cross-functional team.

Connecting Disciplines

Collaborating with different teams to create the best possible UX, while managing expectations at every level.

  • Design
  • Product
  • CRO & UXR
  • Engineering
  • Content
Design systemOne source of truth
  • Marketing
  • AI
  • IT
  • Legal
  • Data

Leading Through AI Change

Helping people adopt AI with confidence, so new tools strengthen their craft rather than replace it.

  1. POC

    Prove the idea fast.

  2. Validate

    Test with real users.

  3. Business Value

    Measure the impact.

  4. Workshop

    Train teams and champions.

  5. Released

    Part of everyday work.

Growing People

Mentoring designers and engineers, and building a team that owns the system with me.

Building the Team

Hiring, onboarding and setting clear goals, so the team knows what good looks like.

Stakeholder Alignment

Translating the design system and AI into business language, so leadership, brand and regional teams across 25 countries align on priorities and trade-offs.

Switching modes

Ready to see my technical side?

AI-ready systems, scalable discovery and automated delivery.

↓
04/ 06

AI-Ready Design System

How I made the system readable and usable by AI.

AI-Ready Structure

Clear naming, tokens stored as Figma variables, and documentation written for AI.

Figma MCP

Lets AI tools like Claude Code read real components and variables directly from Figma.

Design System MCP

My own MCP server that gives AI the rules, usage guidelines, and do's and don'ts.

Code Connect

Links Figma components to real code components, so AI uses the real code and doesn't invent new code.

Actions › Button
/** @component ButtonPrimary * category: actions * package: @ds/button * guidance: Always use the brand colour token. Never restyle for campaigns. */
IN DOCS
Design systemComponentsTokens
Button primary Brand locked
Always use the brand colour token. Never restyle for campaigns.
buttonprimarybrand
IN CODE
Component documentation ×
Description
primary button, brand, call to action
Always use the brand colour token. Never restyle for campaigns.
IN FIGMA
schema.ts
export const Component =
  z.object({
    name: z.string(),
    guidance: z.string(),
  });
guidance.md
## Button primary
Always use the brand
colour token.
- Do: use brand tokens
- Don't: campaign colours
components.json
{ "name": "ButtonPrimary",
  "props": ["size", "icon"],
  "variant": "primary",
  "brandLocked": true }
tokens.json
{ "button.primary.bg":
    { "$value": "{color.brand}" },
  "button.primary.label":
    { "$value": "#FFFFFF" } }
Verify DS codegenCI pipeline
Figma MCPCaptures design metadata from Figmasource: Figma
Design System MCPServes the code: components, tokens and rulessource: structured content
  • Claude
  • Cursor
  • Gemini
  • ChatGPT
  • Muse
  • Copilot
05/ 06

Discovery at Scale

A framework to scale A/B testing and UX research, turning ideas into live, on-brand tests in hours and scaling weekly testing to 6 times the usual pace.

AI Prototyping

Founding the AI prototyping culture. Turning ideas into working, on-brand prototypes in hours.

Figma MakeClaude CodeGitHub CopilotGemini

AI-Assisted Testing & Research

Prototypes move into live A/B tests & UX research in a fraction of the usual time, so ideas are proven with real users and data before they're fully built.

A/B testingUX researchClaude Code

Product Managers

AI that lets product managers turn an idea into a working, on-brand prototype and a live test, so decisions come from real users and data before anything is fully built.

Claude CodeFigma MakeDesign systemA/B testing
A/B testing

From Idea to Proof

Every step uses the design system, so a test variant looks like the real product.

IdeaA hypothesis→AI PrototypeOn-brand→Test buildAI-assisted→Live testReal users→DecisionShip or drop
UX research

From Question to Insight

Research runs on realistic, on-brand prototypes, so users react to the real product, not a mockup.

QuestionWhat to learn→AI PrototypeRealistic→Study buildAI-assisted→SessionsReal users→InsightLearn & iterate↺ Prototype again
06/ 06

Delivery at Scale

AI for designers and developers, powered by one design system and a strong AI infrastructure, scaling both design and engineering delivery.

Designers

AI that scales design on the Figma canvas, combining different MCPs to raise design quality and scalability.

FigmaClaude CodeMCPsDesign system

Developers

AI that scales design implementation in code with 80% accuracy, using Claude Code with Figma MCP, Design System MCP and Code Connect.

Claude CodeFigma MCPDesign System MCPCode Connect
Design with AI

From Prompt to On-Brand Design

AI drafts with library components only, checks itself against the system, and the designer adds the craft.

PromptA design brief→AI layoutLibrary only→AI checkTokens & states→ReviewDesigner craft→HandoffReady to build
Build with AI

From Design to Production Code

Claude Code reads the real design, maps it to real components and follows the system's rules, so engineers review and iterate. With high accuracy, design-to-code implementation scales and more features ship faster.

Figma designThe source→Figma MCPReads design→Code ConnectReal components→DS MCPRules check→UI FrontendComponents→Pull requestReady to review

The short version

One system, critical infrastructure, four steps from foundation to shipping.

  1. Design SystemThe foundation.
  2. AI-readyMakes it powerful.
  3. DiscoveryTeams learn faster.
  4. DeliveryTeams ship faster.