Skills
.Work. You
Rest

mobile-visual-design

Community

Give mobile UI personality with visuals.

Design & Creative#typography#design#motion#visual-design#dark-mode#color-system#elevation
AuthorVGonPa
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Good design is not accidental. This skill provides the frameworks to craft visually distinctive mobile interfaces with personality, ensuring spacing, typography, color, elevation, and motion communicate hierarchy clearly and consistently.

Core Features & Use Cases

  • Spacing system anchored to an 8px grid for consistent rhythm across screens.
  • Typography hierarchy and font pairing to reflect brand personality.
  • Color system with semantic roles and seed-based generation, including dark mode considerations.
  • Elevation and motion language to communicate hierarchy and tactile feedback.
  • 2026 design trends integration with guardrails against AI-slop and portfolio-ready output.

Quick Start

Define a visual design system by establishing spacing, typography, color, and elevation tokens, then apply dark mode and 2026 design trends to a sample mobile UI.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: mobile-visual-design
Download link: https://github.com/VGonPa/mobile-dev-agency/archive/main.zip#mobile-visual-design

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.