Agent skill · Security

hallmark

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.

nexu95,528★ · +2,037/wk · 5 repos on radarProfile →
claude-codecodexcursorApache-2.0
Install
npx skills add nexu-io/open-design --skill hallmark --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

Facts
Files in the skill folder: 100
SKILL.md size: 61 KB
Bundled scripts: none
Version: 1.0.0
Path: plugins/community/hallmark/SKILL.md
Open the folder on GitHub →
Where it comes from
Stars: 83,577 · +1,339 this week
Language: TypeScript
Read our review of the source →

Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.

Review
written from the skill's own SKILL.md · Aug 5, 2026

What it does

Hallmark is a design skill for AI coding assistants. It has one default behavior and three explicit verbs: default design flow for building something new, hallmark audit <target> to score against anti-patterns and return a ranked punch list, hallmark redesign <target> with optional --mood to redesign within existing boundaries, and hallmark study <screenshot | URL> to extract DNA and diagnose or emit a design.md. It enforces structural variety across pages, preserves content intent, and avoids rebuilding browser chrome. It reads project design constraints (design.md if present), font stack, palette, and token usage, then outputs a design artifact plus an 8-state demo wrapper for components when relevant. It requires explicit file changes and warns against deleting production assets without confirmation, and it avoids copying PDFs or decks verbatim into pages. It never copies pixels in study mode for URL inputs and requires authorisation for design.md emission. See the verb table and safety rails in the text.

How it works

  • If the user input maps to a verb (audit, redesign, study), Hallmark runs the corresponding flow; otherwise it uses the default design flow.
  • Before editing, it states exact files expected to modify/create/delete. Deletions require explicit confirmation.
  • For redesigns, it preserves routes, copy intent, brand, and IA, changing only the visual/interaction layer within the requested scope.
  • For study, URL mode reads HTML/CSS via WebFetch to identify fonts and exact colors, then outputs a diagnosis and may emit a portable design.md or rebuild content using the extracted DNA.
  • It applies a design flow with a pre-emit critique and adheres to token-based styling, avoiding mid-render token improvisation.
  • It enforces 8 interactive states for components and outputs an 8-state demo wrapper.
  • It starts by a pre-flight scan of six signal sources (design.md, font stack, palette, motion, spacing) before proceeding.

When to use it

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.

What it can touch

It operates within the existing project structure, reads design.md if present, font and color tokens, and outputs design artifacts and optional component demos. It requires explicit confirmation for deletions and references token variables for colors/fonts rather than inlining values.

Caveats

  • It is designed to be opinionated and may refuse to copy pixel data or to directly copy non-owned URLs in design study.
  • It requires explicit user signals to switch between macroflow and component-scope flows; otherwise defaults to page-level design.
  • It relies on tokenized styling and prohibits mid-render inline color/constants outside tokens.
From the SKILL.md

# 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 (impeccable, kami, Anthropic's frontend-design skill, taste-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`](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

What's inside
Steps it walks through
  1. How to use this skill
  2. Disciplines that hold across every verb
  3. When the brief is a component, not a page
  4. What Component-scope keeps from the page flow
  5. What Component-scope skips
  6. What Component-scope emits
  7. Stamp format for component output
  8. When in doubt — ask once
  9. Design flow (default)
  10. 0. Pre-flight scan
  11. 1. Design-context gate
  12. 2. Pick a macrostructure FIRST
  13. 2.5. Check project memory
  14. 2.6. Theme route — studied-DNA, catalog, or custom
Ships with 24 files
  • LICENSE
  • open-design.json
  • references/anti-patterns.md
  • references/assets.md
  • references/color.md
  • references/component-cookbook.md
  • references/components/c1-outlined-chip.md
  • references/components/c2-inline-form-as-cta.md
  • references/components/c3-typographic-link.md
  • references/components/c4-sticky-bottom-bar.md
  • references/components/f1-bento-grid.md
  • references/components/f2-sticky-scroll-stack.md
  • references/components/f3-tabular-spec-sheet.md
  • references/components/f4-step-sequence.md
  • references/components/f5-annotated-screenshot.md
  • references/components/f6-product-card-grid.md
  • references/components/ft1-mast-headed.md
  • references/components/ft2-inline-rule-single-line.md
  • references/components/ft3-index-style-category-list.md
  • references/components/ft4-dense-typographic.md
  • references/components/ft5-statement.md
  • references/components/ft6-letter-close.md
  • references/components/ft7-newsletter-first.md
  • references/components/ft8-marquee-scroll.md
first 24 of 100
More from open-design
All skills →
About this skill
What does the hallmark skill do?

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.

How do I install it?

Run `npx skills add nexu-io/open-design --skill hallmark --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.

Where does this skill come from?

From nexu-io/open-design, a repository with 83,577 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.

Is a popular skill a good skill?

Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.

Keep going