Frontend Design Deslop vs UI Craft: Dense Dashboard

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 Engineer way: monospace, grids and labels. If it isn’t aligned, it isn’t done.

Frontend Design Deslop3/5
After: Tally landing page, made with Frontend Design Deslop
UI Craft: Dense Dashboard3/5
After: Tally landing page, made with UI Craft: Dense Dashboard

Scroll either page; the other follows.

Frontend Design Deslop

3/5

Frontend Design Deslop gives Tally a printed cheque: banknote green on pale mint, wide Archivo headlines over IBM Plex Serif text, a guilloche-patterned budget slip with a red PAID stamp, a bill timeline on a green band and pricing as tear-off cheques. The dashboard is an account book with an ink-green sidebar, mono figures and the month set out as a sum, but its Fraunces headings and green cards drift back toward the default. The landing page also scrolls sideways on a phone, where the nav runs out of room. Pick it for fintech or banking products that want a paper-money motif.

UI Craft: Dense Dashboard

3/5

UI Craft builds the best dense dashboard in the set: Linear-style IBM Plex on cool grey, with filters, a line chart and a who-spent-what view, all above the fold. The mobile dashboard scrolls sideways, which caps the score.

Side by side

FieldFrontend Design DeslopUI Craft: Dense Dashboard
Fonts
  • Archivo
  • IBM Plex Serif
  • IBM Plex Mono
  • Fraunces
  • IBM Plex Sans
  • IBM Plex Mono
Colors
  • #eaf6f1 mint paper
  • #114835 banknote green
  • #0d2720 ink
  • #bf2e16 stamp red
  • #d3eee2 mint tint
  • bg oklch(98.4% 0.002 250)
  • ink oklch(22% 0.012 255)
  • indigo accent oklch(50% 0.15 278) (landing)
  • teal brand oklch(52% 0.11 195) (dashboard)
Pick it for
  • fintech and banking apps
  • invoicing and accounting tools
  • brands with a paper-money motif
  • data-heavy dashboards
  • internal tools and admin
  • developer tools
  • B2B SaaS
  • directories with filters
Skip it for
  • dark interfaces
  • playful youth brands
  • warm consumer brands
  • emotional or lifestyle marketing
  • kids apps
Observations
  • the landing scrolls sideways on a phone
  • the dashboard drifts toward the default serif-and-green look
  • dashboard mobile: the page is 497 px wide on a 390 px screen, so it scrolls sideways
  • the accent changes from indigo on the landing page to teal on the dashboard
  • landing: reads like a dev-tool page (status bar, release number, keyboard shortcuts), which is odd for household budgeting

How the brief works

Install Frontend Design Deslop

1 Run in your terminal

npx degit samber/cc-skills/skills/frontend-design-deslop#main .claude/skills/frontend-design-deslop

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 UI Craft: Dense Dashboard

1 Run in your terminal

npx degit educlopez/ui-craft/skills/ui-craft-dense-dashboard#main .claude/skills/ui-craft-dense-dashboard

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.