How to install Hallmark: Let Codex and Claude Code generate web pages that don’t look like AI templates

It is not difficult to let AI write web pages. What is difficult is to prevent all pages from growing into the same “purple gradient, three cards, large rounded corners” template. Hallmark is a design skill for Codex, Claude Code and Cursor. It will select the page structure and theme before generation, and use rules to check common AI design routines.

Project address: Nutlope/hallmark

Quick Answer

The easiest way to install Hallmark is to:

1

npx skills add nutlope/hallmark

After installation, you can let Agent create a new interface, audit and redo existing pages, or extract design language from screenshots and URLs. It is not a component library and will not decide the business information architecture for you; the more specific the requirements are, the more stable the results will be.

What Hallmark Can Do

Hallmark provides four categories of common tasks:

• Default mode: Create a new UI according to needs;
• hallmark audit <target>: Only audit the existing code and give a list of problems, without modifying the file;
• hallmark redesign <target>: Retain copywriting, information architecture and brand elements, and redesign the page structure;
• hallmark study <screenshot | URL>: Analyze the structure, font matching and color anchor points of the reference design and output design.md.

Among them, audit is most suitable for existing projects. Let it find the problem first, and then decide what needs to be changed, which can avoid the Agent rewriting the entire page.

Install in Codex and Claude Code

If you do not use npx skills add, you can also manually copy SKILL.md and references/ in the repository:

• Codex personal level directory: ~/.codex/skills/hallmark/
• Codex project-level directory: .codex/skills/hallmark/
• Claude Code: ~/.claude/skills/hallmark/
• Cursor: Put the text of SKILL.md into .cursor/rules/hallmark.mdc

Project-level installation is better for teams because rules can follow repository version control. Personal-level installation is suitable for sharing among multiple projects, but after updating, it may affect the output style of all projects.

Recommended workflow

Let the Agent read the existing design system first, and then perform the audit:

1

使用 Hallmark 审计当前首页。保留品牌色、字体和现有组件，只列出最像 AI 模板的 10 个问题，不要修改文件。

After confirming the list, ask for a small-scale redo:

1

根据审计结果重做首页首屏和功能区。不要改变路由、文案和组件 API，完成后检查移动端与键盘导航。

How to choose among the four modes?

Use the default Build for new projects first

When creating a new landing page, don’t just say “make an advanced page.” Provide at least the product object, page goal, content that must appear, brand restrictions and technology stack:

1
2
3
4
5

使用 Hallmark 为一个本地 AI API 网关制作产品首页。
目标用户是同时使用 OpenAI、Claude 和 Gemini API 的开发者。
首屏必须包含一句价值说明、安装命令和 GitHub 链接。
技术栈是 React + Tailwind，不新增 UI 组件库。
不要使用紫色渐变、悬浮玻璃卡片和无意义数据指标。

Hallmark chooses the macro structure and themes, but does not automatically complete the actual product information. When prices, screenshots, and customer cases are not given, clear placeholders should be used and do not let the agent make up company numbers.

Use Audit first for old projects

audit is suitable for pages that are already online. It only returns a list of issues and does not directly modify the file, making it easier to distinguish between “aesthetic suggestions” and “issues that must be fixed.” When auditing, you can request output according to priority:

1
2
3
4

hallmark audit src/pages/Home.tsx

按阻碍理解、模板感、可访问性、响应式问题四组输出。
每条标明文件位置和修改风险，不要编辑代码。

After getting the list, prioritize duplicate cards, unclear information levels, and mobile overflow. There is no need to overturn all components in pursuit of differentiation.

Redesign is suitable for pages whose structure has expired.

Use redesign when the page copy is still usable but the layout is difficult to maintain after repeated overlays. The mission identifies what must be retained:

• Title and product name;
• Main text required for SEO;
• Form fields and submission logic;
• Buried attribute and test selector;
• Brand colors, logos and fonts have been licensed.

If these constraints are not clearly written, the Agent may be “redesigned” by removing elements that are important to the business but visually inconspicuous.

Study is used to extract language, not copy it

After giving study a screenshot or URL, focus on the macro structure, font combination, color anchors and white space rules of its output. It is recommended to let it generate design.md and then give it to other Agents for use:

1
2
3
4
5

hallmark study https://example.com

分析页面的结构、字体层级、颜色锚点和密度。
不要复制文案、插图、Logo、独特图形或付费模板。
输出可以交给其他编程 Agent 使用的 design.md。

How to connect to existing design system

