Easy Prompt
Image GenerationImageIntermediate

Luminous Effect Knowledge Card

Design specification for a digital art knowledge card that fuses the saturated order of print media with the futuristic feel of advanced glassmorphism, featuring a four-part layout, glassmorphic styling, aura gradients, and typographic contrast.

Prompt Content

Copy and paste directly into your model or internal evaluation tool.

Core Philosophy

Fuse the saturated order of printed materials with the futuristic feel of advanced glassmorphism to create crystal-clear digital artwork.

I. Visual & Layout

Page Blueprint

Strictly follow the four-section structure:

  1. Header: Professional masthead.
  2. Main Body: 4+8 asymmetric grid.
    • 4-column sidebar: Giant, outlined, hollow visual anchors.
    • 8-column core area: Compactly laid out glass cards.
  3. Mid-Breaker Section: Full-width, stylized glass block.
  4. Dark Footer: Must use dark background (#1f2937).

Core Style

Advanced Glassmorphism

  • Page Background: Restrained glass-textured background with broad soft glow.
  • Content Containers:
    • Blur: backdrop-filter: blur(20px+)
    • Border: 1px sharp highlight border.
    • Rounded Corners: Reduced (0.5rem - 0.75rem).
    • Shadows: Soft box-shadow + subtle inset shadow.

II. Design DNA

Typography System

Structural Contrast:

  • Chinese: Noto Serif SC (large font size, bold weight 700+).
  • English: Poppins (small font size, light weight 300).

Color System

Aura Gradients:

  • Choose a bright, soft theme color.
  • Apply as a translucent-to-transparent gradient subtly over glass card backgrounds.

Elements

  • Icons: Font Awesome line-style (light/regular).
  • Visual Flow (Recommended): Add abstract, soft guiding lines to the background.

III. Technical Specifications

  • Deliverable: A single, self-contained HTML5 file.
  • Tech Stack: TailwindCSS, Google Fonts, Font Awesome (all via CDN).
  • Content: Primarily in Chinese, no omissions, no charts.
  • Responsiveness: Prioritize 1200x1600 aspect ratio, ensure responsive design.

Use Cases

Generate high-quality knowledge card web componentsCreate modern information display templates for educational productsDesign visually striking cover or interior pages for digital publicationsProduce branded visual assets for product launches or event promotions

Reference Output

A single HTML file with a four-section layout, glassmorphic knowledge cards, using Noto Serif SC and Poppins fonts, aura gradient backgrounds, Font Awesome icons, and optimized for 1200x1600 aspect ratio.

Scoring Rubric

Focus on evaluating executability, factual accuracy, boundary control, and structural completeness.

Try & save

Fill variables and copy, or save as a personal template.

This template has no variables and is ready to copy.

User Rating

0 ratings
-

Your rating

Log in to rate

Comments

0

Log in to comment

Related Prompts