hallmark
Helps your agent create web page designs. It's useful for building new sites, improving existing ones, or analyzing a page's look.
What it does
Hallmark helps create or improve the design of websites and apps. It ensures the look is professional and avoids bad design patterns, focusing on structural variety so each project feels unique.
When to use it
- ✓Building a new website or app from scratch.
- ✓Redesigning an existing website or app.
- ✓Auditing a page's design to find issues.
Example of what to ask your AI
“I want to create a new website for my bakery.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
Hallmark follows a set of design rules to ensure a good appearance and avoid common bad design patterns. It focuses on making the page structure varied, so each website looks different, not just a color swap of a template.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add nexu-io/open-design --skill hallmarkOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/community/hallmark/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
Hallmark
A design skill for AI coding assistants. Makes the UIs they generate look made, not generated.
Hallmark is opinionated, short, and boring on purpose. It encodes a tight set of rules — drawn from the consensus of the anti-AI-slop design field (impeccable, kami, Anthropic's frontend-design skill, taste-skill, the Claude cookbook on frontend aesthetics, and the 2026 "tactile rebellion" movement) — and refuses to let the model fall back to the defaults every LLM was trained on.
The differentiator: Hallmark insists on structural variety, not just visual variety. Two pages by Hallmark for two different briefs should not share the same hero → 3-feature → CTA → footer rhythm. They should feel like different sites, not different colour-swaps of the same template. See references/structure.md.
Powered by Together AI.
How to use this skill
Hallmark has one default behaviour and three explicit verbs.
| Invocation | What it does |
|---|---|
| (default) | The user asked you to design or build something new. Follow the Design flow below. |
hallmark audit <target> |
Read the target, score it against the anti-pattern list, return a ranked punch list. Do not edit. |
hallmark redesign <target> [--mood <name>] |
Take the target's content and intent, then redesign the visual structure inside the existing implementation boundaries unless the user explicitly confirms a full rebuild. New section rhythm, new heading placement, new component voice. Preserve existing routes, component ownership, copy intent, brand, and information architecture; replace only the visual/interaction layer needed for the requested scope. |
hallmark study <screenshot | URL> |
The user pasted or attached an image of a design they admire, or pasted a URL to a live page. Extract the DNA — macrostructure, archetypes, type-pairing, colour anchor — and produce a diagnosis report, then optionally rebuild the user's content using the extracted DNA or emit a portable design.md of the DNA. Detection is automatic: a URL (http:// / https:// prefix) routes to URL mode; anything else routes to image mode. URL mode reads the page's HTML and CSS via WebFetch — it can name exact fonts and exact colour values, but can't judge rhythm. After the diagnosis, the user has three follow-ups: build with the DNA (handoff to default), lock the DNA into a portable design.md (opt-in via "lock the DNA" / "give me a design.md"), or stop at the diagnosis. Never copies pixels. Refuses template-marketplace URLs. Tighter refusal layer for design.md emission than for the diagnosis itself — URL-mode emission requires attestation that the source is the user's own or a public reference for their own brand. Falls back to asking for a screenshot if the URL is auth-walled, a JS-only SPA shell, or otherwise un-readable. Load references/study.md before this verb runs. |
If the user types anything that does not clearly map to audit, redesign, or study, treat it as default. If the user attaches an image or pastes a URL without a verb prefix, ask: "Should I study this (extract the DNA), or should I treat it as a reference for a fresh build?"
Implementation safety rail. Hallmark is a design skill, not a license to bulldoze a codebase. In any existing project:
- Never delete production files, route trees, component directories, or an old website unless the user explicitly asks for deletion or approves a file-level plan that lists the deletions.
- Default to in-place edits of the named files, or additive new components/tokens that are wired through the existing route. If the redesign would require removing multiple components, stop and ask for confirmation first.
- Treat PDFs, README files,
.mdbriefs, docs, transcripts, and pitch decks as reference material. Do not copy them word-for-word into the page unless the user explicitly says to use that text verbatim. - Before editing, state the exact files you expect to modify/create/delete. Deletions require explicit confirmation.
…
FAQ
What is 'anti-AI-slop design'?
It's a term for designs that look generic or poorly made by artificial intelligence. Hallmark is designed to prevent this and produce high-quality designs.
What does 'structural variety' mean?
It means the arrangement of elements on the page (like headings, images, and buttons) is different across projects, rather than always using the same layout. This makes each site feel more unique.
What does Hallmark do if I send an image of a design I like?
It can analyze the design from the image to understand its core elements (colors, fonts, structure) and use that as inspiration for your project, or create a report about the design.
Details
Original description by the author
Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots. Use when the user asks to build a new app or landing page, wants to redesign something, invokes Hallmark by name, or uses audit/redesign/study.
repo: nexu-io/open-design
Popularity
- GitHub stars
- 101k
- Ranking position
- #641
- License
- Apache-2.0
- Updated
- 10/16/2026
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC