Theme Factory vs ECC Frontend Design Direction

Anthropic · Standalone skill

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.

Theme Factory3/5
After: Tally landing page, made with Theme Factory (Anthropic)
ECC Frontend Design Direction3/5
After: Tally landing page, made with ECC Frontend Design Direction

Scroll either page; the other follows.

Theme Factory (Anthropic)

3/5

Theme Factory picked a forest-and-marigold theme for the landing page, in Fraunces and DM Sans, and a separate forest-and-olive one in Source Serif 4 and Figtree for the dashboard. Both are tidy, but they stay in the cream-and-green family of the default. A floating 'Rent due Friday' card covers the hero balance. Pick it for quick, warm theming.

ECC Frontend Design Direction

3/5

ECC keeps a Fraunces and cream landing page but adds mono labels and a tilted sticky note. The IBM Plex dashboard is more useful than the baseline's, with a sync alert, search and person filters.

Side by side

FieldTheme Factory (Anthropic)ECC Frontend Design Direction
Fonts
  • Fraunces (landing)
  • DM Sans (landing)
  • Source Serif 4 (dashboard)
  • Figtree (dashboard)
  • Fraunces
  • Instrument Sans
  • JetBrains Mono
  • IBM Plex Sans and IBM Plex Mono (dashboard)
Colors
  • #2f5a3d forest
  • #4a7c59 fern
  • #f9a620 marigold
  • #b7472a terracotta
  • #f5f3ed cream
  • #a4ac86 olive (dashboard)
  • #F3EEE3 paper
  • #1D2621 ink
  • #2C6A4C green
  • #C84B31 tomato
  • #D9A52B mustard
  • #3A6C8F sky
Pick it for
  • warm consumer brands
  • small business sites
  • quick theming of existing pages
  • community apps
  • personal finance
  • household budgeting
  • prosumer dashboards
Skip it for
  • sharp tech brands
  • dark interfaces
  • products that need one consistent theme
  • bold brands
  • luxury
  • brands that need to look unlike other AI-made pages
Observations
  • landing: the 'Rent due Friday' card sits over the hero balance figure
  • the two pages use different themes and fonts
  • close to the baseline palette
  • landing hero: a tilted mustard sticky note covers the Rent row in the mockup
  • dashboard mobile: the search placeholder is cut off

How the brief works

Install Theme Factory (Anthropic)

1 Run in your terminal

npx degit anthropics/skills/skills/theme-factory#main .claude/skills/theme-factory

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 ECC Frontend Design Direction

1 Run in your terminal

npx degit affaan-m/ECC/skills/frontend-design-direction#main .claude/skills/frontend-design-direction

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.

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