I’ve always been curious about how far we can push AI prototyping. I wanted to see if these tools — like Lovable, Figma Make, V0 — could actually create screens that feel like us. Not the generic, stock Tailwind stuff you see everywhere. So I did what most of us probably would: I tried to give the AI a better map. I built out a JSON instruction set that basically told the AI,
“Here’s our design system. Here’s how we think about typography, colors, spacing, and components. Please — please — don’t just throw in random buttons from your default kit.”
Here's the Innovaccer Design System and the AI prototyping boilerplate I created with the instructions below. While this wasn't a comprehensive boilerplate with all the components, it was able to achieve good adherence for validations.
{
"instructions":
{
"description": "This document provides guidelines for customizing design components, including typography, spacing, colors, and more. Do not use default Tailwind components; always use these custom tokens to compose screens. Map the names of the components below to their corresponding Tailwind classes.",
"audience": "AI prototyping tool"
},
"$schema": "https://tr.designtokens.org/format/format-module.json",
"$description": "Innovaccer Design System Customization Guidelines",
"typography":
{
"fontFamily":
{
"$value": "Nunito Sans, system-ui, -apple-system, BlinkMacSystemFont",
"$type": "fontFamily",
"$description": "Primary font with system fallbacks",
"$import": "https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap"
},
"defaultTextColor":
{
"$value": "#1F1F1F",
"$type": "color"
},
"typeScale":
{
"body":
{
"$value": "14px",
"$type": "fontSize",
"lineHeight": "20px"
},
"caption":
{
"$value": "12px",
"$type": "fontSize",
"lineHeight": "16px"
},
"heading1":
{
"$value": "24px",
"$type": "fontSize"
},
"heading2":
{
"$value": "20px",
"$type": "fontSize"
},
"heading3":
{
"$value": "18px",
"$type": "fontSize"
},
"heading4":
{
"$value": "16px",
"$type": "fontSize"
}
}
},
"spacing":
{
"unit":
{
"$value": "4px",
"$type": "dimension",
"$description": "Base spacing unit"
}
},
"icons":
{
"material":
{
"$value": "Material Icons",
"$type": "fontFamily",
"$import": "https://fonts.googleapis.com/icon?family=Material+Icons",
"$description": "Google Material Icons font for icon buttons and icon-label components",
"lineHeight": "inherit",
"fontSize": "16px"
}
},
"colors":
{
"primary":
{
"$value": "#0070DD",
"$type": "color"
},
"primaryHover":
{
"$value": "#005BB5",
"$type": "color"
},
"secondaryBg":
{
"$value": "#E5E5E5",
"$type": "color"
},
"neutral":
{
"$value": "#FFFFFF",
"$type": "color"
},
"neutralLight":
{
"$value": "#F4F5F7",
"$type": "color"
},
"neutralMid":
{
"$value": "#DFE1E6",
"$type": "color"
},
"neutralDark":
{
"$value": "#1F1F1F",
"$type": "color"
},
"success":
{
"$value": "#2EA843",
"$type": "color"
},
"successSubtle":
{
"$value": "#D7EFDF",
"$type": "color"
},
"warning":
{
"$value": "#FFC208",
"$type": "color"
},
"warningSubtle":
{
"$value": "#FFF5C7",
"$type": "color"
},
"error":
{
"$value": "#D93737",
"$type": "color"
},
"errorSubtle":
{
"$value": "#F9E2E2",
"$type": "color"
},
"info":
{
"$value": "#EAF5FF",
"$type": "color"
}
},
"components":
{
"button":
{
"base":
{
"fontFamily": "{fonts.body.value}",
"fontWeight": "400",
"lineHeight": "16px",
"borderRadius": "4px",
"padding": "8px 12px",
"height": "32px",
"fontSize": "14px",
"textColor": "{colors.neutralDark.value}",
"background": "{colors.secondaryBg.value}",
"hover":
{
"background": "#D5D5D5"
},
"disabled":
{
"background": "{colors.neutralMid.value}",
"textColor": "#A5ADBA"
},
"focusRing": "2px solid {colors.primaryHover.value}"
},
"sizes":
{
"small":
{
"fontSize": "12px",
"lineHeight": "16px",
"padding": "4px 8px",
"height": "24px",
"borderRadius": "4px"
},
"regular":
{
"fontSize": "14px",
"lineHeight": "16px",
"padding": "8px 12px",
"height": "32px",
"borderRadius": "4px"
},
"large":
{
"fontSize": "16px",
"lineHeight": "24px",
"padding": "8px 16px",
"height": "40px",
"borderRadius": "4px"
},
"iconOnly":
{
"small":
{
"width": "24px",
"height": "24px",
"borderRadius": "4px"
},
"regular":
{
"width": "32px",
"height": "32px",
"borderRadius": "4px"
},
"large":
{
"width": "40px",
"height": "40px",
"borderRadius": "4px"
}
}
},
"variants":
{
"primary":
{
"background": "{colors.primary.value}",
"text": "{colors.neutral.value}",
"hoverBg": "{colors.primaryHover.value}",
"disabledBg": "{colors.neutralMid.value}",
"disabledText": "#A5ADBA",
"focusRing": "2px solid {colors.primaryHover.value}"
},
"secondary":
{
"background": "{colors.secondaryBg.value}",
"text": "{colors.neutralDark.value}",
"hoverBg": "#D5D5D5",
"disabledBg": "{colors.neutralLight.value}",
"disabledText": "#A5ADBA",
"focusRing": "2px solid {colors.neutralMid.value}"
},
"icon":
{
"background": "{components.button.variants.secondary.background}",
"iconOnly": true
},
"transparent":
{
"background": "transparent",
"text": "{colors.neutralDark.value}",
"hoverBg": "rgba(0, 0, 0, 0.04)",
"focusRing": "2px solid {colors.neutralMid.value}"
}
},
"iconUsage":
{
"fontFamily": "{icons.material.value}",
"import": "{icons.material.$import}",
"placement": "left or right of label, or centered if icon-only"
}
},
"badge":
{
"base":
{
"fontSize": "12px",
"fontWeight": "bold",
"textTransform": "uppercase",
"lineHeight": "16px",
"padding": "2px 4px",
"borderRadius": "4px",
"maxHeight": "20px"
},
"filled":
{
"success":
{
"bg": "{colors.success.value}",
"text": "{colors.neutralLight.value}"
},
"warning":
{
"bg": "{colors.warning.value}",
"text": "#6B4A06"
},
"error":
{
"bg": "{colors.error.value}",
"text": "{colors.neutralLight.value}"
},
"neutral":
{
"bg": "{colors.secondaryBg.value}",
"text": "{colors.neutralDark.value}"
},
"primary":
{
"bg": "{colors.primary.value}",
"text": "{colors.neutralLight.value}"
}
},
"subtle":
{
"success":
{
"bg": "{colors.successSubtle.value}",
"text": "#154D26"
},
"warning":
{
"bg": "{colors.warningSubtle.value}",
"text": "#6B4A06"
},
"error":
{
"bg": "{colors.errorSubtle.value}",
"text": "#631919"
},
"primary":
{
"bg": "#DCECF9",
"text": "#003365"
},
"neutral":
{
"bg": "{components.badge.filled.neutral.bg}",
"text": "{components.badge.filled.neutral.text}"
}
}
},
"pill":
{
"base":
{
"fontSize": "12px",
"fontWeight": "bold",
"textTransform": "uppercase",
"padding": "2px 6px",
"borderRadius": "20px",
"minWidth": "20px",
"maxHeight": "20px",
"lineHeight": "16px",
"textAlign": "center"
},
"variants":
{
"filled": "{components.badge.filled}",
"subtle": "{components.badge.subtle}"
}
},
"card":
{
"padding": "16px",
"borderRadius": "8px",
"header":
{
"fontSize": "16px",
"fontWeight": "600",
"marginBottom": "16px"
},
"variants":
{
"subtle":
{
"background": "#ffffff",
"border": "1px solid #E5E5E5",
"shadow": "none",
"usage": "Use when the card is placed on a light or white background. Ideal for dashboard sections, forms, or grouped content on clean surfaces."
},
"regular":
{
"background": "#ffffff",
"border": "none",
"shadow": "0px 1px 4px rgba(0, 0, 0, 0.16)",
"usage": "Use when the card is placed on a grey or colored background. Suitable for modals, overlays, or areas needing more visual depth and separation."
}
}
},
"table":
{
"header":
{
"fontWeight": "bold",
"fontSize": "14px",
"textColor": "{colors.neutralDark.value}",
"background": "transparent",
"borderRadius": "8px"
},
"variants":
{
"regular":
{
"rowHeight": "44px",
"cellPadding": "12px"
},
"compact":
{
"rowHeight": "24px",
"cellPadding": "12px"
}
},
"border": "1px solid #E5E5E5",
"zebra":
{
"even": "#F9FAFB",
"odd": "#FFFFFF"
},
"buttonUsage":
{
"allowedVariants":
[
"transparent"
],
"note": "Only transparent icon buttons should be used inside table rows for actions."
}
},
"datepicker":
{
"highlight": "{colors.primary.value}",
"hover": "{colors.primaryHover.value}",
"text": "{colors.neutralDark.value}",
"disabledText": "{colors.neutralMid.value}",
"background": "{colors.neutralLight.value}",
"cellRadius": "4px",
"typography":
{
"date": "14px",
"header": "16px"
},
"spacingUnit": "{spacing.unit.value}"
},
"tabs":
{
"fontSize": "14px",
"fontWeight": "500",
"padding": "12px 12px",
"underline": "1px solid #C5C5C5",
"states":
{
"selected":
{
"text": "{colors.primary.value}",
"borderBottom": "2px solid {colors.primary.value}",
"underlineFit": "content",
"paddingInline": "4px"
},
"default":
{
"text": "#707070",
"borderBottom": "none"
}
},
"types":
{
"labelOnly":
{},
"withCount":
{
"countPill":
{
"extends": "pill.base",
"marginRight": "8px"
}
}
}
},
"dropdown":
{
"select":
{
"background": "{colors.secondaryBg.value}",
"textColor": "{colors.neutralDark.value}",
"padding": "8px 12px",
"borderRadius": "4px",
"minWidth": "160px",
"icon": "{icons.material.value}"
},
"popover":
{
"background": "{card.background}",
"shadow": "0px 4px 16px rgba(0,0,0,0.16)",
"itemPadding": "12px 16px",
"itemStates":
{
"default":
{
"textColor": "{colors.neutralDark.value}",
"background": "transparent"
},
"hover":
{
"textColor": "{colors.neutralDark.value}",
"background": "#F4F4F4"
},
"selected":
{
"textColor": "{colors.primary.value}",
"background": "#E6F1FC"
}
},
"scroll":
{
"maxHeight": "auto",
"customScrollbar": true
}
}
},
"banner":
{
"padding": "16px 20px",
"borderRadius": "4px",
"shadow": "0px 4px 8px rgba(0,0,0,0.04)",
"iconSize": "16px",
"actionsGap": "8px",
"types":
{
"success":
{
"bg": "{colors.successSubtle.value}",
"text": "#154D26"
},
"warning":
{
"bg": "{colors.warningSubtle.value}",
"text": "#6B4A06"
},
"error":
{
"bg": "{colors.errorSubtle.value}",
"text": "#631919"
},
"neutral":
{
"bg": "{colors.info.value}",
"text": "{colors.neutralDark.value}"
}
}
},
"navigation":
{
"fontSize": "14px",
"lineHeight": "20px",
"default":
{
"text": "{colors.neutralDark.value}",
"background": "transparent"
},
"active":
{
"text": "#00509F",
"background": "{colors.info.value}"
},
"hover":
{
"text": "{colors.primaryHover.value}",
"background": "{colors.info.value}"
},
"container":
{
"padding": "8px 16px",
"borderRadius": "20px"
}
},
"navbar":
{
"height": "48px",
"padding": "0 16px",
"fontSize": "14px",
"lineHeight": "20px",
"text":
{
"default": "{colors.neutralDark.value}",
"selected": "{colors.primary.value}"
}
},
"avatarGroup":
{
"size": "32px",
"overlap": "-8px",
"container":
{
"padding": "0",
"borderRadius": "50%"
},
"avatar":
{
"borderRadius": "50%",
"border": "none"
},
"count":
{
"fontSize": "14px",
"fontWeight": "600",
"lineHeight": "20px",
"textColor": "{colors.neutralLight.value}",
"background": "{colors.neutralDark.value}",
"borderRadius": "50%",
"padding": "4px 8px"
}
},
"input":
{
"sizes":
{
"small":
{
"fontSize": "12px",
"lineHeight": "16px",
"padding": "4px 8px",
"height": "24px",
"borderRadius": "4px"
},
"regular":
{
"fontSize": "14px",
"lineHeight": "20px",
"padding": "6px 12px",
"height": "32px",
"borderRadius": "4px"
},
"large":
{
"fontSize": "16px",
"lineHeight": "24px",
"padding": "8px 16px",
"height": "40px",
"borderRadius": "4px"
}
},
"container":
{
"background": "#ffffff",
"border": "1px solid #D5D5D5",
"borderRadius": "4px"
},
"field":
{
"textColor": "{colors.neutralDark.value}",
"placeholderColor": "#707070",
"focus":
{
"border": "1px solid {colors.primary.value}",
"background": "{colors.neutralLight.value}"
},
"disabled":
{
"background": "{colors.neutralMid.value}",
"textColor": "#A5ADBA",
"border": "1px solid {colors.neutralMid.value}"
}
},
"variants":
{
"default":
{
"icon": null,
"padding": "inherit"
},
"iconLeft":
{
"iconPlacement": "left",
"iconPadding": "8px",
"labelPadding": "8px 8px 8px 32px"
},
"iconRight":
{
"iconPlacement": "right",
"iconPadding": "8px",
"labelPadding": "8px 32px 8px 8px"
},
"textarea":
{
"resizable": "vertical",
"minHeight": "80px",
"lineHeight": "20px",
"padding": "8px 12px",
"fontSize": "14px",
"borderRadius": "4px"
}
},
"icon":
{
"fontFamily": "{icons.material.value}",
"import": "{icons.material.$import}"
}
},
"statusIndicator":
{
"fontSize": "14px",
"fontWeight": "600",
"textColor": "{colors.neutralDark.value}",
"dot":
{
"size": "8px",
"marginRight": "8px"
},
"statuses":
{
"default":
{
"dotColor": "{colors.neutralDark.value}"
},
"success":
{
"dotColor": "{colors.success.value}"
},
"warning":
{
"dotColor": "{colors.warning.value}"
},
"error":
{
"dotColor": "{colors.error.value}"
}
}
},
"chip":
{
"description": "Used to display selected filters, categories, or attributes that can be individually dismissed.",
"fontSize": "14px",
"lineHeight": "20px",
"fontWeight": "400",
"icon":
{
"placement": "left",
"gap": "4px",
"fontFamily": "{icons.material.value}"
},
"container":
{
"padding": "2px 8px",
"borderRadius": "12px",
"display": "inline-flex",
"alignItems": "center"
},
"states":
{
"default":
{
"background": "transparent",
"textColor": "{colors.neutralDark.value}",
"border": "1px solid #D5D5D5"
},
"selected":
{
"background": "#EEF6FC",
"textColor": "#00509F",
"border": "1px solid #97C5F0"
}
},
"variants":
{
"default":
{
"iconLeft": true,
"dismissible": false
},
"dismissible":
{
"iconLeft": true,
"removeIcon":
{
"placement": "right",
"gap": "4px",
"fontFamily": "{icons.material.value}",
"hoverColor": "#707070"
}
}
}
},
"sara":
{
"description": "AI visual element used to represent Sara — the assistant. Includes a sparkle icon with or without gradient background.",
"base":
{
"icon":
{
"svg": "<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'> <path d='M7 0C7 3.86599 10.134 7 14 7C10.134 7 7 10.134 7 14C7 10.134 3.86599 7 0 7C3.86599 7 7 3.86599 7 0Z' fill='white'/> </svg>"
},
"gradient":
{
"svg": "<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'><rect width='32' height='32' rx='16' fill='white'/><rect width='32' height='32' rx='16' fill='url(#paint0_linear_29607_71499)'/><rect width='32' height='32' rx='16' fill='url(#paint1_linear_29607_71499)' fill-opacity='0.24'/><defs><linearGradient id='paint0_linear_29607_71499' x1='5.57143' y1='3.28571' x2='26.0714' y2='27.4286' gradientUnits='userSpaceOnUse'><stop stop-color='#E81F76' stop-opacity='0.8'/><stop offset='1' stop-color='#EB5324'/></linearGradient><linearGradient id='paint1_linear_29607_71499' x1='19' y1='22.5' x2='26.5' y2='33.5' gradientUnits='userSpaceOnUse'><stop stop-color='#FFC208' stop-opacity='0'/><stop offset='1' stop-color='#FFC208'/></linearGradient></defs></svg>"
}
},
"variants":
{
"withBackground":
{
"description": "Sparkle in center of a circular gradient background.",
"padding": "6px",
"shape": "circular",
"background": "base.gradient",
"iconAlignment": "center"
},
"iconOnly":
{
"description": "Sparkle icon only, filled with the gradient.",
"background": "none",
"iconFill": "linear-gradient(135deg, #E81F76CC 0%, #EB5324 100%)",
"iconAlignment": "center"
}
}
},
"aiButton":
{
"extends": "button.base",
"description": "AI action button styled like the base button but uses the sparkle icon and AI-specific gradient styling.",
"icon":
{
"placement": "left",
"svg": "<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='url(#saraGradient)'><defs><linearGradient id='saraGradient' x1='0' y1='0' x2='20' y2='20' gradientUnits='userSpaceOnUse'><stop stop-color='#E81F76' stop-opacity='0.8'/><stop offset='1' stop-color='#EB5324'/></linearGradient></defs><path fill-rule='evenodd' clip-rule='evenodd' d='M0 10C5.52285 10 10 5.52285 10 0C10 5.52285 14.4772 10 20 10C14.4772 10 10 14.4772 10 20C10 14.4772 5.52285 10 0 10Z'/></svg>",
"gap": "8px"
},
"background": "linear-gradient(277deg, rgba(227, 28, 121, 0.15) 0%, rgba(231, 56, 79, 0.24) 28%, rgba(240, 125, 0, 0.15) 100%)",
"textColor": "{colors.neutralDark.value}",
"hover":
{
"background": "linear-gradient(277deg, rgba(227, 28, 121, 0.25) 0%, rgba(231, 56, 79, 0.34) 28%, rgba(240, 125, 0, 0.25) 100%)"
},
"active":
{
"background": "linear-gradient(277deg, rgba(227, 28, 121, 0.35) 0%, rgba(231, 56, 79, 0.44) 28%, rgba(240, 125, 0, 0.35) 100%)"
}
},
"aiBubble":
{
"description": "Styled message bubble used for AI responses in a chat interface. It has a soft gradient background, colored border, and rounded corners.",
"borderRadius": "12px",
"border": "1px solid #FEAC5F",
"background": "linear-gradient(274deg, rgba(227, 28, 121, 0.02) 8.78%, rgba(240, 125, 0, 0.04) 93.41%)",
"padding": "12px 16px",
"fontSize": "14px",
"lineHeight": "20px",
"textColor": "{colors.neutralDark.value}",
"maxWidth": "75%",
"alignment": "left",
"variants":
{
"default":
{
"background": "linear-gradient(274deg, rgba(227, 28, 121, 0.02) 8.78%, rgba(240, 125, 0, 0.04) 93.41%)",
"border": "1px solid #FEAC5F"
},
"highlighted":
{
"background": "linear-gradient(274deg, rgba(227, 28, 121, 0.08) 8.78%, rgba(240, 125, 0, 0.12) 93.41%)",
"border": "1px solid #FEAC5F"
}
}
},
"logo":
{
"description": "Innovaccer logo using a layered geometric SVG design with a pink gradient fill. Used in navigation bars and marketing materials.",
"type": "svg",
"svg": "<svg xmlns='http://www.w3.org/2000/svg' width='18' height='22' viewBox='0 0 18 22' fill='none'><path d='M5.19805 13.214L0.750069 20.2308C0.569441 20.5157 0.553533 20.8811 0.708657 21.182C0.863781 21.4828 1.16486 21.6706 1.49244 21.6706H10.3905C10.7181 21.6706 11.0191 21.4828 11.1743 21.182C11.3294 20.8811 11.3135 20.5157 11.1328 20.2308L6.68487 13.2118C6.51924 12.9522 6.23991 12.7964 5.9409 12.7969C5.64189 12.7973 5.36298 12.9539 5.19805 13.214Z' fill='#E81F76'/><path opacity='0.2' d='M5.19805 8.72436L0.750069 1.70541C0.569441 1.42045 0.553533 1.05506 0.708657 0.754203C0.863781 0.453348 1.16486 0.265625 1.49244 0.265625H10.3905C10.7181 0.265625 11.0191 0.453348 11.1743 0.754203C11.3294 1.05506 11.3135 1.42045 11.1328 1.70541L6.68487 8.72436C6.52024 8.98515 6.24088 9.14215 5.94146 9.14215C5.64203 9.14215 5.36268 8.98515 5.19805 8.72436V8.72436Z' fill='#E81F76'/><path opacity='0.4' d='M11.7152 2.18946L7.26724 9.20841C7.08678 9.49405 7.07122 9.85991 7.22671 10.1611C7.3822 10.4623 7.68366 10.6502 8.01168 10.6504H16.9076C17.2353 10.6494 17.5361 10.4612 17.691 10.1601C17.846 9.85911 17.8303 9.49372 17.65 9.20841L13.202 2.18946C13.0368 1.92964 12.7576 1.77344 12.4586 1.77344C12.1596 1.77344 11.8805 1.92964 11.7152 2.18946V2."
}
}
}Surprisingly? It worked.
The outputs started to actually look like our system. Not perfect, but enough that I could see our brand in them. Of course, the code wasn’t immediately usable. It was still stitched together from the prototyping tool’s base components — not our codebase. But honestly, that wasn’t the point. The point was: could we get the system feel right, faster?
What This Means for Designers
I’ve been thinking a lot about what AI prototyping actually does for us. No, it’s not here to replace designers. But it is here to change where we focus our time. When AI can handle the repetitive parts — laying out a basic screen, applying design tokens, following your system rules — that’s where we get to move faster.
It frees us up to spend time where it really matters:
Building narratives
Making decisions
Solving the harder, messier problems
Here’s the thing though:
For AI to be useful to you, you need to know your design system really well. You can’t just wave vaguely at your Figma files and expect the AI to “figure it out.” You have to teach it. You have to codify it. You have to speak its language. And that’s the shift.
Designers who know their systems deeply — who can think in tokens, constraints, and patterns — they’re the ones who will get the most out of this.
Where this is headed
I’ve been watching tools like Lovable, and honestly, they’re getting close. They’ve started releasing libraries that seem to finally get this idea — generating components that respect your system, not just the tool’s defaults. It’s not perfect yet. But it’s getting there.
And I want my team (and you, if you’re listening) to start experimenting now.
Not because the tools are ready.
But because this is where prototyping is going.
A Few Practical Tips to Get Started
If you want to play with AI prototyping in your own system:
Teach the AI your design system.
The more you can spell out your tokens, component rules, and variants, the more the AI will sound like you.Don’t wait for perfect handoff.
Focus on speed and alignment. You’re not shipping this code — you’re getting faster validation.Push the tools.
Remix boilerplates. Add system instructions. See where they break. Every experiment makes the next one better.Know your system. Really know it.
AI is like a mirror. If you’re vague, the output is vague. The more clarity you bring, the more it can help you.
AI isn’t taking our jobs. But it’s definitely changing them. It’s moving us from pixel pushers to system architects. From tool operators to system teachers.
And honestly? I think that’s pretty exciting.