Mlola UI
Mlola UI components, tokens and design rules for coding agents, with a markup checker
Sollte ich dies verwenden
Qualität und Sicherheit
Basierend auf einer automatisierten Analyse der Tool-Definitionen und der Einhaltung des Protokolls.
Kontextkosten
Dies ist die ungefähre Anzahl der Tokens, die jedes Mal verbraucht werden, wenn die Tools des Servers in den Kontext eines Modells geladen werden. Höhere Werte verringern die Aufmerksamkeit, die für andere Aufgaben verfügbar ist.
Installieren
Installation mit einem Klick
Fügen Sie dies Ihrer Datei `claude_desktop_config.json` hinzu:
{
"mcpServers": {
"mlola-ui": {
"command": "npx",
"args": [
"mlola-ui"
]
}
}
}Ausführbare Pakete
1.4.0stdioRemote-Endpunkte
https://ui.mlola.com/mcpstreamable-httpWas es kann
Tool-Inventar
Tools (6)
🟢get_design_rules
The rules for building UI with Mlola: compose first, color by role, measure with the scales, shared state words, touch and focus. Read once before writing UI.
Eingabe-Schema
{
"type": "object",
"properties": {},
"additionalProperties": false
}🟢search_components(query, kind, tier)
Find components, blocks, pages and templates by what they do (for example 'date range', 'chat input', 'pricing'). Returns name, tier (free or Mlola Pro) and a one-line description.
Eingabe-Schema
{
"type": "object",
"properties": {
"query": {
"type": "string",
"description": "Words describing what you need. Empty lists everything."
},
"kind": {
"type": "string",
"enum": [
"component",
"block",
"page",
"template"
]
},
"tier": {
"type": "string",
"enum": [
"free",
"pro"
]
}
},
"additionalProperties": false
}🟢get_component(name, include_source)
Everything needed to use one item: import, every prop with fixed values (variant, tone, size, side…) and its default, the classes it styles and the data-* values each reacts to, dependencies and the install command. Set include_source to read a free component's source.
Eingabe-Schema
{
"type": "object",
"properties": {
"name": {
"type": "string"
},
"include_source": {
"type": "boolean",
"default": false
}
},
"required": [
"name"
],
"additionalProperties": false
}🟢get_tokens(group)
The --ml-* tokens grouped by purpose (planes and ink, color roles, spacing, type, density, shape, depth, motion, layers…). Filter with a group name or part of a token name.
Eingabe-Schema
{
"type": "object",
"properties": {
"group": {
"type": "string",
"description": "For example 'spacing', 'color', 'shadow', 'radius'."
}
},
"additionalProperties": false
}🟢check_markup(markup)
Checks HTML or JSX: classes that do not exist, variant classes, data-* values a class does not react to, utility classes, misuse of data-theme or data-mode, and in style attributes and <style> blocks hand-written colors, overridden theme tokens and text faded with opacity. Run it on markup you wrote before finishing.
Eingabe-Schema
{
"type": "object",
"properties": {
"markup": {
"type": "string"
}
},
"required": [
"markup"
],
"additionalProperties": false
}🟢get_install_command(names)
How to set Mlola up: the commands to run in a project to add components, blocks, pages or templates (with the license step for Mlola Pro items), and the stylesheet link and script for a page with no build step. Leave names out for the setup alone.
Eingabe-Schema
{
"type": "object",
"properties": {
"names": {
"type": "array",
"items": {
"type": "string"
},
"description": "Item names from search_components, for example [\"button\", \"date-picker\"]."
}
},
"additionalProperties": false
}Community
Nachweis