무엇인가
AI 코딩 어시스턴트를 위한 디자인 스킬. 기본 빌드 플로 하나와 audit, redesign, study라는 세 개의 동사를 갖췄습니다. 두 번의 빌드가 같은 페이지 리듬을 공유하지 않도록 구조적 다양성을 밀어붙입니다.
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
디자인에 왜 중요한가
- 다양화 규칙이 연이은 빌드마다 서로 다른 매크로 구조, 내비게이션, 푸터를 강제합니다.
- 고정된 토큰이 토큰 블록을 우회하는 인라인 hex나 font-family 값을 금지합니다.
- 모든 출력물을 320, 375, 414, 768픽셀 너비에서 검증합니다.
다루는 내용
- How to use this skill
- Disciplines that hold across every verb
- When the brief is a component, not a page
- Design flow (default)
- Hallmark study
- Output contract and scope
설치 방법
Hallmark
-
저장소를 클론하세요.
git clone https://github.com/Nutlope/hallmark -
Codex에 스킬 파일 경로를 지정하세요.
skills/hallmark/SKILL.md -
그다음 원하는 UI를 설명하세요. Codex가 스킬을 따릅니다.
Codex로 실행하는 법
-
프리플라이트 스캔이 기존 폰트, 팔레트, 모션 라이브러리를 먼저 읽게 두세요.
-
대상, 사용 사례, 톤 게이트에 답하거나, 그냥 진행하라고 말하세요.
-
페이지에 hallmark audit을 돌리면 수정 없이 우선순위가 매겨진 개선 목록을 받습니다.
여기 모인 플러그인은 모두 무료 오픈소스이며, 실제 업스트림 출처로 연결됩니다.
codex-design 목록에서 더 보기 ↗다른 Codex 디자인 플러그인
프런트엔드 & UI 무엇을 하나 gpt-taste GSAP 스크롤 모션과 빈틈없는 벤토 그리드로 수상작급 랜딩 페이지를 만듭니다. 
디자인 시스템 무엇을 하나 Stitch Design Taste Google Stitch가 흔해 빠진 화면 대신 개성 있는 화면을 내놓도록 DESIGN.md를 작성합니다. 
프런트엔드 & UI 무엇을 하나 image-to-code 디자인 이미지를 먼저 생성하고 분석한 뒤, 그에 맞는 프런트엔드 코드를 만듭니다. 
프런트엔드 & UI 무엇을 하나 imagegen-frontend-mobile 프리미엄 모바일 앱 화면 플로우를 코드가 아니라 이미지로 생성합니다. 다음 단계
세팅 없이, Open Design으로 디자인하기
이 플러그인을 직접 설치해도 되고, Open Design으로 Codex 주위에 잘 정돈된 디자인 레이어를 통째로 두를 수도 있습니다. 키는 직접 가져오고, 산출물도 직접 소유하세요.