How to use the Hallmark Web Design agent skill

What the Hallmark skill makes the agent do

An agent skill is a folder containing a SKILL.md file and supporting reference files. When a skill is installed and relevant to your request, the agent reads its instructions and follows them. Hallmark's instructions target the stock look that many generated interfaces share, such as default gradients, cards inside cards, invented testimonials and tracked uppercase labels.

Hallmark sets a fixed floor of rules that apply to every output. Above that floor it has the agent pick a design direction and theme so that consecutive builds do not all converge on the same look, and it asks you a short set of questions about material, audience, use and tone before building.

• Every colour and font goes through a token declared at :root or a declared theme block.
• Animations get a prefers-reduced-motion fallback, and content stays visible with scripting off.
• No invented metrics, testimonials, logo walls or case-study counts.
• The hero's headline, one sentence and primary action are visible at 1280 x 800 without scrolling.
• Before handing back, the agent runs a linter script if Node.js is available.

Install Hallmark from the ZIP file

Download the Hallmark skill as a ZIP file from the directory page. Unzip it into one of two locations, depending on how you want to use it. A personal install is available to every project on your machine. A project install lives inside one repository and travels with it.

If you use the Claude apps instead of a local folder, you can upload the skill there under Settings → Capabilities → Skills.

• Personal install: unzip into ~/.claude/skills/ so the skill folder is available everywhere.
• Project install: unzip into the .claude/skills/ folder of a specific project.
• Claude apps: upload the ZIP under Settings → Capabilities → Skills.

Trigger Hallmark with natural requests

You do not need a special command for a normal build. Ask the agent to build or design something new, or name Hallmark in your request. The skill's description tells the agent to use it when you ask to build or design a new page, so a request such as a landing page for a bakery's new site is enough to bring it in.

Hallmark is deliberately not used on existing designs unless you name it. For changing an existing design in a project's own style, ask for the change directly and the agent works within the project's system. To run the explicit verbs, name Hallmark and give the target path.

• Build request: 'Build a landing page for our cycling club's spring ride series.'
• Named request: 'Use Hallmark to design a pricing page for the app.'
• Redesign verb, only when Hallmark is named: /hallmark redesign <path>
• Audit verb, only when Hallmark is named: /hallmark audit <path>

Give the agent the material it needs

The skill asks one message of questions before building, covering material, audience, use and tone. Material matters most. Share screenshots, your own photos, real numbers, a quote with the name of the person who said it, or logos you are allowed to use, either pasted or as file paths.

If you do not have photos, Hallmark places stand-ins from its photo library and marks them to be replaced. It is built not to invent numbers, quotes or logos. If you reply 'go ahead', the agent infers the missing answers and tells you what it chose.

• Material: screenshots, your photos, real figures, named quotes, usable logos.
• Audience: who uses the page and what they care about.
• Use: the one action the page should drive.
• Tone: an extreme such as editorial, brutalist, soft, utilitarian, luxury, playful, technical or austere.

Check the output and review it yourself

Before returning a build, the agent runs a linter script, sloplint, with a render check. This only runs when Node.js is available. The agent fixes every failure the linter reports and either fixes or justifies each reflex warning. Treat the result as a strong first draft: the skill expects you to judge the design and replace all placeholder content before publishing.

• Run manually if needed: node <skill-dir>/scripts/sloplint.mjs <output> --render
• Replace all placeholder photos and sample content before publishing.
• Brand names are not themed from memory; the skill fetches the real site's colour and type facts when you name a real brand, following strict URL safety rules.

Safety notes: scripts and network access

Hallmark runs scripts and uses the network. Its linter and capture scripts run on your machine, and the skill can make network requests, including fetching a public brand site when you name a brand. The brand-truth protocol only fetches https addresses and refuses local, private and metadata addresses, and it stops if a redirect fails those checks.

The optional TOGETHER_API_KEY environment variable enables an image composition step powered by Together AI. Without it, that step is skipped and the build continues. Read the files in the skill folder if you want to know exactly what runs before you trust it in a sensitive project.

• Scripts run: yes (sloplint and render checks, screen capture of a running product).
• Network use: yes (brand site fetches, optional image step).
• Optional key: TOGETHER_API_KEY, only for the comp and image step.