Communitygithub.com

디자인 방향 설정

새로운 UI나 의도적인 리디자인을 위한 독창적인 비주얼 방향을 수립할 때 사용합니다.

디자인 방향 설정란 무엇인가요?

이 스킬은 프론트엔드 디자인 프로젝트에서 시각적 방향성을 수립할 때 사용됩니다. 사용자는 먼저 포함된 프론트엔드 디자인 가이드라인을 검토한 후, 브리프와 프로젝트 제약 조건을 기반으로 두 가지 실질적으로 다른 디자인 방향을 제안합니다. 제안할 때는 단순한 색상 변경이 아닌 계층 구조, 구성, 타이포그래피, 강조점을 비교합니다. 이후 방향, 근거 및 결정 상태를 direction.md에 기록하며, 명시적인 사용자 지시사항이 최우선으로 적용됩니다. 이 스킬은 Claude Code, Cursor, Codex 등 AI 에이전트 기반 개발 환경에서 활용할 수 있습니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alty-oss/dev-design/tree/HEAD/skills/art-direction

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

디자인 방향 설정은(는) 무엇을 하나요?

Português (Brasil) 방향을 선택하기 전에 포함된 프론트엔드 디자인 가이드라인을 읽으십시오. 브리프 및 프로젝트 제약 조건과 함께 해당 가이드라인의 특정 시각 원칙을 사용하십시오. brief.md와 기존 제약 조건을 읽으십시오. 신제품/리디자인의 경우, 대상 사용자, 콘텐츠 및 작업에 기반하여 실질적으로 다른 두 가지 방향을 제안하십시오. 단순한 색상 변경이 아닌 계층 구조, 구성, 타이포그래피 및 강조점을 비교하십시오. 선택한 방향, 근거 및 결정 상태/출처를 direction.md에 기록하십시오. 선택 사항이 위임된 경우, 가장 적합한 것을 선택하고 위임되었음을 기록하십시오. 그렇지 않으면 새로운 방향을 구현하기 전에 실질적인 결정을 해결하십시오. 원래의 2단계 프로세스를 따르십시오:

  1. 4-6개의 명명된 16진수 색상, 서체 및 역할, 레이아웃 개념, 정렬을 포함한 ASCII 와이어프레임, 그리고 독창적인 원칙을 계획하십시오.
  2. 브리프 및 유사한 제품과 비교하십시오. 관련 없는 주제에서 동일하게 보일 선택 사항을 수정하고 변경 사항과 이유를 기록하십시오. 명시적인 사용자 지시 사항이 우선 적용되며, 소스에서 클리셰로 언급된 스타일도 포함됩니다. 기존 아이덴티티가 있는 프로젝트는 일반적으로 이를 재사용합니다. 실제 콘텐츠를 사용하십시오. 하나의 기억에 남는 요소에 표현을 집중시키고, 규율 있는 계층 구조로 이를 뒷받침하십시오. 누락된 글꼴/에셋을 설명하고 서비스를 사용할 수 있다고 가정하지 않고 의도적인 대체를 사용하십시오.

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

관련 스킬