Posters & TypographyGPT Image 2MinimalistUI/UXModernMockupDark ModeWeb Design

Mockup giao diện trang bảng giá AI API chế độ tối

Prompt tạo mockup giao diện trang web bảng giá dịch vụ AI API ở chế độ tối (dark mode), với phong cách thiết kế hiện đại, bố cục 2 cột rõ ràng gồm phần giới thiệu tính năng và thẻ giá chi tiết.

Bản tiếng Anh

{
  "type": "dark mode web page UI mockup",
  "theme": "sleek, modern, dark theme with white and light grey text",
  "header": {
    "logo": "{argument name="company name" default="OpenAI"}",
    "navigation": ["Research", "Products", "Safety", "Company"],
    "actions": ["Search icon", "Log in", "Try ChatGPT button"]
  },
  "layout": {
    "left_column": {
      "label": "PRICING",
      "headline": "{argument name="model name" default="GPT-8"}",
      "subheading": "{argument name="main tagline" default="Our most powerful model yet."}",
      "description": "GPT-8 is designed for intelligence, reliability, and real-world impact. Built with multimodal reasoning, long-context understanding, and advanced tool use.",
      "button": "GET STARTED",
      "features": {
        "count": 3,
        "items": [
          {"icon": "brain", "title": "Frontier intelligence", "desc": "State-of-the-art reasoning, coding, and problem solving."},
          {"icon": "shield", "title": "Trusted by design", "desc": "Stronger safety, more steerability, and enterprise-grade reliability."},
          {"icon": "lightning bolt", "title": "Built for builders", "desc": "Native tool use, structured outputs, and long-context workflows."}
        ]
      }
    },
    "right_column": {
      "type": "pricing card",
      "header": "PRICING - Simple, token-based pricing. No hidden fees.",
      "toggle": ["INPUT", "CACHE READ"],
      "token_pricing": {
        "count": 5,
        "rows": [
          {"name": "Text tokens", "unit": "Per 1M tokens", "price": "{argument name="text token price" default="$3.00"}"},
          {"name": "Image tokens", "unit": "Per 1M tokens", "price": "$10.00"},
          {"name": "Audio tokens", "unit": "Per 1M tokens", "price": "$6.00"},
          {"name": "Video tokens", "unit": "Per 1M tokens", "price": "$15.00"},
          {"name": "Output tokens", "unit": "Per 1M tokens", "price": "{argument name="output token price" default="$12.00"}"}
        ]
      },
      "additional_features": {
        "count": 2,
        "rows": [
          {"name": "Caching", "desc": "Save on repeated inputs with caching.", "price": "$0.30 / 1M tokens"},
          {"name": "Batch API (50% discount)", "desc": "Lower costs for asynchronous workloads.", "price": "-50%"}
        ]
      },
      "footer_links": ["LEARN MORE", "Model docs", "Pricing details"]
    }
  },
  "footer": "Prices are in USD. View the full pricing table in our docs."
}

Bản tiếng Việt

{n  "type": "mockup giao diện trang web chế độ tối",n  "theme": "chủ đề tối bóng bẩy, hiện đại với văn bản màu trắng và xám nhạt",n  "header": {n    "logo": "{argument name="company name" default="OpenAI"}",n    "navigation": ["Research", "Products", "Safety", "Company"],n    "actions": ["Search icon", "Log in", "Try ChatGPT button"]n  },n  "layout": {n    "left_column": {n      "label": "BẢNG GIÁ",n      "headline": "{argument name="model name" default="GPT-8"}",n      "subheading": "{argument name="main tagline" default="Our most powerful model yet."}",n      "description": "GPT-8 được thiết kế cho trí thông minh, độ tin cậy và tác động thực tế. Được xây dựng với khả năng lập luận đa phương thức, hiểu ngữ cảnh dài và sử dụng công cụ nâng cao.",n      "button": "BẮT ĐẦU",n      "features": {n        "count": 3,n        "items": [n          {"icon": "bộ não", "title": "Trí tuệ tiên phong", "desc": "Khả năng lập luận, lập trình và giải quyết vấn đề đỉnh cao."},n          {"icon": "lá chắn", "title": "Tin cậy ngay từ thiết kế", "desc": "An toàn cao hơn, khả năng định hướng tốt hơn và độ tin cậy cấp doanh nghiệp."},n          {"icon": "tia sét", "title": "Được xây dựng cho người kiến tạo", "desc": "Sử dụng công cụ gốc, dữ liệu đầu ra có cấu trúc và quy trình làm việc ngữ cảnh dài."}n        ]n      }n    },n    "right_column": {n      "type": "thẻ bảng giá",n      "header": "BẢNG GIÁ - Định giá đơn giản, dựa trên token. Không có phí ẩn.",n      "toggle": ["INPUT", "CACHE READ"],n      "token_pricing": {n        "count": 5,n        "rows": [n          {"name": "Token văn bản", "unit": "Mỗi 1M token", "price": "{argument name="text token price" default="$3.00"}"},n          {"name": "Image tokens", "unit": "Per 1M tokens", "price": "$10.00"},n          {"name": "Audio tokens", "unit": "Per 1M tokens", "price": "$6.00"},n          {"name": "Video tokens", "unit": "Per 1M tokens", "price": "$15.00"},n          {"name": "Token đầu ra", "unit": "Mỗi 1M token", "price": "{argument name="output token price" default="$12.00"}"}n        ]n      },n      "additional_features": {n        "count": 2,n        "rows": [n          {"name": "Caching", "desc": "Save on repeated inputs with caching.", "price": "$0.30 / 1M tokens"},n          {"name": "Batch API (giảm giá 50%)", "desc": "Chi phí thấp hơn cho khối lượng công việc không đồng bộ.", "price": "-50%"}n        ]n      },n      "footer_links": ["LEARN MORE", "Model docs", "Pricing details"]n    }n  },n  "footer": "Giá tính bằng USD. Xem toàn bộ bảng giá trong tài liệu của chúng tôi."n}

Mẹo sử dụng

Có thể linh hoạt điều chỉnh cấu trúc JSON (như đổi tên mô hình AI, thay đổi danh sách tính năng hoặc đơn giá token) để tạo mockup phù hợp cho nhiều sản phẩm SaaS khác nhau.

Nguồn và quyền sử dụng

Nguồn: https://x.com/Gdthainakub/status/2044382053521936809#reversed-1
Tác giả gốc: IDK
License prompt: CC-BY-4.0
License ảnh: CC-BY-4.0

Báo lỗi hoặc yêu cầu gỡ nội dung