01 기능 소개
엘리베이션, 대비, 미디어 처리, 테마 선택 동작을 포함한 다크 팔레트 조정.
Dark Mode Design은 기존 라이트 팔레트에서 시작합니다. 점차 밝아지는 다크 표면으로 엘리베이션을 표현하고, 새 배경에 맞게 밝은 색상, 텍스트, 테두리, 상태 표현을 조정합니다.
소스에는 이미지, 일러스트레이션, 로고, 시스템 색상 구성표 설정, 수동 전환도 포함됩니다. 숫자로 제시된 색상 예시는 참고 지점일 뿐 보편적인 값이 아닙니다. 실제 컴포넌트와 사용자가 보게 될 환경에서 디자인을 확인해야 합니다.
예상 결과물
기존 시맨틱 색상과 컴포넌트 위계를 파악합니다.
단순 반전 대신 의도적인 휘도 단계와 조정된 강조색을 사용합니다.
컴포넌트 대비, 로고, 이미지, 자동 설정, 수동 테마 선택을 확인합니다.
02 활용 상황
기존 라이트 모드 팔레트, 컴포넌트 예시, 미디어 자산으로 시작하세요. 렌더링된 인터페이스에서 다크 모드 대비, 테마 전환, 이미지 처리를 확인하세요.
03 핵심 결정
어두운 그림자가 효과적이지 않은 곳에서는 표면 휘도로 레이어를 전달할 수 있습니다.
밝은 이미지나 맞지 않는 로고는 일관된 다크 인터페이스를 해칠 수 있습니다.
04 예시 브리프
아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.
이 작업의 SKILL.md를 designer-skills 저장소에서 에이전트가 지원하는 스킬 위치에 불러오세요. 진입 파일에는 범용 설치 명령이 정해져 있지 않습니다.
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/dark-mode-design/SKILL.md기존 라이트 모드 팔레트, 컴포넌트 예시, 미디어 자산으로 시작하세요. 렌더링된 인터페이스에서 다크 모드 대비, 테마 전환, 이미지 처리를 확인하세요.
스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약 조건을 조정하세요.
dark-mode-design을 사용해 이 기존 라이트 대시보드를 조정하세요. 표면과 텍스트를 시맨틱하게 매핑하고, 경고 색상과 차트 이미지를 검토하며, 시스템 설정과 수동 선택을 정의하세요. 실제 대비 쌍을 측정하고 다크 버전이 필요한 자산을 표시하세요.실제 출력이 다음의 관찰 가능한 기준을 충족하는지 확인하세요.
OpenDesign은 코딩 에이전트를 위한 로컬 디자인 작업 공간을 제공합니다. 이 목록은 스킬이 번들로 포함되어 있다거나 외부 도구, 자격 증명, 소프트웨어 의존성이 포함된다는 뜻이 아닙니다.
05 출처 및 라이선스
이 페이지는 아래에 링크된 고정 소스 리비전을 설명합니다. 업스트림의 동작과 요구 사항은 바뀔 수 있습니다.
9a6930cf84a8엘리베이션, 대비, 미디어 처리, 테마 선택 동작을 포함한 다크 팔레트 조정.
링크된 소스를 바탕으로 OpenDesign이 작성한 원본 요약입니다. 저장소 스타 수는 특정 시점의 인기 지표이며 스킬 사용량이나 품질 점수가 아닙니다.
06 시작 전 질문
OpenDesign
브리프, 소스 자료, 디자인 작업을 로컬 작업 공간에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/dark-mode-design/SKILL.md