Material 3 Skill vs Mobile App UI Design

Tied at 3/5 on the same brief. Pick by fit: the rows below show where each one is stronger.

Both built the Tally landing page in the same Claude Code test, and both design the Daydreamer way: pastel gradients, frosted glass and rounded everything. Software that feels like a nice day. Both are best for: mobile.

Material 3 Skill3/5
After: Tally landing page, made with Material 3 Skill
Mobile App UI Design3/5
After: Tally landing page, made with Mobile App UI Design

Scroll either page; the other follows.

Material 3 Skill

3/5

Material 3 applies a full tonal M3 system in Roboto Flex, and the dashboard is dense and solid. On the landing page, icon names print as text and a hero card still covers the balance.

Mobile App UI Design

3/5

The mobile app UI skill gives Tally an app-first look: Manrope on off-white, a green accent with sun, clay and sky category colors, and big rounded cards. Both pages work well on a phone, and the dashboard in Plus Jakarta Sans matches. Pick it if mobile is where your users live.

Side by side

FieldMaterial 3 SkillMobile App UI Design
Fonts
  • Roboto Flex
  • Material Symbols Rounded
  • Manrope (landing)
  • Plus Jakarta Sans (dashboard)
Colors
  • primary #386A20 (landing)
  • primary #006B5F (dashboard)
  • #B8F397 primary container
  • M3 tonal surfaces
  • #f7f5f0 canvas
  • #16201c ink
  • #14805e green
  • #f2b544 sun
  • #e07a5f clay
  • #5b8def sky
Pick it for
  • Android-first apps
  • Google-ecosystem products
  • utility and admin dashboards
  • mobile-first products
  • app marketing sites
  • consumer apps
  • onboarding flows
Skip it for
  • brands that need their own identity
  • editorial marketing
  • luxury
  • editorial sites
  • bold brands
  • dense desktop tools
Observations
  • landing: icon ligature names print as words ("shopping_cart", "local_gas_station", "payments") in the Syncs card
  • landing hero: a notification card covers the balance, like the baseline
  • seed color changes from green #386A20 on the landing page to teal #006B5F on the dashboard
  • only slight distance from the baseline palette

How the brief works

Install Material 3 Skill

1 Run in your terminal

/plugin marketplace add hamen/material-3-skill
/plugin install material-3@material-3-skill

2 Or paste a prompt into Claude Code, Codex, Cursor or Gemini

It tells your tool to install this from its source repository.

Plugin install is Claude Code only; for other agents use Copy prompt or copy the skill folder.

Taken from the project README. Check the source for the latest instructions.

Install Mobile App UI Design

1 Run in your terminal

npx skills add ceorkm/mobile-app-ui-design

2 Or paste a prompt into Claude Code, Codex, Cursor or Gemini

It tells your tool to install this from its source repository.

Taken from the project README. Check the source for the latest instructions.