hallmark - GitLite

KO | EN

gitlite — search

#hacktoberfest #react #ai #llm #golang #go #android #machine-learning #docker #macos #kubernetes #vue #ios #openai

hallmark

(★ 26,353)

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

파일 탐색기

최종 버전 다운로드 (.zip)

- - hero-anya.jpg
  - hero-bananastudio.jpg
  - hero-carnival-01.jpg
  - hero-cobalt-01.jpg
  - hero-custom-02.jpg
  - hero-custom-03.jpg
  - hero-custom-04.jpg
  - hero-garden-01.jpg
  - hero-hum-07.jpg
  - hero-hyperlane.jpg
  - hero-lumen-01.jpg
  - hero-najm.jpg
  - hero-press-01.jpg
  - hero-riso-01.jpg
  - hero-slow-pour.jpg
  - hero-soroe.jpg
  - hero-tally.jpg
  - hero-wayfare.jpg
- recipes.md
- study-examples.md
- talk-slides.md
- - all-themes.html
  - README.md
- - base.css
  - components.css
  - sections.css
  - tokens.css
- - scroll-demos.json
- - main.js
- .gitignore
- favicon-dark.svg
- favicon-light.svg
- index.html
- OG-hallmark.png
- - SKILL.md
.gitignore
LICENSE
package.json
README.md
ROADMAP.md
vercel.json

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/Nutlope/hallmark

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd hallmark

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// 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 제작.

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

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><b>Bubble</b><br/><sub>사워도우 앱 · Hum</sub></td>
    <td><b>Distil</b><br/><sub>추출 API · Cobalt</sub></td>
    <td><b>Cold Snap</b><br/><sub>레코드 레이블 · Carnival</sub></td>
    <td><b>Cinder</b><br/><sub>AI 도구 · Lumen</sub></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><b>Ferns &amp; Fathom</b><br/><sub>티 메뉴 · Custom</sub></td>
    <td><b>Hollowback Apiary</b><br/><sub>꿀 농장 · Garden</sub></td>
    <td><b>Off-Register</b><br/><sub>프린트 페어 · Riso</sub></td>
    <td><b>Press Quaternary</b><br/><sub>타이포 스튜디오 · Custom</sub></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><b>Tally</b><br/><sub>SaaS · modern-minimal</sub></td>
    <td><b>Wayfare</b><br/><sub>여행 · atmospheric</sub></td>
    <td><b>NAJM</b><br/><sub>패션 브랜드</sub></td>
    <td><b>Hyperlane</b><br/><sub>개발 인프라</sub></td>
  </tr>
</table>

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

---

## Custom <sup>NEW</sup>

카탈로그 테마 중 적합한 것이 없는 창의적인 의도가 담긴 브리프의 경우, 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><b>The Cascadia Nightjar</b><br/><sub>침대 열차 티켓 · Custom</sub></td>
    <td><b>The Mend Assembly</b><br/><sub>수리 카페 브로드시트 · Custom</sub></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. 자유롭게 사용하고, 포크하고, 배포하세요.