디자인 시스템 아키텍트
Wikiprompt, 무료 프롬프트 백과사전에서
디자인 시스템 아키텍트 애플의 휴먼 인터페이스 가이드라인을 따르는 완전한 디자인 시스템을 생성하기 위한 종합적인 프롬프트로, 기초, 컴포넌트, 패턴, 토큰, 문서화를 포함합니다.
프롬프트 내용저장
🌐
당신은 Apple의 수석 디자이너로서 Human Interface Guidelines를 책임지고 있습니다.
[BRAND/PRODUCT NAME]을 위한 포괄적인 디자인 시스템을 만드십시오.
브랜드 속성:
성격: [MINIMALIST/BOLD/PLAYFUL/PROFESSIONAL/LUXURY]
주요 감정: [TRUST/EXCITEMENT/CALM/URGENCY]
타겟 오디언스: [DEMOGRAPHICS]
Apple HIG 원칙을 따르는 산출물:
1. 파운데이션
컬러 시스템:
기본 팔레트 (HEX, RGB, HSL, 접근성 등급을 포함한 6가지 색상)
의미론적 색상 (성공, 경고, 오류, 정보)
대비 비율을 포함한 다크 모드 대응 색상
컬러 사용 규칙 (각 색상의 의미와 사용 시점)
타이포그래피:
9가지 굵기를 가진 기본 서체 (Display, Headline, Title, Body, Callout, Subheadline, Footnote, Caption)
데스크톱/태블릿/모바일용 정확한 크기, 줄 높이, 자간을 포함한 타이포그래피 스케일
폰트 페어링 전략
접근성: 가독성을 위한 최소 크기
레이아웃 그리드:
12컬럼 반응형 그리드 (데스크톱: 1440px, 태블릿: 768px, 모바일: 375px)
거터 및 마진 사양
브레이크포인트 정의
노치 디바이스를 위한 안전 영역
간격 시스템:
8px 기반 스케일 (4, 8, 12, 16, 24, 32, 48, 64, 96, 128)
각 간격 값에 대한 사용 지침
2. 컴포넌트 (30개 이상의 변형을 포함한 컴포넌트 디자인)
내비게이션: 헤더, 탭 바, 사이드바, 브레드크럼
입력: 버튼 (6가지 변형), 텍스트 필드, 드롭다운, 토글, 체크박스, 라디오 버튼, 슬라이더
피드백: 알림, 토스트, 모달, 진행 표시기, 스켈레톤 화면
데이터 표시: 카드, 테이블, 리스트, 통계, 차트
미디어: 이미지 컨테이너, 비디오 플레이어, 아바타
각 컴포넌트에 대해:
구조 분석 (부분 및 이름)
모든 상태 (기본, 호버, 활성, 비활성, 로딩, 오류)
사용 지침 (사용 시점, 사용하지 말아야 할 시점)
접근성 요구사항 (ARIA 레이블, 키보드 내비게이션, 포커스 상태)
개발자 준비 사양 (패딩, 마진, 테두리 반경, 그림자)
3. 패턴
페이지 템플릿: 랜딩 페이지, 대시보드, 설정, 프로필, 체크아웃
사용자 흐름: 온보딩, 인증, 검색, 필터링, 빈 상태
피드백 패턴: 성공, 오류, 로딩, 빈 상태
4. 토큰
개발자 핸드오프를 위한 완전한 디자인 토큰 구조 (JSON 형식)
5. 문서화
디자인 원칙 (예시가 포함된 3가지 핵심 원칙)
Do’s and Don’ts (시각적 설명이 포함된 10가지 예시)
개발자를 위한 구현 가이드
모든 것을 즉시 게시 가능한 디자인 시스템 문서로 포맷하십시오.
전체 프롬프트를 보려면 로그인하세요
Continue with:
By logging in, you agree to our Terms of Use and Privacy Policy
사용법
이 프롬프트는 creative와 함께 사용하도록 설계되었습니다. 위의 프롬프트 내용을 복사하여 원하는 AI 도구에 붙여넣으세요.
최상의 결과를 얻으려면 자리 표시자(대괄호 또는 대문자로 표시)를 특정 요구 사항으로 사용자 지정할 수 있습니다.
토론
댓글 0개