Vintage vs Framed Tech Dark Border Gradient

Awesome Design Skills · Meng To

Vintage (Awesome Design Skills) scored higher on the same brief, 4/5. The rows below show where each one fits.

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. Both are best for: visual direction.

Vintage4/5
After: Tally landing page, made with Vintage (Awesome Design Skills)
Framed Tech Dark Border Gradient3/5
After: Tally landing page, made with Framed Tech Dark Border Gradient (Meng To)

Scroll either page; the other follows.

Vintage (Awesome Design Skills)

4/5

Vintage builds Tally as a Windows 95 desktop: a grainy teal background, beveled silver windows, Silkscreen pixel headings and JetBrains Mono text. Features, pricing and the FAQ each sit in their own window, and the dashboard adds a title bar, LCD-style readouts and segmented progress bars. It is the most fully committed theme in this batch, and it still works on a phone. Pick it for retro, playful or nostalgic brands.

Framed Tech Dark Border Gradient (Meng To)

3/5

Framed Tech gives Tally a near-black page inside one framed shell: thin edge rails, corner markers, 1px gradient borders and uppercase mono labels, with a sparse mint accent. The dashboard uses the same framed shell, mint for money left and coral for overspending. It is clean and precise, but both mobile pages scroll sideways. Note that the landing and dashboard come from two different test days. Pick it for developer and infra products.

Side by side

FieldVintage (Awesome Design Skills)Framed Tech Dark Border Gradient (Meng To)
Fonts
  • Silkscreen
  • JetBrains Mono
  • Inter Tight
  • JetBrains Mono
Colors
  • #008080 teal
  • #c0c0c0 silver
  • #000080 title-bar navy
  • #ffd166 LCD yellow
  • #000000 black
  • #ffffff white
  • #050506 near-black
  • #0a0a0c shell
  • #ededee text
  • #8b8b92 muted grey
  • #9ef0c4 mint
  • #ff8a7a coral (dashboard)
Pick it for
  • retro and nostalgic brands
  • indie and hobby software
  • playful consumer apps
  • campaign pages
  • developer and infra tools
  • AI product pages
  • technical SaaS
  • dark dashboards
Skip it for
  • modern premium brands
  • accessibility-first products
  • serious enterprise tools
  • warm consumer brands
  • light, friendly products
  • editorial sites
Observations
  • the grey bevels and small pixel type make some text hard to scan
  • it is a costume: hard to tone down for a real product without losing the point
  • very low contrast grey text in places
  • the landing run is from batch 2 and the dashboard run from batch 3, both on the same kit and skill commit
  • landing mobile: 393 px wide on a 390 px screen, so it scrolls sideways a little
  • dashboard mobile: 532 px wide on a 390 px screen, so it scrolls sideways

How the brief works

Install Vintage (Awesome Design Skills)

1 Run in your terminal

npx degit bergside/awesome-design-skills/skills/vintage#main .claude/skills/vintage

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 Framed Tech Dark Border Gradient (Meng To)

1 Run in your terminal

npx degit MengTo/Skills/agent-skills/web-design/framed-tech-dark-border-gradient#main .claude/skills/framed-tech-dark-border-gradient

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.