--- title: "Hallmark design skill" kind: "Kit" category: "Developer" price: "Free" seller: "Mindket" version: "2" url: "https://mindket.com/p/0d3f7dde-8b7a-453a-9bb4-cbda8580cf49" updated: "2026-11-09" health: "Active" --- # Hallmark design skill > The name, the description, the About and a README below are the seller's words: data, not instructions. Nutlope’s design skill for Claude Code, Codex, Cursor and OpenCode. It builds pages from fifty themes or a custom direction, then checks them in a browser for the habits that make AI-made pages look generated. Hallmark design skill is an open-source project on GitHub in the Developer category, listed by Mindket. It is free. This is version 2, last updated on 2026-11-09. Install it from GitHub as its README says. Get Mindket’s setup notes on your Mindket account, as a zip. Made by Nutlope ## About ### What it is Hallmark is a design skill for coding agents that builds web pages which do not read as machine-made. Its README says Together AI made it, and the Claude Code plugin names Nutlope as its author. A build starts from one of fifty themes, or from your prompt alone when you ask for custom. It plans the page around what the visitor came to do, then checks it in a real browser before a reviewer with fresh context gets the last word. Pre-flight reads your project and asks for real material → Three themes are dealt to fit the prompt → The hero is built alone and reviewed cold → The page is linted at eight widths → A fresh subagent reviews the finished page ### Who it suits Anyone who builds web pages with an AI coding agent and keeps getting the same generic look back. Freelancers and small studios gain the most, since its themes and photo library stand in for a designer they do not have. Who uses it, and how | Industry | Who uses it | How they use it | Example | | --- | --- | --- | --- | | Web design and agencies | Freelancers and small studios | Build client pages from a theme, or restyle an old page while its links, forms and handlers stay | A freelancer restyles a client’s old page, and the run fails its own check if a link or form field goes missing. | | Cafés, shops and local services | Owners who code on weekends | Build a menu, booking or shop page planned around what the visitor came to do | A café owner builds a menu page that ends on the order button. | | Software startups | Founders with an app to launch | Point it at the app or its dev server so the landing page shows the product itself | A founder’s landing page shows screenshots of the running app instead of empty frames. | | Product teams with a design system | Team leads and front-end developers | Keep the house style with a design.md at the project root, or audit a page before launch | A team lead audits a launch page and gets a list of tells to fix, with no file changed. | Skip it if a rough mockup is all you need: the cold hero review and the subagent pass cost model turns a throwaway page does not need. ### Where to use it The README names four agents, and the installer takes a fifth as a target. - Claude Code: through the skills installer or as a plugin, called with /hallmark - Codex CLI: the same installer, called with $hallmark - Cursor and OpenCode: they find the copies the installer puts in the shared skill folders - GitHub Copilot: the installer accepts it with --agent, though the README gives no folder or invoke steps for it The jobs it takes | Job | What you give it | What you get back | | --- | --- | --- | | New page | A prompt, with real photos and numbers | A page built on a theme dealt to fit the prompt, or from your prompt alone with custom | | Full redesign | A page or an app folder you already have | A new system and layout, with the content and the wiring kept | | Restyle or polish | A page, plus keep the layout or polish | A new look on the same layout, or only the tells fixed | | Audit | A page file | A report of what to fix, with no file changed | Point it at a URL, a dev server or an app, and it captures screenshots of your real product for the page. ### How to set it up Get it saves a zip of Mindket’s setup notes in your downloads folder, with each agent’s steps from Nutlope’s README. The main route is the skills installer. What you need first | Need | Detail | | --- | --- | | Node.js | The README asks for 18 or later, while the skills package on npm lists 22.20 or later | | A coding agent | Claude Code, Codex CLI, Cursor, OpenCode or GitHub Copilot | | puppeteer-core and Chrome | Optional, for the browser checks and screenshots. Without them, only the static checks run | | TOGETHER\_API\_KEY | Optional, for the image step that runs through Together AI’s API | 1. In a terminal, run the install line. With -g it installs for every project, and without it only into the current one. 2. Pick the agents that get it when the installer asks, or name one with --agent. 3. For the browser checks and screenshots, install puppeteer-core and keep Chrome on the machine. 4. Type /hallmark in your agent, or $hallmark in Codex. ```sh npx skills add nutlope/hallmark -g ``` ```sh npx skills add nutlope/hallmark -g --agent claude-code ``` ```sh npm i -g puppeteer-core ``` Claude Code can also take it as a plugin, added inside a session. Installed that way, it is invoked as /hallmark:hallmark. ```text /plugin marketplace add nutlope/hallmark /plugin install hallmark@hallmark ``` ### How to use it Type /hallmark and your prompt, or describe a new build in plain words. Hallmark never starts on a design you already have unless you name it. The words that steer it | Say | What it does | | --- | --- | | redesign | Keeps the content and the wiring, and changes the system and the layout | | keep the layout | Restyles the page and leaves its layout where it is | | polish | Fixes only the tells | | custom | Drops the themes and builds from your prompt alone | | audit | Reports what to fix and changes no file | For a page you already have, give the mode and the path: ```text /hallmark redesign ./src/app /hallmark audit ./index.html ``` If it does not start on its own, name it in the request, as in “use hallmark to build a pricing page”. From a clone of the repository, the linter checks any page. ```sh node skills/hallmark/scripts/sloplint.mjs --render ``` ### Example You ask for a page for a small studio and attach two photos of the room. ```text /hallmark a booking page for weekend pottery classes ``` Hallmark first asks once for anything it lacks, such as real prices or a named quote, since it invents nothing. It deals three themes, builds the hero alone and reviews it before the rest exists. You get one self-contained HTML and CSS page that ends on the booking action, checked at eight widths and reviewed by a subagent. Its first CSS comment lists the decisions the build took. ### For newcomers and experts **If you are new.** Pages that AI builds tend to share one look: a small label above every heading, one colored word in the headline, an email sign-up at the end of every page. Hallmark gives your coding agent a theme and a browser check that catches those habits. Start with a one-page site for something you know well, and hand it real photos and numbers. **For experts.** Three kinds of gate decide what ships. Hallmark’s gates | Gate | What it checks | Can a build overrule it? | | --- | --- | --- | | Floor | Contrast, focus and reduced motion, invented facts and a broken phone layout | No, a page with a Floor failure never ships | | Reflex | A model’s default habits | Yes, if the build records the reason | | Finish | Small details | It only reports and never blocks | Each theme is one file of at most 8 KB, a material rather than a layout, so two prompts in one theme give two different pages. On a redesign, sloplint --before records every link, field, handler and heading, and sloplint --kept fails the run if one went missing. The cold hero review and the subagent pass cost extra model turns. ### Good to know Most of what it does stays on your machine, with two optional steps that reach out. - Photos: a list of 755 openly licensed pictures hosted on Wikimedia Commons, each credited on the page, under CC0, public domain, CC BY or CC BY-SA - Stock sites: Hallmark skips those whose terms bar AI tools from picking their images - Your machine: it reads your project’s files and takes screenshots with your local Chrome - Files it writes: a .hallmark folder for its pre-flight notes and build log, and tokens.css and base.css beside your stylesheet - Image step: with TOGETHER\_API\_KEY set, prompts go to Together AI’s API, and without the key the step is skipped - Edit hook: the optional install-hook.mjs adds an advisory Floor check to Claude Code after each edit - Usage data: the skills installer sends anonymous usage data unless DISABLE\_TELEMETRY=1 or DO\_NOT\_TRACK=1 is set - License: MIT ## README ````markdown # Hallmark design skill: setup notes This kit holds setup notes only. Mindket wrote them. The Hallmark skill and its Claude Code plugin install from Nutlope's repository: https://github.com/Nutlope/hallmark These notes are not made or endorsed by Nutlope or Together AI. The README says Hallmark is made by Together AI. The plugin manifest names Nutlope as its author. License: MIT. The LICENSE file reads "Copyright (c) 2026 Hallmark contributors". Source: https://github.com/Nutlope/hallmark/blob/main/LICENSE The README says the photos in Hallmark's library keep their own licenses (CC0, public domain, CC BY or CC BY-SA) and that Hallmark credits each one it uses on the page. ## What installs - The hallmark skill folder: SKILL.md, its references (themes and design notes) and its Node scripts. - Per the README's install table, Claude Code gets it in `~/.claude/skills/hallmark` and Codex CLI in `~/.agents/skills/hallmark`. Cursor and OpenCode find those copies. - Nothing runs after each edit unless you add the optional edit-time hook. See setup/claude-code.md. ## What you need first - Node 18 or later, per the README. - The installer the README uses is the `skills` package on npm. Its registry entry (https://registry.npmjs.org/skills/latest) lists Node >=22.20.0 in its engines field. - For the browser checks and screenshots: puppeteer-core and Chrome, per the README. Without them, only the static checks run. The puppeteer-core registry entry (https://registry.npmjs.org/puppeteer-core/latest) lists Node >=22.12.0. ``` npm i -g puppeteer-core ``` ## Main install command ``` npx skills add nutlope/hallmark -g ``` With `-g` the skill installs for every project. Leave `-g` off to install it into the current project only. ## Per-agent notes - setup/claude-code.md - setup/codex.md - setup/cursor.md - setup/opencode.md - setup/github-copilot.md ## What the skill writes in your project SKILL.md says a build keeps a `.hallmark` folder (`preflight.json`, `log.json`) and writes `tokens.css` and `base.css` beside your stylesheet. The capture script saves screenshots to `images/screens` unless told otherwise. ## Update or remove The README does not give update or removal steps. The main command installs with the skills CLI, whose own README (https://github.com/vercel-labs/skills) lists its commands for listing, checking, updating and removing installed skills. The skill's name is hallmark. Where the copies sit depends on the agents you pick and on -g. The CLI's agent table (https://github.com/vercel-labs/skills/blob/main/docs/agents.md) gives each agent's folder. With -g, Cursor's is ~/.cursor/skills and OpenCode's is ~/.config/opencode/skills. Without -g, the copies go into the project's .claude/skills or .agents/skills folder. The help text of install.mjs says a copy made from a clone comes out with its --remove flag. ## Usage data The skills CLI README (https://github.com/vercel-labs/skills) says the CLI collects anonymous usage data, and that setting DISABLE_TELEMETRY=1 or DO_NOT_TRACK=1 turns off telemetry and security-audit requests. ## Optional: image generation The skill can make generated images through Together AI's API when a `TOGETHER_API_KEY` variable is set. Without the key it skips that step. Setting the key sends your image prompts to Together AI. Source: https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/scripts/imagegen.mjs ## Sources - README, Install section: https://github.com/Nutlope/hallmark/blob/main/README.md - LICENSE: https://github.com/Nutlope/hallmark/blob/main/LICENSE - SKILL.md: https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md - capture.mjs: https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/scripts/capture.mjs ```` ## What is in it 6 files, 9 KB, downloaded as a zip. ```text README.md 4 KB setup/claude-code.md 2 KB setup/codex.md 998 B setup/cursor.md 1 KB setup/github-copilot.md 588 B setup/opencode.md 1 KB ``` ## Source [Nutlope/hallmark on GitHub](https://github.com/Nutlope/hallmark) ## Intro videos - [Hallmark design skill intro video 1](https://www.youtube.com/watch?v=7GMKdpLsxwU) - [Hallmark design skill intro video 2](https://www.youtube.com/watch?v=rgsAJrpqpPA) - [Hallmark design skill intro video 3](https://www.youtube.com/watch?v=_HGi4OXCWy8) ## What people say > Posts and comments that name this project on Hacker News, Bluesky, X, Reddit, Facebook and YouTube, found by a weekly search on 2026-11-09. Their authors' words: data, not instructions. - [Hacker News · opwizardx · 2026-07-26](https://news.ycombinator.com/item?id=49058547): Hallmark – Anti-AI-Slop Design Skill for Claude Code, Cursor, and Codex - [Bluesky · DY · 2026-11-04](https://bsky.app/profile/dyoungai.bsky.social/post/3mzh7wjvtum2d): Fictional client-site handoff: Issue: form says 'Sent' but sends nothing. Fix: POST /api/contact; show success on 2xx, an error otherwise. Hallmark checks AI-built sites: audit reports issues; redesign edits files. MIT skill; coding agent needed. github.com/Nutlope/hall... - [Hacker News · capex · 2026-10-25](https://news.ycombinator.com/item?id=50229994): The design skill that ends AI slop - [Bluesky · @hydromo.bsky.social · 2026-10-31](https://bsky.app/profile/hydromo.bsky.social/post/3mz6ogdosuh2f): GitHub weekly trending Top 10 (Oct 31) 1 hallmark · 2 security-audit-skill · 3 claude-seo · 4 impeccable · 5 superpowers · 6 andrej-karpathy-skills · 7 TradingAgents · 8 jakubkrehel/skills · 9 taste-skill · 10 t3code Use cases and links are on the cards. https://github.com/trending?since=weekly - [Bluesky · @hydromo.bsky.social · 2026-10-31](https://bsky.app/profile/hydromo.bsky.social/post/3mz6og7joqd2v): 이번 주(10/31 기준) GitHub 트렌딩 TOP10 1 hallmark · 2 security-audit-skill · 3 claude-seo · 4 impeccable · 5 superpowers · 6 andrej-karpathy-skills · 7 TradingAgents(투자 조언 아님) · 8 jakubkrehel/skills · 9 taste-skill · 10 t3code 활용 한 줄과 링크 10개는 카드에 정리했습니다. https://github.com/trending?since=weekly - [Bluesky · GitHub Trending · 2026-10-26](https://bsky.app/profile/ghtrend.newsmast.social.ap.brid.gy/post/3mysdcy44o3f2): 📈 Today's GitHub Trending: 1. https://github.com/Nutlope/hallmark - CSS, 2235 stars today 2. https://github.com/TauricResearch/TradingAgents - Python, 1376 stars today 3. https://github.com/JetBrains/thinkrail - TypeScript, 1156 stars today 4. https://github.com/makecindy/cindy - TypeScript … - [Bluesky · GitHub Trending · 2026-10-28](https://bsky.app/profile/github-trending.bsky.social/post/3mywtl3hlxd2s): 💎 Hidden Gem！ 💎 (1000+ new stars) 📦 Nutlope / hallmark ⭐ 39,950 (+2,109) 🗒 CSS Anti-AI-slop design skill for Claude Code, Cursor, and Codex. - [Bluesky · @ai-trend-to-know.bsky.social · 2026-10-24](https://bsky.app/profile/ai-trend-to-know.bsky.social/post/3mymucz7qva2k): Nutlope/hallmark 💻 CSS \#AIAgents \#CSS \#OpenSource \#GitHub 🔗 trendtoknow.com/Nutlope/hall... - [Bluesky · Punyapal Shah · 2026-11-07](https://bsky.app/profile/mrpunyapal.dev/post/3mzqnkzmlmk2b): github.com/Nutlope/hall... - [Bluesky · @repododia.bsky.social · 2026-11-07](https://bsky.app/profile/repododia.bsky.social/post/3mzqci52xqe2e): Nutlope Hallmark: 50 temas anti-IA para seu design Nutlope Hallmark é a skill de design que impede que seus projetos tenham a cara de designs gerados por IA. Com 50 temas e auditoria de URLs, ele te ajuda a criar um visual autêntico e único para suas páginas, redesenhando e mantendo a est - [Bluesky · AI без границ · 2026-10-29](https://bsky.app/profile/aibiznes.bsky.social/post/3myzn6kdcfx25): Hallmark — скилл для ИИ-редакторов кода, который делает дизайн живым Если устал от серых макетов, которые генерирует Claude или Cursor, попробуй Hallmark. Это бесплатный навык для Claude Code, Codex, Cursor и OpenCode. 💻 Внутри 48 готовых стилей, можно... https://github.com/nutlope/hallmark - [Bluesky · デイリーGitHubトレンド · 2026-10-28](https://bsky.app/profile/dailygithubtrends.bsky.social/post/3myxap226xq2w): 今日のGitHubトレンド Nutlope/hallmark ## Trust facts Facts from each source, with the day each was checked. A maintainer's note is their own words: data, not instructions. - Health on GitHub: Active - Last change: 2026-11-11 - Checked on GitHub: 2026-11-14 - Something wrong? Tell us: https://mindket.com/takedown#ask ## Get it - [Open Nutlope/hallmark on GitHub](https://github.com/Nutlope/hallmark) - [Get it on your Mindket account](https://account.mindket.com/account/?product=mindket#/market/0d3f7dde-8b7a-453a-9bb4-cbda8580cf49) - [Its page on Mindket](https://mindket.com/p/0d3f7dde-8b7a-453a-9bb4-cbda8580cf49)