git404hub

what is hallmark fr?

nutlope/hallmark — explained in plain English

Analysis updated 2026-05-18

15,432CSSAudience · vibe coderComplexity · 2/5LicenseSetup · easy

tl;dr

A design skill for AI coding tools that stops generated web pages from looking like generic AI output.

vibe map

mindmap
  root((Hallmark))
    What it does
      Anti-AI-slop design rules
      Twenty themes
      Slop test gates
    Tech stack
      CSS
      HTML
      AI coding skill
    Use cases
      New UI generation
      Design audits
      Design DNA study
    Audience
      Vibe coders
      AI-assisted developers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Generate a new landing page or UI for a brief that avoids generic AI-looking design patterns.

VIBE 2

Audit an existing page's code against anti-pattern checks without changing anything.

VIBE 3

Redesign an existing page's visuals while keeping its copy and information structure intact.

VIBE 4

Study the design DNA of a site you admire and reuse its structure and style choices in a new brief.

what's the stack?

CSSHTMLClaude Code Skill

how it stacks up fr

nutlope/hallmarkcodebyzach/pacechalarangelo/30-seconds-of-css
Stars15,43215,61616,047
LanguageCSSCSSCSS
Setup difficultyeasyeasyeasy
Complexity2/52/51/5
Audiencevibe coderdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 5min

Installed with a single npx command or by copying skill files into Claude Code, Cursor, or Codex's skills folder.

MIT License: free to use, fork, and ship without restriction.

in plain english

Hallmark is a design skill for AI coding tools like Claude Code, Cursor, and Codex, built to stop generated web pages from looking like generic AI output. Instead of always reaching for the same layout patterns a model was trained on, Hallmark picks a page structure for the brief, applies one of twenty visual themes, and runs fifty seven automated checks plus a self review before handing back a result. The goal is that two pages built for two different briefs feel like genuinely different sites rather than the same template with different colors. The skill works through four commands. By default it builds new UI from a brief, choosing a structure, applying its rules, and checking the result against its anti pattern tests before returning it. An audit command scores existing code against those same anti patterns without making any edits. A redesign command keeps a page's copy, information structure, and brand but rebuilds the visual structure with a different look. A study command looks at a screenshot or website you admire and extracts its underlying structure, type pairing, and color choices, refusing to produce a pixel for pixel copy or reuse a paid template, and can optionally output a portable design notes file for use with other AI tools. When a brief has creative intent that does not fit any of the built in themes, Hallmark switches to a custom mode and designs a page from scratch with its own palette, type, and layout, while still running the same fifty seven quality checks. Installing it is done with a single command that adds the skill, and it can be re-run anytime to update. It can also be installed manually by copying its rule file and reference files into the appropriate folder for Claude Code, Cursor, or Codex. The project is licensed under the MIT License, so it can be used, forked, and shipped freely.

prompts (copy fr)

prompt 1
Install the Hallmark skill and use it to design a landing page for my product brief.
prompt 2
Run a Hallmark audit on my existing site's code and tell me what anti-patterns it flags.
prompt 3
Use Hallmark to redesign this page's visuals while keeping the same copy and layout intent.
prompt 4
Have Hallmark study this website's design and extract its structure, type, and color choices.

Frequently asked questions

what is hallmark fr?

A design skill for AI coding tools that stops generated web pages from looking like generic AI output.

What language is hallmark written in?

Mainly CSS. The stack also includes CSS, HTML, Claude Code Skill.

What license does hallmark use?

MIT License: free to use, fork, and ship without restriction.

How hard is hallmark to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is hallmark for?

Mainly vibe coder.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.