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. 対応する外部ツールで使用し、利用条件と結果を確認します。

開始前の確認

• 参考画像の要否を確認してください。互換モデルの表示は、そのモデルでの生成実績を意味しません。
• 名前、数値、画像内の文字を確認します。モデルの版で結果は変わります。