Adapt Ui Design¶

Adapt UI Design -- mvp.adapt_ui_design

Cluster: Creative & Media | Type: component | MCP Tools: 34

Overview¶

Design system generator that produces design tokens (colour palettes, typography scales, spacing, shadows, radii, breakpoints), ready-to-use HTML/CSS UI components, wireframes, and mockups from brand colours and scale ratios. Also checks colour-pair contrast ratios against WCAG AA and AAA standards and exports design tokens as CSS custom properties, Tailwind config JSON, or raw JSON. All curated output is pure strings - no browser or rendering runtime required.

For launch use, treat adapt_ui_design as a practical support component for consistent UI assets, not a full design automation product. It is useful for creating reusable tokens, starter components, wireframes, mockups, accessibility checks, read-only Stratum catalog lookups, advisory WCAG text-colour pairing, and constrained source adapter capability discovery that can feed adapt_webpage or adapt_django. It should not be positioned as replacing a product designer, performing complete visual QA, providing an unconstrained Figma/Webflow/Sketch bridge, or redesigning the G6 visual identity. This matches the launch plan's focus on targeted website and marketing improvements rather than a broad visual redesign.

Current capabilities: Curated Tier 1 generation; SQLite-backed MCP design-system, component, token, layout, and audit operations; read-only Stratum catalog lookup; advisory foreground/background pairing; and a backend-native adapter lane for local_catalog, figma, webflow, and sketch capability discovery. local_catalog executes read-only catalog operations offline. Provider backends currently report dependency/auth readiness without exposing secret values.

Not supported / not a replacement for: Browser-rendered visual QA, complete product design review, arbitrary provider passthrough, live provider writes, or silent fallback from an explicitly requested backend-native operation to local generation.

Backend-native adapter lane: MCP source operations expose source_capabilities, source_op_schema, source_validate, source_dry_run, and source_execute. Target operations are allowlisted to import_tokens, export_tokens, list_components, pull_component_metadata, and push_component_draft. Unknown target ops, unknown parameter keys, missing dependencies, missing auth, safety-denied provider/network calls, and unavailable providers return branchable degraded envelopes with completion_state, warning_card, evidence, metadata.backend_native, and provenance.

When to use:

Generating a coherent design system from a brand palette for a new project scaffold
Producing accessible button, card, input, or navigation components with validated contrast ratios
Exporting design tokens as CSS variables or Tailwind configuration for frontend integration
Generating wireframes or mockup layouts before wiring up a full Django or webpage block
Discovering backend capability state before attempting provider-backed design work

Reliability envelope (per-op): Each operation now reports an honest completion_state with a concrete evidence marker. Because this component is self-contained and deterministic, an op that genuinely executed end-to-end is verified (verified = an executed local generate/transform/CRUD/clean-audit op, with evidence such as op, deterministic, token_count, system_id, persisted, record_count, contrast_ratio, or exported_bytes) — note verified attests that the op ran, not that the generated design passes WCAG or is production-ready. Degraded audits that skip one or more tokens and the advisory ops (suggest_improvements, recommend_text_pairing, list_patterns) cap at qualified-draft and never claim verified. Error, not-found, missing-id, unsupported-component, unsupported-format, and unknown-op paths fail closed to blocked-escalated with a stable G6_E_UI_DESIGN_* code in the warning_card. The backend-native source-adapter lane keeps its own state mapping unchanged. Component maturity stays beta.

Launch caveat: Use generated output as a scaffold that still needs human review in production pages, especially for copy, brand fit, responsive polish, and final conversion-focused UX. Provider capability probes show readiness only; unavailable providers return blocked-escalated rather than pretending the work is complete.

Example:

from mvp.adapt_ui_design import AdaptUIDesignBlock, UIDesignInput

block = AdaptUIDesignBlock(name="ui_design")
result = block.infer(UIDesignInput(
    operation="create_design_system",
    brand_colors=["#3B82F6", "#1E40AF"],
    base_font_size=16,
    scale_ratio=1.25,
    export_format="css",
))
# result.value.exported -> CSS custom properties string
# result.value.tokens -> list of serialised DesignToken dicts

Works well with: adapt_webpage, adapt_django, adapt_diagrams

Public API¶

`DesignToken(BaseModel)`¶

Field	Type	Default
`name`	`str`	''
`value`	`str`	''
`category`	`str`	''
`description`	`str`	''

