다크 AI 코딩 대시보드 UI

{ "type": "다크 SaaS 분석 대시보드 UI", "product": { "brand": "{argument name=\"브랜드 이름\" default=\"AICode\"}", "theme": "깊은 남색의 불투명 유리 질감에 은은한 그라데이션, 부드러운 조명, 둥근 카드, 얇은 테두리가 특징인 이 인터페이스는 현대적인 개발자 도구의 미학을 구현합니다." }, "canvas": { "aspect_ratio": "16:9", "background": "깊은 미드나잇 블루에 은은한 비네팅과 부드러운 방사형 조명 효과가 적용되었습니다." } }, "layout": { "structure": "왼쪽 사이드바와 메인 콘텐츠 영역", "sections": [ { "title": "사이드바", "position": "왼쪽", "count": 8, "labels": [ "AICode", "개요", "프로젝트", "AI 어시스턴트", "API 및 사용법", "코드 품질", "팀", "설정" ], "details": "로고가 상단에 표시되고, "개요"는 선택 시 보라색으로 강조 표시됩니다. 하단의 구독 카드에는 12일 후에 만료되는 프로 플랜이 표시됩니다. 가로 진행률 표시줄은 75%를 보여줍니다. 하단의 사용자 프로필에는 아바타가 포함되어 있습니다. {argument name=\"사용자 이름\" 기본값=\"Alex Morgan\"} 및 이메일 주소 [email protected]" }, { "title": "헤더", "position": "상단 메인 영역", "count": 4, "레이블": [ "알렉스, 다시 오신 것을 환영합니다 👋", "AI 프로그래밍 플랫폼의 오늘 업데이트입니다.", "2024년 5월 12일 – 2024년 6월 12일", "보고서 내보내기" ], "세부 정보": "왼쪽에는 큰 환영 메시지가 표시되고, 오른쪽에는 날짜 범위 선택기와 내보내기 버튼이 표시됩니다." }, { "title": "지표 카드", "position": "헤더 바로 아래 첫 번째 줄", "count": 4, "labels": [ "총 사용자 수", "활성 프로젝트", "API 호출량", "코드 품질 등급" ], "values": [ "12,842", "2,153", "1.28M", "876" ], "details": "각 카드에는 작은 아이콘, 큰 주요 값, 그리고 2024년 4월 12일부터 5월 12일까지의 기간을 비교하는 텍스트가 포함되어 있으며, 각각 14.6%, 8.3%, 23.7%, 5.9%의 긍정적인 성장률을 보여줍니다. 하단에는 미니 선 그래프가 표시되며, 색상은 보라색, 녹색, 황색, 파란색입니다." }, { "title": "메인 분석 패널", "position": "중간 및 하단 행", "count": 4, "labels": [ "API 호출 추세", "인기 프로젝트", "사용자 활동 히트맵", "코드 품질 추세" ], "details": "'API 호출 추세' 차트는 '일별' 드롭다운 메뉴가 있는 광역 그래프입니다. 보라색 선은 상승 추세를 보이며 약 25만 건에서 끝납니다. '인기 항목'은 진행률 막대와 백분율 변화가 있는 5개 항목의 순위 목록입니다. '사용자 활동 히트맵'은 오후 12시부터 오후 9시까지 시간별 레이블이 있는 7행 주간 히트맵입니다. '코드 품질 추세' 차트는 '주간' 드롭다운 메뉴가 있는 선 그래프입니다. 보라색 곡선은 약 70에서 90을 약간 넘는 수준까지 부드럽게 상승합니다." }, { "title": "인기 프로젝트 목록", "position": "오른쪽 중간 패널", "count": 5, "labels": [ "AI 코드 도우미", "스마트 리팩토링", "코드 리뷰 봇", "문서 생성기", "테스트 빌더" ], "values": [ "485K", "321K", "214K", "132K", "98K" ], "details": "처음 네 항목은 각각 12.4%, 8.7%, 3.1%, 6.8%의 긍정적인 성장률(녹색)을 보였고, 테스트 빌더는 -1.2%의 부정적인 성장률(빨간색)을 보였습니다. 각 행에는 색상이 있는 사각형 아이콘과 얇은 가로 진행률 표시줄이 있습니다." } ] }, "style": { "visual_language": "고급 금융 기술 및 AI 제품 디자인 프로토타입", "rendering": "선명하고 충실한 UI 프로토타입, 은은한 그림자, 네온 엣지 조명 효과, 정교한 차트, 깔끔한 산세리프 글꼴.", "primary_accent": "{argument name=\"accent color\" default=\"일렉트릭 바이올렛\"}", "secondary_accents": [ "에메랄드 그린", "앰버 옐로우", "시안" ], "density": "정보가 풍부하고 공간적으로 균형이 잘 잡혀 있으며, 균형 잡힌 그리드와 높은 가독성을 제공합니다." } }