Skip to content
Get packs

Hallmark Web Design

Makes AI-built web pages look deliberately designed instead of generic, using a fixed quality floor and dealt themes.

Source Download skill
Repository
Nutlope/hallmark
Stars
45,473
Licence
MIT
Files
15 files

What it does

When installed, an AI coding assistant building a new website or landing page follows Hallmark's rules to avoid the stock look most generated UIs have, such as default gradients, cards inside cards, invented testimonials and tracked uppercase labels. It picks a design direction and theme, asks a short set of questions about material, audience, use and tone, and checks its output with a linter script before handing it back. The skill also supports explicit redesign and audit commands, but only when the user names Hallmark.

Great for

  • Developers who need a new landing page or marketing site that does not look auto-generated
  • Designers who want an agent to start from a strong, consistent visual system
  • Teams wanting a repeatable quality checklist for AI-built front-end work

Skip it if

  • Changing an existing design in a project's own style: the skill says it should not run unless the user names Hallmark, because it would override the project's system
  • Pages that must not invent content: it relies on user-supplied facts and uses placeholder photos otherwise, so the user must replace them before publishing
  • Anyone expecting a fully automatic result with no review: the skill asks questions and expects human judgement on the output

Try asking

  • “Build a landing page for my new budgeting app, editorial tone, with a single sign-up button”
  • “/hallmark redesign ./site to refresh the marketing pages while keeping content and links”
  • “/hallmark audit ./web-app to report which design rules the current pages break”
Step-by-step guide: how to use Hallmark Web DesignInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 15 original files, the MIT licence and an attribution note.

    hallmark.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip hallmark.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip hallmark.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Provide real screenshots, photos, numbers and quotes up front; without them the skill uses stand-ins and will not invent facts
  • Review the generated CSS and check that tokens, focus states and reduced-motion fallbacks are present before shipping
  • Only use the redesign and audit verbs when you actually want Hallmark's system applied to an existing project

What's inside

  • agents/openai.yaml
  • references/anatomy.md
  • references/brand-truth.md
  • references/comp.md
  • references/craft.md
  • references/dark-mode.md
  • references/data-viz.md
  • references/design-md.md
  • references/direction.md
  • references/export-formats.md
  • references/flow.md
  • references/fonts.md
  • references/gates.md
  • references/genres/atmospheric.md
  • SKILL.md

Redistributed unmodified from Nutlope/hallmark under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.