BUILDING
design
systems
WITH AI

My approach depends on what already exists. If a system is in place, I use AI (Claude) to extend it while staying consistent. If nothing exists yet, I use AI to quickly establish the foundation and build documentation, components, and code together. Both paths are shown below.

A 3D animated depiction of a two-layer LEGO brick, with a red bottom layer and a purple top layer with four studs, floating in mid-air against a gradient blue background.
Path A

A design system already exists

Goal: add a new component without drifting from what's already there.

  • Ideate the pattern
    A designer sketches the new component in Figma — by hand, or by prompting Figma Make for first-pass variants.
    Figma
  • Pull it into Claude
    Claude reads the new frame through the Figma MCP server — layers, variants, auto-layout, and which tokens it uses.
    Figma MCP
  • Check it against the system
    Claude reads the design-system docs for naming conventions, token names, and accessibility rules that already apply.
    Docs MCP
  • Match existing code patterns
    Claude reads the component library in the repo — how similar components are structured, prop naming, test conventions.
    Repo MCP
  • Generate the component
    Claude writes code that reuses existing tokens and primitives, then opens a branch and a pull request.
    ClaudeRepo MCP
  • Update the docs
    Claude drafts the usage guidelines, props table, and links back to the source Figma frame.
    Docs MCP
  • Review and merge
    Design and engineering review the PR together. Once merged, the system has grown by one component — fully wired end to end.
    Repo
Path B

No design system exists

Goal: stand one up quickly, from whatever fragments already exist in the product.

  • Audit the code
    Claude scans the product repo to reverse-engineer the colors, spacing, type, and recurring UI patterns already shipped.
    Repo MCP
  • Audit any loose Figma files
    If design files exist anywhere, Claude reads those too. If not, this step is simply skipped — code is the source of truth.
    Figma MCP
  • Ideate the foundations
    Use Figma Make to rapidly prototype a small core set — button, input, card — from the audited patterns, or design them by hand.
    Figma
  • Define the tokens
    Claude proposes a token set — color, type, spacing, radius — from the audit and new ideation, and writes it up as the first docs.
    ClaudeDocs MCP
  • Scaffold the codebase
    Claude sets up the component library structure — folder conventions, build config, first components wired to the new tokens.
    Repo MCP
  • Build the loop
    For each next component: ideate → Claude reads Figma → checks docs → writes code → docs updated. All three grow in lockstep.
    Figma MCPDocs MCPRepo MCP
  • Add governance
    Claude drafts contribution guidelines and a sync check so Figma, docs, and code don't drift apart as the system scales.
    Docs

UX
Process

I use the Double Diamond to cut through ambiguity and make high-impact decisions quickly, aligning user needs, business goals, and system constraints to deliver scalable, production-ready solutions. This approach allows me to identify the right problems early, reduce unnecessary iteration, and ensure what we build is both effective and sustainable at scale.

What
Guides
My
Design

  • Consistency is Key
    Consistency is a fundamental principle of my UX design process. From my experience, it helps users navigate and interact with the product more easily. Below are some guidelines I follow to ensure a consistent user experience:

    Color: Use a consistent color palette and typography throughout your product.

    Pattern: Follow established design patterns and conventions. (NNG Group & Baymard)

    Spacing: Ensure consistent spacing and alignment of elements.

    Copy: Use consistent terminology, labels, and copy to ensure users recognize your brand.

    Responsive Design
    With the increasing use of mobile devices, responsive design is crucial. It ensures that the product adapts to different screen sizes and devices. Here are some guidelines for responsive design that I practice daily:

    Fluid Grids: Use fluid grid layouts that adapt to different screen sizes.

    Flexible Images: Ensure images scale and adjust within their containers.

    Touch-Friendly: Design touch-friendly interfaces with appropriate touch targets.

    Viewport Meta Tag: Use the viewport meta tag to control layout on mobile browsers.

    Breakpoints: Define breakpoints where the layout changes to accommodate different screen sizes.

    Typography: Use scalable typography that adjusts to different screen sizes for readability.

    Testing: Test designs on multiple devices and screen sizes to ensure responsiveness.

  • I follow these key principles of effective UI design which helps me contribute to creating visually appealing and user-friendly interfaces.

    Consistency: Ensure consistency in visual elements, typography, and interaction patterns throughout the interface.

    Simplicity: Keep the interface simple and intuitive, avoiding unnecessary complexity and clutter.

    Hierarchy: Establish a clear visual hierarchy to guide users' attention and prioritize important elements.

    Color and Contrast: Use color and contrast effectively to create visual interest and enhance readability.

    Whitespace: Utilize whitespace strategically to create breathing room and improve visual clarity.

    Accessibility: Ensure the interface is accessible to users with disabilities, following WCAG guidelines.

    Feedback: Provide clear and timely feedback to users to confirm their actions and guide them through the interface.

    Responsive Design: Design interfaces that adapt seamlessly to different screen sizes and devices.

  • Design for Everyone
    Accessibility is at the foundation of my design process. It is important to me to ensure inclusivity for all users and keep the company safe from fines and legal action.

    • Provide alternative text for images
    • Ensure color contrast meets accessibility standards
    • Provide keyboard navigation
    • Color contrast checkers: WebAIM Contrast Checker, Color Contrast Analyzer
    • Utilize AI tools to scan my designs in Figma