Правильный способ управлять интерфейсом

Машиночитаемые контракты компонентов, которые точно говорят AI что строить — пропсы, типы, дефолты, валидация. Без догадок, без галлюцинаций.

npx userface connect

Реальные пропсы, а не выдуманные.

face.json определяет каждый проп, дефолт и enum. Агент читает контракт до генерации.

{
  "component": "Button",
  "props": {
    "variant": {
      "type": "enum",
      "values": ["default", "accent", "ghost"],
      "default": "default"
    },
    "text": { "type": "string", "required": true },
    "icon": { "type": "ReactNode" },
    "disabled": { "type": "boolean", "default": false }
  }
}

15 правил ловят сломанную структуру.

A11y, вложенные interactive, пропущенные labels, контрактные ошибки — всё до code review.

composition_validate(checkout.ui.json)

✗ no-nested-interactive
  Button inside Link at line 12

✗ input-label
  Input "email" missing label

✓ required-props      (all passed)
✓ select-options      (all passed)
✓ button-type         (all passed)

score: 74 → fix 2 errors before merge

Из спеки в governed код.

ui@1 документы становятся React, Vue или HTML, который использует реальные компоненты — не generic divs.

ui_materialize(settings.ui.json, "react")

import { Card } from '@ui/Card'
import { Input } from '@ui/Input'
import { Button } from '@ui/Button'

export function Settings({ team }) {
  return (
    <Card title="Team settings">
      <Input label="Workspace" value={team.name} />
      <Input label="Billing email" value={team.email} />
      <Button variant="accent">Save changes</Button>
    </Card>
  )
}

MCP tools

Правил валидации

Компонентов

Рецептов

Как работает

Подключи

npx userface connect сканирует репо, читает экспорты компонентов и запускает MCP server.

Агент читает контракты

Cursor/Claude вызывает component_list и получает реальные пропсы, дефолты и enums — не догадки.

Governed output

Агент собирает в ui@1, валидирует 15 правилами и материализует React/Vue/HTML.

Desktop workbench

Реальный workspace preview. Инспекция governed артефактов. Тот же engine что в CLI, но локально с GUI.

Локальный preview — реальное дерево компонентов

Governed output — видишь что engine материализует

Offline — без облачных зависимостей

// What the desktop app shows you:
<Card title="Team settings">
  <Input label="Workspace" value={team.name} />
  <Select label="Role" options={roles} />
  <Button variant="accent">Save</Button>
</Card>

// Validated: score 98, 0 errors
// Materialized from: settings.ui.json

Бесплатный старт

Лучший первый шаг

Free

$0/mo

Local CLI + MCP

Desktop app

46 components

Hosted API

Pro

$29/mo

10k requests / day

Usage analytics

Priority support

Scale + governance

Enterprise

Custom

Custom policy packs

On-prem / SSO

Dedicated support

FAQ

Даёт AI-агентам (Cursor, Claude и т.д.) machine-readable контракт для каждого компонента — пропсы, дефолты, enums, правила валидации. Вместо галлюцинаций агент читает контракт и генерирует governed output.

Одна команда.

npx userface connect