/impeccable colorize
Colorize
단조로운 인터페이스에 전략적인 색상을 추가하되, 과하지 않게.
사용 시기
/impeccable colorize는 “모든 것이 회색”에 대한 대응책입니다. 베이지 벽처럼 읽히는 대시보드, 액센트 없는 폼, 어떤 SaaS 제품이든 될 수 있는 콘텐츠 페이지. 인터페이스가 기능적이지만 감정적으로 평면적이고, AI 색상 팔레트(보라-분홍, 시안 네온, 다크 모드 글로우)로 넘어가지 않고 따뜻함을 원할 때 사용하세요.
작동 방식
스킬은 먼저 브랜드 색상이 있으면 읽고, 색상이 제자리를 잡을 곳을 결정합니다:
- 주요 액션은 브랜드 색조의 가장 강한 표현을 받습니다.
- 보조 액센트는 두 번째 완전한 색상이 아닌 뮤트되거나 틴트된 변형을 받습니다.
- 중성색은 낮은 채도(약 0.005~0.01)로 브랜드 색조 방향으로 틴트됩니다. 픽셀당 거의 보이지 않지만 잠재의식적 응집력을 만듭니다.
- 콘텐츠 카테고리는 무지개가 아닌 제한적이고 의도적인 액센트 시스템을 받습니다.
중요하게도, 동일한 명도 단계가 동일하게 보이도록 HSL 대신 OKLCH를 사용합니다. 명도가 극단으로 갈수록 채도가 자동으로 떨어집니다. 이것이 계산된 것이 아닌 고민된 색상을 얻는 방법입니다.
직접 해보기
/impeccable colorize the dashboard
예상 diff:
- 브랜드 색상을 하드코딩된 hex에서
--color-accent: oklch(62% 0.18 240)로 이동 - 중성색에 브랜드 색조 방향으로 0.007 채도 틴트
- 주요 버튼에 전체 액센트, 보조 버튼에 ink/mist
- 차트 시리즈에 3개의 구별된 색조 사용, 모두 동일 명도로 어떤 시리즈도 시각적으로 지배하지 않음
- 빈 상태 일러스트에 부드러운 액센트 워시 추가
주의 사항
- 브랜드 색조 없이 실행하기. Colorize에는 시작점이 필요합니다.
PRODUCT.md에 지정되어 있지 않으면 묻습니다. AI 색상 팔레트 기본값에서 선택하게 두지 마세요. - AI 색상 팔레트 문제를 해결할 것으로 기대하기. 디자인에 이미 보라색 그라데이션과 시안 네온이 있다면 먼저
/impeccable quieter가 필요하고, 그다음 colorize가 재구축할 수 있습니다. - 이미 다채로운 인터페이스에 사용하기. 그것은
/impeccable quieter의 역할입니다. Colorize는 더하고 빼지 않습니다.