skills.rest
VGonPa
VGonPaCOMMUNITY
Explore all skills by this author โ†’
Website๐•@vgonpaGitHub

mobile-visual-design

Define mobile visual design systems with spacing, typography, color, and dark mode tokens.

2|Updated Mar 14, 2026
Search Tags:#typography#design#motion#visual-design#dark-mode#color-system#elevation
One-click install
npx skills add https://github.com/VGonPa/mobile-dev-agency --skill mobile-visual-design
Or copy as Structured Prompt for Agentโ–ผ
Please help me install this Agent Skill.
Skill: mobile-visual-design
Source: https://github.com/VGonPa/mobile-dev-agency/tree/main/plugins/mobile-design-squad/.claude/skills/mobile-visual-design
Command: npx skills add https://github.com/VGonPa/mobile-dev-agency --skill mobile-visual-design

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about mobile-visual-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a cohesive mobile visual design system for Flutter?โ–ผ

Define dark mode mappings by generating a semantic, seed-based color system with specific roles, ensuring token generation includes distinct light and dark themes for portfolio-ready mobile UI.

What is the best way to define design tokens for dark mode in mobile UI?โ–ผ

Define dark mode mappings by generating a semantic, seed-based color system with specific roles, ensuring token generation includes distinct light and dark themes for portfolio-ready mobile UI.

Can I use an 8px spacing grid to establish visual hierarchy in mobile apps?โ–ผ

Yes, an 8px spacing grid anchors consistent visual rhythm across screens, working alongside typography, color, and elevation systems to communicate clear hierarchy in mobile apps.

Does this mobile visual design approach apply current design trends without looking generic?โ–ผ

Yes, it integrates 2026 design trends while applying anti-AI-slop guardrails, ensuring the mobile interface maintains distinctive brand personality rather than looking generic or automated.

How do I generate semantic naming for typography and color tokens in Dart?โ–ผ

Generate semantic naming for typography and color tokens by establishing roles within a design-token system, mapping font pairings and seed-based colors to reflect brand personality in Dart workflows.

Related Skills

Explore More Design & Creative Skillsโ†’
projectmilujuprojectmiluju

ui

Define UI design system tokens and component specifications for web products.

Community
Intermediate
K9i-0K9i-0
1

ui-theming

Extract design tokens from reference images and apply them to Flutter ThemeData.

Community
Intermediate
KyaniteLabsKyaniteLabs
3

theming

Establish semantic token systems for light, dark, and high-contrast UI themes.

Official
Advanced
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced