# Hallmark vs. Current Design Skill — Comparison Analysis

**Hallmark:** https://github.com/Nutlope/hallmark  
**Purpose:** Anti-AI-slop design skill for Claude Code, Cursor, Codex  
**1,314 stars · 88 forks · MIT License**

---

## Quick Summary

| Dimension | Hallmark | Current Design Skill |
|---|---|---|
| **Primary focus** | Landing page / UI generation with structural variety | Brand assets, CIP mockups, logos, slides, banners, icons |
| **Target output** | Complete pages (HTML/CSS) | Static assets (logos, PDFs, presentations) |
| **Design philosophy** | Macrostructure variety + 60-gate slop test | Design token system + generative AI (Gemini) |
| **Integration style** | Skill that orchestrates AI coding agents | Skill that invokes scripts + AI models directly |
| **Diversification** | Mandatory — tracks history to prevent repetition | Not built-in — relies on user prompts for variety |
| **Quality gates** | 60-gate slop test + pre-emit self-critique | Quality bar in `design.md` (visual, not automated) |
| **Documentation** | 60+ reference files, 21 macrostructures, 36 component archetypes | ~20 reference files, 13 cover patterns, 4 document types |

---

## Architecture Comparison

### Hallmark — Page-First Design System

Hallmark is fundamentally about **generating complete landing pages** that don't look AI-generated. Its architecture revolves around:

```
SKILL.md (orchestrator)
  └── references/
        ├── macrostructures/     ← 21 named page shapes (Bento Grid, Manifesto, etc.)
        │     └── 01-bento-grid.md through 21-component-playground.md
        ├── components/         ← 36 component archetypes (H1-H9 heroes, S1-S5 section heads, etc.)
        ├── genres/             ← 4 genre packs (editorial, modern-minimal, atmospheric, playful)
        ├── structure.md        ← 6-axis structural fingerprint system
        ├── slop-test.md        ← 60-gate quality checklist + pre-emit self-critique
        ├── anti-patterns.md    ← Explicitly banned AI patterns
        ├── typography.md       ← 2+1 font discipline
        ├── motion.md           ← Motion on/cut detection + microinteraction rules
        ├── responsive.md        ← Mobile non-negotiables (320/375/414/768px)
        ├── custom-theme.md      ← Custom OKLCH palette construction for brand-specific briefs
        ├── study.md             ← Extract DNA from screenshots/URLs
        └── verbs/              ← audit, redesign, study command implementations
```

**Core mechanism:** Pick a macrostructure → select theme + nav + footer archetypes → run slop test → emit. Diversification is enforced via `.hallmark/log.json` tracking.

### Current Design Skill — Asset-First Design System

Current design skill is fundamentally about **generating design assets** (logos, business cards, presentations) using AI models. Its architecture:

```
SKILL.md (orchestrator + routing)
  └── references/
        ├── logo-design.md          ← 55 styles, 30 palettes, 25 industry guides
        ├── logo-style-guide.md
        ├── logo-color-psychology.md
        ├── logo-prompt-engineering.md
        ├── cip-design.md            ← 50 deliverables, 20 styles, 20 industries
        ├── cip-style-guide.md
        ├── cip-deliverable-guide.md
        ├── cip-prompt-engineering.md
        ├── slides-create.md         ← HTML presentations with Chart.js
        ├── slides-layout-patterns.md
        ├── slides-copywriting-forms.md
        ├── slides-strategies.md
        ├── slides-html-template.md
        ├── banner-sizes-and-styles.md ← 22 art direction styles
        ├── social-photos-design.md
        ├── icon-design.md            ← 15 styles, 12 categories
        └── design-routing.md
  └── scripts/
        ├── logo/search.py, generate.py, core.py
        ├── cip/search.py, generate.py, render-html.py, core.py
        └── icon/generate.py
  └── design.md (design system — palette logic, typography, cover patterns)
```

**Core mechanism:** Parse user intent → route to appropriate script or sub-skill → invoke Gemini AI → render HTML or export screenshot.

---

## Detailed Feature Comparison

### 1. Scope & Output Types

| Feature | Hallmark | Current Design Skill |
|---|---|---|
| Landing pages / full UI | ✅ Full macrostructure + components | ❌ No page generation |
| Design tokens / CSS | ✅ OKLCH tokens per theme, custom-theme OKLCH builder | ✅ `tokens.json` via palette.py for PDFs |
| Logo generation | ❌ Not a focus | ✅ 55 styles, Gemini AI |
| Business card / stationery | ❌ Not a focus | ✅ CIP mockups, 50 deliverables |
| Presentations / slides | ❌ Not a focus | ✅ HTML + Chart.js |
| Banners / social media | ❌ Not a focus | ✅ 22 styles, multi-platform |
| Icon design | ❌ Not a focus | ✅ 15 styles, SVG generation |
| Logo wall / proof strips | ✅ Component archetypes (T2) | ❌ Not included |
| Interactive UI components | ✅ 36 component archetypes, 8-state checklist | ❌ No UI component focus |

**Verdict:** Hallmark and current skill are **non-overlapping in scope**. Hallmark focuses on page-level UI generation; current skill focuses on design asset creation. They could be **complementary** — Hallmark for landing pages, current skill for brand/asset work.

### 2. Design Philosophy

**Hallmark philosophy: Structural variety over visual variety.**

> *"Two pages by Hallmark for two different briefs should not share a macrostructure or theme. They should feel like different sites, not colour-swaps of the same template."*

Hallmark achieves this through:
- **21 named macrostructures** — each a complete page shape (Bento Grid, Manifesto, Long Document, etc.)
- **Diversification rule** — mandatory tracking of past outputs via `.hallmark/log.json`
- **6-axis structural fingerprint** — heading placement, body composition, divider language, button voice, image treatment, reveal pattern
- **Theme rotation** — 22 named themes across 4 genre clusters
- **60-gate slop test** — explicit AI pattern detection (gradient text, centered-everything hero, 3-feature equal columns, etc.)

**Current skill philosophy: Content-rooted design tokens.**

> *"Every design decision must be rooted in the document's content and purpose."*

Current skill achieves this through:
- **Mood-based palette logic** — 10 mood types → base palette selection
- **One accent rule** — accent appears only on geometric elements, section rules, callout borders
- **13 cover patterns** — pattern selection based on document type (report, proposal, resume, etc.)
- **2-font ceiling** — display + body only
- **Design token system** — semantic layers (display, h1, h2, h3, body, caption, meta)

**Verdict:** Hallmark is more **proactive** about preventing sameness (enforced tracking + diversification rules). Current skill is more **reactive** (relies on content description to guide decisions).

### 3. Quality Assurance

**Hallmark — 60-gate automated checklist:**

- **Visual gates (1-8):** Inter font check, gradient check, 3-column equal grid check, nested cards, gradient text, card side-stripe, centered hero, pure black/white
- **Structural gates (9-10):** Same fingerprint check, section-only whitespace
- **Microinteraction gates (11-19):** `transition-all`, uniform hover-scale, bouncy easings, multi-hover, animating width/height, focus ring fade, success toast, hover delay, auto-rotating pause
- **Diversification gates (20-35):** Stamp presence, macrostructure repetition, Specimen fall-through, token improvisation
- **Layout-safety gates (36-38):** Horizontal scroll, decorative text position, interactive bar centering
- **Typography gates (39-40):** 3+ font check, outlier face overuse
- **Input-state gates (41-45):** Border-width changes, focus ring built from border, form height mismatch, helper-text collapse, disabled opacity-only
- **Contrast gates (46-50):** Body text 4.5:1, large text 3:1, button text contrast, accent ink pairing, dark section text flip
- **Nav/footer/hero slop gates (51-55):** N1 fingerprint, Ft3 fingerprint, centered-everything, padding asymmetry, decorative-without-purpose
- **Pre-emit self-critique (6 axes):** Philosophy, Hierarchy, Execution, Specificity, Restraint, Variety — each scored 1-5, <3 triggers revision

**Current skill — Manual quality bar:**

- Cover has clear visual identity (not generic AI)
- Body text readable at arm's length
- Every page belongs to the same document
- No element bleeds off edge or overlaps
- Page numbers correct
- Accent appears <8 times per page average

**Verdict:** Hallmark's quality assurance is **far more systematic and automated**. The 60-gate checklist with concrete rules (e.g., "pure #000 or #fff base color" = fail) is more actionable than "a designer would not be embarrassed" quality bar.

### 4. Color Systems

| Aspect | Hallmark | Current Skill |
|---|---|---|
| Color format | OKLCH (required — `oklch(...)` throughout) | Hex + RGB, occasional named CSS |
| Theme system | 22 named catalog themes + custom OKLCH builder | 10 mood-based palette presets |
| Neutral handling | Tinted toward anchor hue (min 0.005 chroma) — modern-minimal allows zero-chroma | Neutral grays, all generated from mood |
| Accent usage | Strict 5% max footprint rule (except atmospheric ~20%) | Geometric elements, rules, callout borders |
| Dark mode | Atmospheric genre (dark paper themes: Bloom, Midnight, Terminal) | Darkroom cover pattern only |
| Token block | Named tokens (`--color-accent`, `--color-paper-3`) — inline values banned | `tokens.json` with semantic token names |
| Contrast verification | APCA Lc or WCAG ratio required, with explicit threshold checks | WCAG 4.5:1 guidance, not enforced |

**Verdict:** Hallmark's color system is more **prescriptive** (OKLCH required, tokens mandatory, 5% accent limit). Current skill is more **flexible** (hex acceptable, mood-driven selection).

### 5. Typography

| Aspect | Hallmark | Current Skill |
|---|---|---|
| Font pairing rule | 2+1 discipline (display, body, outlier for wordmark/stat) | 2 maximum (display + body) |
| Recommended fonts | Geist Sans (modern-minimal), serif/sans pairs for editorial | Playfair Display, Syne, Fraunces, etc. for covers; system fonts for body |
| Type scale | CSS clamp-based (`clamp(2.5rem, 5vw + 0.5rem, 4.75rem)`) | Fixed pt scale (54pt display → 8pt meta) |
| Mono usage | Terminal genre uses monospace for body | Courier Prime for terminal pattern cover |
| Number treatment | Tabular nums for stats, `font-variant-numeric: tabular-nums` | Numeric blocks in fixed-width layout |
| Display size range | Up to `clamp(3rem, 6vw + 1rem, 6rem)` for atmospheric | 54pt fixed for cover, 22pt for h1 |

**Verdict:** Similar philosophy (2-3 faces max, role-based pairing), different approach. Hallmark uses **fluid CSS clamp** sizing; current skill uses **fixed pt sizes** (better for print/PDF).

### 6. Component Library

**Hallmark** has 36 component archetypes with variation knobs:

| Category | Count | Examples |
|---|---|---|
| Heroes (H1-H9) | 9 | Marquee, Split Diptych, Stat-Led, Letter, Photographic, Demo video clipped, Mockup split, Custom illustration |
| Section heads (S1-S5) | 5 | Left margin numbered, Hanging, Sticky pinned, Inline no break, Bottom anchored |
| Feature blocks (F1-F6) | 6 | Bento grid, Sticky scroll stack, Tabular spec sheet, Step sequence, Annotated screenshot, Product card grid |
| CTAs (C1-C4) | 4 | Outlined chip, Inline form-as-CTA, Typographic link, Sticky bottom bar |
| Testimonials (T1-T4) | 4 | Pull quote with marginalia, Logo wall (hairline), Single huge quote, Numbered stat strip |
| Navigation (N1-N10) | 10 | Wordmark+2 links, Floating chip, Side rail, ⌘K-only, Floating pill, Newspaper masthead, Brutal slab, Terminal command, Edge-aligned minimal, Floating-on-scroll-morph |
| Footers (Ft1-Ft8) | 8 | Mast-headed, Inline rule single line, Index style columns, Dense colophon, Statement, Letter close, Newsletter-first, Marquee scroll |

**Current skill** has no explicit component library — it's asset-focused.

**Verdict:** Hallmark has a **comprehensive component system** with variation knobs for diversification. Current skill has no UI component architecture.

### 7. Responsive Design

**Hallmark — rigorous mobile-first:**