Hallmark should not overwrite existing tokens for the project. Have the Agent read the actual parts of the following files before running:

• tailwind.config.* or CSS variable;
• Storybook and component documentation;
• src/components/ui/;
• Font loading and icon configuration;
• ESLint, Stylelint and accessibility testing;
• Screenshot regression testing.

Then declare the priorities: business constraints and existing component APIs are highest, brand tokens are second, and Hallmark’s theme suggestions are last. This allowed the differentiated structure to be preserved without creating a new system of colors and spacing that would conflict with the project.

How to accept after generation

Round 1: Code Scope

First check the Git changes to confirm that the Agent has not successfully upgraded dependencies, replaced routes, or deleted tests. Hallmark is a design skill and should not by default be granted permission to refactor business code.

Round 2: Responsive

Checks at least 360px mobile, 768px tablet and common desktop widths. Focus on long titles, button wrapping, horizontal scrolling, fixed height, and absolute positioning.

Round 3: Accessibility

Check keyboard focus, form labels, color contrast, semantic titles, image alt text, and prefers-reduced-motion. Visually “not like AI” does not automatically qualify for accessibility.

Round 4: Real Content

Replace demo content with longest product name, real error message, empty data, loading status, and multilingual text. Many pages appear neat only with short English placeholders.

The difference between Hallmark and other front-end skills

They can be combined, but don’t let multiple Skills have equal priority for the overall style at the same time. One is responsible for the structure, one is responsible for implementing the rules, and the component library is responsible for the final implementation. There will be much fewer conflicts.

Troubleshooting checklist

FAQ

Does Hallmark automatically copy reference websites?

Won’t. study aims to extract macro structure, font pairings and color logic, and explicitly rejects pixel-level cloning and paid template duplication.

Why can’t I see any changes after installation?

First confirm that the current Agent can discover the Skill, and then clearly write “Use Hallmark” in the task. If the project already has a strongly constrained design system, Hallmark should defer to existing component and brand specifications.

Can it replace manual design acceptance?

cannot. It reduces the common boilerplate feel, but content hierarchy, accessibility, real-device display, and business conversions still require manual review.

Will updating Hallmark change old pages?

Already generated code will not be automatically modified, but the new rules may give different results when the same task is run again. Teams that require reproducible output should lock down the installed version and keep the final design specifications in a repository.

Is Hallmark suitable for backend management systems?

Yes, but backend systems typically value information density, table manipulation, and consistency and should not sacrifice efficiency for visual differentiation. You can just use audit to find templated problems without applying a high-performance theme.

How to keep it reproducible when used by the team

Hallmark will update topics, rules and anti-template checks, and the same Brief may have different structures in different versions. The team needs to manage “generation tools” and “final specifications” separately:

1. Indicate the Hallmark version in the task record;
2. Save the colors, fonts, grids and component selections used to the project document;
3. After generation, it is manually confirmed, and then the visual regression test protects the results;
4. When updating Hallmark, run audit first and do not automatically redo the online page;
5. Save desktop and mobile reference screenshots of important pages.

In this way, even if the skill is updated, the online page will not suddenly change the design language at the next small change.

A complete home page acceptance example

Assuming Hallmark redoes its SaaS homepage, at least check the following:

• Whether the first screen explains the product, user and next action without scrolling;
• Can the installation command be copied directly and is it a real command?
• Whether the CTA is linked to the correct route;
• Navigation can be opened, closed and maintained focus on mobile phones;
• The page can still be understood when the image loading fails;
• FAQ can be operated by keyboard;
• The page does not have obvious layout jumps due to font loading;
• Whether key SEO text still exists after turning off JavaScript;
• No significant regression in Lighthouse or existing performance tests;
• Buried points and test selectors are not lost due to structural changes.

If design effects conflict with these engineering requirements, priority should be given to fixing functionality and accessibility before discussing visual trade-offs.

When is it not worth using Hallmark?

Projects that are purely internal CRUD pages, have mature design systems and only change one field, and require strict pixel reproduction do not necessarily need Hallmark. At this time, it is more stable to directly use existing components and design drafts. Hallmark is better suited for tasks that lack clear page structure, need to move away from generic AI templates, or want the system to audit existing visual issues.

Summary

Hallmark is suitable for teams that are already using Codex, Claude Code or Cursor to generate the front end, but are not satisfied that “all web pages look the same”. The best way to use it is not to redo the whole site directly, but to first audit, then select partial redesign, and finally use the real content and mobile terminal to complete the acceptance.