浅色模式 UI 设计系统项目

{ "type": "UI Design System presentation board", "theme": "{argument name=\"visual theme\" default=\"optical science and light refraction\"}", "overall_aesthetic": "clean white background, light mode, futuristic, premium, featuring {argument name=\"primary gradient colors\" default=\"iridescent rainbow, pastel orange, yellow, cyan, purple, pink\"} accents", "header": { "title": "{argument name=\"system name\" default=\"LIGHTCORE PRISM\"}", "subtitle": "UI Design System - Light Mode", "tags": ["FUTURISTIC", "PREMIUM", "FOCUS"], "hero_graphic": "3D transparent glass ring refracting iridescent light" }, "layout": { "sections": [ { "title": "COLOR", "count": 5, "labels": ["WHITE #FFFFFF", "SNOW #FAFAFC", "SLATE #F2F4F8", "BORDER #E6E8EF", "BLACK #0A0A0C"], "description": "5 solid color swatches in rounded squares" }, { "title": "PRISM GRADIENTS", "count": 1, "description": "1 long horizontal gradient bar with 5 hex codes below it" }, { "title": "TYPOGRAPHY", "description": "Large 'Aa' with 4 font weights listed (Light, Regular, Medium, Semibold) and full alphabet/numbers" }, { "title": "ICONOGRAPHY", "count": 12, "description": "12 minimalist line-art icons arranged in a 2x6 grid" }, { "title": "BUTTONS", "count": 8, "categories": ["PRIMARY", "SECONDARY", "TEXT", "ICON"], "description": "8 total buttons showing normal and disabled states for each category. Primary button features an iridescent border and {argument name=\"primary button text\" default=\"GET STARTED\"} text." }, { "title": "NAVIGATION", "count": 2, "variants": ["DESKTOP", "MOBILE"], "description": "Desktop nav has logo, 4 text links, search, sign in, and a button. Mobile nav has logo, search, and hamburger menu." }, { "title": "COMPONENTS", "count": 6, "items": [ "CARD: 'Photon Engine' with abstract iridescent graphic and button", "INPUT FIELD: Search bar and email input with label", "PROGRESS: Iridescent progress bar at 68%", "TABS: Overview, Analytics, Settings", "TOGGLE: 2 switches (on/off)", "DATA VISUALIZATION: 1 donut chart with 3 legend items, 1 line chart over 7 days" ] }, { "title": "WEB PAGE", "description": "Desktop browser mockup featuring the header '{argument name=\"hero headline\" default=\"Build the Future with Light & Color\"}', 2 buttons, a flowing 3D iridescent wave graphic, and 5 partner logos at the bottom." }, { "title": "MOBILE APP", "description": "Smartphone mockup displaying a balance of $24,880, a line chart, 4 quick action icons, a recent activity list with 3 items, and a bottom navigation bar with 4 icons." } ] } }

{ "type": "UI 设计系统演示项目", "theme": "{argument name=\"visual theme\" default=\"光学科学与光折射\"}", "overall_aesthetic": "干净的白色背景，浅色模式，未来感，高级感，特色在于 {argument name=\"primary gradient colors\" default=\"虹彩、柔和橙色、黄色、青色、紫色、粉色\"} 点缀", "header": { "title": "{argument name=\"system name\" default=\"LIGHTCORE PRISM\"}", "subtitle": "UI 设计系统 - 浅色模式", "tags": ["未来感", "高级感", "专注"], "hero_graphic": "折射虹彩光线的 3D 透明玻璃环" }, "layout": { "sections": [ { "title": "色彩", "count": 5, "labels": ["白色 #FFFFFF", "雪色 #FAFAFC", "板岩色 #F2F4F8", "边框色 #E6E8EF", "黑色 #0A0A0C"], "description": "5 个圆角方形的纯色色块" }, { "title": "棱镜渐变", "count": 1, "description": "1 条长水平渐变条，下方附有 5 个十六进制颜色代码" }, { "title": "排版", "description": "大号 'Aa' 字体，列出 4 种字重（Light, Regular, Medium, Semibold）以及完整的字母表/数字" }, { "title": "图标", "count": 12, "description": "12 个极简线条风格图标，以 2x6 网格排列" }, { "title": "按钮", "count": 8, "categories": ["主要", "次要", "文本", "图标"], "description": "总计 8 个按钮，展示每种分类的正常和禁用状态。主要按钮具有虹彩边框和 {argument name=\"primary button text\" default=\"开始使用\"} 文本。" }, { "title": "导航", "count": 2, "variants": ["桌面端", "移动端"], "description": "桌面端导航包含 Logo、4 个文本链接、搜索、登录和一个按钮。移动端导航包含 Logo、搜索和汉堡菜单。" }, { "title": "组件", "count": 6, "items": [ "卡片：带有抽象虹彩图形和按钮的 'Photon Engine'", "输入框：带标签的搜索栏和电子邮件输入框", "进度条：68% 的虹彩进度条", "标签页：概览、分析、设置", "开关：2 个开关（开/关）", "数据可视化：1 个带 3 个图例项的环形图，1 个 7 天折线图" ] }, { "title": "网页", "description": "桌面浏览器模型，包含标题 '{argument name=\"hero headline\" default=\"用光与色彩构建未来\"}'、2 个按钮、流动的 3D 虹彩波浪图形以及底部的 5 个合作伙伴 Logo。" }, { "title": "移动应用", "description": "智能手机模型，显示 24,880 美元的余额、折线图、4 个快速操作图标、包含 3 个项目的近期活动列表以及带有 4 个图标的底部导航栏。" } ] } }