- Mandatory verification at **4 widths**: 320px, 375px, 414px, 768px
- Explicit horizontal scroll prevention (`html { overflow-x: clip }` — not `hidden`)
- Per-archetype mobile collapse rules in component-cookbook
- Button/clickable text must not wrap to 2 lines (WCAG)
- Grid tracks use `minmax(0, 1fr)`, never bare `1fr`
- Display headers use `overflow-wrap: anywhere; min-width: 0`

**Current skill — PDF-focused, not responsive:**

- Design system is for print/A4 documents
- Social photos have platform-specific sizes
- No responsive breakpoint system

**Verdict:** Hallmark is **web-native and mobile-first**. Current skill is **print/screenshot-oriented**.

### 8. Motion & Microinteractions

| Aspect | Hallmark | Current Skill |
|---|---|---|
| Motion detection | Scans `package.json` for framer-motion, gsap, motion, lenis, lottie | Not applicable (static output) |
| Motion stance | Motion-on vs motion-cut (affects animation choices) | Static PDFs/HTML |
| Reveal patterns | 6 options: fade-up stagger, horizontal sweep, type-unmask, number-tick, typewriter, none | Not applicable |
| Hover effects | Strict rules: no `transition-all`, no uniform `scale(1.05)`, max 1 hover effect per element | Not applicable |
| Focus rings | Must use `outline` (not `border`), appear instantly (no fade-in) | Not applicable |
| Reduced motion | Mandatory `@media (prefers-reduced-motion: reduce)` fallback | Not applicable |
| 8-state component checklist | Default, hover, :focus-visible, :active, disabled, loading, error, success | Not applicable |

**Verdict:** Hallmark has a **comprehensive microinteraction system**. Current skill doesn't address motion (static output).

### 9. Verbs & Commands

| Command | Hallmark | Current Skill |
|---|---|---|
| Default (build) | Pick macrostructure, theme, run slop test, emit | Route to appropriate sub-skill |
| `audit <target>` | Score existing code against anti-patterns, ranked punch list, no edits | Not implemented |
| `redesign <target>` | Keep content/IA/brand, rebuild visual layer within existing implementation | Not implemented |
| `study <screenshot\|URL>` | Extract DNA (macrostructure, type-pairing, color anchor) from reference | Not implemented |
| `generate` | N/A (output is code, not AI image) | Logo, CIP, slides, banners, icons |

**Verdict:** Hallmark has **deeper UI-focused commands** (audit, redesign, study). Current skill has **generative commands** (logo, CIP, slides).

### 10. Pre-flight Scanning

Hallmark has an explicit **6-signal pre-flight scan**:

1. `design.md` — locked design system (overrides everything)
2. Font stack — next/font, @fontsource, Google Fonts link, Tailwind `theme.extend.fontFamily`
3. Palette — OKLCH in `:root`, Tailwind colors, `tokens.json`, `design-tokens.json`
4. Microinteraction stance — framer-motion, gsap, motion, lenis, lottie installed?
5. Spacing scale — Tailwind `theme.extend.spacing`, `--space-*` pattern, 4pt or 8pt scale
6. Framework — Next.js, Astro, Vue, Svelte, Remix, vanilla

**Current skill** doesn't have a pre-flight scan — it generates fresh output based on prompt content.

**Verdict:** Hallmark is designed to **integrate with existing codebases**. Current skill is designed to **generate standalone assets**.

---

## What Each Does Well

### Hallmark — Strengths

1. **Anti-AI-slop enforcement** — The 60-gate checklist explicitly bans the most recognizable AI patterns. This is a genuine innovation.
2. **Structural variety** — 21 macrostructures × 22 themes × 36 component archetypes × 10 nav + 8 footer patterns = massive variety without randomness.
3. **Diversification tracking** — `.hallmark/log.json` prevents the same macrostructure/theme appearing twice in a row.
4. **Component 8-state checklist** — Every interactive component must have code for all 8 states (default, hover, focus, active, disabled, loading, error, success).
5. **Mobile verification** — Mandatory check at 4 widths with specific rules.
6. **Pre-emit self-critique** — 6-axis scoring (Philosophy, Hierarchy, Execution, Specificity, Restraint, Variety) before handing back output.

### Current Design Skill — Strengths

