Copy-ready prompt
{ "type": "UI design system demonstration project", "theme": "{argument name=\"visual theme\" default=\"Optical Science and Light Refraction\"}", "overall_aesthetic": "A clean white background, light color mode, futuristic and sophisticated feel; its distinctive feature lies in {argument name=\"primary gradient colors\" default=\"Iridescent, soft orange, yellow, cyan, purple, pink\"} embellishment", "header": { "title": "{argument name=\"system name\" default=\"LIGHTCORE PRISM\"}", "subtitle": "UI Design System - Light Mode", "tags": [ "Futuristic", "sense of sophistication", "Focus" ], "hero_graphic": "3D transparent glass ring that refracts iridescent light" }, "layout": { "sections": [ { "title": "color", "count": 5, "labels": [ "White #FFFFFF", "Snowy #FAFAFC", "Slate color #F2F4F8", "Border color #E6E8EF", "Black #0A0A0C" ], "description": "5 rounded square solid color blocks" }, { "title": "Prism Gradient", "count": 1, "description": "A long horizontal gradient bar with five hexadecimal color codes below." }, { "title": "typesetting", "description": "The large 'Aa' font is listed in four weights (Light, Regular, Medium, Semibold) along with the complete alphabet/numbers." }, { "title": "icon", "count": 12, "description": "12 minimalist line-style icons arranged in a 2x6 grid." }, { "title": "Button", "count": 8, "categories": [ "main", "secondary", "text", "icon" ], "description": "There are a total of 8 buttons, displaying the normal and disabled states for each category. The main button features an iridescent border and {argument name=\"primary button text\" default=\"Start using\"} text." }, { "title": "navigation", "count": 2, "variants": [ "Desktop", "mobile" ], "description": "The desktop navigation includes a logo, four text links, a search bar, a login button, and a mobile navigation bar." }, { "title": "Components", "count": 6, "items": [ "Card: 'Photon Engine' with abstract rainbow graphics and buttons", "Input boxes: a labeled search bar and an email input box.", "Progress bar: 68% rainbow progress bar", "Tabs: Overview, Analysis, Settings", "Switches: 2 switches (on/off)", "Data visualization: a pie chart with 3 legend items, and a 7-day line chart." ] }, { "title": "Web page", "description": "Desktop browser model, including title '{argument name=\"hero headline\" default=\"Building the future with light and color\"} The design includes two buttons, a flowing 3D rainbow wave graphic, and five partner logos at the bottom." }, { "title": "Mobile application", "description": "The smartphone model displays a balance of $24,880, a line chart, four quick action icons, a list of recent activities with three items, and a bottom navigation bar with four icons." } ] } }
Prompt breakdown
{ "type": "UI design system demonstration project", "theme": "{argument name=\"visual theme\" default=\"Optical Science and Light Refraction\"}", "overall_aesthetic": "A clean white background, light color mode, futuristic and sophisticated feel; its distinctive feature lies in {argument name=\"primary gradient colors\" default=\"Iridescent, soft orange, yellow, cyan, purple, pink\"} embellishment", "header": { "title": "{argument name=\"system name\" default=\"LIGHTCORE PRISM\"}", "subtitle": "UI Design System - Light Mode", "tags": [ "Futuristic", "sense of sophistication", "Focus" ], "hero_graphic": "3D transparent glass ring that refracts iridescent light" }, "layout": { "sections": [ { "title": "color", "count": 5, "labels": [ "White #FFFFFF", "Snowy #FAFAFC", "Slate color #F2F4F8", "Border color #E6E8EF", "Black #0A0A0C" ], "description": "5 rounded square solid color blocks" }, { "title": "Prism Gradient", "count": 1, "description": "A long horizontal gradient bar with five hexadecimal color codes below." }, { "title": "typesetting", "description": "The large 'Aa' font is listed in four weights (Light, Regular, Medium, Semibold) along with the complete alphabet/numbers." }, { "title": "icon", "count": 12, "description": "12 minimalist line-style icons arranged in a 2x6 grid." }, { "title": "Button", "count": 8, "categories": [ "main", "secondary", "text", "icon" ], "description": "There are a total of 8 buttons, displaying the normal and disabled states for each category.
The main button features an iridescent border and {argument name=\"primary button text\" default=\"Start using\"} text." }, { "title": "navigation", "count": 2, "variants": [ "Desktop", "mobile" ], "description": "The desktop navigation includes a logo, four text links, a search bar, a login button, and a mobile navigation bar." }, { "title": "Components", "count": 6, "items": [ "Card: 'Photon Engine' with abstract rainbow graphics and buttons", "Input boxes: a labeled search bar and an email input box.", "Progress bar: 68% rainbow progress bar", "Tabs: Overview, Analysis, Settings", "Switches: 2 switches (on/off)", "Data visualization: a pie chart with 3 legend items, and a 7-day line chart." ] }, { "title": "Web page", "description": "Desktop browser model, including title '{argument name=\"hero headline\" default=\"Building the future with light and color\"} The design includes two buttons, a flowing 3D rainbow wave graphic, and five partner logos at the bottom." }, { "title": "Mobile application", "description": "The smartphone model displays a balance of $24,880, a line chart, four quick action icons, a list of recent activities with three items, and a bottom navigation bar with four icons." } ] } }
Explain where the generated visual will be used.
Avoid brand logos and review licensing before commercial use.










