Iridescent Butterfly UI System Board

{ "type": "UI/UX Design System Demonstration Project", "theme": "Dunkler Modus, von der Natur inspiriert, leuchtende, schillernde Ästhetik", "language": "Chinesisch", "canvas": { "aspect_ratio": "Quadratisches Poster", "background": "Tiefes Mitternachtsblau bis Schwarz, mit einem dezenten Halo", "style": "Ein hochwertiges, futuristisches Displayprojekt mit einer schmalen neonblauen Panelkontur, glänzenden Highlights, einem weichen Halo und hohem Kontrast." }, "header": { "title": "Naturinspiriertes UI/UX-Designsystem für Schmetterlingsregenbogen", "description": "{argument name=\"chinese description\" default=\"Inspiriert von Schmetterlingsflügeln, vereint das Design den irisierenden Schimmer von Strukturfarben und tiefem Blau zu einem leichten, dynamischen und lebendigen digitalen Erlebnis.\"}", "hero_image": "Ein detailreicher, leuchtender Schmetterlingsflügel in elektrischem Blau, Violett und irisierendem Cyan nimmt die Hälfte der oberen rechten Ecke ein. Sichtbare Adernstrukturen, durchscheinende Ränder und funkelnde Partikel sind erkennbar, dahinter befindet sich ein zweiter, verschwommener Flügel." }, "layout": { "sections": [ { "title": "1. Designinspiration", "position": "Oben links, unter dem Titel", "count": 4, "labels": [ "Makroaufnahme von schillernden Schmetterlingsflügeln", "Nahaufnahme der blau-violetten Flügelstruktur", "Lichtbrechender Prismenhalo", "Schmetterlingsflügelzellenmuster" ] }, { "title": "2. Schlüsselwörter", "position": "Oben rechts, unter dem Hauptbild", "count": 5, "labels": [ "Iris", "Agil", "Licht", "Tiefgründig", "Natur" ], "icon_style": "Minimalistische, leuchtende Liniensymbole in abgerundeten, dunklen Karten" }, { "title": "3. Farbsystem", "position": "Mitte links", "subsections": [ { "title": "Hauptfarbe", "count": 3, "labels": [ "Morpho Blue #1E5BFF", "Regenbogenviolett #7A5CFF", "Himmelslicht" #00E6FF" ] }, { "title": "Neutrale Farbe", "count": 3, "labels": [ "Mitternachtsschwarz #060F19", "Sanftes Marineblau #141A2E", "Perlweiß #F3F6FC" ] }, { "title": "Schwerpunkt auf Farbe und Farbverlauf", "count": 2, "labels": [ "Regenbogenglanz", "Schmetterlingslicht" ] } ], "visual": "Kreisförmige Farbmuster und Farbverlaufskugeln mit chinesischen Beschriftungen darunter." }, { "title": "4. Layout", "position": "Mitte rechts", "count": 1, "labels": [ "Aa Poppins Light / Regular / Medium / SemiBold" ], "visual": "Großes weißes Aa auf dunkler Karte" }, { "title": "5. Anwendungssymbol", "position": "Links und Mitte", "count": 1, "text": "{argument name=\"app name\" default=\"Winglet\"} Leicht. Agil. Elegant.", "visual": "Das leuchtende Schmetterlings-App-Symbol neben dem App-Namen" }, { "title": "6. UI-Komponenten", "position": "Mitte", "subsections": [ { "title": "Schaltfläche", "count": 3, "labels": [ "Hauptschaltfläche", "Nebenschaltflächen", "Glastextur" ] }, { "title": "Symbol", "count": 2, "labels": [ "Herzförmige Kollektion", "Leuchtender Ring" ] }, { "title": "switch", "count": 1, "labels": [ "switch" ] } ], "visual": "Abgerundete blaue Schaltflächen, Neon-Symbolschaltflächen und hintergrundbeleuchtete Schalter auf dem dunklen Panel" }, { "title": "Weitere Elemente", "position": "Rechts Mitte", "count": 4, "labels": [ "Suchfeld", "Tag "Neu", "Fortschrittsanzeige (72%)", "Blaue Morpho-Karte" ], "visual": "Kleine, praktische UI-Komponenten in kompakten horizontalen Karten" }, { "title": "7. Mobile UI", "position": "Unten links", "count": 3, "labels": [ "Suchseite", "Heutige Seite mit einer großen Schmetterlingsillustration", "Audiowiedergabeseite mit Wellenformdiagramm" ], "visual": "Drei Smartphone-Prototypen mit abgerundeten Ecken, dunkler Benutzeroberfläche und einem blau-violetten Schmetterlingseffekt." }, { "title": "8. Website-Design-Vorschau", "position": "Unten rechts", "count": 1, "labels": [ "Life of Light" ], "visual": "Desktop-Landingpage-Mockup mit Schmetterlingsmotiv als Hauptbild, oberer Navigation, hellblauem Call-to-Action-Button und chinesischem Text." }, { "title": "9. Visueller Hintergrund", "position": "Unten, volle Breite", "count": 4, "labels": [ "Fließender Bandhintergrund 1", "Wirbelnder Regenbogen", "Fließender Bandhintergrund 2", "Strahlender Kristallblitz" ], "visual": "Vier rechteckige Hintergrundbeispiele in Lila, Blau und Cyan." } ], "footer": { "count": 1, "text": "Entworfen mit Blick auf die Natur, geschaffen für ein besonderes Erlebnis.", "center_icon": "Kleines Schmetterlingssymbol" } }, "art_direction": { "materials": "Glasimitation, Neon-Kantenbeleuchtung, sanfte Farbverläufe, subtile Reflexionen", "colors": "Elektrisches Blau, Indigo, Violett, Cyan, Weiß", "composition": "Das klare Rasterlayout umfasst neun nummerierte Inhaltsabschnitte, viel Weißraum, schlanke, abgerundete Ränder und ein dominantes Schmetterlingsmotiv.", "render_quality": "Hochwertig, übersichtlich gestaltet – ein Premium-Designsystem-Projekt im Behance-Stil." } }