hallmark

Generates and audits UI designs that avoid recognizable AI-generated layout patterns.

Updated Aug 8, 2026
One-click install
npx skills add https://github.com/wolfstar-project/code-zero --skill hallmark-wolfstar-project
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hallmark
Source: https://github.com/wolfstar-project/code-zero/tree/main/.agents/skills/hallmark
Command: npx skills add https://github.com/wolfstar-project/code-zero --skill hallmark-wolfstar-project

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? AI coding assistants produce interfaces that all look the same — purple-gradient heroes, three-column feature grids, Inter-everywhere typography, and templated nav bars. Hallmark encodes a strict set of anti-slop design rules so generated pages and components look deliberately designed rather than model-defaulted. ## Core Features & Use Cases - Design flow for new pages: Runs a pre-flight scan of the existing project (fonts, palette, motion libraries, framework), asks for audience/use case/tone, then picks one of 21 named macrostructures and a rotating theme catalog to guarantee structural variety across outputs. - Audit, redesign, and study verbs: hallmark audit scores a target against a named anti-pattern list and returns a ranked punch list; hallmark redesign rebuilds visual structure inside existing implementation boundaries; hallmark study extracts design DNA from a screenshot or URL into a diagnosis report or portable design.md. - Component-scope mode: Detects single-element briefs (button, card, modal) and emits the component plus an 8-state demo wrapper covering default, hover, focus, active, disabled, loading, error, and success states. - Use Case: Ask the assistant to build a landing page for a SaaS product; Hallmark scans the repo, preserves the existing Tailwind tokens, selects a non-repeating macrostructure and theme, and ships a page that passes its slop-test gates including mobile checks at 320/375/414/768 px. ## Quick Start Ask the assistant to design a landing page for your product and let Hallmark run its pre-flight scan and design flow.

Frequently Asked Questions about hallmark

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

FAQPage Schema
How do I make AI-generated landing pages look less generic?▼

Invoke Hallmark before building the page. It scans your project for existing fonts, tokens, and frameworks, asks for audience, use case, and tone, then picks one of 21 named macrostructures and a rotating theme so the output does not reuse the default hero-grid-CTA template.

How do I audit an existing page for AI design tells?▼

Run `hallmark audit <target>`. It scores the target against a named anti-pattern list (purple-gradient heroes, Inter-everywhere, card-in-card, re-drawn browser chrome, invented metrics) and returns a ranked punch list with severity, file:line, and a one-line fix per finding. It does not edit files.

Can Hallmark redesign a page without breaking my existing code?▼

Yes. The redesign verb preserves routes, component ownership, copy intent, and brand, replacing only the visual and interaction layer. It never deletes production files without explicit confirmation and states the exact files it will modify before editing.

Does Hallmark work with Tailwind, Next.js, or existing design tokens?▼

Yes. Its pre-flight scan reads package.json, tailwind.config, CSS :root tokens, and font imports, then preserves what it finds. If a design.md or tokens file exists, Hallmark treats it as the locked design system and defers all theme and typography picks to it.

What does Hallmark check for mobile responsiveness?▼

Every emitted page is verified at 320, 375, 414, and 768 px widths. Hard requirements include no horizontal scroll, no two-line clickable text, minmax(0, 1fr) on image grid tracks, and single-column section heads on mobile.

When should I not use Hallmark?▼

Skip it for non-visual backend work or when a project already has a locked design system you must follow verbatim. Hallmark is a design opinion layer; on design.md-managed projects it defers to that system rather than imposing its own catalog.