Design Artifact vs Nested Container Clean Agency

Effective HTML · 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 Minimalist way: white space, one accent, and the confidence to leave things out. Both are best for: visual direction.

Design Artifact3/5
After: Tally landing page, made with Design Artifact (Effective HTML)
Nested Container Clean Agency3/5
After: Tally landing page, made with Nested Container Clean Agency (Meng To)

Scroll either page; the other follows.

Design Artifact (Effective HTML)

3/5

Design Artifact gave Tally its own idea: cash envelopes drawn with flaps and fill bars, tally marks that count days left and form the logo, cool ledger grey with cobalt and marigold, and condensed Big Shoulders Display headlines. The dashboard is a calm, cool-toned app screen with Bricolage Grotesque and one cobalt accent. Both are clean and distinct. Pick it when you want the agent to come up with a concept, not just a palette.

Nested Container Clean Agency (Meng To)

3/5

Nested Container Clean Agency builds Tally from rounded boxes inside boxes: an off-white shell with inset near-black panels, Inter Tight headlines and a bright lime accent. The dashboard is crisp, with a dark summary block and lime highlights. The mobile dashboard scrolls sideways slightly. Pick it for modern SaaS and agency sites.

Side by side

FieldDesign Artifact (Effective HTML)Nested Container Clean Agency (Meng To)
Fonts
  • Big Shoulders Display (landing)
  • Hanken Grotesk (landing)
  • Bricolage Grotesque (dashboard)
  • Public Sans (dashboard)
  • IBM Plex Mono
  • Inter Tight
  • Inter (landing)
  • JetBrains Mono
Colors
  • #f3f5f9 ledger grey
  • #ffffff white
  • #111a2e ink navy
  • #2d4bf0 cobalt
  • #e99a0f marigold
  • #158a5c green
  • #f4f3ef page
  • #fbfaf7 shell
  • #121412 ink
  • #1a1e1b dark panel
  • #c9ef72 lime
  • #e8735a coral (dashboard)
Pick it for
  • product landing pages
  • demos and prototypes
  • reports and plans
  • clean dashboards
  • SaaS landing pages
  • agency and studio sites
  • product dashboards
  • startup marketing
Skip it for
  • teams with a fixed brand
  • playful consumer brands
  • image-led marketing
  • warm or traditional brands
  • editorial reading
  • playful consumer apps
Observations
  • the landing and dashboard use different display fonts, so they feel like siblings rather than one system
  • dashboard mobile: 393 px wide on a 390 px screen, so it scrolls sideways a little
  • lime on black is a popular SaaS look right now

How the brief works

Install Design Artifact (Effective HTML)

1 Run in your terminal

npx degit plannotator/effective-html/skills/design-artifact#main .claude/skills/design-artifact

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 Nested Container Clean Agency (Meng To)

1 Run in your terminal

npx degit MengTo/Skills/agent-skills/web-design/nested-container-clean-agency#main .claude/skills/nested-container-clean-agency

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.