`UIComponent(BaseModel)`¶

Field	Type	Default
`name`	`str`	''
`html`	`str`	''
`css`	`str`	''
`tokens_used`	`list[str]`	Field(default_factory=list)

`UIDesignInput(BaseModel)`¶

Field	Type	Default
`operation`	`Literal['create_design_system', 'generate_palette', 'generate_typography', 'generate_spacing', 'generate_shadows', 'generate_radii', 'generate_breakpoints', 'create_component', 'generate_wireframe', 'generate_mockup', 'check_accessibility', 'export_tokens']`	'create_design_system'
`brand_colors`	`list[str]`	Field(default_factory=list)
`base_font_size`	`int`	16
`scale_ratio`	`float`	1.25
`component_name`	`str`	''
`component_type`	`str`	''
`layout_type`	`str`	''
`sections`	`list[str]`	Field(default_factory=list)
`export_format`	`str`	'css'
`foreground`	`str`	''
`background`	`str`	''

`UIDesignOutput(BaseModel)`¶

Field	Type	Default
`operation`	`str`	''
`tokens`	`list[dict]`	Field(default_factory=list)
`html`	`str`	''
`css`	`str`	''
`components`	`list[dict]`	Field(default_factory=list)
`exported`	`str`	''
`contrast_ratio`	`float`	0.0
`wcag_aa`	`bool`	False
`wcag_aaa`	`bool`	False
`metadata`	`dict`	Field(default_factory=dict)
`degraded`	`bool`	False
`degradation_reason`	`str`	''
`completion_state`	`Literal['verified', 'qualified-draft', 'blocked-escalated']`	'qualified-draft'
`warning_card`	`dict`	Field(default_factory=dict)
`evidence`	`dict`	Field(default_factory=dict)
`request_id`	`str`	''
`task_id`	`str`	''
`run_id`	`str`	''

`AdaptUIDesignBlock(AIBlock[UIDesignInput, UIDesignOutput, dict])`¶

Pure-Python UI design system block with 12 operations.

Field	Type	Default
`name`	`str`	'adapt_ui_design'
`resource_bounds`	`ResourceBounds \\| None`	None

Methods:

`infer(data: UIDesignInput) -> Result[UIDesignOutput]`¶

`MCPUIDesignInput(BaseModel)`¶

Field	Type	Default
`op`	Literal['create_system', 'get_system', 'list_systems', 'update_system', 'delete_system', 'create_component', 'get_component', 'list_components', 'update_component', 'delete_component', 'generate_wireframe', 'generate_mockup', 'preview_responsive', 'generate_page_layout', 'compare_layouts', 'export_css', 'export_tailwind', 'export_json', 'import_tokens', 'merge_tokens', 'generate_dark_tokens', 'validate_tokens', 'audit_contrast', 'audit_typography', 'audit_spacing', 'generate_report', 'suggest_improvements', 'recommend_text_pairing', 'list_patterns', 'source_capabilities', 'source_op_schema', 'source_validate', 'source_dry_run', 'source_execute']	'create_system'
`system_id`	`str`	''
`system_name`	`str`	''
`brand_colors`	`list[str]`	Field(default_factory=list)
`base_font_size`	`int`	16
`scale_ratio`	`float`	1.25
`component_name`	`str`	''
`component_type`	`str`	''
`layout_type`	`str`	''
`sections`	`list[str]`	Field(default_factory=list)
`foreground`	`str`	''
`background`	`str`	''
`text_role`	`str`	''
`tokens_json`	`str`	''
`data_json`	`str`	''
`include_dark_mode`	`bool`	False
`props`	`dict`	Field(default_factory=dict)
`variants`	`list[dict]`	Field(default_factory=list)
`backend_id`	`str`	''
`target_op`	`str`	''
`params`	`dict`	Field(default_factory=dict)
`allow_network`	`bool`	False
`dry_run`	`bool`	False

`MCPUIDesignOutput(BaseModel)`¶

