Who it is forA founder asking Claude Code for a landing page who keeps getting the same gradient hero and email box.
The problemAgent-built pages fall into the same reflexes: eyebrows above every heading, one coloured word, a sign-up at the end of every page.
The outcomeA self-contained HTML and CSS page built around the visitor's job, checked at eight widths and reviewed with fresh eyes.
What you need first
- Node 18 or later
- Claude Code, Codex CLI, Cursor or OpenCode
- For the browser checks and screenshots: puppeteer-core and Chrome
Steps
- Run
npx skills add nutlope/hallmark -gto install it for every project - In Claude Code type /hallmark or simply describe a new build; in Codex use $Hallmark
- Answer the pre-flight questions and give it real material: photos, screenshots and real numbers, since nothing is invented
- Pick one of the three themes it deals, or say custom to design from your prompt alone
- Install the browser checks with
npm i -g puppeteer-coreand Chrome so it can lint the page at eight widths
Prompt for your agent
Use Nutlope/hallmark to build a landing page for <product> whose main action is <action>. Ask me for real screenshots and numbers instead of inventing any, deal three themes and let me pick, and show me the sloplint results before you finish.
Caveat. Without puppeteer-core and Chrome only the static checks run, so the eight-width render check is skipped.
Use this in your AI agent
Ask your agent
Using the Deduped MCP, get the setup steps for Nutlope/hallmark and "Build a landing page that doesn't look AI-generated"
Add Deduped to Claude Code once
claude mcp add --transport http deduped https://dedupedai.com/mcp
Every Monday: the 5 hottest repos and exactly how to use them. Free, one email a week, unsubscribe anytime.
Get them freeShare: X LinkedIn Hacker News Email Copy link
Third-party repos we don't own. AI-written use cases can be wrong. Disclaimer