hallmark

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

Updated Jul 7, 2026
One-click install
npx skills add https://github.com/jamsdoescode/Erik-s-Portfolio --skill hallmark-jamsdoescode
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: hallmark
Source: https://github.com/jamsdoescode/Erik-s-Portfolio/tree/main/openclicky/AppResources/OpenClicky/OpenClickyBundledSkills/hallmark
Command: npx skills add https://github.com/jamsdoescode/Erik-s-Portfolio --skill hallmark-jamsdoescode

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, 3-column feature grids, Inter-everywhere typography, and templated nav/footer shapes. Hallmark encodes an opinionated anti-slop design ruleset so generated pages and components look deliberately designed rather than 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 an audience/use-case/tone gate, then picks one of 21 named macrostructures and one of 22 catalog themes with mandatory diversification rules. - Three explicit verbs: hallmark audit scores a target against a named anti-pattern list and returns a ranked punch list; hallmark redesign restructures the visual layer inside existing implementation boundaries; hallmark study extracts design DNA from a screenshot or URL into a diagnosis 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, picks a non-repeating macrostructure and theme, and ships token-locked CSS verified at 320/375/414/768px widths. ## Quick Start Ask the assistant to design a landing page for your product and answer or skip the three questions about audience, use case, and tone.

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: it scans your project for existing fonts, palette, and motion libraries, asks about audience, use case, and tone, then picks one of 21 named macrostructures and a catalog theme. Diversification rules prevent consecutive outputs from repeating structure or theme.

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

Run 'hallmark audit <target>' to score the page against a named anti-pattern list covering purple-gradient heroes, 3-column feature grids, Inter-everywhere typography, and re-drawn browser chrome. It returns a ranked punch list with severity, file:line, and a one-line fix per finding without editing anything.

Can Hallmark redesign a page without breaking my existing codebase?

Yes. The redesign verb preserves routes, component ownership, copy intent, brand, and information architecture, changing only the visual and interaction layer. It states the exact files it will modify beforehand and requires explicit confirmation before any deletions.

Does Hallmark work with Tailwind, Next.js, and other frameworks?

Yes. The pre-flight scan detects Next.js, Astro, Vue, Svelte, Remix, and vanilla HTML, plus Tailwind configs, DTCG token files, and motion libraries like framer-motion. Existing tokens and font stacks are preserved rather than overwritten.

Can I extract a design system from a screenshot or URL?

Use 'hallmark study' with a screenshot or URL to extract macrostructure, type pairing, and color anchors into a diagnosis report. URL mode reads HTML and CSS for exact fonts and colors; you can optionally lock the result into a portable design.md for your own brand.

When should I not use Hallmark?

Hallmark is a design skill, not a code generator for backend logic or a license to restructure codebases. It refuses template-marketplace URLs in study mode, will not fabricate metrics or testimonials, and defers to an existing design.md as the locked system on managed projects.