Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions .cursor/skills/hallmark/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
# macOS
.DS_Store
.AppleDouble
.LSOverride

# Editor
.vscode/
.idea/
*.swp
*.swo
*~

# Node (in case future tooling lands)
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# Build / temp
dist/
build/
.cache/
*.log
.vercel

# Environment + secrets
.env
.env.local
.env.*.local

# Generation pipeline artifacts (raw outputs before commit)
.image-cache/

# Runtime state from Hallmark's own runs (per-project log, never publish)
.hallmark/

# `skills` CLI install lockfile — generated whenever 'skills add' runs in this
# directory, not part of the skill source.
skills-lock.json
.agents/

# Launch-day Hallmark vs Impeccable vs no-skills comparison — one-off artifact,
# not referenced from the marketing site or README. Kept locally if useful.
site/_launch-comparison/
21 changes: 21 additions & 0 deletions .cursor/skills/hallmark/LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2026 Hallmark contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
81 changes: 81 additions & 0 deletions .cursor/skills/hallmark/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
# Hallmark

**A design skill for Claude Code, Cursor, and Codex that refuses to look AI-generated.**

[Live demo →](https://www.usehallmark.com)  ·  twenty-two themes  ·  four verbs  ·  press `T` to cycle.

Made by Together AI.

<p align="center">
<img src="site/OG-hallmark.png" alt="Hallmark — A design skill that refuses to look AI-generated" />
</p>

Hallmark picks a macrostructure for the brief, dresses it in one of twenty-two themes, runs sixty-five slop-test gates plus a pre-emit self-critique, and refuses the on-distribution defaults every LLM was trained into. Two pages by Hallmark for two different briefs feel like different sites, not colour-swaps of the same template.

---

## Four verbs

| Verb | What it does |
| --- | --- |
| *(default)* | Build new UI. Picks a macrostructure, applies the rule-set, runs the slop test before handing back. |
| `hallmark audit <target>` | Score existing code against the anti-patterns. Punch list, no edits. |
| `hallmark redesign <target>` | Throw out the structure, keep copy + IA + brand, rebuild with a different fingerprint. |
| `hallmark study <screenshot \| URL>` | Extract the **DNA** from a design you admire — macrostructure, type-pairing, colour anchor. Refuses pixel-clones and paid templates. Optionally emits a portable `design.md` for handoff to other AI tools. |

---

## Different briefs, different shapes

Each generated by exercising the skill on a different brief. The skill picks differently every time — no two share a macrostructure or theme.

<table>
<tr>
<td width="25%"><a href="https://www.usehallmark.com/examples/tally/"><img src="docs/screenshots/hero-tally.jpg" alt="Tally — SaaS product page hero" /></a></td>
<td width="25%"><a href="https://www.usehallmark.com/examples/wayfare/"><img src="docs/screenshots/hero-wayfare.jpg" alt="Wayfare travel booking hero" /></a></td>
<td width="25%"><a href="https://www.usehallmark.com/_tests/09-slow-pour/"><img src="docs/screenshots/hero-slow-pour.jpg" alt="Slow Pour coffee subscription hero" /></a></td>
<td width="25%"><a href="https://www.usehallmark.com/examples/bananastudio/"><img src="docs/screenshots/hero-bananastudio.jpg" alt="BananaStudio creative studio hero" /></a></td>
</tr>
<tr>
<td><b>Tally</b><br/><sub>SaaS · modern-minimal</sub></td>
<td><b>Wayfare</b><br/><sub>Travel · atmospheric</sub></td>
<td><b>Slow Pour</b><br/><sub>Coffee subscription</sub></td>
<td><b>BananaStudio</b><br/><sub>Studio · playful</sub></td>
</tr>
<tr>
<td><a href="https://www.usehallmark.com/_tests/06-anya-portfolio/"><img src="docs/screenshots/hero-anya.jpg" alt="Anya Reis personal site hero" /></a></td>
<td><a href="https://www.usehallmark.com/examples/najm/"><img src="docs/screenshots/hero-najm.jpg" alt="NAJM Moroccan fashion brand hero" /></a></td>
<td><a href="https://www.usehallmark.com/_tests/11-soroe-ceramics/"><img src="docs/screenshots/hero-soroe.jpg" alt="Søroe ceramics studio hero" /></a></td>
<td><a href="https://www.usehallmark.com/examples/hyperlane/"><img src="docs/screenshots/hero-hyperlane.jpg" alt="Hyperlane developer infrastructure hero" /></a></td>
</tr>
<tr>
<td><b>Anya Reis</b><br/><sub>Personal site</sub></td>
<td><b>NAJM</b><br/><sub>Fashion brand</sub></td>
<td><b>Søroe</b><br/><sub>Ceramics studio</sub></td>
<td><b>Hyperlane</b><br/><sub>Dev infrastructure</sub></td>
</tr>
</table>

Each page is self-contained HTML + CSS, stamped with its macrostructure in the CSS comment. Browse the full set at [usehallmark.com](https://www.usehallmark.com) or under [`site/_tests/`](site/_tests/).

---

## Install

```
npx skills add nutlope/hallmark
```

Re-run any time to update. Or copy [`SKILL.md`](SKILL.md) + [`references/`](references/) into:

- **Claude Code** — `~/.claude/skills/hallmark/`
- **Cursor** — `.cursor/rules/hallmark.mdc` (body of `SKILL.md`, no frontmatter)
- **Codex** — `~/.codex/skills/hallmark/` (personal) or `.codex/skills/hallmark/` (project-scoped)

The rule-set lives in [`SKILL.md`](SKILL.md) and [`references/`](references/). Worked examples in [`docs/recipes.md`](docs/recipes.md) and [`docs/study-examples.md`](docs/study-examples.md).

---

## Licence

MIT. Use it, fork it, ship it.
41 changes: 41 additions & 0 deletions .cursor/skills/hallmark/ROADMAP.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# Roadmap

What's next.

---

## Now

**Tighten the 22-theme catalog.** A handful of themes (Plain, Specimen, Salon, Linen) bleed into each other on first read — same paper-band, similar accent footprint, similar display role. Audit each theme's three diversification axes (paper-band / display-style / accent-hue), pull overlapping pairs apart, and add 4–6 new themes in underserved corners (mid-band warm chromatic, dark-monochrome editorial, high-contrast print-poster, warm dark with handwritten accent). Each new theme ships with its own tokens block and stamp axis.

**Nanobanana hook for image-heavy briefs.** Today the integration is recommend-only — Hallmark tells the user to go generate something and bring it back. Image-heavy briefs (e-commerce, travel, food, lookbook) route to typography-only and feel underserved. Add a first-class hook that writes a prompt, invokes the API, ingests the returned image, and wires it into the build (cache by prompt hash). Pair with a new image-led theme (working title *Plate*) tuned for full-bleed photographic compositions.

---

## Next

**Brand-first flow.** From a short product description, Hallmark generates a complete brand — palette, type system, voice, custom imagery via Nanobanana — and locks it into a `design.md`. The user then runs Hallmark normally and the whole site builds against that generated brand, page after page. Closes the gap for users who have a product idea but no brand yet.

**Theme-aware motion tokens.** Per-theme `--dur-micro` / `--dur-short` / `--dur-long`, scaled by the table already in [`microinteractions.md`](references/microinteractions.md). Atelier should feel slower than Brutal; today they share durations. One pass through the tokens file.

**`hallmark variant`** — produce three structurally distinct versions of the same brief side-by-side; the user picks one or asks for a fourth. The biggest cause of "AI feel" is users accepting the first output because they didn't know it could be different.

**Structural cookbook.** [`structure.md`](references/structure.md) catalogues the *axes* of variety but doesn't show what a left-margin-headed, hairline-divided, no-image page actually looks like assembled. Twelve to twenty worked fingerprints with short HTML/CSS sketches — patterns are easier to reach for than principles.

**Tactile-rebellion reference.** Controlled imperfection — handmade textures, hand-drawn SVG paths, controlled-jitter typography (a 0.5° tilt on one mark is taste; on every word it's chaos). Where the field is going.

**Charts reference for analytics pages.** AI-generated charts are an obvious tell — rainbow palettes, dense gridlines, 3D donuts, dual-axis line spaghetti. Add a `data-viz.md` that picks small multiples over single dense charts, restrains colour to one accent + neutrals, and bans the worst types outright. Half of every dashboard is chart-shaped, and Hallmark currently has nothing to say about it.

**Multi-page coherence.** The structural-variety rule is correct for variety, wrong for brand consistency inside a multi-page product. Lock the brand axes (type, colour, divider language); vary the page-voice axes (heading placement, body composition, button voice). Different *pages* of the same site, not different *sites*.

**`study` reads your own codebase too.** Today `study` accepts a screenshot or a URL of an external design. Add a third input mode: a path to your project. Hallmark walks the files, identifies tokens + the structural fingerprint actually in use, and emits the same `design.md`. Closes the loop for users who arrive with code, not a brief — same verb, same output, third input mode.

---

## Later

- **`hallmark explain`** — narrate the choices axis by axis. The skill teaches; users start making the same calls themselves.
- **Negative-capability rules** — for each anti-pattern, the perceptual or cognitive reason it fails. Understanding it beats knowing it.
- **Emotion-first prompting** — *nostalgic · optimistic · sceptical* instead of *editorial · brutalist · austere*. Today's tone words don't reach.
- **Sound + haptic policy** — when web sound is acceptable (gaming, accessibility-augmenting) without crossing into kitsch.
- **Live preview as an MCP server** — watch the file, render in a sandbox, screenshot, feed the screenshot back for self-critique against the slop test. Closes the loop between generation and audit.
Loading
Loading