[ClaudeCode] How to eliminate the AI-like or artificial feel from web page design? [hallmark]

This article is a machine translation of the contents of the following URL, which I wrote in Japanese:

【ClaudeCode】WebページのデザインからAIっぽさ、AI臭さを消すには？【hallmark】 #GitHub - Qiita

はじめに GitHubのトレンド（2026-11-03時点）に、Nutlope/hallmark というリポジトリが入っていました。AIコーディングエージェント向けの「デザインスキル」で、キャッチコピーは "refuses to look AI-generated"（AI...

qiita.com

Introduction

As of November 3, 2026, the repository Nutlope/hallmark was trending on GitHub. It's a "design skill" for AI coding agents, with the tagline "refuses to look AI-generated."

When AI generates screens, they tend to produce "familiar structures" such as small labels above headings, different colors for some words, and email registration fields at the end. hallmark provides rules to prohibit these tendencies, along with 50 themes (materials) and inspection scripts as skills.

In this article, we generated the same prompt once using Claude Code without skills and once using hallmark, comparing their appearance, factual accuracy, time, and cost. The subject matter is a page introducing 13 services from Amazon Bedrock AgentCore. We thought the large number of services and the complex information architecture would highlight the difference in skills.

Repository

https://github.com/Nutlope/hallmark

What is hallmark?

The following is based on the README description. Functionality has been confirmed through subsequent testing.

As of 2026-11-03, it had approximately 46.6k stars and 2.5k forks.

How it works

According to the README, the process is as follows:

1. Preflight: Reads project settings and asks for actual materials (photos, numbers, etc.) only once. The policy is not to supplement materials with fictional stories.
2. Theme selection: Presents 3 suitable options from 50 types.
3. Create the hero section first, render it, and review it.
4. sloplint --render inspects it at 8 widths, and a sub-agent in the new context reviews it.

The rules are divided into three layers.

Reference: Nutlope/hallmark

Pre-installation check

During installation, an external security rating was displayed.

The basis for the rating was not displayed, so I searched scripts/ to check (not a thorough reading of the entire text).

Hallmark skills operate with agent privileges. When implementing, it is recommended to check the script and limit the scope by separating the working folder, etc.

Verification Design

Comparison Points

• Claude Code without skills

• Claude Code with hallmarks (project-based, no hooks)

Subject Matter and Materials

The subject matter is the Amazon Bedrock AgentCore service suite. Both participants were given factual notes summarizing the content of the official AWS documentation (13 services, relationships between services, pricing concepts), and asked to create pages using only that information. To avoid confusion with the official site, the AWS logo was not used, and the page was required to clearly state that it was an "unofficial explanation page."

The factual notes did not include preview/GA status, available regions, or pricing figures. If these appeared on the page, they were counted as fictional.

Evaluation Criteria

Conditions

Procedure

1. Separate working folders

mkdir verify-hallmark cd verify-hallmark mkdir a-baseline b-hallmark 

Copy the same fact memo (fact_sheet_agentcore_20261103.md) into both folders.

2. Install hallmark in folder B

cd b-hallmark npx skills add nutlope/hallmark --agent claude-code 

Installed on a project basis without -g. No hooks were included.

3. Prompt (common for both with and without skills)

Create a single Japanese explanation page using only the contents of fact_sheet_agentcore_20261103.md, as a single HTML file (index.html, CSS in the same file). Conditions: - Intended audience: Developers using agents on AWS and those considering adopting them. - Clearly state "Unofficial Explanation Page" at the beginning. - Do not use an appearance similar to the AWS logo or official website. - Do not include information not present in the factual notes (preview/GA status, regions, pricing, adopting companies, performance figures, customer testimonials). - Include all 13 services and structure the page to make it easy for readers to find the service they are looking for. - When grouping services, make it clear that this is a page-specific organization and not an official classification. - Show the relationships between services (see "Relationships between Services" in the factual notes) using diagrams. - Present information on the integration and compatibility of each service in an easy-to-compare format. - Ensure the page is readable on smartphones. 

Only the Skilled Version has /hallmark at the beginning.

4. Generate in Non-Interactive Mode

Save the prompt from Step 3 to prompt.txt and use it. The skilled version was saved to a separate file with /hallmark appended to the beginning and then passed over.

bash
cat prompt.txt | claude -p \
--model claude-sonnet-5-5 \
--effort medium \
--permission-mode acceptEdits \
--allowed-tools "Read" "Write" "Edit" "Glob" "Grep" "Bash(node ​​*)" \
--max-budget-usd 5 \
--output-format json > result.json

The only tools allowed are file reading/writing, searching, and executingnode.--output-format json` provides the time taken, tokens, and cost.

Results

Visual Comparison

no skills

Smartphone width

hallmark Has skills

Smartphone width

I will summarize my observations in a table.

I examined the screen width on a smartphone, looking at one page at a time (the top of the page).

• No skill required: The "Unofficial" banner at the top occupied approximately 1/6 of the screen, and the tip wrapped to fit.

• Skill required: Four links fit in the header, and the H1 tag wrapped between "Unofficial Guide to 13 Services" and "Services."

Accuracy of Facts vs. Fictional Content

I read the entire text and verified the 16 items in the factual notes (coverage of 13 services, key points of each service, relationships between services, pricing strategy, etc.).

The scope of Evaluations is particularly easy to confuse. The official description states that the evaluation targets data generated by Strands Agent or LangGraph and instrumented by OpenTelemetry or OpenInference. This is easily confused because other services are described as "any framework," but both descriptions were correct.

However, the matching was done visually and not a strict full-text comparison. The text with skills included the phrase "relationship table of this memo," which was incomprehensible to the reader.

Time Required and Cost

The cost is an estimated value converted to API value. I am using the Pro plan and have not been charged additional fees. This will consume your usage allowance.

Lighthouse

Lighthouse is a tool built into Chrome that automatically scores page quality. It scores four areas—Performance, Accessibility, Best Practices, and SEO—on a scale of 100 points, to the extent possible through machine testing. It does not evaluate the quality of the page content.

Each page was measured once using Chrome DevTools' Lighthouse (Mobile, Navigation). Pages were opened via a local HTTP server.

No Skills

hallmark Skilled Version

• Accessibility was 100 for both. The "contrast" item, which hallmark emphasizes, also showed no problems in the output without skills.
• Performance was 70 for the unskilled version and 98 for the skilled version. We expected the skilled version to be slower than the unskilled version because it loads external fonts (Google Fonts), but the result was the opposite. The reason has not been confirmed.
• Both displayed a warning that "Chrome extensions negatively impacted loading performance." Measurements were taken only once each, and re-measurements were not taken in incognito windows, so the difference in Performance is for reference only.

In conclusion

This time, we compared the unskilled version and hallmark version once each, using the same material and prompt. Personally, I think adding Hallmark reduces the "obviously AI-generated" feel of the cards and chips, giving it a more readable appearance. On the other hand, there were some drawbacks, such as the relatively high time and cost involved for those with the necessary skills.

Design preferences vary, so I can't definitively say which is better, but those who are concerned about the AI-like appearance might want to try the skills I've introduced here.

References

• Nutlope/hallmark
• What is Amazon Bedrock AgentCore? (Official Documentation)
• Amazon Bedrock AgentCore (Product Page)