1. **Asset breadth** — Logo (55 styles), CIP (50 deliverables), slides, banners (22 styles), icons (15 styles), social photos — comprehensive design asset coverage.
2. **AI model integration** — Gemini for logo, CIP, icons — direct model invocation without code generation.
3. **PDF design system** — `design.md` with 13 cover patterns, mood-based palettes, restraint principles — well-suited for document design.
4. **Script infrastructure** — BM25 search engine for styles/colors/industries, generate scripts for logos/CIP/icons, render-html.py for presentations.
5. **Print-ready output** — Fixed pt sizes, CMYK guidance for print, bleed specs — designed for physical deliverables.

---

## Critical Gaps

### Hallmark Gap vs. Current Skill

- No logo/brand asset generation
- No CIP deliverables (business cards, letterhead, etc.)
- No slide/presentation generation
- No banner design
- No icon library generation
- No PDF/document generation
- No print design (fixed sizes, CMYK, bleed)
- No social media image generation

### Current Skill Gap vs. Hallmark

- **No landing page/UI generation** — biggest gap
- **No structural variety enforcement** — can produce repetitive outputs
- **No component library** — no UI component patterns
- **No mobile responsiveness system** — social photos have sizes but no responsive breakpoints
- **No microinteraction rules** — static output only
- **No pre-flight scan** — generates fresh without considering existing codebase
- **No slop detection** — no systematic AI-pattern prevention
- **No diversification tracking** — no history-based output variation
- **No OKLCH color system** — hex-based
- **No typography scale system** — just cover/heading/body categories

---

## Integration Possibilities

Hallmark and current design skill are **complementary, not competing**:

```
┌─────────────────────────────────────────────────────────┐
│                    User Request                         │
└─────────────────────────────────────────────────────────┘
                              │
              ┌───────────────┴───────────────┐
              ▼                               ▼
    ┌─────────────────────┐       ┌─────────────────────┐
    │   Hallmark          │       │   Current Design    │
    │   (landing pages,   │       │   (logos, CIP,      │
    │    UI components)   │       │    slides, banners) │
    └─────────────────────┘       └─────────────────────┘
              │                               │
              └───────────────┬───────────────┘
                              ▼
                    ┌─────────────────────┐
                    │   Unified Output     │
                    │   (pages with        │
                    │    branded assets)  │
                    └─────────────────────┘
```

**Potential integration points:**

1. **Hallmark → Current skill:** Hallmark generates a landing page; current skill generates the logo/branding assets that Hallmark uses.
2. **Current skill → Hallmark:** Logo from current skill → Hallmark pre-flight scan detects brand colors → Hallmark uses them in custom theme construction.
3. **Shared design.md:** Both could read a common `design.md` file — current skill writes it after CIP generation, Hallmark reads it as the project design system.
4. **Hallmark audit → current skill redesign:** Hallmark audits an existing page, identifies structural issues; current skill generates replacement assets (logos, icons) as part of the redesign.

---

## Recommendation

**Hallmark fills a critical gap in the current design skill — page-level UI generation with structural variety.**

The current skill excels at **design asset creation** (logos, CIP, slides, banners, icons). Hallmark excels at **landing page/UI generation** with anti-AI-slop enforcement. Together they cover a much wider design scope.

**Key priorities if integrating Hallmark concepts into current skill:**

1. **Add structural variety enforcement** — track past outputs, enforce macrostructure/theme diversification
2. **Implement slop detection** — systematic anti-pattern checklist (gradient text, centered heroes, etc.)
3. **Add component library** — 36 component archetypes with variation knobs
4. **Add mobile responsiveness system** — breakpoints, horizontal-scroll prevention, 44px touch targets
5. **Switch to OKLCH** — better color math, chromaticity preservation, perceptual uniformity
6. **Add 8-state component checklist** — default, hover, focus, active, disabled, loading, error, success
7. **Add pre-flight scan** — detect existing code, fonts, palette, motion stance before generating

**Priority if keeping separate but complementary:**

- Create a routing layer that delegates "landing page" requests to Hallmark and "asset" requests to current skill
- Share a common `design.md` format so logo/CIP outputs can feed Hallmark inputs
- Consider a shared `.hallmark/` log for tracking design history across both skills