Tab metaphors

Skill egoisutolabs/mercury/skills/tab-metaphors

An opinionated, local Figma bridge for AI coding workflows — your agent paints screens, you review the whole product at once.

Install

npx -y skills add egoisutolabs/mercury --skill tab-metaphors

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Design multi-tab app screens (fitness / analytics / productivity / social) so each tab uses a distinct structural layout instead of just rotating accent colors. Use when the designer asks to "design a tab bar app", "make 4 screens for a fitness app", "Home / Insights / Profile screens", or any multi-screen app where the screens share chrome but serve different content kinds. Prevents the "four templated screens that feel fake" trap.

SKILL.md

5.0 KB, as published. Nobody here has run it

Tab Metaphors (Mercury)

A real app's tab bar says "here are different kinds of information", not "here are the same screen in different colors". The rookie mistake is building four screens that each have a hero pill, a scroll list, and a color accent — and wondering why it reads as a prototype instead of a product.

Cohesion comes from shared chrome (status bar, type scale, base background). Identity comes from the structural spine: each tab picks a layout metaphor that maps to its content.

Metaphor catalog

Pick one per tab. These are the patterns that ship in real apps:

Hero number — one enormous stat with a delta and a context line. Use for: today-view, dashboard landing, "what matters right now".
Calendar heatmap — grid of day cells colored by intensity. Use for: log history, contribution graphs, streak tracking.
Timeline grid — vertical list of time-stamped events, each a card or row. Use for: feeds, activity history, session logs.
Stacked charts — one or two primary charts (bar, line, donut) with small-multiple breakdowns below. Use for: insights, analytics, trends.
Collection grid — 2- or 3-column grid of tiles (badges, achievements, items). Use for: profile achievements, saved items, libraries.
Detail/hero composition — large hero image or media block with meta rows below. Use for: now-playing, article view, workout-of-the-day.

Typical 4-tab fitness/health mapping

Tab	Metaphor	Why
Home	Hero number	"Did I hit my goal today?" is a single number
Log	Calendar heatmap	Shows the rhythm — streaks, gaps, consistency
Insights	Stacked charts	Trends only make sense over time, not in a number
Profile	Collection grid	Badges and achievements are visually heterogeneous

Typical 4-tab productivity mapping

Tab	Metaphor
Today	Timeline grid
Inbox	Collection grid (list variant)
Focus	Hero number (timer + session count)
Review	Stacked charts (completion rate, etc.)

What every tab must share

Keep these identical across all tabs — this is what makes the app feel like one product:

Status bar (time, signal, battery) — top 44pt
Page title position and type size
Body type scale (size, weight, color)
Base background color (+ any ambient depth effect, applied once globally)
Tab bar (icons + labels, active-state treatment, home indicator) — bottom 83pt on iPhone
Spacing rhythm (16 / 24 / 32)

What each tab varies

Layout spine (which metaphor above)
Primary typography hierarchy — hero number tab uses a 72pt number; charts tab uses chart labels; heatmap tab uses day-of-week headers
Color accents — but only after the spine is distinct. Color is the last 10%, not the first 90%.
Icon treatment per content category — a food log icon is warm-hued, a workout icon is cool-hued, an achievement icon is gold. Don't use one accent color for every icon.

Workflow when building 4 screens

Check the bridge (ping).
Build the shared chrome first as a component set: status bar, tab bar, base background. One component set on a "Components" page.
Decide the metaphor per tab before creating any frame. Write the mapping explicitly ("Home=hero, Log=heatmap, ..."). Don't skip this — picking metaphors inside the build loop is where you revert to "same screen, different color".
Create each tab's frame using mcp__mercury__create kind:"frame", 390×844 iPhone size, place the shared chrome instances, then build the metaphor-specific content.
Verify visually between tabs. Export each frame with mcp__mercury__export_node and look at them side-by-side. If any two feel like siblings instead of cousins, the metaphor is leaking.
Add ambient depth last (see the ambient-depth skill) — one or two glows per tab, placed to complement the spine, not to hide it.

Anti-patterns

Copy-paste the Home screen and recolor. Reads as fake.
Every tab has a hero pill at top. Only one tab should — the one whose metaphor is "hero number".
Every icon is the brand accent color. Category-specific coloring is what makes the app feel lived-in.
Every tab is a vertical scroll list. At least one tab should break vertical rhythm (grid, chart, heatmap).