skills.rest
po4yka
po4ykaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

hallmark

Generates structurally varied UI pages and components using themed design tokens and anti-pattern audits.

Updated Mar 28, 2026
Search Tags:#typography#landing page#claude code#design tokens#ui design#oklch#anti-ai-slop
One-click install
npx skills add https://github.com/po4yka/blog --skill hallmark-po4yka
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hallmark
Source: https://github.com/po4yka/blog/tree/main/.agents/skills/hallmark
Command: npx skills add https://github.com/po4yka/blog --skill hallmark-po4yka

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? AI coding assistants produce visually identical, template-like interfaces that audiences instantly recognize as generated. Hallmark enforces structural variety, honest content, and design-token discipline so generated pages and components look deliberately designed rather than defaulted. ## Core Features & Use Cases - Design flow with macrostructure and theme rotation: Picks one of 21 named macrostructures and one of 22 catalog themes (or a custom OKLCH palette), with mandatory diversification rules so consecutive outputs never repeat structure or theme axes. - Audit, redesign, and study verbs: Scores existing code against a named anti-pattern catalog, rebuilds visual structure while preserving content and IA, or extracts design DNA from screenshots and URLs into a portable design.md. - Component-scope mode with 8-state discipline: Detects single-element briefs and emits a component plus a demo wrapper rendering all 8 interaction states (default, hover, focus, active, disabled, loading, error, success). - Use Case: Ask your AI assistant to build a landing page for a coffee subscription; Hallmark runs a pre-flight scan of your project, asks about audience and tone, picks a macrostructure and theme, and emits token-locked, mobile-verified HTML/CSS stamped with its choices. ## Quick Start Ask your AI coding assistant to design a landing page for your product and let Hallmark ask its three context questions before it builds.

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 to install it. Alternatively, 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 code for AI-generated design patterns?▼

Invoke the audit verb with a target, such as hallmark audit followed by the file or page path. It scores the code against the named anti-pattern catalog and returns a ranked punch list with severity, file and line references, and fixes, without editing anything.

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

Yes. Its pre-flight scan reads package.json, tailwind.config, CSS custom properties, and font imports before designing, then preserves your existing palette, fonts, and spacing scale. It introduces macrostructure, microinteraction discipline, and slop-test gates on top.

Can Hallmark extract a design system from a screenshot or URL?▼

Yes, the study verb accepts a screenshot or URL and extracts the design DNA: macrostructure, type pairing, and color anchor. It can then rebuild your content with that DNA or emit a portable design.md, but it refuses pixel-clones and template-marketplace sources.

What are the limitations of Hallmark for component-level work?▼

Component-scope mode skips page-level apparatus like macrostructures, nav and footer archetypes, and hero enrichment. It emits only the component plus an 8-state demo wrapper, and does not log diversification entries for single-element briefs.

Related Skills

Explore More Design & Creative Skills→
barkleesandersbarkleesanders
5

product-marketing-context

Create a centralized product marketing context document with 12 standardized sections.

Community
Intermediate
etewiahetewiah
635

e2e-testing

Automate Playwright E2E tests and Lighthouse audits in CI/CD.

Community
Intermediate
KyaniteLabsKyaniteLabs
3

art-direction

Establish visual direction for web UI imagery with documented asset constraints.

Official
Advanced
shinnytechshinnytech

using-shadcn-ui

Create React UI components with shadcn/ui and Tailwind CSS.

Official
Intermediate