Top Design (wondelai)
3/5 out of 5. Read the verdictCreates immersive, award-level web experiences in the style of Awwwards-featured agencies.
First screen only. Switch to side by side to read the full pages.
Scroll either page; the other follows.Full Top Design (wondelai) pageFull baseline
Every skill gets the same Tally brief, alone in a clean project. How we test
Our verdict
3/5 out of 5
Passed the cut
Top Design treats Tally like a printed ledger: warm paper, a very large Fraunces headline ("Every dollar, accounted for.") with a red tally mark that draws itself, and the same mark as the logo. The dashboard sets "$640." huge in Instrument Serif over a single split bar, with one persimmon accent. It is elegant and has a clear idea, though the warm paper and serif are near the default. Pick it for premium, editorial product pages.
Pick it for
- premium consumer products
- editorial landing pages
- brand-led startups
- calm dashboards
Skip it for
- dense admin tools
- playful brands
- dark-mode products
Typography
- Fraunceslanding
- Instrument Serifdashboard
- Geist
- Geist Mono
Colors
Observations
- the warm paper and big serif are close to the default look; the red tally mark is what sets it apart
Install
1 Run in your terminal
npx degit wondelai/skills/plugins/ux-design/skills/top-design#main .claude/skills/top-design2 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.
We tested the top-design skill from this repo.
Details
- Type
- Skill
- GitHub stars
- 2,457*
- Updated
- 37d ago
- License
- MIT
- Best for
- Visual directionLanding pages
Test runOpus 5.5Claude Code 2.1.303Oct 19, 2026generated in 7 minabout $1.66 at API pricescommit c172996
* Stars are for the whole wondelai/skills repository.
Made this skill?Put your score on your README, and claim this page for a link to your site. 
1. Put your score on your README
[](https://skillsfordesign.com/s/wondelai-skills-top-design/) The badge links here. If a retest changes the score, it updates by itself.
2. Claim this page
Get a free backlink to your site.
- A followed link, not nofollow. From the page about your skill, on a site about design skills, to your portfolio, product or studio. Search engines count it.
- Your name on the page. Credited as the maker, right under the description, where every visitor sees it.
- Free. Live within a few days.
How it will look
Thanks, we have it.
We'll check the repo and email you when your name is on the listing.
Similar
Same brief, other skills
Impeccable
Impeccable drops the cream-and-serif default for a loud navy, orange and primary-color landing page set in heavy Archivo, then builds a calmer pine-and-lime dashboard. Pick it if you want a product page with real energy that still holds up on a dense screen.
updated 1d ago
Hallmark
Hallmark turns Tally into a cheerful yellow-and-pastel brand in Plus Jakarta Sans with big ghost numerals, and the dashboard matches it. The most consistent result in the set, but it took about 12 minutes per brief.
updated 2mo ago
3D Metal Material (Meng To)
3D Metal Material gives Tally a dark studio look: Instrument Serif headlines with brass accents and a slowly tilting brushed-steel card in the hero, drawn live with WebGL. The dashboard puts the $640 on a machined steel plate and uses steel, brass and copper finishes on the bars and buttons. It feels premium and is consistent across both pages. Pick it when you want one rich 3D centerpiece on a dark product page.
updated today
Illustration: Outlined Cartoon (Meng To)
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.
updated today
Also for these tasks
Immersive (Awesome Design Skills)
Immersive sets Tally on one deep-green canvas like a museum exhibit: white cards with thick black borders and hard shadows, cobalt and hot-pink blocks, condensed Oswald headlines and slanted arcade buttons. Features are "Exhibit 01-04" and pricing is "Pick your ticket". The dashboard keeps the same look. It is loud and distinct, but both mobile pages scroll sideways, the dashboard only a little. Pick it for playful, story-led brands.
updated 4mo ago
Illustration: Bold Pop (Meng To)
The Bold Pop skill draws pop-art scenes in navy outline with hot pink, lemon and lime fills, and builds a loud, cheerful Tally around them: Bricolage Grotesque, thick navy borders and hard offset shadows. The dashboard keeps every bit of it. The landing scrolls sideways a little on a phone. Pick it for playful consumer brands that want to be noticed.
updated today
Illustration: Framed Panel (Meng To)
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.
updated today
Illustration: Grainy Gouache (Meng To)
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.
updated today