Dark AI Coding Dashboard UI

A polished dark-mode analytics dashboard for an AI coding platform, suitable for SaaS product design mockups, admin panels, and data-rich web UI presentations.

{
  "type": "다크 SaaS 분석 대시보드 UI",
  "product": {
    "brand": "{argument name=\"brand name\" default=\"AICode\"}",
    "theme": "은은한 그라데이션과 부드러운 광택, 둥근 모서리의 카드, 얇은 테두리가 적용된 다크 네이비 블루 글래스모피즘 인터페이스, 현대적인 개발자 도구 미학"
  },
  "canvas": {
    "aspect_ratio": "16:9",
    "background": "희미한 비네팅과 부드러운 방사형 조명이 가미된 딥 미드나잇 블루"
  },
  "layout": {
    "structure": "좌측 사이드바 및 메인 콘텐츠 영역",
    "sections": [
      {
        "title": "사이드바",
        "position": "왼쪽",
        "count": 8,
        "labels": ["AICode", "개요", "프로젝트", "AI 어시스턴트", "API 및 사용량", "코드 품질", "팀", "설정"],
        "details": "상단 로고, 보라색 하이라이트로 선택된 개요, 하단에는 Pro 플랜을 보여주는 구독 카드(12일 후 갱신, 75% 수평 진행률 표시), 하단에는 아바타와 함께 {argument name=\"user name\" default=\"Alex Morgan\"} 및 이메일 alex@morgan.dev가 포함된 사용자 프로필"
      },
      {
        "title": "헤더",
        "position": "상단 메인 영역",
        "count": 4,
        "labels": ["다시 오신 것을 환영합니다, Alex 👋", "오늘 귀하의 AI 코딩 플랫폼에서 일어나는 일입니다.", "2024 년 5 월 12 일 – 6 월 12 일", "보고서 내보내기"],
        "details": "왼쪽에 큰 인사말, 오른쪽에 날짜 범위 선택기 및 내보내기 버튼"
      },
      {
        "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 호출'은 일간 드롭다운과 250K 근처까지 상승하는 보라색 선이 있는 넓은 영역 차트; '상위 프로젝트'는 진행률 표시줄과 백분율 변화가 포함된 5개 항목의 순위 목록; '사용자 활동 히트맵'은 오전 12시부터 오후 9시까지의 시간 라벨이 있는 7행 주간 히트맵; '코드 품질 추세'는 주간 드롭다운과 약 70에서 90 초반까지 부드럽게 상승하는 보라색 선 차트"
      },
      {
        "title": "상위 프로젝트 목록",
        "position": "중간 오른쪽 패널",
        "count": 5,
        "labels": ["AI 코드 어시스턴트", "스마트 리팩터", "코드 리뷰 봇", "문서 생성기", "테스트 빌더"],
        "values": ["485K", "321K", "214K", "132K", "98K"],
        "details": "상위 4개 항목에 대해 12.4%, 8.7%, 3.1%, 6.8%의 녹색 긍정적 델타, '테스트 빌더'에 대해 -1.2%의 빨간색 부정적 델타; 각 행에는 색상 사각형 아이콘과 얇은 수평 진행률 표시줄이 있음"
      }
    ]
  },
  "style": {
    "visual_language": "프리미엄 핀테크 및 AI 제품 디자인 목업",
    "rendering": "선명한 고충실도 UI 목업, 은은한 그림자, 네온 엣지 라이팅, 세련된 차트, 깔끔한 산세리프 타이포그래피",
    "primary_accent": "{argument name=\"accent color\" default=\"electric purple\"}",
    "secondary_accents": ["에메랄드 그린", "호박색", "시안 블루"],
    "density": "정보가 풍부하면서도 여유로운 공간감, 균형 잡힌 그리드, 높은 가독성"
  }
}

기계 번역 — 실제 결과물을 만든 것은 원문 프롬프트입니다.

✨ 생성 저장 프롬프트 복사 공유 원본 게시물 Hitboard에서 열기