AI that cannot make things up
It reads the real list of parts before it builds. If a part is not in the kit, it cannot use it.
Components in Vue and Rust
Artelier UI Kit
The parts every screen of mine is built from.
The Artelier UI Kit is how I build. One set of components, written twice: in Vue for websites and in Rust for apps that run on your computer. When I build with AI, it gets these parts and their rules, and nothing else. It is shown in full on artelier.agency, with the code for every part.
UI Kit See Artelier UI Kit
- Role
- Design and build
- Type
- Component kit and MCP server
- Built with
- Vue, Nuxt, Rust, Dioxus
01 The problem
Ask AI for a screenand it guesses.
AI is quick at writing interfaces. But left alone it makes things up: buttons in sizes that do not exist, colours from nowhere, a red delete button shouting louder than the save button.
Fixing that by hand takes longer than building it yourself. I wanted AI to build the way I do, from the parts I already trust.
02 What I did
What I did
- 01
Built every part once
Buttons, fields, tables, charts, menus, page sections. Each one follows the same rules for spacing, colour and depth.
- 02
Wrote it again in Rust
The same parts, the same names and the same look, for desktop apps. A screen designed for the web works in an app too.
- 03
Gave it to AI through MCP
MCP is a way to hand AI tools. Mine lets it look up every part, its options and its rules before it writes a line.
- 04
Showed the code
Every part is on artelier.agency, working, with its code beside it. It is there to show how I work, not as a library to download.
03 Details
Details that matter
The rules travel with the parts
One accent colour per screen, never on a delete button. Numbers that line up. Status that is never shown by colour alone.
Two languages, one look
The Vue and Rust kits share the same names and the same stylesheets, so a website and an app feel like one product.
This site, too
The grey, the soft depth and the type you are looking at come from the same system.
- 121
- Components, in Vue and Rust
- 12
- Groups, sorted by job
- 9
- Tools the MCP server gives AI
Artelier UI Kit
121 components, in Vue and Rust.
The parts every screen of mine is built from, written twice: in Vue for the web and in Rust for native apps. When I build with a model, an MCP server hands it these parts and their rules, so it uses nothing else. They are shown with their code to show how I work; they are not a library to download.
- Surfaces3
CardFrame TabWell
- Actions6
ButtonIcon ButtonLinkMenuSegmentedTheme Toggle
- Inputs6
ChoiceDaterangeFieldNumberRangeTag
- Data display14
BadgeBarsChart ChoiceCount UpData GridDeltaDescription listGaugeHeatmapMeterProgressSparklineStatStatus
- Disclosure5
AccordionDrawerPopoverStepsTree
- Navigation3
CrumbsPagerTabs
- Feedback7
BannerEmptyLoadingModalSkeletonToast HostTooltip
- Patterns6
Dash EmptyFilter BarGantt ChartKPI RowSummary DetailTable Screen
- Elements38
Alert DialogAspect RatioAttachmentAvatarBubbleCalendarCarouselCode BlockCollapsibleComboboxContext MenuDate PickerDirectionHover CardIconInput GroupInput OTPItemKbdLabelLine ChartMarkerMenubarMessageMessage ScrollerNative SelectNav MenuQuestionnaireResizableScroll AreaSelectSeparatorSheetSpinnerToggleToggle GroupTraceTypography
- Page sections17
Contact FormContent SectionCTA BandFAQ SectionFeature GridHero SectionImage SectionLogo MarqueeMarqueePricing SectionScreen TourSite FooterSite NavStatement SectionStory SectionWork ListWork Section
- Docs5
App WindowCalloutDoc NavDoc ShellScreenshot
- Site chrome11
Blog MetaBrand MarkCommand PaletteDash ShellLocal TimeMobile NavPalette PanelProject LogoReveal HeadingTheme LabWordmark
04 For your site
What you can take from it.
If you use AI to build, give it your parts instead of letting it invent them. Even a short list of your colours, fonts and buttons, written down, keeps everything it makes looking like you.
Want something like this?
Want a site or an app built from a system like this one? Tell me about it.
Start a project
Tell me what you want to build.
Pick what you need and see the price right here, or just send a few lines. I read every message and reply myself.
What happens next
See all prices and what each includes