Copy-ready prompt
{ "type": "UI/UX Design System Demonstration Project", "theme": "Dark mode, nature-inspired, luminous iridescent aesthetics", "language": "Chinese", "canvas": { "aspect_ratio": "Square poster", "background": "Deep midnight blue to black, with a subtle halo", "style": "A high-end, futuristic display project featuring a slim neon blue panel outline, glossy highlights, soft halo, and high contrast." }, "header": { "title": "Nature-inspired UI{argument name=\"system title\" default=\"Butterfly Rainbow\"} UI/UX Design System", "description": "{argument name=\"chinese description\" default=\"Drawing inspiration from butterfly wings, the design incorporates the iridescent sheen of structural colors and deep blue to create a light, dynamic, and vibrant digital experience.\"}", "hero_image": "A highly detailed, luminous butterfly wing, displaying electric blue, violet, and iridescent cyan, occupies half of the upper right corner. Visible vein structures, translucent edges, and sparkling particles are visible, with a second, blurred wing behind it." }, "layout": { "sections": [ { "title": "1. Design Inspiration", "position": "Top left corner, below the title", "count": 4, "labels": [ "Macro of iridescent butterfly wings", "Close-up of the blue-purple wing texture", "Light refracting prism halo", "Butterfly wing cell pattern" ] }, { "title": "2. Keywords", "position": "Top right corner, below the main image", "count": 5, "labels": [ "iris", "Agile", "Light", "Profound", "nature" ], "icon_style": "Minimalist glowing line icons inside rounded dark cards" }, { "title": "3. Color System", "position": "center left", "subsections": [ { "title": "main color", "count": 3, "labels": [ "Morpho Blue #1E5BFF", "Rainbow Purple #7A5CFF", "Skylight #00E6FF" ] }, { "title": "Neutral color", "count": 3, "labels": [ "Midnight Black #060F19", "Soft Navy Blue #141A2E", "Pearl White #F3F6FC" ] }, { "title": "Emphasis on color and gradient", "count": 2, "labels": [ "Rainbow gloss", "Butterfly Light" ] } ], "visual": "Circular color swatches and gradient spheres, with Chinese labels below." }, { "title": "4. Layout", "position": "center right", "count": 1, "labels": [ "Aa Poppins Light / Regular / Medium / SemiBold" ], "visual": "Large white Aa on a dark card" }, { "title": "5. Application icon", "position": "Left and Middle", "count": 1, "text": "{argument name=\"app name\" default=\"Winglet\"} Light. Agile. Elegant.", "visual": "The glowing butterfly app icon next to the app name" }, { "title": "6. UI Components", "position": "center", "subsections": [ { "title": "Button", "count": 3, "labels": [ "Main button", "Secondary buttons", "glass texture" ] }, { "title": "icon", "count": 2, "labels": [ "Heart-shaped collection", "Illuminated ring" ] }, { "title": "switch", "count": 1, "labels": [ "switch" ] } ], "visual": "Rounded blue buttons, neon icon buttons, and backlit switches on the dark panel" }, { "title": "Other elements", "position": "Right Center", "count": 4, "labels": [ "search box", "Tag New", "Progress bar (72%)", "Blue Morpho card" ], "visual": "Small, practical UI components in compact horizontal cards" }, { "title": "7. Mobile UI", "position": "Bottom left", "count": 3, "labels": [ "Search page", "Today's page with a large butterfly illustration", "Audio playback page with waveform graph" ], "visual": "Three rounded-corner smartphone prototypes with a dark interface and a blue-purple butterfly visual effect." }, { "title": "8. Website Design Preview", "position": "Bottom right", "count": 1, "labels": [ "Life of Light" ], "visual": "Desktop landing page mockup, including a butterfly main image, top navigation, bright blue call-to-action button, and Chinese text." }, { "title": "9. Visual Background", "position": "Bottom full width", "count": 4, "labels": [ "Flowing ribbon background 1", "Swirl Rainbow", "Flowing ribbon background 2", "Radiant Crystal Burst" ], "visual": "Four rectangular background samples in purple, blue, and cyan." } ], "footer": { "count": 1, "text": "Designed with nature in mind, born for experience.", "center_icon": "Small butterfly icon" } }, "art_direction": { "materials": "Glass mimicry, neon edge lighting, smooth gradients, subtle reflections", "colors": "Electric blue, indigo, violet, cyan, white", "composition": "The clean grid layout includes nine numbered content sections, ample white space, slender rounded borders, and a dominant butterfly image.", "render_quality": "Highly refined, clearly laid out, a premium Behance-style design system project." } }
Prompt breakdown
{ "type": "UI/UX Design System Demonstration Project", "theme": "Dark mode, nature-inspired, luminous iridescent aesthetics", "language": "Chinese", "canvas": { "aspect_ratio": "Square poster", "background": "Deep midnight blue to black, with a subtle halo", "style": "A high-end, futuristic display project featuring a slim neon blue panel outline, glossy highlights, soft halo, and high contrast." }, "header": { "title": "Nature-inspired UI{argument name=\"system title\" default=\"Butterfly Rainbow\"} UI/UX Design System", "description": "{argument name=\"chinese description\" default=\"Drawing inspiration from butterfly wings, the design incorporates the iridescent sheen of structural colors and deep blue to create a light, dynamic, and vibrant digital experience.\"}", "hero_image": "A highly detailed, luminous butterfly wing, displaying electric blue, violet, and iridescent cyan, occupies half of the upper right corner.
Visible vein structures, translucent edges, and sparkling particles are visible, with a second, blurred wing behind it." }, "layout": { "sections": [ { "title": "1.
Design Inspiration", "position": "Top left corner, below the title", "count": 4, "labels": [ "Macro of iridescent butterfly wings", "Close-up of the blue-purple wing texture", "Light refracting prism halo", "Butterfly wing cell pattern" ] }, { "title": "2.
Keywords", "position": "Top right corner, below the main image", "count": 5, "labels": [ "iris", "Agile", "Light", "Profound", "nature" ], "icon_style": "Minimalist glowing line icons inside rounded dark cards" }, { "title": "3.









