Design Artifact (Effective HTML)
3/5 out of 5. Read the verdictDesign principles and creative direction for HTML artifacts: pages, reports, plans, landing pages, demos and small tools.
First screen only. Switch to side by side to read the full pages.
Scroll either page; the other follows.Full Design Artifact (Effective HTML) 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
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.
Pick it for
- product landing pages
- demos and prototypes
- reports and plans
- clean dashboards
Skip it for
- teams with a fixed brand
- playful consumer brands
- image-led marketing
Typography
- Big Shoulders Displaylanding
- Hanken Grotesklanding
- Bricolage Grotesquedashboard
- Public Sansdashboard
- IBM Plex Mono
Colors
Observations
- the landing and dashboard use different display fonts, so they feel like siblings rather than one system
Install
1 Run in your terminal
npx degit plannotator/effective-html/skills/design-artifact#main .claude/skills/design-artifact2 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 design-artifact skill from this repo.
Details
- Type
- Skill
- GitHub stars
- 3,697*
- Updated
- 2d ago
- License
- MIT
- Best for
- Visual direction
Test runOpus 5.5Claude Code 2.1.303Oct 18, 2026generated in 7 minabout $1.47 at API pricescommit 975b047
* Stars are for the whole plannotator/effective-html 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/effective-html-design-artifact/) 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
Liquid Glass Design (ECC)
Liquid Glass Design builds Tally out of frosted glass panels floating over soft mint, peach and periwinkle light, set in Bricolage Grotesque and DM Sans. The dashboard keeps the glass in Manrope and stays readable. Pick it if you want a friendly, Apple-flavored product that looks nothing like the cream-and-serif default.
updated 2d ago
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
Huashu Design
Huashu swaps Fraunces for Bricolage Grotesque and puts a lime highlighter on a deep forest green. It keeps envelopes as real kraft cards and carries the look into a tidy dashboard. A safe, distinct choice for consumer finance.
updated 4d ago
Also for these tasks
ECC Frontend Design Direction
ECC keeps a Fraunces and cream landing page but adds mono labels and a tilted sticky note. The IBM Plex dashboard is more useful than the baseline's, with a sync alert, search and person filters.
Creative (Awesome Design Skills)
Creative turns Tally into a comic book: Bangers headlines, IBM Plex Mono body text, thick black outlines with pop shadows, halftone dots, speech bubbles and highlighter yellow. The dashboard is a set of comic panels on cream halftone. It is one of the boldest looks here, but both mobile pages scroll sideways. Pick it for playful brands, and plan to fix the phone layout.
updated 4mo ago
Taste Skill (design-taste-frontend)
Taste makes the boldest landing page in the set, a white Swiss poster with giant Anton type, electric blue and red. The dashboard looks like a different skill made it, and it scrolls sideways on a phone.
Product Proof SaaS (Meng To)
Product Proof SaaS puts the product first: a white page with a large, readable app screen right under the headline, Inter Tight, mono labels and a single blue accent. The dashboard is clean Geist with blue bars and a clear overspend alert. It is focused and credible, if plain, and the mobile dashboard scrolls sideways. Pick it for SaaS pages that need to show the product working.
updated today