brand-visual-language
디자인시각 디자인dembrandt/dembrandt-skills
브랜드의 개성을 둘러싼 모양의 언어, 즉 글꼴, 모서리 둥글기, 아이콘 스타일을 일관되게 맞추는 방법을 정리한 가이드입니다. 로고와 기존 자료에서 형태의 의도를 읽고, 버튼과 카드, 입력창, 모달이 같은 둥글기 기준을 따르도록 토큰과 아이콘 굵기를 정하는 데 도움을 줍니다. 디자인 시스템을 시작하거나 화면의 시각적 일관성을 점검할 때 기준으로 활용할 수 있습니다.
이럴 때 쓰세요 디자인 시스템을 새로 만들면서 모서리 둥글기와 아이콘 스타일을 정해야 할 때
설치 전에 확인하세요
AI가 SKILL.md에서 스크립트·프로그램 실행 내용을 찾았습니다. 설치 전에 원문을 확인하세요.
GitHub 기록
- 저장소 스타
- 181
- 저장소 업데이트
- 2026.11.01
- 라이선스
- MIT
- SKILL.md 경로
- skills/brand-visual-language/SKILL.md
- 스크립트 파일
- 없음, 지침 문서만 있음
AI가 SKILL.md를 읽고 판단
- 코드 실행
- 있음
- 네트워크 접속
- 확인되지 않음
- 계정·API 키
- 확인되지 않음
- 난이도
- 입문
- 직군
- 디자이너, 개발자
확인되지 않음은 AI가 SKILL.md에서 찾지 못했다는 뜻입니다. 없다는 보장은 아닙니다.
설치
터미널에 붙여 넣어 실행하세요. macOS와 Linux 기준이며 git이 필요합니다. Windows에서는 PowerShell이 아니라 Git Bash에서 실행하세요. 저장소를 임시로 내려받아 스킬 폴더만 복사합니다.
모든 프로젝트에서 쓰기
tmp=$(mktemp -d) && git clone --depth 1 https://github.com/dembrandt/dembrandt-skills.git "$tmp"
mkdir -p "$HOME/.claude/skills"/brand-visual-language
cp -R "$tmp"/skills/brand-visual-language/. "$HOME/.claude/skills"/brand-visual-language/
rm -rf "$tmp"현재 프로젝트에서만 쓰기
먼저 터미널에서 프로젝트 폴더로 이동하세요.
tmp=$(mktemp -d) && git clone --depth 1 https://github.com/dembrandt/dembrandt-skills.git "$tmp"
mkdir -p .claude/skills/brand-visual-language
cp -R "$tmp"/skills/brand-visual-language/. .claude/skills/brand-visual-language/
rm -rf "$tmp"설치한 뒤 Claude Code에서 새 세션을 시작하세요. '이럴 때 쓰세요'에 적힌 일을 요청하면 에이전트가 스킬을 불러옵니다. 스킬은 ~/.claude/skills/brand-visual-language에 있습니다. 프로젝트에 설치했다면 .claude/skills/brand-visual-language에 있습니다.
모든 프로젝트에서 쓰기
tmp=$(mktemp -d) && git clone --depth 1 https://github.com/dembrandt/dembrandt-skills.git "$tmp"
mkdir -p "$HOME/.agents/skills"/brand-visual-language
cp -R "$tmp"/skills/brand-visual-language/. "$HOME/.agents/skills"/brand-visual-language/
rm -rf "$tmp"현재 프로젝트에서만 쓰기
먼저 터미널에서 프로젝트 폴더로 이동하세요.
tmp=$(mktemp -d) && git clone --depth 1 https://github.com/dembrandt/dembrandt-skills.git "$tmp"
mkdir -p .agents/skills/brand-visual-language
cp -R "$tmp"/skills/brand-visual-language/. .agents/skills/brand-visual-language/
rm -rf "$tmp"설치한 뒤 Codex에서 새 세션을 시작하세요. '이럴 때 쓰세요'에 적힌 일을 요청하면 에이전트가 스킬을 불러옵니다. 스킬은 ~/.agents/skills/brand-visual-language에 있습니다. 프로젝트에 설치했다면 .agents/skills/brand-visual-language에 있습니다.
모든 프로젝트에서 쓰기
tmp=$(mktemp -d) && git clone --depth 1 https://github.com/dembrandt/dembrandt-skills.git "$tmp"
mkdir -p "$HOME/.cursor/skills"/brand-visual-language
cp -R "$tmp"/skills/brand-visual-language/. "$HOME/.cursor/skills"/brand-visual-language/
rm -rf "$tmp"현재 프로젝트에서만 쓰기
먼저 터미널에서 프로젝트 폴더로 이동하세요.
tmp=$(mktemp -d) && git clone --depth 1 https://github.com/dembrandt/dembrandt-skills.git "$tmp"
mkdir -p .cursor/skills/brand-visual-language
cp -R "$tmp"/skills/brand-visual-language/. .cursor/skills/brand-visual-language/
rm -rf "$tmp"설치한 뒤 Cursor에서 새 세션을 시작하세요. '이럴 때 쓰세요'에 적힌 일을 요청하면 에이전트가 스킬을 불러옵니다. 스킬은 ~/.cursor/skills/brand-visual-language에 있습니다. 프로젝트에 설치했다면 .cursor/skills/brand-visual-language에 있습니다.
같은 분류의 스킬
-
디자인
웹, iOS, Android 화면을 WCAG 2.2 AA 기준에 맞게 설계하고 구현하거나 점검하는 데 쓰는 지침입니다. 역할과 라벨 같은 의미 정보, 명암 대비, 터치 영역 크기, 키보드 포커스 관리, 스크린리더 지원을 항목별로 짚어 줍니다. 모달 포커스 처리나 오류 메시지 같은 흔한 접근성 문제의 해결 방법도 함께 다룹니다.
웹이나 모바일 화면이 접근성 규정을 만족하는지 확인하거나 키보드와 스크린리더 사용자를 위해 UI를 고쳐야 할 때
-
디자인
SNS 커버, 광고 배너, 웹사이트 히어로, 인쇄물 등 용도와 규격에 맞춘 배너를 HTML/CSS로 설계합니다. 여러 아트 디렉션 방향의 시안을 2~3개 만들고, 제공된 로고와 색상, 서체를 반영합니다. 가능한 환경에서는 PNG로 내보내고, 그렇지 않으면 HTML/CSS 원본과 미리보기를 전달합니다.
페이스북 커버나 유튜브 채널 아트처럼 플랫폼 규격에 맞는 배너 시안을 여러 스타일로 비교하고 싶을 때
-
디자인
시드(seed) 값을 고정해 같은 결과를 재현할 수 있는 p5.js 생성형 아트를 만들어 줍니다. 먼저 작품의 알고리즘 철학을 짧은 문서로 정리한 뒤, 그 철학을 옮긴 브라우저용 인터랙티브 HTML 작품을 만듭니다. 슬라이더로 파라미터를 조절하고 이전·다음·랜덤 버튼으로 시드를 바꿔 여러 변형을 둘러볼 수 있으며, 완성된 그림은 PNG로 저장할 수 있습니다.
흐름장이나 파티클처럼 코드로 만든 생성형 아트를 파라미터와 시드를 바꿔 가며 탐색하고 싶을 때
-
디자인
웹 화면, 랜딩 페이지, 대시보드, 폼, 온보딩 화면, iOS·Android 화면을 대상으로 디자인 검토부터 개선, 접근성과 반응형 점검, 카피 다듬기까지 단계별 명령으로 나눠 진행합니다. 기존 화면의 정체성을 살리는 개선과 전체 시각 방향을 새로 잡는 재디자인을 구분해 다루고, 필요하면 PRODUCT.md와 DESIGN.md 같은 디자인 맥락 문서를 만들거나 갱신합니다.
기존 웹이나 앱 화면이 밋밋하거나 복잡해서 디자인을 다듬고 접근성과 반응형 문제를 함께 점검해야 할 때