@ai-created/ui
Accent color

For designers / Figma Community

The whole system. In Figma.

Make your next mockup with editable components, semantic variables, and complete page templates. The same design decisions as the React system, ready to use on the canvas.

Open in Figma Make your first mockup

Free Community kit. A Figma account is needed to make your copy.

Component assets
48
Named variables
390
Text styles
100
Page templates
6

Inside the kit / Dashboard

Dark Figma dashboard template with a create action, four metrics, and a recent activity list.
Actual exports from the Figma file, shown with the red accent. Both themes use the same connected components. The kit includes 9 accent choices; this preview changes appearance only.

Built for the way you work

A working library, down to the details.

Change the instance, keep the component.

Choose supported variants, sizes, and states. Edit labels, show or hide optional content, swap icons, and fill content slots. Auto layout keeps the structure intact as your copy changes.

Component construction

Set the theme on the frame.

Apply light or dark mode to a parent frame and let semantic variables carry that choice through its components. Choose an accent independently. No separate light and dark component libraries to maintain.

Color and theme foundations

Design the moments between screens.

Loading, empty, error, permission, validation, and success examples are included where each flow needs them. Hover, keyboard focus, and disabled appearances are documented alongside the controls.

State and pattern guidance

Hand off decisions engineers can use.

Component anatomy, property mappings, content limits, and responsive guidance connect the Figma kit to the public React components. Link the relevant specification when you hand off a design.

Live component specifications

Start with a complete flow.

Six page templates, with 148 examples across desktop, mobile, light, dark, and the states each flow needs. Use them as a starting point for your content and decisions.

  1. Directory

    Search a collection, scan status, and open a record.

  2. Detail

    Show identity, attributes, context, and the next action.

  3. Form

    Collect input with validation, saving, and recovery.

  4. Settings

    Group preferences and make save feedback clear.

  5. Dashboard

    Bring key metrics and recent changes into focus.

  6. Onboarding

    Guide setup through progress, decisions, and completion.

From duplicate to design

Your first mockup.

The file includes its own foundations, authoring instructions, component pages, and QA guidance.

  1. Make your copy.

    Open the Community resource and choose Open in Figma. Sign in to add an editable copy to your drafts, then begin on the Getting started page.

  2. Choose a starting frame.

    Copy the closest desktop or mobile template onto a working page. Start with its ready state, then bring along the other states your flow needs.

  3. Set appearance, then content.

    Select the parent frame and set AI-Created UI / Semantic to light or dark. Choose the Accent mode, then edit component properties and content slots. Keep instances connected.

  4. Check the edges of your flow.

    Try longer labels, narrower frames, and failure states. Add implementation notes for keyboard behavior, validation, and announcements that a visual mockup cannot demonstrate.

A few things to know.

Copies and library updates
A Community copy is yours to edit. It does not receive future updates automatically; return to the Community resource for a newer version. For a shared team workflow, publish your copy as a library and enable it through Assets → Libraries in working files. Your team can then review the updates you publish.
Fonts and text editing
The kit uses Space Grotesk, Instrument Serif, and SF Mono. If Figma reports a missing font, make a licensed copy available to Figma or replace it in your duplicate. Check wrapping after any substitution.
Matching a mockup to code
Figma measurements match this playground’s 20px root size. The React package leaves the root size to your application, so rem-based dimensions can differ. Figma demonstrates layout and appearance; implemented keyboard behavior and accessibility are documented in the component specifications.
Usage and attribution
The Community file is shared under CC BY 4.0. Credit AI-Created UI by Marco van Hylckama Vlieg, link the license, and indicate changes. The React package is separately available under the MIT license.

Make it your starting point.

Open the kit, choose a template, and spend your time on the decisions that make your product yours.

Open in Figma