build_mobile_app_ui

build_mobile_app_ui is a command for Claude Code from HalidSaglam/saglitzdesign-mcp. It costs 30 tokens per session (2,562 once invoked), scanned A, a copy of build_landing_page, MIT.

A command for designing and building iOS or Android app screens using the appropriate platform conventions, generated design tokens, and real component code. It includes an audit step for the finished interface.

In plain words
What is it for?
Use it to create mobile design foundations, layouts, colors, components, and implementation code for app screens.
Why use it?
It keeps mobile screens aligned with their target platform and checks the result instead of stopping at a visual mockup.

Command for Claude Code

Written for Claude Code: disable-model-invocation in frontmatter.

Part of the saglitzdesign plugin — 9 skills, 10 commands, 2 MCP servers shipped together

Good fit Use it to create mobile design foundations, layouts, colors, components, and implementation code for app screens.

Compare 6 commands from other repositories ↓
Install with agentmods
npx agentmods add commands/halidsaglam/saglitzdesign-mcp/build_mobile_app_ui
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Clone the repo
git clone --depth 1 https://github.com/HalidSaglam/saglitzdesign-mcp

Made for: Claude Code.

Or install saglitzdesign, the plugin that ships this one along with the rest of its 9 skills, 10 commands, 2 MCP servers.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for build_mobile_app_ui

README.md
[![agentmods](https://agentmods.dev/badge/commands/halidsaglam/saglitzdesign-mcp/build_mobile_app_ui/github.svg)](https://agentmods.dev/commands/halidsaglam/saglitzdesign-mcp/build_mobile_app_ui)
Your own site
<a href="https://agentmods.dev/commands/halidsaglam/saglitzdesign-mcp/build_mobile_app_ui"><img src="https://agentmods.dev/badge/commands/halidsaglam/saglitzdesign-mcp/build_mobile_app_ui/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for build_mobile_app_ui

Your own site · 80×15
<a href="https://agentmods.dev/commands/halidsaglam/saglitzdesign-mcp/build_mobile_app_ui"><img src="https://agentmods.dev/badge/commands/halidsaglam/saglitzdesign-mcp/build_mobile_app_ui.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 30 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 2,562 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin 88% copy Near-identical to another mod in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00030 $0.02562
Opus 5 $0.00015 $0.01281
Sonnet 5 $0.00006 $0.00512
Haiku 4.5 $0.00003 $0.00256

Measured 4d ago against content hash 982152f04f03, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-08, from the pricing page.

Security

Grade A, and why

build_mobile_app_ui scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

This is a copy

88% identical to build_landing_page — 21 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

commands/build_mobile_app_ui.md · 107 lines

How it starts

The opening of the file, as written. The whole thing — 107 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Design and build mobile app UI, using the SaglitzDesign method.

You have the SaglitzDesign tools available. Use them — do not design from memory.

Knowledge (judgement):

  • get_design_roadmap(project_type) — the phased plan; call FIRST on any build.
  • search_design_knowledge(query) / get_design_doc(id) — rules & specs. Ids also readable as saglitzdesign://doc/{id}.
  • get_component_guidance(component, platform) — per-component specs + patterns.
  • get_design_language(language) — Material 3 / Liquid Glass / iOS / Android / macOS / visionOS / Fluent / web-trends / tokens.
  • compare_design_languages(topic, platforms) — how each platform solves one surface, and what NOT to port.
  • get_design_examples(query, platform) — curated real-world example screens.
  • seo_geo_guide(scope, topic) — SEO & GEO for web.

Generators (real output, not advice — prefer these over inventing values):

  • create_design_system(brand_color, vibe, platform) — the one-call foundation: direction card + color + fonts + icons + type scale + elevation + tokens + component list.
  • generate_layout_system(preset) — breakpoints, containers, grid, container queries, section rhythm.
  • generate_color_system / suggest_font_pairing / suggest_icon_library / generate_type_scale / generate_elevation_system / generate_motion / generate_design_tokens — the individual layers.
  • get_component_recipe(component, stack) — production-ready accessible code for button/input/modal/toast/card/switch/tabs/empty-state/list-row/navigation/search/select/table/tooltip/form/pagination/skeleton/badge/breadcrumb.
  • fix_contrast(foreground, background, target) — the corrected color value, not just a fail report.

Auditors (deterministic gates — run these before claiming done):

  • audit_accessibility(contrast_pairs, tap_targets) — exact WCAG ratios and target sizes.
  • design_lint(code) — design & a11y anti-patterns with line numbers.
  • audit_design_system(code) — consistency score + value sprawl across the whole codebase.
  • audit_project(path) — the same auditors over a real directory instead of a pasted snippet, ranked worst-file-first. Prefer this when you have the source on disk.
  • audit_generic_design(code) — the specific defaults generated interfaces reach for (stock indigo/violet/purple gradient, Inter as the only family, the rounded-2xl card recipe, gradient headings, eyebrow-on-every-heading, three or more animate-pulse/shimmer placeholders). Facts about source, not taste. A genuine indigo brand still flags.
  • audit_ux_copy(text) — readability, passive voice, jargon, weak CTAs.
  • audit_ethical_design(code) — named deceptive-pattern tells in a pasted snippet (confirmshaming decline copy, a pre-checked marketing checkbox, literal scarcity/deadline copy with no live binding, Accept all without Reject all). Facts about source, not a verdict. Pair with get_design_doc("ethical-design").
  • audit_apple_ui(path) — iOS/macOS project directory. Reads configuration and Swift. Directory only; no snippet mode.
  • audit_android_ui(path) — Android project directory. Reads the manifest, resource XML and Compose. Directory only; no snippet mode.
  • measure_screenshot(path, scale, format) — measures a PNG screenshot's real palette, contrast ratios, density and structure, and names a stock-region fact when a significant cluster sits in Tailwind indigo/violet/purple. Use it whenever you have an image file rather than source.
  • design_review_checklist(project_type, focus) — the assembled audit checklist.

Sequence

  1. Ask which platform (iOS or Android) and stack (SwiftUI / Jetpack Compose / React Native / Flutter) if not stated, plus the 2–3 core screens to build and a brand color. Ask up to 4 questions max.
  2. Call get_design_roadmap("ios-app") or ("android-app") and follow it.
  3. Load the platform baseline: get_design_language("ios-app-design") + ("apple-hig-liquid-glass"), or ("android-app-design") + ("material-3"). Respect native navigation, controls, safe areas, Dynamic Type / sp.
  4. Reference real examples with get_design_examples (platform "ios" or "android", or "mobile" for both) and the pattern docs: mobile-navigation-home, mobile-onboarding-paywall, mobile-empty-states-buttons, mobile-settings-lists, mobile-auth-patterns.
  5. Generate the foundation (below) with platform "ios" or "android" so the tokens come out as Tokens.swift / Tokens.kt.
  6. Build the screens using get_component_recipe(component, "swiftui" | "compose") for the standard controls and get_component_guidance for the rest. Design every state; thumb-zone the primary actions.
  7. If this UI also exists (or will exist) on another platform, call compare_design_languages for each surface you are porting rather than translating the design literally.

Read the full file on GitHub · 107 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 4d ago Changed · +8 lines 982152f04f03
  2. 8d ago First seen · 99 lines · 30 tokens per session scan A 3b089e51076a

Subscribe to this mod's changes

build_mobile_app_ui is a command published in the GitHub repository HalidSaglam/saglitzdesign-mcp (5 stars, last pushed 7d ago), licensed MIT. It adds 30 tokens to every session and 2,562 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. It is 88% identical to build_landing_page, differing in 21 lines, and is treated as a copy.