Design rules that remove AI traces to create realistic web pages
When you open a page in the browser, small text above the title, meaningless uppercase labels, and empty spaces filled only with photos stand out. This tool automatically finds and fixes these mechanical traces. It is a design skill that helps ensure results do not feel like they were made by AI, even when using AI coding tools like Claude Code or Cursor.
What changed in v2
Each theme defines materials such as paper, typography, color, and surface texture, and includes example images of completed pages. Reservation pages now focus on reservations, and store pages focus on purchases. Additionally, if a user points to a directly requested URL or development server, it captures screenshots itself to match the actual product.
Inspection system to remove AI smell
This tool inspects elements that may make a page look mechanical in an actual browser.
- Basic baseline Deployment is blocked if basic requirements such as contrast, focus states, reduced motion settings, factual distortion, and broken mobile layouts are not met.
- Blocking reflexive errors It checks for patterns that AI models frequently make, and if there is a legitimate reason, it leaves a record and allows an exception.
- Final check It verifies a detailed completeness checklist, but does not block deployment at this stage.
Page generation process
When work begins, it first reads the project's fonts, palette, and framework. The hero section is created before the rest of the page exists, and a reviewer in a new context reviews it critically. Finally, it renders the page at eight widths to check for mechanical traces. All pages are composed of independent HTML and CSS, and the first CSS comment records which design decisions were made.
Redesigning and auditing existing pages
To change an existing design, you must explicitly instruct it. When a redesign command is issued, it changes only the system and layout while maintaining content and logic. The audit command reports problems without making changes. It records all links, fields, handlers, and titles before changes, and treats it as a failure if even one disappears after the redesign. The final result is delivered in a format showing before and after side by side.
Installation and usage conditions
A Node 18 or higher environment is required. For global installation, use the npx skills add nutlope/hallmark -g command. To use browser-based inspection features, puppeteer-core and Chrome are additionally required. Without this dependency, only static inspection is performed. It can be installed in various AI coding tools such as Claude Code, Codex, Cursor, and OpenCode, and is called according to each tool's command format. The license is MIT, and photo materials use openly licensed images from Wikimedia Commons with sources cited.
