What is the Hallmark design skill?
Hallmark is an open source design skill by Together AI for AI coding agents. It deals three themes, builds a self-contained HTML and CSS page around what the visitor came to do, then runs a linter and a fresh-context review before handing the page back.
Hallmark is a SKILL.md folder, version 2.0.0, made by Together AI under the MIT license. The repository describes it as a design skill for Claude Code, Codex, Cursor and OpenCode, used when you ask an agent to build or design something new.
It sets a floor of rules every page must meet, deals a visual direction so consecutive builds differ, and checks the result before the agent reports back.
What changes in the agent's output
- Every colour and font goes through a token declared at the root, with no literal values further down the stylesheet.
- The page is built from the job a visitor comes to do, such as subscribe, book, buy or sign up, and the action sits where that category puts it.
- The hero is built and reviewed alone before the rest of the page exists.
- Invented metrics, testimonials, logo walls and case-study counts are not allowed.
How a Hallmark build runs
- Pre-flight reads the project fonts, palette and framework, then asks once for material such as photos, screenshots and real numbers.
- A theme script deals three themes that fit the prompt, and a second command deals the page anatomy from its job.
- The hero is rendered and reviewed cold, then the rest of the page is built.
- A linter checks the page at eight widths, and a subagent reviews it with fresh eyes.
Redesign and audit modes
Hallmark does not touch an existing design unless you name it. A redesign keeps content and wiring and changes the system and layout, while an audit only reports. Pair the audit output with the critique skill or the polish skill for a second opinion.
Who it is for
Best for
- New landing pages, sites and standalone pages that an AI coding agent writes as HTML and CSS.
- Teams that want a repeatable list of checks, including contrast, focus states and reduced motion, applied to generated pages.
- Redesigns of an existing page where links, fields and headings must survive.
Not for
- Small edits to an existing design. The skill says any other change is not a Hallmark run.
- Setups without Node 18 or later, where the scripts cannot run.
Use it with UiChemy
Hallmark outputs static HTML and CSS, so it suits a prototype you then rebuild or refine as an editable WordPress site, alongside the frontend design skills on UiChemy. Click Get Started on uichemy.com.
How to install Hallmark Design Skill for AI Coding Agents: Themes, Gates and Install
git clone https://github.com/Nutlope/hallmark.git && node hallmark/skills/hallmark/scripts/install.mjsCheck requirements
Node 18 or later is needed. For the browser checks, also install puppeteer-core globally and have Chrome available. Without them the static checks still run.
Clone and run the installer
The README lists a from-a-clone route: the install script validates every theme and reference before it copies the skill.
Or use the README's package command
The README also gives a one-line install through the skills CLI with a global flag, and a plugin route through the marketplace add and install commands.
Invoke it
In Claude Code or Cursor, type /hallmark with a prompt. In Codex CLI, type $hallmark. If it does not fire on its own, name it in the prompt.
Check that it loaded
Ask the agent for a new landing page. If the skill loaded, it asks once about material, audience, use and tone, and shows a Picks block naming the theme and shape.
Key features
- Three-tier gatesThe Floor never ships, Reflex gates are defaults a build may overrule with a stated reason, and Finish checks are craft detail that never blocks a ship.
- Dealt themesA theme script offers three themes that fit the prompt. A theme is one file of at most 8 KB covering paper, type, colour and surfaces, and a build reads exactly one.
- Custom directionSay custom and the themes are dropped. The agent designs from the prompt alone under the same floor and checks, guided by a short direction file.
- Built from the jobEach page is shaped by a category anatomy: a booking page books, a shop sells, a newsletter subscribes, and the page ends on that action.
- Hero firstThe headline, one sentence and the primary action must be visible at 1280 by 800. The hero is rendered and reviewed before other sections are written.
- Sloplint checksA linter script checks the page statically, and with the render flag at eight widths. It needs puppeteer-core and Chrome for the browser tier.
- Fresh-context reviewA subagent reviews the finished page without the build history, and its first word decides the next step: recapture, rebuild, fix or ship.
- Real product capturesWhen a URL, dev server or app is available, the build captures screenshots with a script. Only point it at addresses you trust.
- Photo libraryStand-in photographs come from a list of openly licensed images hosted on Wikimedia Commons. Each used image is credited on the page.
- Redesign and auditA redesign rebuilds the system and layout while a before and after check confirms no link, field or handler went missing. See also improve UI.
Frequently asked questions
What is the Hallmark skill?
Hallmark is a design skill by Together AI, distributed as a SKILL.md folder in an MIT licensed repository. It guides an AI coding agent to build new pages from the visitor's job, using a dealt theme, a hard floor of rules and a linter.
How do I install Hallmark?
Clone the repository and run the install script under skills/hallmark/scripts, which validates every theme and reference before copying. The README also documents a one-line package command and a plugin route. You need Node 18 or later, and the render checks also need puppeteer-core and Chrome.
Which agents does Hallmark support?
The README names Claude Code, Codex CLI, Cursor and OpenCode, and lists where the skill lands and how to invoke it in each. It also lists GitHub Copilot as an agent option for a single-harness install. Other agents may work if they load SKILL.md folders.
What do the redesign and audit commands do?
The redesign command rebuilds a page you name while keeping its content and wiring, and the audit command only reports findings. A before check records links, fields, handlers and headings, and a later check fails the redesign if one went missing.
Does Hallmark fetch URLs?
Its SKILL.md says that when the product can be reached by a URL, dev server or app, a capture script takes screenshots of it. Treat that as a network action and give it only addresses you trust. A pre-flight signal also mentions a Together API key for generated stills.
Is Hallmark free to use?
Yes. The README states the MIT licence and says to use it, fork it and ship it. The photo library lists images on Wikimedia Commons, and each keeps its own licence such as CC0, public domain, CC BY or CC BY-SA, so credit them as the page does.
Can I use Hallmark output for a WordPress site?
Hallmark writes self-contained HTML and CSS, not WordPress themes. You can use that page as a design reference or prototype, then rebuild or refine it in Elementor or Gutenberg with a tool such as the UiChemy Composer, which edits real HTML, CSS and JS.