hallmark

Generates anti-AI-slop UI designs with themed macrostructures, audits, and redesigns.

Updated Mar 26, 2026
One-click install
npx skills add https://github.com/javiruu/viru-air --skill hallmark-javiruu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hallmark
Source: https://github.com/javiruu/viru-air/tree/main/.agents/skills/hallmark
Command: npx skills add https://github.com/javiruu/viru-air --skill hallmark-javiruu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? AI coding assistants produce UIs that all look the same — purple-gradient heroes, three-column feature grids, Inter-everywhere typography. This Skill enforces an opinionated anti-slop rule-set so generated pages and components look deliberately designed rather than templated. ## Core Features & Use Cases - Four verbs: a default design flow that picks one of 21 named macrostructures and one of 22 catalog themes, plus audit (score existing code against named anti-patterns), redesign (rebuild visual structure while preserving content), and study (extract design DNA from a screenshot or URL). - 65-gate slop test and pre-emit self-critique: every output is checked against typography, contrast, layout-safety, honest-copy, and token-discipline gates before handoff. - Component-scope mode: single-element briefs (buttons, inputs, cards) get an 8-state demo wrapper instead of page-level apparatus. - Use Case: Ask your AI assistant to build a SaaS landing page; the skill runs a pre-flight scan of your project, asks about audience, use case, and tone, then emits a stamped HTML/CSS artifact using a macrostructure and theme different from your previous builds. ## Quick Start Ask your AI assistant to design a landing page for your product and let Hallmark pick the macrostructure and theme after answering its three context questions.

Frequently Asked Questions about hallmark

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I install the Hallmark design skill?▼

Run npx skills add nutlope/hallmark, or copy SKILL.md and the references directory into ~/.claude/skills/hallmark/ for Claude Code, .cursor/rules/hallmark.mdc for Cursor, or ~/.codex/skills/hallmark/ for Codex.

How do I audit existing UI code for AI-generated patterns?▼

Run hallmark audit <target> to score the target against the named anti-pattern list, including purple-gradient heroes, three-column feature grids, and AI nav fingerprints. It returns a ranked punch list with severity ratings and does not edit any files.

What does the hallmark study verb do with a URL or screenshot?▼

The study verb extracts design DNA — macrostructure, type pairing, and colour anchors — from a screenshot or a live URL read via WebFetch. It produces a diagnosis report and can optionally rebuild your content with that DNA or emit a portable design.md file.

Does Hallmark work with existing Tailwind or Next.js projects?▼

Yes. A pre-flight scan reads package.json, tailwind.config, and CSS files to detect existing fonts, palettes, spacing scales, and motion libraries, then preserves them. A design.md file at the project root overrides everything as the locked design system.

When does Hallmark refuse a study request?▼

It refuses paid template marketplace listings, competitor pages, and third-party extraction requests. URL-mode design.md emission additionally requires attestation that the source is your own site or a public reference for your own brand.

Why does Hallmark ask about audience, use case, and tone before designing?▼

The three-question gate prevents the model from inventing context on vague briefs, which is the main cause of generic output. You can answer partially or say go ahead, and the skill will state its inferences explicitly so you can redirect.