Field	Type	Default
`op`	`str`	''
`success`	`bool`	False
`message`	`str`	''
`system_id`	`str`	''
`html`	`str`	''
`css`	`str`	''
`exported`	`str`	''
`tokens`	`list[dict]`	Field(default_factory=list)
`components`	`list[dict]`	Field(default_factory=list)
`records`	`list[dict]`	Field(default_factory=list)
`skipped_tokens`	`list[dict]`	Field(default_factory=list)
`metadata`	`dict`	Field(default_factory=dict)
`degraded`	`bool`	False
`degradation_reason`	`str`	''
`completion_state`	`Literal['verified', 'qualified-draft', 'blocked-escalated']`	'qualified-draft'
`warning_card`	`dict`	Field(default_factory=dict)
`evidence`	`dict`	Field(default_factory=dict)
`request_id`	`str`	''
`task_id`	`str`	''
`run_id`	`str`	''

`UIDesignStore`¶

SQLite-backed store for the adapt_ui_design MCP sub-package.

Constructor:

Parameter	Type	Default
`db_path`	`str`	':memory:'

Methods:

`create_system(name: str, brand_colors: list[str], base_font_size: int, scale_ratio: float, tokens: list[dict], metadata: dict) -> str`¶

`get_system(system_id: str) -> dict | None`¶

`get_system_by_name(name: str) -> dict | None`¶

`list_systems(limit: int = 50) -> list[dict]`¶

`update_system(system_id: str, **kwargs: Any) -> bool`¶

`delete_system(system_id: str) -> bool`¶

`create_component(system_id: str, name: str, component_type: str, html: str, css: str, tokens_used: list[str], props: dict | None = None, variants: list[dict] | None = None) -> str`¶

`get_component(component_id: str) -> dict | None`¶

`list_components(system_id: str = '', limit: int = 50) -> list[dict]`¶

`update_component(component_id: str, **kwargs: Any) -> bool`¶

`delete_component(component_id: str) -> bool`¶

`store_token_set(system_id: str, fmt: str, exported: str, tokens: list[dict]) -> str`¶

`get_token_set(token_set_id: str) -> dict | None`¶

`store_mockup(system_id: str, layout_type: str, sections: list[str], html: str, css: str, mockup_type: str = 'wireframe') -> str`¶

`store_audit(system_id: str, audit_type: str, result: dict) -> str`¶

`list_audits(system_id: str = '', limit: int = 50) -> list[dict]`¶

`count_all() -> dict[str, int]`¶

`AdaptUIDesignMCPBlock(AIBlock[MCPUIDesignInput, MCPUIDesignOutput, dict])`¶

34-op UI design MCP block with SQLite persistence (27 core + 2 advisory + 5 source).

Field	Type	Default
`name`	`str`	'adapt_ui_design_mcp'
`state`	`dict`	field(default_factory=dict)
`db_path`	`str`	field(default_factory=lambda: os.environ.get('UI_DESIGN_DB_PATH', _DEFAULT_DB))
`resource_bounds`	`ResourceBounds`	field(default_factory=ResourceBounds)
`usage`	`ResourceUsage`	field(default_factory=ResourceUsage)
`agentic_planner`	`'UIDesignPlanner \\| None'`	None

Methods:

`infer(data: MCPUIDesignInput) -> Result[MCPUIDesignOutput]`¶

MCP Tools¶

Operation	Source
`create_system`	ui_design_mcp
`get_system`	ui_design_mcp
`list_systems`	ui_design_mcp
`update_system`	ui_design_mcp
`delete_system`	ui_design_mcp
`create_component`	ui_design_mcp
`get_component`	ui_design_mcp
`list_components`	ui_design_mcp
`update_component`	ui_design_mcp
`delete_component`	ui_design_mcp
`generate_wireframe`	ui_design_mcp
`generate_mockup`	ui_design_mcp
`preview_responsive`	ui_design_mcp
`generate_page_layout`	ui_design_mcp
`compare_layouts`	ui_design_mcp
`export_css`	ui_design_mcp
`export_tailwind`	ui_design_mcp
`export_json`	ui_design_mcp
`import_tokens`	ui_design_mcp
`merge_tokens`	ui_design_mcp
`generate_dark_tokens`	ui_design_mcp
`validate_tokens`	ui_design_mcp
`audit_contrast`	ui_design_mcp
`audit_typography`	ui_design_mcp
`audit_spacing`	ui_design_mcp
`generate_report`	ui_design_mcp
`suggest_improvements`	ui_design_mcp
`recommend_text_pairing`	ui_design_mcp
`list_patterns`	ui_design_mcp
`source_capabilities`	ui_design_mcp
`source_op_schema`	ui_design_mcp
`source_validate`	ui_design_mcp
`source_dry_run`	ui_design_mcp
`source_execute`	ui_design_mcp

Adapt Ui Design¶

Overview¶

Public API¶

DesignToken(BaseModel)¶

UIComponent(BaseModel)¶

UIDesignInput(BaseModel)¶

UIDesignOutput(BaseModel)¶

AdaptUIDesignBlock(AIBlock[UIDesignInput, UIDesignOutput, dict])¶

infer(data: UIDesignInput) -> Result[UIDesignOutput]¶

MCPUIDesignInput(BaseModel)¶

MCPUIDesignOutput(BaseModel)¶

UIDesignStore¶

create_system(name: str, brand_colors: list[str], base_font_size: int, scale_ratio: float, tokens: list[dict], metadata: dict) -> str¶

get_system(system_id: str) -> dict | None¶

get_system_by_name(name: str) -> dict | None¶

list_systems(limit: int = 50) -> list[dict]¶

update_system(system_id: str, **kwargs: Any) -> bool¶

delete_system(system_id: str) -> bool¶

create_component(system_id: str, name: str, component_type: str, html: str, css: str, tokens_used: list[str], props: dict | None = None, variants: list[dict] | None = None) -> str¶

get_component(component_id: str) -> dict | None¶

list_components(system_id: str = '', limit: int = 50) -> list[dict]¶

update_component(component_id: str, **kwargs: Any) -> bool¶

delete_component(component_id: str) -> bool¶

store_token_set(system_id: str, fmt: str, exported: str, tokens: list[dict]) -> str¶

get_token_set(token_set_id: str) -> dict | None¶

store_mockup(system_id: str, layout_type: str, sections: list[str], html: str, css: str, mockup_type: str = 'wireframe') -> str¶

store_audit(system_id: str, audit_type: str, result: dict) -> str¶

list_audits(system_id: str = '', limit: int = 50) -> list[dict]¶

count_all() -> dict[str, int]¶

AdaptUIDesignMCPBlock(AIBlock[MCPUIDesignInput, MCPUIDesignOutput, dict])¶

infer(data: MCPUIDesignInput) -> Result[MCPUIDesignOutput]¶

MCP Tools¶

`DesignToken(BaseModel)`¶

`UIComponent(BaseModel)`¶

`UIDesignInput(BaseModel)`¶

`UIDesignOutput(BaseModel)`¶

`AdaptUIDesignBlock(AIBlock[UIDesignInput, UIDesignOutput, dict])`¶

`infer(data: UIDesignInput) -> Result[UIDesignOutput]`¶

`MCPUIDesignInput(BaseModel)`¶

`MCPUIDesignOutput(BaseModel)`¶

`UIDesignStore`¶

`create_system(name: str, brand_colors: list[str], base_font_size: int, scale_ratio: float, tokens: list[dict], metadata: dict) -> str`¶

`get_system(system_id: str) -> dict | None`¶

`get_system_by_name(name: str) -> dict | None`¶

`list_systems(limit: int = 50) -> list[dict]`¶

`update_system(system_id: str, **kwargs: Any) -> bool`¶

`delete_system(system_id: str) -> bool`¶

`create_component(system_id: str, name: str, component_type: str, html: str, css: str, tokens_used: list[str], props: dict | None = None, variants: list[dict] | None = None) -> str`¶

`get_component(component_id: str) -> dict | None`¶

`list_components(system_id: str = '', limit: int = 50) -> list[dict]`¶

`update_component(component_id: str, **kwargs: Any) -> bool`¶

`delete_component(component_id: str) -> bool`¶

`store_token_set(system_id: str, fmt: str, exported: str, tokens: list[dict]) -> str`¶

`get_token_set(token_set_id: str) -> dict | None`¶

`store_mockup(system_id: str, layout_type: str, sections: list[str], html: str, css: str, mockup_type: str = 'wireframe') -> str`¶

`store_audit(system_id: str, audit_type: str, result: dict) -> str`¶

`list_audits(system_id: str = '', limit: int = 50) -> list[dict]`¶

`count_all() -> dict[str, int]`¶

`AdaptUIDesignMCPBlock(AIBlock[MCPUIDesignInput, MCPUIDesignOutput, dict])`¶

`infer(data: MCPUIDesignInput) -> Result[MCPUIDesignOutput]`¶