- AI 코딩 어시스턴트가 만드는 뻔한 디자인을 피하기 위해, 타이포/색상/레이아웃/모션/인터랙션에 걸친 안티 슬롭(anti-AI-slop) 규칙을 하나로 묶은 디자인 스킬
- 페이지 생성 시 먼저 매크로구조를 정하고 테마를 입히는 순서로 동작, 직전 3개 구조 반복을 거부해 매번 다른 형태의 결과물 작성
- 기본 1개 + 추가 3개, 총 네 가지 액션 제공
- Default: UI 생성. 브리프/프로젝트 토큰/프레임워크를 읽고 매크로구조→테마→보강 순으로 생성, 마지막에 슬롭 테스트 실행
- Audit: 페이지 문제점을 안티패턴 카탈로그 기준으로 점수화한 순위형 펀치 리스트 제공. 수정 없이 진단만 함
- Redesign: 카피/IA/브랜드는 유지하고 구조적인 것들만 버려 새 섹션 리듬/제목 배치로 재구축
- Study: 참고할 디자인을 스크린샷/URL로 넣으면 픽셀이 아니라 구조를 읽어 DNA를 추출하고 이식형 design.md 생성
- LLM이 기본적으로 만드는 5가지 슬롭 패턴들에 대한 대안 제시
- 보라색 그라디언트 히어로 → 앵커 색상 하나 + 강조색 하나, 히어로 그라디언트 배경 금지. 무채색에 색조 더하기
- 디스플레이로 쓴 Inter → 개성 있는 디스플레이 폰트 + 정제된 본문 폰트, 최소 두 개의 폰트페이스를 사용
- 모든 것 가운데 정렬 → 여백을 한쪽으로 몰아 대칭을 한 번은 깨기
- 아이콘 타일 피처 카드 → 크기/정렬 다양화하거나 아이콘 빼고 타이포로 시작하는 등 비대칭적 디자인
- AI 내비게이션 → 페이지 장르에 맞는 내비 아키타입(신문 마스트헤드, 터미널 명령바 등) 선택
- 모든 테마를 관통하는 8가지 기초 규칙 내장 (Type/Colour/Space/Motion/Voice/Layout/Hierarchy/Restraint)
- OKLCH 팔레트에 강조색은 5% 미만, 4의 배수 간격에 17px 같은 임의 패딩 금지, 모든 애니메이션에 reduced-motion 대안 제공
- "나쁜 무언가보다 아무것도 없는 편이 낫다"는 절제(Restraint) 원칙
- 설치 npx skills add nutlope/hallmark (Claude Code, Cursor, Codex 지원)
- 데모 보기 : https://www.usehallmark.com/
hallmark - AI 티가 안나는 디자인 스킬
1 day ago
3
Related
Claude가 AI 생성 콘텐츠를 표시하는 방식
1 hour ago
0
한 연구자가 noreply.net을 샀더니 기업 기밀이 쏟아짐
2 hours ago
1
프랑스, 사전 동의 없는 텔레마케팅 전화 금지
3 hours ago
1
GitHub Actions에 OIDC audience 제약이 필요한 이유
4 hours ago
1
H3-metal - Apple Silicon용 네이티브 MiniMax-H3 추론
5 hours ago
1
AI가 웹을 잠식하면서 인터넷의 집단 기억이 사라지고 있음
6 hours ago
1
Rails는 DHH 없이도 Rails일 수 있을까
7 hours ago
1
LLM은 PCB 배선을 어디까지 할 수 있을까? 숙련자와 Net 단위로 비교해봤습니다
8 hours ago
1
Popular
What's New in SAP S/4HANA Cloud Public Edition 2608 | Releas...
3 weeks ago
209
Codex 사용량 한도 리셋 추적
3 weeks ago
88
NVIDIA·CoreWeave·Nebius가 만든 GPU 붐의 순환 금융 구조
4 weeks ago
62
'킬러들의 쇼핑몰2' 감독 "시즌3 고민 중"⋯이동욱 "시키면 ...
3 weeks ago
57
![[테크 차이나] DeepSeek V4 Flash 1위… 중국 모델 강세 지속(OpenRouter 주간 AI 모델 사용량 순위)](https://img.etnews.com/news/article/2026/08/06/news-p.v1.20260806.379c2eee15bb4be5b29d934a203a6106_Z1.jpg)
English (US) · © Clint IT 2026. All rights are reserved
