hallmark
Lets your agent create or analyze the design of pages and interfaces. It's useful for building or improving the look of websites and apps.
What it does
Hallmark helps create or improve the look of websites and apps. It ensures designs look human-made, with variety and structure, rather than generic.
When to use it
- ✓When you want to create a new website or app.
- ✓When you want to redesign something that already exists.
- ✓When you want to analyze a website to see what can be improved.
Example of what to ask your AI
“I want to create a website for my coffee shop with a modern and unique look.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
Hallmark follows design rules to prevent websites from looking the same. It focuses on varying page structure, not just colors or fonts, so each site has its own identity.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add Nutlope/hallmark --skill hallmarkOr download just the file:
curl -L https://raw.githubusercontent.com/Nutlope/hallmark/main/skills/hallmark/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
Hallmark
A design skill for AI coding assistants. Makes the UIs they generate look made, not generated.
Hallmark is opinionated, short, and boring on purpose. It encodes a tight set of rules — drawn from the consensus of the anti-AI-slop design field (Anthropic's frontend-design skill, the Claude cookbook on frontend aesthetics, and the 2026 "tactile rebellion" movement) — and refuses to let the model fall back to the defaults every LLM was trained on.
The differentiator: Hallmark insists on structural variety, not just visual variety. Two pages by Hallmark for two different briefs should not share the same hero → 3-feature → CTA → footer rhythm. They should feel like different sites, not different colour-swaps of the same template. See references/structure.md.
Powered by Together AI.
How to use this skill
Hallmark has one default behaviour and three explicit verbs.
| Invocation | What it does |
|---|---|
| (default) | The user asked you to design or build something new. Follow the Design flow below. |
hallmark audit <target> |
Read the target, score it against the anti-pattern list, return a ranked punch list. Do not edit. |
hallmark redesign <target> [--mood <name>] |
Take the target's content and intent, then redesign the visual structure inside the existing implementation boundaries unless the user explicitly confirms a full rebuild. New section rhythm, new heading placement, new component voice. Preserve existing routes, component ownership, copy intent, brand, and information architecture; replace only the visual/interaction layer needed for the requested scope. |
hallmark study <screenshot | URL> |
The user pasted or attached an image of a design they admire, or pasted a URL to a live page. Extract the DNA — macrostructure, archetypes, type-pairing, colour anchor — and produce a diagnosis report, then optionally rebuild the user's content using the extracted DNA or emit a portable design.md of the DNA. Detection is automatic: a URL (http:// / https:// prefix) routes to URL mode; anything else routes to image mode. URL mode reads the page's HTML and CSS via WebFetch — it can name exact fonts and exact colour values, but can't judge rhythm. After the diagnosis, the user has three follow-ups: build with the DNA (handoff to default), lock the DNA into a portable design.md (opt-in via "lock the DNA" / "give me a design.md"), or stop at the diagnosis. Never copies pixels. Refuses template-marketplace URLs. Tighter refusal layer for design.md emission than for the diagnosis itself — URL-mode emission requires attestation that the source is the user's own or a public reference for their own brand. Falls back to asking for a screenshot if the URL is auth-walled, a JS-only SPA shell, or otherwise un-readable. Load references/study.md before this verb runs. |
If the user types anything that does not clearly map to audit, redesign, or study, treat it as default. If the user attaches an image or pastes a URL without a verb prefix, ask: "Should I study this (extract the DNA), or should I treat it as a reference for a fresh build?"
Implementation safety rail. Hallmark is a design skill, not a license to bulldoze a codebase. In any existing project:
- Never delete production files, route trees, component directories, or an old website unless the user explicitly asks for deletion or approves a file-level plan that lists the deletions.
- Default to in-place edits of the named files, or additive new components/tokens that are wired through the existing route. If the redesign would require removing multiple components, stop and ask for confirmation first.
- Treat PDFs, README files,
.mdbriefs, docs, transcripts, and pitch decks as reference material. Do not copy them word-for-word into the page unless the user explicitly says to use that text verbatim. - Before editing, state the exact files you expect to modify/create/delete. Deletions require explicit confirmation.
…
FAQ
What does 'human-made design' mean?
It means the design doesn't look generic or repetitive, as if made by a robot. Hallmark uses rules to give personality and variety to the visual appearance.
What does Hallmark do if I give it a website link?
It can analyze the site to understand its design (colors, fonts, structure) and give you a report, or even use that 'essence' to help you create something new.
Can Hallmark change everything on an existing website?
It can redesign the appearance and visual structure, but it respects the original content and organization unless you explicitly ask for a complete overhaul.
Details
Original description by the author
Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots. Use when the user asks to build a new app or landing page, wants to redesign something, invokes Hallmark by name, or uses audit/redesign/study.
repo: Nutlope/hallmark
Popularity
- GitHub stars
- 30k
- Ranking position
- #6349
- License
- MIT
- Updated
- 8/6/2026
Comments
- …
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC