hallmark Skill for Claude Code: Build Web Pages That Do Not Look AI-Generated

Makes your assistant build web pages that look designed, using a hard rule set, a dealt theme and a browser lint.

Installs: 84.5K; on skills.sh
Stars: 44.7K; on GitHub
Files: 60+; besides SKILL.md
Updated: Oct 2026; last repo commit

hallmark makes your assistant build a new page against a hard floor of 16 rules, such as colours and fonts only through tokens, no invented metrics or testimonials, and a visible hero at 1280 x 800. It reads your project first, asks once for material (photos, screenshots, real numbers, audience, use), then deals three themes that fit the prompt and builds the hero before the rest of the page.

It finishes with a lint pass, sloplint --render, and a fresh-context review. It never starts on an existing design unless you name it: /hallmark redesign <path> rebuilds a page and keeps its content and wiring, and audit <path> only reports. It runs bundled Node scripts and needs Node 18 or later. The skill is large: 183 files, including 50 themes.

Good for

Developers and founders who build landing pages with an assistant
Designers who want pages that avoid common AI defaults
Teams that want an audit or redesign of an existing page

Install hallmark

Claude Code

Copy this prompt.

Install the hallmark skill in Claude Code. Run this command:

npx skills add nutlope/hallmark -g

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js 18+.

Leave off -g to install into the current project only. The plugin route runs as /hallmark:hallmark. Browser checks (sloplint --render and screenshots) also need puppeteer-core and Chrome; without them the static checks still run.

From the project README. Source.

What's in the skill

When it loads

Design skill for websites and new pages that look designed, not generated. Use when the user asks to build or design something new, or names Hallmark. Never use it on an existing design unless the user names Hallmark, as in `/hallmark redesign <path>`.

Sections in SKILL.md

The Floor
Flow
0. Pre-flight
1. Ask once
2. Shape
3. Direction
4. Load
5. The Picks block
6. Build
7. Sweep
Branches

Key facts

Author: nutlope (GitHub account)
Made by: Together AI, per the README
Repo: nutlope/hallmark
Installs on skills.sh: 84,481 (Nov 2, 2026)
GitHub stars (whole repo): 44,707 (Nov 2, 2026)
License: MIT
Last repo commit: Oct 29, 2026
Files in the skill folder: 183 files: LICENSE, SKILL.md, agents/openai.yaml, 151 in references/, 29 in scripts/
skills.sh audits: Gen Agent Trust Hub fail, Socket pass, Snyk warn
Needs: Node 18 or later; browser checks also need puppeteer-core and Chrome
Themes: 50, each one file of at most 8 KB
Floor rules: 16
Optional API key: TOGETHER_API_KEY enables a comp step that generates images

What it includes

Reads your project (fonts, palette, framework, design.md) before asking anything
Files · 0. Pre-flight
One message asking for material, audience, use and tone
1. Ask once
Designs the page from the visitor's job and the material you gave
2. Shape
Deals three themes with theme.mjs, or designs freely if you say custom
Runs code · 3. Direction
Loads layout, imagery and craft references, then lists its decisions once
4-5. Load and Picks block
With TOGETHER_API_KEY set: generates first-screen comps with imagegen.mjs
Runs code · Comp (optional)
Scaffolds tokens.css and base.css, builds the hero first, then the page
Runs code · 6. Build
Runs sloplint with --render, then a fresh-context review
Runs code · 7. Sweep
Rebuilds an existing page and keeps content and wiring; only when you name it
Write · redesign <path>
Reports on an existing page without changing it
Read · audit <path>

From the official docs

Permissions

Medium risk

The skill runs Node scripts, writes files into your project and can capture your running app. Work on a branch and review the files it adds.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It runs bundled Node scripts on your machine
It runs theme.mjs, sloplint.mjs and capture.mjs, and writes tokens.css, base.css and a .hallmark folder. Read the scripts if you need to, and use a branch. github.com
The optional hook edits Claude Code settings
The README says install-hook.mjs adds an edit-time Floor check to Claude Code. The script reads and writes a .claude/settings.json file (project, or your home folder with --global). Install it only if you want that check on every edit. github.com
With TOGETHER_API_KEY set, it sends prompts to an image API
The comp step runs scripts/imagegen.mjs, which posts a prompt to api.together.xyz using your key. Without the key the step is skipped. Leave the key unset if you do not want image generation. github.com
It may start or capture your running app
Pre-flight can capture a URL, a dev server or an app on your machine for screenshots. Tell it which app and port to use. github.com
Redesign changes an existing page
It acts on an existing design only when you name hallmark. Its rules say never to delete a route or component tree without a file-level plan you approved. github.com

Technical details

Talks to	A URL or dev server it captures with capture.mjs. api.together.xyz, only when TOGETHER_API_KEY is set (imagegen.mjs)
Scopes	Your project files A running dev server, URL or app it captures A Together AI API key, if you set one

Questions

What does the hallmark skill do?

It builds new web pages with a set of design rules, a theme dealt from a catalog of fifty, and a browser lint. It can also redesign or audit an existing page when you name it.

How do I install hallmark in Claude Code?

Use the install box at the top of this page. The skills CLI and the plugin route both work per the README; drop the global flag to install into one project only.

Does it need an API key?

No key is needed to build and lint pages. If TOGETHER_API_KEY is set, the build adds a comp step that generates a first-screen image with scripts/imagegen.mjs. With no key that file never loads and the build skips the step. The README lists Node 18 or later, plus puppeteer-core and Chrome for the browser checks.

Will it change my existing site?

Only if you name it. The description says never to use it on an existing design unless you name Hallmark, as in /hallmark redesign <path>. Other changes are done as asked in your own system.

What are redesign and audit?

Redesign rebuilds a page and keeps its content and wiring. Audit only reports. Both are used by naming the verb with a path.

Is the hallmark skill safe to install?

Not blindly. It runs bundled Node scripts, writes files into your project and can capture your running app. The README says an optional install-hook.mjs adds an edit-time check to Claude Code, and the script writes to a .claude/settings.json file. Use a branch and review what it adds.

Information

updated Nov 2, 2026

Repository: nutlope/hallmark
Folder: skills/hallmark

nutlope/hallmark skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 6

nutlope/hallmark README · github.com
hallmark SKILL.md · github.com
hallmark on skills.sh · skills.sh
hallmark references/comp.md · github.com
hallmark scripts/install-hook.mjs · github.com
hallmark scripts/imagegen.mjs · github.com