Motion Web vs Frontend Design

Standalone skill · OpenCode Power Pack

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 Print Romantic way: cream paper, serif headlines, nothing shouting. Both are best for: visual direction.

Motion Web3/5
After: Tally landing page, made with Motion Web
Frontend Design3/5
After: Tally landing page, made with Frontend Design (OpenCode Power Pack)

Scroll either page; the other follows.

Motion Web gives Tally an editorial landing page: paper #f1ece1, a huge Instrument Serif headline with 'accounted' in vermilion italic, JetBrains Mono labels, line-drawn envelopes that fill with a sample paycheck, and a big 'iOS / Android' type band. The dashboard does not follow; it falls back to a green sidebar, Fraunces numbers and cream cards close to the default. Pick it for a motion-led landing page, and plan to restyle the app screens.

OpenCode Power Pack's Frontend Design gives Tally a cash-envelope ledger: ruled cream paper, a headline mixing light, black and red italic Fraunces, stacked kraft envelopes with a receipt, IBM Plex Mono figures and buttons with red offset shadows. The dashboard follows with a tall Instrument Serif 'October 2026', DM Mono numbers on ruled paper and a dark bottle-green sidebar. It is committed and consistent, but the cream, serif and forest green palette stays close to the default family. Pick it for a warm finance brand that wants more character than the default.

Side by side

FieldMotion WebFrontend Design (OpenCode Power Pack)
Fonts
  • Instrument Serif
  • Inter Tight
  • JetBrains Mono
  • Fraunces
  • Fraunces
  • Instrument Serif
  • IBM Plex Mono
  • DM Mono
Colors
  • #f1ece1 paper
  • #191814 ink
  • #e0482a vermilion
  • #f8f5ee light paper
  • #1d4b3c forest green
  • #f3ede0 ruled paper
  • #1d3528 ink green
  • #b3361f stamp red
  • #c99a62 kraft
  • #e2a92f mustard
  • #17251d bottle green
Pick it for
  • motion-led landing pages
  • editorial product launches
  • portfolios
  • personal finance apps
  • warm, crafted brands
  • editorial product pages
Skip it for
  • dashboards and app screens
  • dense data pages
  • dark or technical products
  • brands avoiding cream and green
Observations
  • the dashboard drifts back to the default cream, serif and green look
  • a dark fill hides the first envelope label in the hero
  • feature blocks sit faded until scrolled into view
  • the palette stays in the default cream, serif and green family

How the brief works

Install Motion Web

1 Run in your terminal

npx degit feitangyuan/motion-web#main .claude/skills/motion-web

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

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

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

Copies just this skill's folder into your project's .claude/skills.

Check the source for the latest instructions.

Install Frontend Design (OpenCode Power Pack)

1 Run in your terminal

npx degit waybarrios/opencode-power-pack/skills/frontend-design#main .claude/skills/frontend-design-waybarrios

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

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

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

Copies just this skill's folder into your project's .claude/skills.

Check the source for the latest instructions.