hallmark

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #cli #claude-code #codex #developer-tools #react #windows

★ 25,284 Open GitHub ↗

Claude Code, Cursor, Codex를 위한 AI-slop(AI 특유의 조잡함) 방지 디자인 스킬입니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Hallmark

**AI가 생성한 것처럼 보이지 않게 설계된 Claude Code, Cursor, Codex용 디자인 스킬입니다.**

[라이브 데모 →](https://www.usehallmark.com) &nbsp;·&nbsp; 20가지 테마 &nbsp;·&nbsp; 4가지 동사 &nbsp;·&nbsp; `T`를 눌러 전환.

Together AI 제작.

Hallmark는 브리프(brief)에 맞는 매크로 구조(macrostructure)를 선택하고, 20가지 테마 중 하나를 적용하며, 57가지의 slop-test 게이트와 생성 전 자체 비평(self-critique) 과정을 거칩니다. 또한 모든 LLM이 학습한 뻔한 기본 설정(on-distribution defaults)을 거부합니다. Hallmark가 서로 다른 두 브리프를 위해 만든 두 페이지는 단순히 색상만 바꾼 동일한 템플릿이 아니라, 완전히 다른 사이트처럼 느껴집니다.

---

## Four verbs

| Verb | 기능 |
| --- | --- |
| *(default)* | 새로운 UI 구축. 매크로 구조를 선택하고, 규칙 세트를 적용하며, 결과를 반환하기 전 slop test를 실행합니다. |
| `hallmark audit <target>` | 기존 코드를 안티 패턴(anti-patterns) 기준으로 평가합니다. 수정 없이 체크리스트(punch list)만 제공합니다. |
| `hallmark redesign <target>` | 구조는 버리고 텍스트(copy) + IA + 브랜드는 유지한 채, 다른 지문(fingerprint)으로 다시 구축합니다. |
| `hallmark study <screenshot \| URL>` | 동경하는 디자인에서 **DNA**(매크로 구조, 폰트 조합, 컬러 앵커)를 추출합니다. 픽셀 단위의 복제나 유료 템플릿을 거부합니다. 선택적으로 다른 AI 도구에 전달할 수 있는 휴대용 `design.md`를 생성합니다. |

---

## Different briefs, different shapes

각각 서로 다른 브리프에서 생성되었습니다. 이 스킬은 템플릿이 아니라 각 브리프에 맞는 테마, 구조, 공예(craft)를 직접 선택합니다.

<table>
 <tr>
 <td width="25%"><a href="https://www.usehallmark.com/examples/hum-07/"><img src="docs/screenshots/hero-hum-07.jpg" alt="Bubble guided sourdough app hero" /></a></td>
 <td width="25%"><a href="https://www.usehallmark.com/examples/cobalt-01/"><img src="docs/screenshots/hero-cobalt-01.jpg" alt="Distil content-extraction API hero" /></a></td>
 <td width="25%"><a href="https://www.usehallmark.com/examples/carnival-01/"><img src="docs/screenshots/hero-carnival-01.jpg" alt="Cold Snap record-label EP hero" /></a></td>
 <td width="25%"><a href="https://www.usehallmark.com/examples/lumen-01/"><img src="docs/screenshots/hero-lumen-01.jpg" alt="Cinder AI reasoning tool hero" /></a></td>
 </tr>
 <tr>
 <td>Bubble 사워도우 앱 · Hum</td>
 <td>Distil 추출 API · Cobalt</td>
 <td>Cold Snap 레코드 레이블 · Carnival</td>
 <td>Cinder AI 도구 · Lumen</td>
 </tr>
 <tr>
 <td><a href="https://www.usehallmark.com/examples/custom-03/"><img src="docs/screenshots/hero-custom-03.jpg" alt="Ferns and Fathom tea menu hero" /></a></td>
 <td><a href="https://www.usehallmark.com/examples/garden-01/"><img src="docs/screenshots/hero-garden-01.jpg" alt="Hollowback Apiary honey farm hero" /></a></td>
 <td><a href="https://www.usehallmark.com/examples/riso-01/"><img src="docs/screenshots/hero-riso-01.jpg" alt="Off-Register risograph print fair hero" /></a></td>
 <td><a href="https://www.usehallmark.com/examples/press-01/"><img src="docs/screenshots/hero-press-01.jpg" alt="Press Quaternary type studio hero" /></a></td>
 </tr>
 <tr>
 <td>Ferns &amp; Fathom 티 메뉴 · Custom</td>
 <td>Hollowback Apiary 꿀 농장 · Garden</td>
 <td>Off-Register 프린트 페어 · Riso</td>
 <td>Press Quaternary 타이포 스튜디오 · Custom</td>
 </tr>
 <tr>
 <td><a href="https://www.usehallmark.com/examples/tally/"><img src="docs/screenshots/hero-tally.jpg" alt="Tally SaaS product page hero" /></a></td>
 <td><a href="https://www.usehallmark.com/examples/wayfare/"><img src="docs/screenshots/hero-wayfare.jpg" alt="Wayfare travel booking 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/examples/hyperlane/"><img src="docs/screenshots/hero-hyperlane.jpg" alt="Hyperlane developer infrastructure hero" /></a></td>
 </tr>
 <tr>
 <td>Tally SaaS · modern-minimal</td>
 <td>Wayfare 여행 · atmospheric</td>
 <td>NAJM 패션 브랜드</td>
 <td>Hyperlane 개발 인프라</td>
 </tr>
</table>

각 페이지는 독립적인 HTML + CSS로 구성되어 있으며, CSS 주석에 매크로 구조가 표시되어 있습니다. 전체 세트는 [usehallmark.com](https://www.usehallmark.com) 또는 [`site/_tests/`](site/_tests/)에서 확인할 수 있습니다.

---

## Custom NEW

카탈로그 테마 중 적합한 것이 없는 창의적인 의도가 담긴 브리프의 경우, Hallmark는 **Custom** 모드로 전환하여 맞춤형 팔레트, 타이포그래피, 레이아웃을 통해 페이지를 처음부터 설계합니다. 템플릿 없이 동일한 57가지 slop-test 게이트를 적용합니다.

<table>
 <tr>
 <td width="50%"><a href="https://www.usehallmark.com/examples/custom-02/"><img src="docs/screenshots/hero-custom-02.jpg" alt="The Cascadia Nightjar sleeper-train ticket hero" /></a></td>
 <td width="50%"><a href="https://www.usehallmark.com/examples/custom-04/"><img src="docs/screenshots/hero-custom-04.jpg" alt="The Mend Assembly repair-café broadsheet hero" /></a></td>
 </tr>
 <tr>
 <td>The Cascadia Nightjar 침대 열차 티켓 · Custom</td>
 <td>The Mend Assembly 수리 카페 브로드시트 · Custom</td>
 </tr>
</table>

이는 조용히 작동하는 분기(branch)로, 일반적인 브리프에서는 나타나지 않습니다. 해당 프로토콜은 [`custom-theme.md`](skills/hallmark/references/custom-theme.md)에 정의되어 있습니다.

---

## Install

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

업데이트하려면 언제든지 다시 실행하세요. 또는 [`SKILL.md`](skills/hallmark/SKILL.md)와 [`references/`](skills/hallmark/references/)를 다음 경로에 복사하세요:

- **Claude Code**: `~/.claude/skills/hallmark/`
- **Cursor**: `.cursor/rules/hallmark.mdc` (`SKILL.md`의 본문 내용, frontmatter 제외)
- **Codex**: `~/.codex/skills/hallmark/` (개인용) 또는 `.codex/skills/hallmark/` (프로젝트용)

규칙 세트는 [`SKILL.md`](skills/hallmark/SKILL.md)와 [`references/`](skills/hallmark/references/)에 있습니다. 실제 적용 사례는 [`docs/recipes.md`](docs/recipes.md)와 [`docs/study-examples.md`](docs/study-examples.md)에서 확인할 수 있습니다.

---

## Licence

MIT. 자유롭게 사용하고, 포크하고, 배포하세요.

hallmark

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README