Design landing pages without AI slop by running one test before you argue about spacing: hide the logo and ask whether this page could belong to three other companies in your category. Most agent-generated pages fail it. You get the purple gradient, the three feature cards, the dashboard screenshot floating in a rounded frame, and a headline that could sell anything.
hallmark is the design skill I use for greenfield pages, audits, and redesigns. It carries judgment, not components, so your CSS tokens still ship the look. Pair the visual direction with Google's SEO starter guidance for page clarity and WCAG so distinctive stays readable. Cursor skills package the checklist where agents will read it.
Budget the first viewport
One composition. The brand as a hero-level signal. One headline, one supporting sentence, one call-to-action group, one dominant image or atmosphere. No stat strips, schedule widgets, or promotional stickers floating over the hero.
A first screen that looks like a dashboard loses the person who came for a story.
Cards and chrome
Default to no cards. A card earns its border when it holds an interaction. Remove the shadow, radius, and background in your head, and when meaning survives, remove them in the code too.
Skip pill clusters, badge stickers on media, and stacked glows. Motion should build hierarchy, so two or three intentional moves beat a particle zoo.
Imagery and type
Anchor the page on something real: product UI, a place, a process, people doing the work. A gradient is atmosphere, never the idea.
Choose type with intent, because default stacks read as placeholder design. Accessibility holds regardless. A page that looks sharp and fails contrast still fails.
Work inside the system you have
When a design system exists, preserve it. hallmark kills sloppy composition inside those constraints rather than inventing a second brand. Redesigning from a URL or a screenshot means extracting the pattern and rebuilding with restraint, never cloning the decoration.
Define CSS variables for the direction you picked and paint with tokens. A one-off purple hardcoded in a component fights the hue ladder your theme already owns. On this portfolio the theme tokens and ambient motion sit under the same rule: atmosphere without the generic AI costume, and reading surfaces calm enough that the words carry the page.
Sections do one job each
Give every section one headline and usually one supporting sentence. A second job means a second section. Agents stuff stats, logos, and testimonials into the hero because a full screen looks finished in a demo. Clear beats complete.
Full-bleed hero media should read as a plane rather than a floating card. Inset hero images in rounded frames read as a template unless your system already owns that pattern.
The defaults I push back on
Purple-to-indigo gradients on white. Warm cream and terracotta serif kits that all look related to each other. Hairline broadsheet layouts with zero radius pretending to be a newspaper. Multi-layer shadows on every card. Rounded-full pill rows that carry no information. Glow effects on dark backgrounds hiding weak hierarchy.
Any of those work when you choose them. Falling into them because the model likes them is how a brand dies of sameness.
Mobile decides the test
The first viewport on a phone runs smaller than your laptop preview. When the brand mark, headline, and call to action do not fit without pinch-zoom theater, cut something. Agents stack desktop-only flourishes and check the wide breakpoint only.
A thirty-minute audit
1. Screenshot the first viewport at 390px and 1280px. 2. Hide the logo and guess the company. A wrong guess means weak branding. 3. Count interactive cards and remove the decorative ones. 4. List section jobs and merge the duplicates. 5. Read the hero copy aloud after a stop-slop pass. 6. Check contrast on body text, buttons, and focus states.
I run this before accepting an agent redesign, and it settles arguments faster than a taste debate. For client work, show the before and after. Buyers pay for the delta they can see.
Say this instead of "make it beautiful"
"One composition in the first viewport. Brand name is the loudest text. One headline, one supporting sentence, one CTA group, one full-bleed visual. No cards in the hero. No floating badges. No purple default. Use theme tokens. Mobile first at 390px."
That prompt reads boring on purpose. Boring prompts produce owned pages, and vague beauty prompts produce the SaaS costume you have already seen this week.
Copy and layout ship together
A sharp layout with soggy headlines still fails, so run tip 8's stop-slop pass on the hero before you debate spacing. Agents will happily kern a bad sentence.
Keep the hire CTA plain. "Book a call" works. "We would love to partner with visionary teams like yours" loses serious buyers.
Ship the habit this week
Pick your weakest live page, run the six-step audit, and fix the first viewport only. Ship that, then move down the page next week. Tip 10 takes the same discipline into motion, where you build product videos with HyperFrames instead of assembling clips nobody can revise.
If you want a sharper marketing surface for your product, book a call. More notes live in the tips index.
Sources
If you want a sharper marketing surface for your product
Book a callFAQ
Can hallmark work inside an existing design system?
Yes, and it should. Preserve the system, then use the skill to kill sloppy composition inside those constraints.
Do I need custom illustration?
You need a real visual anchor. Product UI, a place, or a process beats an abstract blob every time.
What about dark mode defaults?
Avoid glow-on-black because a generator likes it. Choose the mode deliberately and check contrast in both.
How do I review agent output quickly?
Brand test with the nav hidden, first viewport budget, card necessity, motion purpose, then accessibility.