The design language for the AI age

A new way to hand off design to AI assistants

Try the Figma Plugin Explore the Docs

Universal Design Markup Language (UDML) was created to work with today's coding assistants

Start with your design

Universal Design works best for professionals who regularly use auto-layout, components, and variables.

Generate UDML

This example is hand-written, but you can get a taste of UDML with our Figma Plugin. More advanced authoring tools coming soon!

<Component name="ListingCard">
	<Column name="cardContainer" cornerRadius="lg" gap="med">
	<!-- Image Carousel -->
	<Column name="carouselContainer">
 		<Carousel height="200px" autoScroll="false" onHover=showArrows(leftArrow, RightArrow) dotIndicators="true">
			<repeat>
				<Image><Data description="listing image" limit=10/></Image>
			</repeat>
		</Carousel>

		<Badge layer=2 variant="highlight" margin="16px" position="top-left">Superhost</Badge>
		<IconButton layer=2 icon="heart" variant="ghost" onClick="toggleFavorite" position="top-right" />
		
		<!-- Scroll arrows (shown on hover) -->
		<IconButton name="leftArrow" layer=2 visibility="hidden" icon="chevron-left" onClick="previousSlide" position="center-left"/>
		<IconButton name="rightArrow" layer=2 visibility="hidden" icon="chevron-right" onClick="nextSlide" position="center-right"/>
		
		<Interaction name="showArrows>
			<Action type="setProperty" property="visibility" value="true">
		</Interaction>
	</Column>

	<!-- Property Details -->
	<Column name="listingDetails" padding="md" justify="space-between">
		<Row name="topRow" gap="auto">
			<Text variant="title-sm">Groveland, California</Text>
			<Row name="starRating" gap="xs" align="center">
				<Icon name="star" size="sm" />
				<Text variant="body-sm">4.91</Text>
			</Row>
		</Row>
		<Text variant="body-sm">Yosemite National Park</Text>
		<Text variant="body-sm"><Data description="date range"</Data></Text>
		<Text variant="body-bold">$289/night</Text>
	 </Column>

	 </Column>
</Component>

Give it to an AI coding assistant

All this code was automatically generated by Claude from the UDML above with a single prompt. Try the interactions!

See the Pen Untitled by Mike M (@Mike-M-the-vuer) on CodePen.

Easy for designers, developers, and AIs to understand

Aspect	UDML	Traditional Design Systems
Expressiveness
Specificity	AI can interpret into any language or framework	Requires framework-specific library and implementation
Syntax	Concise, semantic, and designer-friendly	Verbose, technical, and developer-oriented
Completeness	AI can infer missing details and suggest improvements	Requires explicit, complete definitions
AI Integration
Interpretation	AI can understand partial structures and intent	AI must work within rigid constraints
Customization	AI can suggest and implement new patterns	AI limited to existing framework patterns
Implementation	AI can generate complete, framework-agnostic code	AI must follow framework-specific patterns
Flexibility
Component Structure	User-defined through complete structural definitions	Predefined, rigid classes
Data Binding	Declarative with semantic <data> nodes	Imperative with technical props/state

UDML's roadmap leads to better, faster design

1️⃣ Launch

Initial release of the concept, documentation, and Figma plugin

2️⃣ Build community

Engage the design and development communities to refine the spec and validate as a standard.

Update the Figma plugin to extract as much semantic data as possilble.

3️⃣ Integrate

Consider developing another Figma plugin that enables better semantic tagging within Figma.

Explore integration with Storybook and VS Code.

4️⃣ Innovate

Develop a model for a fully semantic, non-vector-based design tool that natively outputs UDML