Agency Grid Layout Minimal vs Illustration: Outlined Cartoon

Meng To · Meng To

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

Same brief, opposite looks. Agency Grid Layout Minimal is Minimalist and Illustration: Outlined Cartoon is Maximalist: see how far apart two good skills can take the same page.

Agency Grid Layout Minimal4/5
After: Tally landing page, made with Agency Grid Layout Minimal (Meng To)
Illustration: Outlined Cartoon4/5
After: Tally landing page, made with Illustration: Outlined Cartoon (Meng To)

Scroll either page; the other follows.

Agency Grid Layout Minimal (Meng To)

4/5

Agency Grid Layout Minimal turns Tally into a Swiss-style studio page: grey paper, huge light Inter Tight headlines with a darker second line, hairline rules and JetBrains Mono labels. The dashboard is the same: a giant "$640 left to budget", thin progress lines and one black bar in the chart. Pick it if you want a calm, typographic product page that looks designed rather than templated.

Illustration: Outlined Cartoon (Meng To)

4/5

The Outlined Cartoon skill draws its own SVG people and objects, with thick black outlines and flat yellow, periwinkle, red and green fills, and builds the whole page around them: chunky Bricolage Grotesque, hard offset shadows and sticker-like cards. The dashboard keeps the cartoon, down to a little character in the summary card. Pick it if you want a friendly, playful product that looks hand-made.

Side by side

FieldAgency Grid Layout Minimal (Meng To)Illustration: Outlined Cartoon (Meng To)
Fonts
  • Inter Tight
  • Inter (landing)
  • JetBrains Mono
  • Bricolage Grotesque
  • DM Sans (landing)
  • Figtree (dashboard)
Colors
  • #ecebe7 grey paper
  • #fbfaf8 white
  • #121211 ink
  • #8b8984 grey
  • #3d6b4f green (landing)
  • #b4441c rust (dashboard)
  • #1e1b1b ink
  • #fffdf8 paper
  • #f6c343 yellow
  • #6b7fd4 periwinkle
  • #e5281d red
  • #4ea54a green
  • #f6a3b6 pink
Pick it for
  • agency and studio sites
  • portfolio and case-study pages
  • minimal SaaS landing pages
  • finance and analytics dashboards
  • consumer apps
  • education and kids products
  • friendly onboarding
  • community and creator tools
Skip it for
  • playful consumer brands
  • image-heavy marketing pages
  • dark-mode products
  • serious finance or legal brands
  • enterprise software
  • minimal brands
Observations
  • landing: the light grey type on grey paper is low contrast in places
  • landing: the hero product shot is a pale wireframe that says little at a glance
  • the runs take far longer than the web-design skills, because every illustration is drawn by hand in SVG
  • the hard offset shadows on every card make long pages busy

How the brief works

Install Agency Grid Layout Minimal (Meng To)

1 Run in your terminal

npx degit MengTo/Skills/agent-skills/web-design/agency-grid-layout-minimal#main .claude/skills/agency-grid-layout-minimal

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 Illustration: Outlined Cartoon (Meng To)

1 Run in your terminal

npx degit MengTo/Skills/agent-skills/illustration/illustration-outlined-cartoon#main .claude/skills/illustration-outlined-cartoon

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.