Mlola UI
Mlola UI components, tokens and design rules for coding agents, with a markup checker
사용해야 할까요
품질 및 안전성
도구 정의와 프로토콜 준수에 대한 자동 분석을 기반으로 합니다.
컨텍스트 비용
이는 서버의 도구가 모델의 컨텍스트에 로드될 때마다 소비되는 대략적인 토큰 수입니다. 수치가 높을수록 다른 작업에 사용할 수 있는 주의가 줄어듭니다.
설치
원클릭 설치
`claude_desktop_config.json` 파일에 다음을 추가하세요:
{
"mcpServers": {
"mlola-ui": {
"command": "npx",
"args": [
"mlola-ui"
]
}
}
}실행 가능한 패키지
1.1.9stdio원격 엔드포인트
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
}커뮤니티
증거