Mlola UI
Mlola UI components, tokens and design rules for coding agents, with a markup checker
我該用這個嗎
品質與安全性
根據工具定義與協定合規性的自動化分析。
上下文成本
這是每次將伺服器的工具載入模型上下文時所消耗的約略 token 數量。數量越高，可用於其他工作的注意力就越少。
安裝
一鍵安裝
將以下內容加入你的 `claude_desktop_config.json` 檔案：
{
"mcpServers": {
"mlola-ui": {
"command": "npx",
"args": [
"mlola-ui"
]
}
}
}可執行的套件
1.4.0stdio遠端端點
https://ui.mlola.com/mcpstreamable-http它能做什麼
工具清單
工具（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.
輸入結構描述
{
"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.
輸入結構描述
{
"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.
輸入結構描述
{
"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.
輸入結構描述
{
"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.
輸入結構描述
{
"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.
輸入結構描述
{
"type": "object",
"properties": {
"names": {
"type": "array",
"items": {
"type": "string"
},
"description": "Item names from search_components, for example [\"button\", \"date-picker\"]."
}
},
"additionalProperties": false
}社群
證據