Illustration: Framed Panel vs Illustration: Grainy Gouache

Meng To · Meng To

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 Maximalist way: loud color, big type, more is more. Both are best for: visual direction, landing pages.

Illustration: Framed Panel3/5
After: Tally landing page, made with Illustration: Framed Panel (Meng To)
Illustration: Grainy Gouache3/5
After: Tally landing page, made with Illustration: Grainy Gouache (Meng To)

Scroll either page; the other follows.

Illustration: Framed Panel (Meng To)

3/5

The Framed Panel skill draws cosy cartoon scenes inside framed cards, in navy line with lavender, peach and coral, and wraps Tally in a soft lavender-and-cream page with Bricolage Grotesque. The dashboard places a scene in the summary card and keeps the palette. Pick it for gentle, friendly consumer products.

Illustration: Grainy Gouache (Meng To)

3/5

The Grainy Gouache skill paints a little bear at a desk in grainy, riso-like SVG and builds a warm Tally around it: pink, vermilion and sand on cream, Fraunces headlines and deep maroon panels. The dashboard keeps the bear and the warm palette. The mobile dashboard scrolls sideways slightly. Pick it for cosy, characterful consumer brands.

Side by side

FieldIllustration: Framed Panel (Meng To)Illustration: Grainy Gouache (Meng To)
Fonts
  • Bricolage Grotesque
  • DM Sans (landing)
  • Figtree (dashboard)
  • Fraunces
  • DM Sans (landing)
  • Figtree (dashboard)
Colors
  • #fcf6ea cream
  • #2e2a5c navy
  • #8a80ea violet
  • #d0ccf4 lavender
  • #e35d5b coral
  • #edb24f mustard
  • #5fa77a green
  • #fff3e2 cream
  • #fdd5a8 sand
  • #ff81be pink
  • #ff4816 vermilion
  • #4a0901 maroon
  • #e7a13a ochre
  • #545c01 olive
Pick it for
  • consumer apps
  • wellness and lifestyle products
  • friendly SaaS
  • onboarding pages
  • consumer apps
  • kids and family products
  • food and lifestyle brands
  • friendly finance
Skip it for
  • serious finance or legal brands
  • dark-mode products
  • minimal brands
  • enterprise software
  • tech and developer tools
  • minimal brands
Observations
  • among the most expensive runs in the batch, because each scene is drawn in SVG
  • the lavender palette is soft enough that the page lacks one clear focal point
  • dashboard mobile: 393 px wide on a 390 px screen, so it scrolls sideways a little
  • the runs are slow and costly next to the web-design skills, because the art is drawn in SVG
  • Fraunces headlines echo the default type even though the palette is far from it

How the brief works

Install Illustration: Framed Panel (Meng To)

1 Run in your terminal

npx degit MengTo/Skills/agent-skills/illustration/illustration-framed-panel#main .claude/skills/illustration-framed-panel

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: Grainy Gouache (Meng To)

1 Run in your terminal

npx degit MengTo/Skills/agent-skills/illustration/illustration-grainy-gouache#main .claude/skills/illustration-grainy-gouache

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.