Cosmic Dark Mode UI Design System

원본 문서

GPT Image 2 · en

{
  "type": "UI design system",
  "theme": "Dark mode, space-inspired, glowing decorations",
  "header": {
    "label": "Design System",
    "title": "{argument name=\"system name\" default=\"COSMIC GRAVITY\"}",
    "subtitle": "{argument name=\"theme description\" default=\"A Design Language Inspired by the Universe.\"}"
  },
  "layout": {
    "left_column": [
      {
        "title": "color",
        "count": 7,
        "items": [
          {
            "name": "Cosmic Black",
            "hex": "#050507"
          },
          {
            "name": "Deep Space",
            "hex": "#0E0F14"
          },
          {
            "name": "Soft white",
            "hex": "#F5F6F8"
          },
          {
            "name": "{argument name=\"primary accent color\" default=\"Stardust Gold\"}",
            "hex": "#F5D28A"
          },
          {
            "name": "Night Purple",
            "hex": "#1A1C2A"
          },
          {
            "name": "Twilight",
            "hex": "#0F1B2A"
          },
          {
            "name": "Nebula Blue",
            "hex": "#0E1F22"
          }
        ]
      },
      {
        "title": "Gradient",
        "count": 1,
        "description": "Displaying horizontal bars of cosmic halo from dark to light and back to dark."
      },
      {
        "title": "typesetting",
        "font": "{argument name=\"font name\" default=\"Space Grotesk\"}",
        "hierarchy_count": 4,
        "levels": [
          "H1 Cosmic Light",
          "H2 Explore More",
          "Main text: celestial bodies",
          "Track information labeling"
        ]
      }
    ],
    "main_column": [
      {
        "title": "UI components",
        "subsections": [
          {
            "title": "Button",
            "count": 3,
            "labels": [
              "Exploration (Main)",
              "Cancel (Secondary)",
              "More (ghosts)"
            ]
          },
          {
            "title": "slider",
            "count": 1,
            "value": "72%"
          },
          {
            "title": "switch",
            "count": 2,
            "states": [
              "close",
              "open"
            ]
          },
          {
            "title": "Label",
            "count": 3,
            "labels": [
              "black hole",
              "Jupiter",
              "track"
            ]
          }
        ]
      },
      {
        "title": "card",
        "count": 3,
        "items": [
          {
            "title": "{argument name=\"card subject\" default=\"JUPITER\"}",
            "subtitle": "Track Archives",
            "image": "Jupiter"
          },
          {
            "title": "black hole",
            "subtitle": "Cosmic events",
            "image": "Black holes with accretion disks"
          },
          {
            "title": "distance",
            "value": "778.3 million kilometers",
            "image": "Concentric orbital ring"
          }
        ]
      },
      {
        "title": "Data Display",
        "count": 3,
        "items": [
          {
            "title": "energy",
            "type": "Circular progress ring",
            "value": "87%"
          },
          {
            "title": "signal strength",
            "type": "Line graph with glowing nodes",
            "value": "42.6 dB"
          },
          {
            "title": "Cosmic noise",
            "type": "Audio Player UI"
          }
        ]
      },
      {
        "title": "icon",
        "count": 7,
        "labels": [
          "Homepage",
          "planet",
          "flash",
          "Signal",
          "Folder",
          "Heart-shaped",
          "user"
        ]
      }
    ],
    "bottom_row": [
      {
        "title": "Visual elements",
        "count": 5,
        "labels": [
          "black hole",
          "Gravity ring",
          "Halo",
          "Nebula dust",
          "glass surface"
        ]
      }
    ]
  }
}

사용 방법

1. 매개변수를 포함한 전체 원본 프롬프트를 복사하세요.
2. 주제, 문구, 구도를 자신의 요구에 맞게 바꾸세요.
3. 호환되는 외부 도구에서 사용하고 이용 조건과 결과를 확인하세요.

시작 전 확인

• 참조 이미지가 필요한지 확인하세요. 호환 표시는 해당 모델로 이 예시를 생성했다는 뜻이 아닙니다.
• 이름, 수치, 이미지 속 문구를 확인하세요. 모델 버전에 따라 결과가 다를 수 있습니다.