[{ id: "sketchbook-gallery", title: "Sketchbook Gallery", description: "Image gallery and showcase with a sketchbook aesthetic", imageUrl: "https://themes.uiprompt.art/sketchbook-gallery/sketchbook-gallery.png", category: "gallery", uiStyle: "skeuomorphic", prompt: "Design an image gallery interface with a skeuomorphic sketchbook aesthetic featuring photo collections, artwork showcases, and image detail views that appear within a realistic artist's sketchbook or portfolio, inspired by Unsplash's clean gallery presentation but transformed with realistic paper textures. Use high-detail paper texture backgrounds with visible grain, slight discoloration, and occasional ruled lines, and a naturalistic color palette that emphasizes the artwork while using muted, paper-like tones (cream, soft gray, gentle tan) for the interface elements. Create engaging page-turn animations between gallery sections with realistic paper physics including page curl, slight transparency, and proper shadowing (similar to Flipboard's classic navigation but more detailed), while implementing zoom effects that mimic a magnifying glass or loupe tool. Design gallery thumbnails to appear as if they're attached to pages with corner mounts, washi tape, or paper clips, navigation elements that look like physical notebook tabs or bookmark ribbons (like Moleskine's physical notebook dividers), and filtering controls that resemble hand-labeled dividers. Include meta information for images as handwritten notes beside the artwork, captions that look like pencil annotations, and loading states visualized as sketches being drawn in real-time. Structure the gallery with intentional organization that mimics how an artist might arrange their physical portfolio, with clear visual pathways between related works and intuitive navigation between collections. The layout should maintain consistent margins like a real sketchbook with intentional alignment irregularities, creating an immersive browsing experience that balances artistic presentation with intuitive gallery navigation, making users feel like they're flipping through a treasured art collection rather than browsing a digital gallery.", prompts: { en: "Design an image gallery interface with a skeuomorphic sketchbook aesthetic featuring photo collections, artwork showcases, and image detail views that appear within a realistic artist's sketchbook or portfolio, inspired by Unsplash's clean gallery presentation but transformed with realistic paper textures. Use high-detail paper texture backgrounds with visible grain, slight discoloration, and occasional ruled lines, and a naturalistic color palette that emphasizes the artwork while using muted, paper-like tones (cream, soft gray, gentle tan) for the interface elements. Create engaging page-turn animations between gallery sections with realistic paper physics including page curl, slight transparency, and proper shadowing (similar to Flipboard's classic navigation but more detailed), while implementing zoom effects that mimic a magnifying glass or loupe tool. Design gallery thumbnails to appear as if they're attached to pages with corner mounts, washi tape, or paper clips, navigation elements that look like physical notebook tabs or bookmark ribbons (like Moleskine's physical notebook dividers), and filtering controls that resemble hand-labeled dividers. Include meta information for images as handwritten notes beside the artwork, captions that look like pencil annotations, and loading states visualized as sketches being drawn in real-time. Structure the gallery with intentional organization that mimics how an artist might arrange their physical portfolio, with clear visual pathways between related works and intuitive navigation between collections. The layout should maintain consistent margins like a real sketchbook with intentional alignment irregularities, creating an immersive browsing experience that balances artistic presentation with intuitive gallery navigation, making users feel like they're flipping through a treasured art collection rather than browsing a digital gallery.", zh: "设计一个具有拟物化速写本美学的图像画廊界面,其中包含照片集合、艺术品展示和图像详细视图,呈现在逼真的艺术家速写本或作品集中,灵感来自Unsplash简洁的画廊呈现,但通过逼真的纸张纹理进行了转变。使用具有可见纹理、轻微变色和偶尔出现的横线的高细节纸张纹理背景,以及强调艺术品的自然色彩调色板,同时为界面元素使用柔和的类纸调(奶油色、柔和的灰色、温和的棕褐色)。创建引人入胜的画廊部分之间的翻页动画,具有真实的纸张物理效果,包括页面卷曲、轻微透明度和适当的阴影(类似于Flipboard的经典导航,但更详细),同时实现模仿放大镜或放大工具的缩放效果。设计画廊缩略图,使其看起来像是用角落支架、和纸胶带或回形针附在页面上,导航元素看起来像物理笔记本标签或书签丝带(如Moleskine的物理笔记本分隔器),以及类似手工标记的分隔器的过滤控件。包括作为艺术品旁边手写笔记的图像元信息,看起来像铅笔注释的标题,以及可视化为实时绘制草图的加载状态。构建画廊布局时,有意模仿艺术家可能如何安排其物理作品集,包含清晰的相关作品之间的视觉路径和集合之间的直观导航。布局应保持像真实速写本一样的一致页边距,有意的对齐不规则性,创造一种平衡艺术呈现与直观画廊导航的沉浸式浏览体验,让用户感觉像是在翻阅珍贵的艺术收藏,而不是浏览数字画廊。" }, relatedThemes: ["artistic-blog", "doodle-portfolio"], model: "Claude 3.7 Sonnet", techStack: ["Tailwind CSS", "PhotoSwipe", "GSAP", "Paper.js"], previewUrl: "https://themes.uiprompt.art/sketchbook-gallery/index.html" }, { id: "sketchy-dashboard", title: "Sketchy Dashboard", description: "A hand-drawn dashboard interface with playful widgets and doodle-style graphs", imageUrl: "https://themes.uiprompt.art/sketchy-dashboard/sketchy-dashboard.png", category: "dashboard", uiStyle: "sketch", prompt: "Design A dashboard interface with a hand-drawn sketch style featuring widgets, charts, and statistics panels that appear manually illustrated, similar to Dribble's sketch UI designs but more functional. Use notebook paper or light parchment textures for backgrounds and a muted color palette (soft blues, light grays, gentle yellows) with vibrant accent colors for important metrics and call-to-action elements. Include subtle animations where elements wobble slightly or appear to be drawn in real-time when loaded (like Framer's drawing animations), and create hover effects that mimic highlighting with markers or colored pencils. Design navigation elements to look like hand-drawn tabs or bookmarks, statistics widgets with sketchy border frames, and graphs with pencil-line styling inspired by FigJam's playful interface elements. Ensure numeric displays use a casual handwriting typography while maintaining readability. Arrange content in a card-based layout with intentional alignment irregularities to enhance the hand-drawn feel, while maintaining a clear information hierarchy like Notion dashboards. The overall experience should evoke a sense of creative playfulness while delivering professional data visualization functionality, making complex metrics feel approachable and engaging for users who might otherwise find data intimidating.", prompts: { en: "Design A dashboard interface with a hand-drawn sketch style featuring widgets, charts, and statistics panels that appear manually illustrated, similar to Dribble's sketch UI designs but more functional. Use notebook paper or light parchment textures for backgrounds and a muted color palette (soft blues, light grays, gentle yellows) with vibrant accent colors for important metrics and call-to-action elements. Include subtle animations where elements wobble slightly or appear to be drawn in real-time when loaded (like Framer's drawing animations), and create hover effects that mimic highlighting with markers or colored pencils. Design navigation elements to look like hand-drawn tabs or bookmarks, statistics widgets with sketchy border frames, and graphs with pencil-line styling inspired by FigJam's playful interface elements. Ensure numeric displays use a casual handwriting typography while maintaining readability. Arrange content in a card-based layout with intentional alignment irregularities to enhance the hand-drawn feel, while maintaining a clear information hierarchy like Notion dashboards. The overall experience should evoke a sense of creative playfulness while delivering professional data visualization functionality, making complex metrics feel approachable and engaging for users who might otherwise find data intimidating.", zh: "设计一个具有手绘素描风格的仪表盘界面,其中包含看起来像手工绘制的小部件、图表和统计面板,类似于Dribble的素描UI设计,但功能更加实用。使用笔记本纸或轻质羊皮纸纹理作为背景,采用柔和的色彩调色板(柔和的蓝色、浅灰色、温和的黄色),为重要的指标和号召性元素使用鲜明的强调色。包含微妙的动画效果,让元素在加载时轻微摇晃或看起来实时绘制(类似于Framer的绘制动画),并创建模仿用记号笔或彩色铅笔高亮的悬停效果。设计看起来像手绘标签或书签的导航元素,带有素描边框的统计小部件,以及受FigJam界面元素启发的铅笔线条风格图表。确保数字显示使用随意的手写排版,同时保持可读性。采用卡片式布局,故意设计对齐不规则性,以增强手绘感觉,同时像Notion仪表盘一样保持清晰的信息层次结构。整体体验应唤起创意和趣味感,同时提供专业的数据可视化功能,使复杂的指标对于可能对数据感到畏惧的用户来说变得平易近人且引人入胜。" }, relatedThemes: ["notebook-app", "creative-planner"], model: "Deepseek V3", techStack: ["Tailwind CSS", "Shadcn UI", "Chart.js", "Framer Motion"], previewUrl: "https://themes.uiprompt.art/sketchy-dashboard/index.html" }, { id: "creative-planner", title: "Creative Planner", description: "A colorful calendar and task planner with playful illustrative elements", imageUrl: "https://themes.uiprompt.art/creative-planner/creative-planner.png", category: "productivity", uiStyle: "sketch", prompt: "Design a creative planner interface with a hand-drawn sketch style featuring calendar views (inspired by Google Calendar's layout but with A twist), task lists, and goal trackers that look like they've been illustrated by hand. Use a soft, textured paper background with subtle grid patterns and a pastel color palette (mint greens, soft pinks, light lavenders, pale yellows) with selective bright accents for important dates and priority tasks. Implement playful animations where completed tasks are crossed out with an animated pencil stroke (similar to Todoist's completion animations but more illustrative), new items appear with a drawing animation, and calendar pages flip with a paper-turning effect. Design navigation elements as colorful tabbed dividers (like Trello's board tabs but hand-drawn), date selectors with hand-drawn calendar icons, task items with sketched checkbox circles, and status indicators as doodled stars or flags. Include decorative elements like hand-drawn arrows, small illustrations for categories, and sketched highlight effects around important items. Structure the interface with clearly defined zones for different planning horizons (day, week, month) with visual cues to help users understand their relationship, and ensure primary actions (add task, complete, reschedule) stand out with special illustrative treatments. The layout should feel like an open planner with clear sections while maintaining a cohesive, creative aesthetic that encourages engagement and personalization, creating an experience that makes productivity feel like a creative and enjoyable activity rather than a chore.", prompts: { en: "Design a creative planner interface with a hand-drawn sketch style featuring calendar views (inspired by Google Calendar's layout but with A twist), task lists, and goal trackers that look like they've been illustrated by hand. Use a soft, textured paper background with subtle grid patterns and a pastel color palette (mint greens, soft pinks, light lavenders, pale yellows) with selective bright accents for important dates and priority tasks. Implement playful animations where completed tasks are crossed out with an animated pencil stroke (similar to Todoist's completion animations but more illustrative), new items appear with a drawing animation, and calendar pages flip with a paper-turning effect. Design navigation elements as colorful tabbed dividers (like Trello's board tabs but hand-drawn), date selectors with hand-drawn calendar icons, task items with sketched checkbox circles, and status indicators as doodled stars or flags. Include decorative elements like hand-drawn arrows, small illustrations for categories, and sketched highlight effects around important items. Structure the interface with clearly defined zones for different planning horizons (day, week, month) with visual cues to help users understand their relationship, and ensure primary actions (add task, complete, reschedule) stand out with special illustrative treatments. The layout should feel like an open planner with clear sections while maintaining a cohesive, creative aesthetic that encourages engagement and personalization, creating an experience that makes productivity feel like a creative and enjoyable activity rather than a chore.", zh: "设计一个具有手绘素描风格的创意规划器界面,其特色是日历视图(灵感来自Google日历的布局,但有所创新)、任务列表和目标跟踪器,它们看起来像是手工绘制的。使用柔和的纹理纸质背景,带有微妙的网格图案和柔和的色彩调色板(薄荷绿、柔和的粉色、淡淡的薰衣草色、浅黄色),同时为重要日期和优先任务选择性地添加亮色重点。实现有趣的动画效果,如用动画铅笔划线完成任务(类似于Todoist的完成动画,但更具插图特色),新项目以绘制动画方式出现,日历页面以翻页效果翻转。将导航元素设计为彩色标签分隔符(类似于Trello的看板标签,但是手绘的),带有手绘日历图标的日期选择器,带有素描复选框圆圈的任务项目,以及作为涂鸦星星或旗帜的状态指示器。包括装饰元素,如手绘箭头、类别的小插图以及围绕重要项目的素描高亮效果。用清晰定义的区域构建界面,以适应不同的规划时段(日、周、月),通过视觉提示帮助用户理解它们之间的关系,并确保主要操作(添加任务、完成、重新安排)通过特殊的插图处理方式突出显示。布局应该感觉像一个打开的规划器,带有清晰的分区,同时保持一致的创意美学,鼓励参与和个性化,创造一种体验,使生产力感觉像是一项创意且愉快的活动,而不是一项繁重的任务。" }, relatedThemes: ["sketchy-dashboard", "notebook-app"], model: "Claude 3.7 Sonnet", techStack: ["Tailwind CSS", "FullCalendar", "Anime.js", "Radix UI"], previewUrl: "https://themes.uiprompt.art/creative-planner/index.html" }, { id: "doodle-portfolio", title: "Doodle Portfolio", description: "Portfolio website template with a sketch aesthetic and playful interactions", imageUrl: "https://themes.uiprompt.art/doodle-portfolio/doodle-portfolio.png", category: "portfolio", uiStyle: "google material design", prompt: "Design a portfolio website interface following Google Material Design principles while incorporating playful sketch elements. Use Material Design's elevation system with subtle shadows to create depth, and implement the standard 8dp grid system for consistent spacing. Follow Material's color system with a primary and secondary color palette, ensuring accessibility with proper contrast ratios. Include Material Design components like cards with rounded corners (8dp radius) for project showcases, floating action buttons for primary actions, and a top app bar with the standard elevation shadow. Implement Material motion principles for transitions and micro-interactions, using standard easing curves (0.4, 0.0, 0.2, 1) for natural movement. Design navigation using Material's bottom navigation bar or navigation drawer patterns, with clear iconography following Material Design guidelines. For the sketch aesthetic touches, add subtle hand-drawn decorative elements within the Material Design framework - like custom illustrated icons that follow Material's 24dp grid, or decorative backgrounds that respect Material's layering system. Use Material's typography scale (Roboto or the system default) for main text, while allowing custom hand-drawn elements for decorative headings or accents. The layout should follow Material Design's responsive grid system, maintaining proper hierarchy and spacing while incorporating playful illustrated elements in a way that enhances rather than conflicts with Material Design principles. Include Material's standard touch feedback ripples and state changes, ensuring all interactive elements follow Material's accessibility guidelines. The final result should feel like a professional Material Design implementation with thoughtful, playful sketch elements that add personality without compromising the established Material Design patterns and behaviors.", prompts: { en: "Design a portfolio website interface following Google Material Design principles while incorporating playful sketch elements. Use Material Design's elevation system with subtle shadows to create depth, and implement the standard 8dp grid system for consistent spacing. Follow Material's color system with a primary and secondary color palette, ensuring accessibility with proper contrast ratios. Include Material Design components like cards with rounded corners (8dp radius) for project showcases, floating action buttons for primary actions, and a top app bar with the standard elevation shadow. Implement Material motion principles for transitions and micro-interactions, using standard easing curves (0.4, 0.0, 0.2, 1) for natural movement. Design navigation using Material's bottom navigation bar or navigation drawer patterns, with clear iconography following Material Design guidelines. For the sketch aesthetic touches, add subtle hand-drawn decorative elements within the Material Design framework - like custom illustrated icons that follow Material's 24dp grid, or decorative backgrounds that respect Material's layering system. Use Material's typography scale (Roboto or the system default) for main text, while allowing custom hand-drawn elements for decorative headings or accents. The layout should follow Material Design's responsive grid system, maintaining proper hierarchy and spacing while incorporating playful illustrated elements in a way that enhances rather than conflicts with Material Design principles. Include Material's standard touch feedback ripples and state changes, ensuring all interactive elements follow Material's accessibility guidelines. The final result should feel like a professional Material Design implementation with thoughtful, playful sketch elements that add personality without compromising the established Material Design patterns and behaviors.", zh: "设计一个遵循谷歌质感设计原则的作品集网站界面,同时融入有趣的素描元素。使用质感设计的阴影系统营造深度感,并实施标准的8dp网格系统以保持一致的间距。遵循质感设计的颜色系统,采用主色和次色调色板,确保可访问性和适当的对比度。包含质感设计组件,如用于项目展示的圆角卡片(8dp半径)、用于主要操作的浮动操作按钮以及带有标准阴影的顶部应用栏。实现质感设计的动效原则,用于过渡和微交互,使用标准的缓动曲线(0.4, 0.0, 0.2, 1)以实现自然流畅的动画效果。使用质感设计的底部导航栏或导航抽屉模式设计导航,并遵循质感设计准则使用清晰的图标。对于素描美学元素,在质感设计框架内添加微妙的手绘装饰元素 - 如遵循质感设计24dp网格的自定义插图图标,或尊重质感设计分层系统的装饰背景。对于主要文本,使用质感设计的字体比例(Roboto或系统默认字体),同时允许为装饰性标题或强调部分使用自定义手绘元素。布局应遵循质感设计的响应式网格系统,保持适当的层次结构和间距,同时以增强而非冲突的方式整合有趣的插图元素。包含质感设计的标准触摸反馈涟漪效果和状态变化,确保所有交互元素都遵循质感设计的可访问性指南。最终结果应该感觉像是一个专业的质感设计实现,带有经过深思熟虑的、有趣的素描元素,这些元素为设计增添个性而不影响既定的质感设计模式和行为。" }, relatedThemes: ["artistic-blog", "doodle-commerce"], model: "Claude 3.7 Sonnet", techStack: ["Tailwind CSS", "Three.js", "GSAP", "Rough.js"], previewUrl: "https://themes.uiprompt.art/doodle-portfolio/index.html" }, { id: "doodle-commerce", title: "Doodle Commerce", description: "E-commerce template with A hand-drawn aesthetic", imageUrl: "https://themes.uiprompt.art/doodle-commerce/doodle-commerce.png", category: "e-commerce", uiStyle: "apple style", prompt: "Design an e-commerce interface following Apple's Human Interface Guidelines while incorporating playful sketch elements. Implement Apple's signature design principles of clarity, deference, and depth using frosted glass effects (SF Symbols backdrop blur) for navigation bars and overlays. Use Apple's SF Pro font family for typography, with large bold headlines and clean body text. Follow Apple's spacing and layout guidelines with generous whitespace and precise dynamic type scaling. Implement Apple's spring-based animation system for fluid transitions and micro-interactions, using natural deceleration curves. Design product cards with subtle shadows and rounded corners (SF rounded style), incorporating Apple's card-based design patterns for product showcases. Use Apple's standard system colors as a base palette, complemented by custom accent colors that maintain accessibility standards. Include Apple-style gesture interactions like smooth swipe transitions between product views and pull-to-refresh animations. For the playful elements, integrate hand-drawn accents and illustrations that complement Apple's minimal aesthetic - such as custom illustrated SF Symbols alternatives, or decorative backgrounds that respect Apple's layering system. Navigation should follow Apple's tab bar patterns with clean iconography, while search and filtering use Apple's search bar and sheet presentations. Shopping cart and checkout flows should use Apple's sheet and modal presentation styles with standard iOS/macOS form elements. The layout should adapt seamlessly between platforms using Apple's recommended responsive patterns, maintaining consistent information hierarchy. Include haptic feedback patterns for interactive elements on touch devices. The final design should feel like a premium Apple ecosystem app with thoughtfully integrated playful elements that enhance but don't overshadow Apple's refined, minimal aesthetic.", prompts: { en: "Design an e-commerce interface following Apple's Human Interface Guidelines while incorporating playful sketch elements. Implement Apple's signature design principles of clarity, deference, and depth using frosted glass effects (SF Symbols backdrop blur) for navigation bars and overlays. Use Apple's SF Pro font family for typography, with large bold headlines and clean body text. Follow Apple's spacing and layout guidelines with generous whitespace and precise dynamic type scaling. Implement Apple's spring-based animation system for fluid transitions and micro-interactions, using natural deceleration curves. Design product cards with subtle shadows and rounded corners (SF rounded style), incorporating Apple's card-based design patterns for product showcases. Use Apple's standard system colors as a base palette, complemented by custom accent colors that maintain accessibility standards. Include Apple-style gesture interactions like smooth swipe transitions between product views and pull-to-refresh animations. For the playful elements, integrate hand-drawn accents and illustrations that complement Apple's minimal aesthetic - such as custom illustrated SF Symbols alternatives, or decorative backgrounds that respect Apple's layering system. Navigation should follow Apple's tab bar patterns with clean iconography, while search and filtering use Apple's search bar and sheet presentations. Shopping cart and checkout flows should use Apple's sheet and modal presentation styles with standard iOS/macOS form elements. The layout should adapt seamlessly between platforms using Apple's recommended responsive patterns, maintaining consistent information hierarchy. Include haptic feedback patterns for interactive elements on touch devices. The final design should feel like a premium Apple ecosystem app with thoughtfully integrated playful elements that enhance but don't overshadow Apple's refined, minimal aesthetic.", zh: "设计一个遵循苹果人机界面指南的电子商务界面,同时融入有趣的素描元素。使用毛玻璃效果(SF Symbols背景模糊)实现苹果标志性的清晰、尊重和深度设计原则,用于导航栏和覆盖层。使用苹果的SF Pro字体系列进行排版,配以大胆的标题和简洁的正文文本。遵循苹果的间距和布局指南,提供宽敞的留白和精确的动态字体缩放。实现苹果基于弹簧的动画系统,用于流畅的过渡和微交互,使用自然的减速曲线。设计带有微妙阴影和圆角的产品卡片(SF圆角风格),融入苹果基于卡片的设计模式进行产品展示。使用苹果的标准系统颜色作为基础调色板,辅以符合可访问性标准的自定义强调色。包含苹果风格的手势交互,如产品视图之间的平滑滑动过渡和下拉刷新动画。对于趣味元素,整合与苹果极简美学相辅相成的手绘装饰和插图 - 例如自定义插图SF Symbols替代品,或符合苹果分层系统的装饰背景。导航应遵循苹果的标签栏模式,使用简洁的图标,而搜索和过滤功能则使用苹果的搜索栏和表单展示方式。购物车和结账流程应使用苹果的表单和模态展示风格,配以标准iOS/macOS表单元素。布局应使用苹果推荐的响应式模式在不同平台之间无缝适配,保持一致的信息层次结构。为触摸设备上的交互元素包含触觉反馈模式。最终设计应该感觉像一个高端苹果生态系统应用,其中经过深思熟虑地整合了有趣元素,这些元素增强但不会掩盖苹果精致、极简的美学。" }, relatedThemes: ["doodle-portfolio", "creative-planner"], model: "Claude 3.7 Sonnet", techStack: ["Tailwind CSS", "Shadcn UI", "React Hook Form", "Framer Motion"], previewUrl: "/themes/doodle-commerce/index.html" }, { id: "artistic-blog", title: "Artistic Blog", description: "Blog layout with artistic framing, hand-drawn elements and markers", imageUrl: "https://themes.uiprompt.art/artistic-blog/artistic-blog.png", category: "blog", uiStyle: "artistic", prompt: "Design a blog interface with an artistic, mixed-media style featuring post layouts, category sections, and comment areas that resemble a creative journal or scrapbook, drawing inspiration from Medium's clean reading experience but with an artistic overlay. Use textured backgrounds that mimic watercolor paper or canvas with subtle artistic mediums, and a sophisticated color palette inspired by artist materials (ink blacks, watercolor blues, pencil grays) with strategic color pops for featured content or calls-to-action. Implement subtle animations where page elements gently float in or reveal with a brush stroke effect (similar to Webflow's reveal animations but with artistic styling), and design hover states that resemble artistic highlighting or underlining. Create post containers that look like individually framed artworks with varied border styles (torn paper edges, paint strokes, sketch lines), navigation elements styled as artist's tabs or bookmarks (inspired by Notion's simple but effective sidebar), and category indicators that resemble color swatches or medium types. Design reading progress indicators as paintbrush strokes and include decorative elements like splatter effects, artistic doodles, and hand-drawn dividers between content sections. Structure content with a clear reading flow that maintains the artistic aesthetic without sacrificing readability, with special attention to typography that pairs artistic headings with highly readable body text (similar to Substack's balance of style and function). The layout should have intentional asymmetry and varied framing to create visual interest while maintaining a gallery-like reading experience, creating an immersive environment that makes the content feel like curated art pieces while keeping the reading experience smooth and engaging.", prompts: { en: "Design a blog interface with an artistic, mixed-media style featuring post layouts, category sections, and comment areas that resemble a creative journal or scrapbook, drawing inspiration from Medium's clean reading experience but with an artistic overlay. Use textured backgrounds that mimic watercolor paper or canvas with subtle artistic mediums, and a sophisticated color palette inspired by artist materials (ink blacks, watercolor blues, pencil grays) with strategic color pops for featured content or calls-to-action. Implement subtle animations where page elements gently float in or reveal with a brush stroke effect (similar to Webflow's reveal animations but with artistic styling), and design hover states that resemble artistic highlighting or underlining. Create post containers that look like individually framed artworks with varied border styles (torn paper edges, paint strokes, sketch lines), navigation elements styled as artist's tabs or bookmarks (inspired by Notion's simple but effective sidebar), and category indicators that resemble color swatches or medium types. Design reading progress indicators as paintbrush strokes and include decorative elements like splatter effects, artistic doodles, and hand-drawn dividers between content sections. Structure content with a clear reading flow that maintains the artistic aesthetic without sacrificing readability, with special attention to typography that pairs artistic headings with highly readable body text (similar to Substack's balance of style and function). The layout should have intentional asymmetry and varied framing to create visual interest while maintaining a gallery-like reading experience, creating an immersive environment that makes the content feel like curated art pieces while keeping the reading experience smooth and engaging.", zh: "设计一个具有艺术混合媒体风格的博客界面,其特色是帖子布局、类别部分和评论区域,类似于创意日记或剪贴簿,灵感来自Medium的简洁阅读体验,但增加了艺术覆盖层。使用模仿水彩纸或画布的纹理背景,搭配微妙的艺术媒介,以及受艺术材料启发的精致配色方案(墨水黑、水彩蓝、铅笔灰),并为特色内容或行动呼吁区域策略性地增加醒目色彩。实现微妙的动画效果,使页面元素轻柔地飘入或以笔刷效果展现(类似于Webflow的显示动画,但带有艺术风格),并设计类似艺术高亮或下划线的悬停状态。创建看起来像单独装裱的艺术品的帖子容器,带有各种边框样式(撕裂的纸张边缘、绘画笔触、素描线条),将导航元素设计为艺术家的标签或书签(灵感来自Notion简单但有效的侧边栏),以及类似色卡或媒介类型的类别指示器。将阅读进度指示器设计为画笔笔触,并包含装饰元素,如飞溅效果、艺术涂鸦和内容部分之间的手绘分隔线。结构化内容,创建清晰的阅读流程,保持艺术美学的同时不牺牲可读性,特别注重排版,将艺术标题与高可读性的正文文本配对(类似于Substack在风格和功能上的平衡)。布局应该有意的不对称和多样化的框架,创造视觉兴趣,同时保持类似画廊的阅读体验,创造一个沉浸式环境,使内容感觉像是精心策划的艺术品,同时保持阅读体验流畅而引人入胜。" }, relatedThemes: ["doodle-portfolio", "sketchbook-gallery"], model: "Claude 3.7 Sonnet", techStack: ["Tailwind CSS", "Next.js", "MDX", "Rough.js"], previewUrl: "https://themes.uiprompt.art/artistic-blog/index.html" }, { id: "arcade-gaming", title: "Arcade Gaming Hub", description: "Immersive gaming website with arcade-inspired UI and rich interactive elements", imageUrl: "https://themes.uiprompt.art/arcade-gaming/arcade-gaming.png", category: "gaming", uiStyle: "gamified", prompt: "Design a gaming website interface with an immersive arcade-inspired aesthetic featuring game collections, community sections, and news feeds that engage users through gamified interactions. Use a vibrant color palette dominated by deep blues and purples with electric neon accents (bright pink, electric blue, acid green) that emulate classic arcade lighting. Implement smooth parallax scrolling effects between content sections that create depth and dimension, with game elements that respond to user scroll position. Create responsive hover animations where interactive elements glow, pulse, or transform when users interact with them, providing immediate visual feedback similar to arcade machine buttons lighting up. Design navigation elements as game-inspired control panels with animated button states, content cards with game cabinet styling featuring subtle pixel art accents, and progress indicators that resemble game loading bars or health meters. Include gamified micro-interactions throughout the interface - achievement unlocks when reaching certain scroll depths, particle effects on button clicks, and subtle background animations that respond to user activity. Structure content in a way that guides users through a journey with levels or worlds representing different sections, maintaining clear wayfinding while embracing the playful gaming aesthetic. Design call-to-action elements as boss-level challenges or special power-ups, using game design principles to encourage user engagement. The layout should balance rich visual treatments with functional content organization, creating an experience that makes browsing feel like playing a game, with enough interaction points to keep users engaged without overwhelming the actual gaming content being showcased.", prompts: { en: "Design a gaming website interface with an immersive arcade-inspired aesthetic featuring game collections, community sections, and news feeds that engage users through gamified interactions. Use a vibrant color palette dominated by deep blues and purples with electric neon accents (bright pink, electric blue, acid green) that emulate classic arcade lighting. Implement smooth parallax scrolling effects between content sections that create depth and dimension, with game elements that respond to user scroll position. Create responsive hover animations where interactive elements glow, pulse, or transform when users interact with them, providing immediate visual feedback similar to arcade machine buttons lighting up. Design navigation elements as game-inspired control panels with animated button states, content cards with game cabinet styling featuring subtle pixel art accents, and progress indicators that resemble game loading bars or health meters. Include gamified micro-interactions throughout the interface - achievement unlocks when reaching certain scroll depths, particle effects on button clicks, and subtle background animations that respond to user activity. Structure content in a way that guides users through a journey with levels or worlds representing different sections, maintaining clear wayfinding while embracing the playful gaming aesthetic. Design call-to-action elements as boss-level challenges or special power-ups, using game design principles to encourage user engagement. The layout should balance rich visual treatments with functional content organization, creating an experience that makes browsing feel like playing a game, with enough interaction points to keep users engaged without overwhelming the actual gaming content being showcased.", zh: "设计一个具有沉浸式街机风格美学的游戏网站界面,其特色是游戏集合、社区板块和新闻推送,通过游戏化交互吸引用户。使用以深蓝色和紫色为主的鲜艳色彩调色板,配以电光霓虹色调(亮粉色、电光蓝、酸性绿)模仿经典街机灯光。在内容部分之间实现平滑的视差滚动效果,创造深度和维度感,游戏元素会根据用户滚动位置做出响应。创建响应式悬停动画,当用户与之互动时,交互元素会发光、脉动或变形,提供类似街机按钮亮起的即时视觉反馈。将导航元素设计为游戏风格的控制面板,具有动画按钮状态,内容卡片采用游戏机柜风格,具有微妙的像素艺术点缀,进度指示器则类似游戏加载条或生命值计量表。在整个界面中加入游戏化的微交互 - 滚动到特定深度时解锁成就,按钮点击时产生粒子效果,以及响应用户活动的微妙背景动画。以引导用户进行旅程的方式组织内容,用关卡或世界代表不同部分,在拥抱游戏化美学的同时保持清晰的导航。将行动召唤元素设计为类似终极BOSS挑战或特殊能力提升,使用游戏设计原则鼓励用户参与。布局应平衡丰富的视觉处理和功能性内容组织,创造一种浏览感觉像玩游戏的体验,有足够的交互点保持用户参与,同时不会喧宾夺主,淹没所展示的实际游戏内容。" }, relatedThemes: ["doodle-portfolio", "cyber-ai-edit"], model: "Claude 3.7 Sonnet", techStack: ["Tailwind CSS", "Three.js", "GSAP", "React Spring"], previewUrl: "https://themes.uiprompt.art/arcade-gaming/index.html", isPremium: !0 }, { id: "sketch-chat", title: "Sketch Chat", description: "Messaging interface with speech bubbles and hand-drawn elements", imageUrl: "https://themes.uiprompt.art/sketch-chat/sketch-chat.png", category: "social", uiStyle: "minimalist", prompt: "Design a messaging interface with a minimalist sketch-inspired aesthetic featuring conversation threads, message bubbles, and user interactions styled with clean hand-drawn elements, inspired by Slack's functional layout but with a subtle illustrative approach. Use subtle lined or dotted paper textures for backgrounds without overwhelming the content, and a restrained color palette focused on whites and light neutrals with distinct colors only for user identification, status indicators, and important actions. Create smooth animations where message bubbles appear with a quick drawing effect around their borders (similar to how WhatsApp messages appear but with a sketched reveal), typing indicators that mimic pencil dots being added sequentially, and subtle bounce effects for new messages. Design message containers as speech bubbles with slightly irregular, hand-drawn outlines, user avatars with sketch-style portrait frames or simple doodle representations (like how Discord uses avatars but with sketch styling), and status indicators using minimalist hand-drawn symbols (checkmarks, clocks, etc.). Include reactions as small sketch emoticons or simple drawn symbols, file attachments that look like paper clips or sketched documents, and input areas that resemble notebook lines with drawing-style send buttons. Structure the conversation flow with clear visual distinction between sent and received messages, and ensure that conversation threads maintain visual coherence even with multiple participants. The overall layout should maintain plenty of white space with clean organization of conversation threads, creating a messaging experience that feels personal and creative while remaining highly functional and easy to scan quickly, making digital communication feel more human and expressive without sacrificing efficiency.", prompts: { en: "Design a messaging interface with a minimalist sketch-inspired aesthetic featuring conversation threads, message bubbles, and user interactions styled with clean hand-drawn elements, inspired by Slack's functional layout but with a subtle illustrative approach. Use subtle lined or dotted paper textures for backgrounds without overwhelming the content, and a restrained color palette focused on whites and light neutrals with distinct colors only for user identification, status indicators, and important actions. Create smooth animations where message bubbles appear with a quick drawing effect around their borders (similar to how WhatsApp messages appear but with a sketched reveal), typing indicators that mimic pencil dots being added sequentially, and subtle bounce effects for new messages. Design message containers as speech bubbles with slightly irregular, hand-drawn outlines, user avatars with sketch-style portrait frames or simple doodle representations (like how Discord uses avatars but with sketch styling), and status indicators using minimalist hand-drawn symbols (checkmarks, clocks, etc.). Include reactions as small sketch emoticons or simple drawn symbols, file attachments that look like paper clips or sketched documents, and input areas that resemble notebook lines with drawing-style send buttons. Structure the conversation flow with clear visual distinction between sent and received messages, and ensure that conversation threads maintain visual coherence even with multiple participants. The overall layout should maintain plenty of white space with clean organization of conversation threads, creating a messaging experience that feels personal and creative while remaining highly functional and easy to scan quickly, making digital communication feel more human and expressive without sacrificing efficiency.", zh: "设计一个具有极简素描风格美学的消息界面,其特色是对话线程、消息气泡和用户交互,采用简洁的手绘元素设计,灵感来自Slack的功能布局,但使用了微妙的插图方法。使用细微的线条或点状纸张纹理作为背景,不会喧宾夺主,并采用克制的色彩方案,主要聚焦于白色和浅色中性调,只为用户识别、状态指示器和重要操作使用独特的颜色。创建流畅的动画效果,使消息气泡出现时带有边框周围的快速绘制效果(类似于WhatsApp消息出现方式,但具有素描式揭示),模仿铅笔点逐渐添加的输入指示器,以及新消息的微妙弹跳效果。将消息容器设计为带有略微不规则手绘轮廓的语音气泡,用户头像采用素描风格的肖像框或简单的涂鸦表示(类似于Discord使用头像但采用素描风格),状态指示器使用极简手绘符号(对勾、时钟等)。包含作为小型素描表情符号或简单绘制符号的反应功能,看起来像回形针或素描文档的文件附件,以及类似笔记本线条的输入区域,配以手绘风格的发送按钮。构建对话流程,使发送和接收的消息之间有明显的视觉区分,并确保即使有多个参与者,对话线程也保持视觉上的连贯性。整体布局应保持充足的留白,对话线程组织清晰,创造一种个性化和创意十足的消息体验,同时保持高度功能性和易于快速浏览的特点,使数字通信感觉更加人性化和富有表现力,而不牺牲效率。" }, relatedThemes: ["notebook-app", "creative-planner"], model: "Deepseek V3", techStack: ["Tailwind CSS", "Socket.io", "Rough.js", "Lottie"], previewUrl: "https://themes.uiprompt.art/sketch-chat/index.html" }, { id: "web3-landingpage", title: "Web3 Landingpage", description: "Landing page with Microsoft Fluent Design", imageUrl: "https://themes.uiprompt.art/web3-landingpage/web3-landingpage.png", category: "landing-page", uiStyle: "Microsoft Fluent Design", prompt: "Design a Web3-focused landing page following Microsoft Fluent Design principles featuring hero sections, feature showcases, testimonials, and call-to-action blocks. Use depth and layering with subtle shadow effects to create visual hierarchy and a sense of depth. Implement Fluent Design's signature acrylic material effects with translucent, frosted glass textures for navigation bars and content containers. Apply a modern color palette with vibrant accent colors against neutral backgrounds, following Microsoft's color system guidelines for accessibility. Include smooth, purposeful animations and transitions that respond to user interactions following Fluent's motion principles. Design navigation elements with consistent Fluent iconography and depth effects, buttons with subtle hover animations and depth changes, and feature highlights with Reveal highlight effects on interaction. Use Microsoft's Segoe UI font family with proper typographic hierarchy and generous spacing. Incorporate subtle parallax effects for hero elements and implement Fluent Design's responsive layout grid system that adapts seamlessly to different screen sizes. For Web3-specific elements, create clean visualizations of blockchain concepts, cryptocurrency features, or decentralized applications using Fluent Design's modern aesthetic. The overall layout should balance innovative technology presentation with clear marketing messaging, creating a contemporary landing page that effectively communicates Web3 value propositions while maintaining Microsoft's Fluent Design principles.", prompts: { en: "Design a Web3-focused landing page following Microsoft Fluent Design principles featuring hero sections, feature showcases, testimonials, and call-to-action blocks. Use depth and layering with subtle shadow effects to create visual hierarchy and a sense of depth. Implement Fluent Design's signature acrylic material effects with translucent, frosted glass textures for navigation bars and content containers. Apply a modern color palette with vibrant accent colors against neutral backgrounds, following Microsoft's color system guidelines for accessibility. Include smooth, purposeful animations and transitions that respond to user interactions following Fluent's motion principles. Design navigation elements with consistent Fluent iconography and depth effects, buttons with subtle hover animations and depth changes, and feature highlights with Reveal highlight effects on interaction. Use Microsoft's Segoe UI font family with proper typographic hierarchy and generous spacing. Incorporate subtle parallax effects for hero elements and implement Fluent Design's responsive layout grid system that adapts seamlessly to different screen sizes. For Web3-specific elements, create clean visualizations of blockchain concepts, cryptocurrency features, or decentralized applications using Fluent Design's modern aesthetic. The overall layout should balance innovative technology presentation with clear marketing messaging, creating a contemporary landing page that effectively communicates Web3 value propositions while maintaining Microsoft's Fluent Design principles.", zh: "设计一个专注于Web3的登陆页面,遵循微软流畅设计原则,其特色是引人注目的首屏区域、功能展示、用户推荐和号召性行动模块。使用深度和分层效果,配以微妙的阴影效果,创造视觉层次感和深度感。实现流畅设计标志性的亚克力材质效果,为导航栏和内容容器提供半透明、磨砂玻璃质感。应用现代色彩调色板,在中性背景上使用鲜明的强调色,遵循微软的色彩系统准则以确保可访问性。包含流畅、有目的性的动画和过渡效果,根据流畅设计的动效原则响应用户交互。设计导航元素时使用一致的流畅设计图标体系和深度效果,按钮带有微妙的悬停动画和深度变化,功能亮点在交互时具有显示高亮效果。使用微软的Segoe UI字体系列,配以适当的排版层次结构和宽敞的间距。为首屏元素融入微妙的视差效果,并实现流畅设计的响应式布局网格系统,能够无缝适应不同屏幕尺寸。对于Web3特定元素,使用流畅设计的现代美学创建区块链概念、加密货币功能或去中心化应用的清晰可视化展示。整体布局应平衡创新技术展示与清晰的营销信息,创造一个富有当代感的登陆页面,有效传达Web3价值主张,同时保持微软流畅设计原则。" }, relatedThemes: ["doodle-portfolio", "artistic-blog"], model: "Claude 3.7 Sonnet", techStack: ["Tailwind CSS", "GSAP", "React Spring", "Framer Motion"], previewUrl: "https://themes.uiprompt.art/web3-landingpage/index.html" }, { id: "cyber-ai-edit", title: "Cyberpunk AI Editor", description: "AI image editing landing page with Cyberpunk aesthetic", imageUrl: "https://themes.uiprompt.art/cyber-ai-edit/cyber-ai-edit.png", category: "landing-page", uiStyle: "Cyberpunk style", prompt: "Design an AI image editing platform landing page with a cyberpunk aesthetic featuring neon-illuminated hero sections, futuristic feature showcases, and high-tech call-to-action blocks. Use a dark color scheme dominated by deep blacks and rich blues with electric neon accents (hot pink, acid green, electric blue) that simulate the glow of futuristic technology. Implement dramatic lighting effects that mimic the neon-soaked urban environments of cyberpunk fiction, with gradients and glows that suggest advanced digital capabilities. Create glitch animations and digital distortion effects that trigger on hover or scroll, enhancing the high-tech, slightly unstable cyberpunk feel. Design UI components with sharp angular shapes, asymmetrical layouts, and exposed grid systems that evoke the aesthetic of cybernetic interfaces. Include technological elements like artificial circuit patterns, data visualization fragments, and digital noise textures as background and decorative elements. Incorporate retro-futuristic typography with distressed digital fonts for headings and clean, highly legible fonts for body text ensuring readability despite the complex visual environment. Include simulated holographic displays or wireframe illustrations to showcase AI image editing features and transformations, using 3D-style mockups with glitch effects. For the image editing tool previews, display before/after comparisons with cyberpunk-styled transformations (like adding neon effects, digital overlays, or futuristic urban backdrops). The overall layout should balance immersive cyberpunk aesthetics with clear marketing messaging about the AI image editing capabilities, creating a landing page that feels like it's offering technology from the future.", prompts: { en: "Design an AI image editing platform landing page with a cyberpunk aesthetic featuring neon-illuminated hero sections, futuristic feature showcases, and high-tech call-to-action blocks. Use a dark color scheme dominated by deep blacks and rich blues with electric neon accents (hot pink, acid green, electric blue) that simulate the glow of futuristic technology. Implement dramatic lighting effects that mimic the neon-soaked urban environments of cyberpunk fiction, with gradients and glows that suggest advanced digital capabilities. Create glitch animations and digital distortion effects that trigger on hover or scroll, enhancing the high-tech, slightly unstable cyberpunk feel. Design UI components with sharp angular shapes, asymmetrical layouts, and exposed grid systems that evoke the aesthetic of cybernetic interfaces. Include technological elements like artificial circuit patterns, data visualization fragments, and digital noise textures as background and decorative elements. Incorporate retro-futuristic typography with distressed digital fonts for headings and clean, highly legible fonts for body text ensuring readability despite the complex visual environment. Include simulated holographic displays or wireframe illustrations to showcase AI image editing features and transformations, using 3D-style mockups with glitch effects. For the image editing tool previews, display before/after comparisons with cyberpunk-styled transformations (like adding neon effects, digital overlays, or futuristic urban backdrops). The overall layout should balance immersive cyberpunk aesthetics with clear marketing messaging about the AI image editing capabilities, creating a landing page that feels like it's offering technology from the future.", zh: "设计一个具有赛博朋克美学的AI图像编辑平台登陆页面,其特色是霓虹照明的首屏区域、未来主义功能展示和高科技号召性行动模块。使用以深黑色和丰富蓝色为主的暗色调配色方案,配以电光霓虹色调(亮粉色、酸性绿、电光蓝),模拟未来科技的光芒。实现戏剧性照明效果,模仿赛博朋克小说中霓虹浸染的城市环境,使用渐变和辉光暗示先进的数字能力。创建在悬停或滚动时触发的故障动画和数字失真效果,增强高科技、略显不稳定的赛博朋克感。设计具有锐角形状、不对称布局和暴露网格系统的UI组件,唤起赛博界面的美学。包含技术元素,如人工电路图案、数据可视化片段和数字噪点纹理作为背景和装饰元素。融入复古未来主义排版,为标题使用做旧数字字体,为正文使用清晰、高可读性的字体,确保在复杂的视觉环境中保持可读性。包含模拟全息显示或线框插图,展示AI图像编辑功能和转换效果,使用带有故障效果的3D风格模型。对于图像编辑工具预览,显示带有赛博朋克风格转换的前后对比(如添加霓虹效果、数字覆盖或未来城市背景)。整体布局应平衡沉浸式赛博朋克美学与关于AI图像编辑能力的清晰营销信息,创造一个感觉像是提供来自未来技术的登陆页面。" }, relatedThemes: ["web3-landingpage", "doodle-portfolio"], model: "Claude 3.7 Sonnet", techStack: ["Tailwind CSS", "Three.js", "GSAP", "Pixi.js"], previewUrl: "https://themes.uiprompt.art/cyber-ai-edit/index.html", isPremium: !0 }, { id: "ghibli-ai-generator", title: "Ghibli AI Generator", description: "Whimsical AI image generator interface inspired by Studio Ghibli's dreamlike aesthetics", imageUrl: "https://themes.uiprompt.art/ghibli-ai-generator/ghibli-ai-generator.png", category: "Ai image generator", uiStyle: "ghibli style", prompt: "Design an AI image generator interface inspired by Studio Ghibli's artistic style featuring a creation workspace, gallery sections, and style controls that evoke the studio's dreamlike aesthetics. Use a soft, watercolor-inspired color palette dominated by pastoral greens, sky blues, and warm earthy tones reminiscent of Ghibli landscapes, with accent colors drawn from iconic Ghibli films (Totoro greens, Spirited Away reds, Howl's Moving Castle blues). Implement gentle animations that mimic hand-drawn movement - brushstrokes appearing, watercolor blooms expanding, clouds drifting - when generating images or navigating between sections. Create UI components with rounded, organic shapes that feel hand-crafted rather than digital, with slightly irregular borders that suggest traditional animation cels. Include textured backgrounds that resemble watercolor paper or traditional animation backgrounds, with subtle grain and occasional splatter effects. Design prompt input areas that look like artist's sketchbooks or scrolls, generator controls styled as traditional art tools or magical artifacts from Ghibli worlds, and loading animations that display whimsical spirits or soot sprites working to create the image. Showcase generated images in frames that resemble animation cels or painted frames, with gallery sections organized like a storyboard or artist's portfolio. Incorporate decorative elements inspired by Ghibli's iconic motifs - floating plants, tiny spirits, magical dust, or wind swirls - as accent graphics and transitions. Structure the workspace with a sense of wonder and fantasy, balancing the technical aspects of AI generation with the handcrafted, magical quality of Ghibli's animation. Use typography that balances readability with character, mixing clean sans-serif fonts with occasional handwriting-style headings. The overall experience should transport users into a Ghibli-inspired creative space that feels magical and artisanal rather than technological, where AI image generation becomes a journey of imagination and wonder similar to experiencing a Ghibli film.", prompts: { en: "Design an AI image generator interface inspired by Studio Ghibli's artistic style featuring a creation workspace, gallery sections, and style controls that evoke the studio's dreamlike aesthetics. Use a soft, watercolor-inspired color palette dominated by pastoral greens, sky blues, and warm earthy tones reminiscent of Ghibli landscapes, with accent colors drawn from iconic Ghibli films (Totoro greens, Spirited Away reds, Howl's Moving Castle blues). Implement gentle animations that mimic hand-drawn movement - brushstrokes appearing, watercolor blooms expanding, clouds drifting - when generating images or navigating between sections. Create UI components with rounded, organic shapes that feel hand-crafted rather than digital, with slightly irregular borders that suggest traditional animation cels. Include textured backgrounds that resemble watercolor paper or traditional animation backgrounds, with subtle grain and occasional splatter effects. Design prompt input areas that look like artist's sketchbooks or scrolls, generator controls styled as traditional art tools or magical artifacts from Ghibli worlds, and loading animations that display whimsical spirits or soot sprites working to create the image. Showcase generated images in frames that resemble animation cels or painted frames, with gallery sections organized like a storyboard or artist's portfolio. Incorporate decorative elements inspired by Ghibli's iconic motifs - floating plants, tiny spirits, magical dust, or wind swirls - as accent graphics and transitions. Structure the workspace with a sense of wonder and fantasy, balancing the technical aspects of AI generation with the handcrafted, magical quality of Ghibli's animation. Use typography that balances readability with character, mixing clean sans-serif fonts with occasional handwriting-style headings. The overall experience should transport users into a Ghibli-inspired creative space that feels magical and artisanal rather than technological, where AI image generation becomes a journey of imagination and wonder similar to experiencing a Ghibli film.", zh: "设计一个受吉卜力工作室艺术风格启发的AI图像生成器界面,其特色是创作工作区、画廊部分和风格控制,唤起工作室梦幻般的美学风格。使用柔和的水彩风格配色方案,以田园绿色、天空蓝和温暖的大地色调为主,让人联想到吉卜力的风景,并从标志性吉卜力电影中提取强调色(龙猫绿、千与千寻红、哈尔的移动城堡蓝)。在生成图像或在不同部分之间导航时,实现模仿手绘运动的柔和动画 - 笔触出现、水彩绽放、云朵飘动。创建具有圆润、有机形状的UI组件,感觉手工制作而非数字化,边框略微不规则,暗示传统动画赛璐珞。包含类似水彩纸或传统动画背景的纹理背景,带有微妙的颗粒和偶尔的飞溅效果。设计类似艺术家草图本或卷轴的提示输入区域,设计成传统艺术工具或吉卜力世界中的魔法神器的生成器控制,以及展示可爱精灵或煤灰精灵工作创建图像的加载动画。将生成的图像展示在类似动画赛璐珞或彩绘框架的框架中,将画廊部分组织得像故事板或艺术家作品集。融入受吉卜力标志性图案启发的装饰元素 - 漂浮的植物、小精灵、魔法尘埃或风旋 - 作为点缀图形和过渡效果。用充满奇迹和幻想的感觉构建工作区,平衡AI生成的技术方面与吉卜力动画手工制作的魔法质感。使用平衡可读性和特性的排版,混合干净的无衬线字体与偶尔的手写风格标题。整体体验应该将用户带入一个受吉卜力启发的创意空间,感觉魔幻而非技术化,在这里AI图像生成成为一段想象和奇迹的旅程,类似于体验吉卜力电影。" }, relatedThemes: ["eco-biophilic", "artistic-blog", "sketchbook-gallery"], model: "Claude 3.7 Sonnet", techStack: ["Tailwind CSS", "React", "Stable Diffusion", "Three.js", "Framer Motion"], previewUrl: "https://themes.uiprompt.art/ghibli-ai-generator/index.html" }, { id: "notebook-web-app", title: "Notebook App", description: "Digital notebook interface with realistic page textures and pen effects", imageUrl: "https://themes.uiprompt.art/notebook-web-app/notebook-web-app.png", category: "productivity", uiStyle: "skeuomorphic", prompt: "Design a digital notebook interface with a skeuomorphic approach featuring content sections that resemble real paper pages with ruled lines, margin markers, and subtle paper grain textures, similar to the original Apple Notes app but with more rich detail. Use a realistic color palette of whites and cream papers with blue or gray ruled lines, red margin indicators, and black/blue ink effects for text content. Create page-turning animations between sections that mimic real notebook behavior (like Flipboard's classic page turns), with subtle page bend physics and paper sounds. Design interactive elements that resemble physical notebook components – tabs as colored notebook dividers (like Evernote's notebook structure), bookmarks as actual ribbon markers, to-do lists with checkboxes that look hand-drawn, and attachments that appear pinned with paperclips or taped to the page. Include a subtle drop shadow that makes pages feel three-dimensional, and implement a handwriting-style cursor effect when users edit content similar to Notability. Structure the information hierarchy with clear visual distinction between notes, sections, and notebooks, with primary actions (create, edit, delete) represented as physical tools like pens and erasers. The layout should maintain a consistent notebook metaphor with proper margins, headers that look like labeled tabs, and an overall composition that balances authentic notebook aesthetics with digital usability, creating an immersive environment that encourages focused note-taking and organization.", prompts: { en: "Design a digital notebook interface with a skeuomorphic approach featuring content sections that resemble real paper pages with ruled lines, margin markers, and subtle paper grain textures, similar to the original Apple Notes app but with more rich detail. Use a realistic color palette of whites and cream papers with blue or gray ruled lines, red margin indicators, and black/blue ink effects for text content. Create page-turning animations between sections that mimic real notebook behavior (like Flipboard's classic page turns), with subtle page bend physics and paper sounds. Design interactive elements that resemble physical notebook components – tabs as colored notebook dividers (like Evernote's notebook structure), bookmarks as actual ribbon markers, to-do lists with checkboxes that look hand-drawn, and attachments that appear pinned with paperclips or taped to the page. Include a subtle drop shadow that makes pages feel three-dimensional, and implement a handwriting-style cursor effect when users edit content similar to Notability. Structure the information hierarchy with clear visual distinction between notes, sections, and notebooks, with primary actions (create, edit, delete) represented as physical tools like pens and erasers. The layout should maintain a consistent notebook metaphor with proper margins, headers that look like labeled tabs, and an overall composition that balances authentic notebook aesthetics with digital usability, creating an immersive environment that encourages focused note-taking and organization.", zh: "设计一个采用拟物化方法的数字笔记本界面,其内容部分像真实的纸张页面,带有横线、边距标记和微妙的纸张纹理,类似于原始的苹果备忘录应用,但细节更为丰富。使用真实的色彩调色板,如白色和奶油色纸张,蓝色或灰色横线,红色边距标记,以及黑色/蓝色墨水效果用于文本内容。创建在不同部分之间的翻页动画,模仿真实笔记本行为(如Flipboard的经典翻页),带有微妙的页面弯曲物理效果和纸张声音。设计类似实体笔记本组件的交互元素 - 如彩色笔记本分隔符作为标签(类似Evernote的笔记本结构)、实际的丝带标记作为书签、看起来手绘的待办事项复选框,以及看起来用回形针固定或贴在页面上的附件。包含微妙的阴影效果,使页面感觉立体,并在用户编辑内容时实现类似Notability的手写风格光标效果。结构化信息层次,在笔记、部分和笔记本之间有明显的视觉区分,主要操作(创建、编辑、删除)以钢笔和橡皮擦等物理工具表示。布局应保持一致的笔记本隐喻,有适当的页边距,看起来像标签的页眉,以及平衡真实笔记本美学和数字可用性的整体构图,创造一个鼓励专注记笔记和组织的沉浸式环境。" }, relatedThemes: ["sketchy-dashboard", "creative-planner"], model: "Claude 3.5 Sonnet", techStack: ["Tailwind CSS", "React DnD", "Framer Motion", "Paper.js"], previewUrl: "https://themes.uiprompt.art/notebook-web-app/index.html", isPremium: !0 }, { id: "eco-biophilic", title: "Eco Biophilic Hub", description: "Fresh, nature-inspired environmental website with calming biophilic design elements", imageUrl: "https://themes.uiprompt.art/eco-biophilic/eco-biophilic.png", category: "landing-page", uiStyle: "biophilic", prompt: "Design an environmental organization website with a biophilic design approach featuring nature-inspired sections, sustainability initiatives, and community engagement areas that foster a connection with the natural world. Use a fresh, lightweight color palette dominated by soft greens, earthy browns, and sky blues that evoke natural environments, with subtle botanical accent colors for highlights and focus areas. Implement gentle, organic animations that mimic natural movements - leaves swaying, water rippling, clouds drifting - activating when users scroll or interact with content. Create UI components with soft, rounded shapes inspired by organic forms, avoiding harsh angles and embracing the curved lines found in nature. Include subtle natural textures like fine wood grain, delicate leaf patterns, or gentle water ripples as background elements without overwhelming the content. Design navigation elements reminiscent of natural wayfinding - paths through gardens or stones across streams - with intuitive flow between content sections. Integrate natural imagery throughout with high-quality, serene photography of landscapes, plants, and sustainable practices, using image scaling and lazy loading for performance. Structure content in harmony with natural patterns, creating visual rhythm similar to how elements appear in nature - with intentional spacing, grouping, and proportion. Use typography that balances readability with organic character, selecting fonts with subtle natural inspirations rather than rigid geometrical shapes. Include interactive elements that respond like living systems - growing, adapting, and responding to user input in organic ways. The layout should breathe with appropriate whitespace, creating a sense of airiness and calm while effectively communicating environmental messages. Incorporate sustainable design practices like optimized images and efficient code, creating a site that not only promotes environmental values but embodies them through its performance and resource efficiency.", prompts: { en: "Design an environmental organization website with a biophilic design approach featuring nature-inspired sections, sustainability initiatives, and community engagement areas that foster a connection with the natural world. Use a fresh, lightweight color palette dominated by soft greens, earthy browns, and sky blues that evoke natural environments, with subtle botanical accent colors for highlights and focus areas. Implement gentle, organic animations that mimic natural movements - leaves swaying, water rippling, clouds drifting - activating when users scroll or interact with content. Create UI components with soft, rounded shapes inspired by organic forms, avoiding harsh angles and embracing the curved lines found in nature. Include subtle natural textures like fine wood grain, delicate leaf patterns, or gentle water ripples as background elements without overwhelming the content. Design navigation elements reminiscent of natural wayfinding - paths through gardens or stones across streams - with intuitive flow between content sections. Integrate natural imagery throughout with high-quality, serene photography of landscapes, plants, and sustainable practices, using image scaling and lazy loading for performance. Structure content in harmony with natural patterns, creating visual rhythm similar to how elements appear in nature - with intentional spacing, grouping, and proportion. Use typography that balances readability with organic character, selecting fonts with subtle natural inspirations rather than rigid geometrical shapes. Include interactive elements that respond like living systems - growing, adapting, and responding to user input in organic ways. The layout should breathe with appropriate whitespace, creating a sense of airiness and calm while effectively communicating environmental messages. Incorporate sustainable design practices like optimized images and efficient code, creating a site that not only promotes environmental values but embodies them through its performance and resource efficiency.", zh: "设计一个采用亲生物设计方法的环保组织网站,其特色是自然启发的部分、可持续发展倡议和社区参与区域,这些区域促进与自然世界的联系。使用清新、轻盈的色彩调色板,以柔和的绿色、土褐色和天蓝色为主,唤起自然环境的感觉,并使用微妙的植物强调色作为高光和焦点区域。实现温和、有机的动画效果,模仿自然运动 - 树叶摇曳、水波荡漾、云朵飘动 - 在用户滚动或与内容交互时激活。创建受有机形态启发的软圆形UI组件,避免锐利角度,拥抱自然界中的曲线。包含微妙的自然纹理,如精细木纹、精致叶纹或轻柔水波,作为背景元素,不会喧宾夺主。设计类似自然导向的导航元素 - 如穿过花园的小径或跨过溪流的石头 - 在内容部分之间实现直观流动。通过高质量、宁静的风景、植物和可持续实践摄影整合自然图像,使用图像缩放和延迟加载以提高性能。按照自然模式构建内容,创造类似自然界元素出现方式的视觉节奏 - 有意识的间距、分组和比例。使用平衡可读性和有机特性的排版,选择具有微妙自然灵感而非刚性几何形状的字体。包含像生命系统一样响应的交互元素 - 以有机方式生长、适应和响应用户输入。布局应该呼吸着适当的留白,创造一种轻盈和宁静的感觉,同时有效传达环保信息。融入可持续设计实践,如优化图像和高效代码,创建一个不仅宣传环保价值观,而且通过其性能和资源效率体现这些价值观的网站。" }, relatedThemes: ["artistic-blog", "sketchbook-gallery"], model: "Claude 3.7 Sonnet", techStack: ["Tailwind CSS", "Framer Motion", "React Spring", "Next.js"], previewUrl: "https://themes.uiprompt.art/eco-biophilic/index.html" }, { id: "brutalist-blog", title: "Brutalist Blog", description: "Raw, uncompromising blog design with bold typography and stark contrasts", imageUrl: "https://themes.uiprompt.art/brutalist-blog/brutalist-blog.png", category: "blog", uiStyle: "brutalist", prompt: "Design a blog interface with a brutalist web design approach featuring post layouts, category sections, and comment areas that embrace raw, unfiltered design principles. Use a stark, high-contrast color palette dominated by solid blacks, whites, and occasional primary colors, rejecting gradients and shadows in favor of flat, unadorned color blocks. Implement minimal animations that are functional rather than decorative, using direct state changes rather than smooth transitions to emphasize honesty in the digital medium. Create UI components that expose structural elements rather than hiding them - visible grids, borders that aren't rounded, and form elements that appear as their HTML defaults rather than styled versions. Include typography that challenges conventional hierarchy, using oversized headings with dramatic scale differences, monospaced fonts, and intentionally dramatic variations in weight and size. Design navigation that exposes its functionality plainly - text links rather than icons, visible scrollbars, and pagination controls that embrace their function over form. Use dramatic asymmetry and intentional misalignment in layouts to reject the grid conformity of typical designs, and embrace negative space as a powerful design element rather than something to be filled. Structure content with unconventional arrangements that still maintain readability, using exposed margins and gutters rather than subtle spacing. Incorporate raw media displays that reject typical containers - images and videos that break layout boundaries or cut against expected containment. The entire design should feel deliberately unpolished but thoughtfully constructed, creating a blog experience that values content authenticity and rejects decorative distraction, making the reading experience feel intellectually honest and directly connected to the content's substance rather than its presentation.", prompts: { en: "Design a blog interface with a brutalist web design approach featuring post layouts, category sections, and comment areas that embrace raw, unfiltered design principles. Use a stark, high-contrast color palette dominated by solid blacks, whites, and occasional primary colors, rejecting gradients and shadows in favor of flat, unadorned color blocks. Implement minimal animations that are functional rather than decorative, using direct state changes rather than smooth transitions to emphasize honesty in the digital medium. Create UI components that expose structural elements rather than hiding them - visible grids, borders that aren't rounded, and form elements that appear as their HTML defaults rather than styled versions. Include typography that challenges conventional hierarchy, using oversized headings with dramatic scale differences, monospaced fonts, and intentionally dramatic variations in weight and size. Design navigation that exposes its functionality plainly - text links rather than icons, visible scrollbars, and pagination controls that embrace their function over form. Use dramatic asymmetry and intentional misalignment in layouts to reject the grid conformity of typical designs, and embrace negative space as a powerful design element rather than something to be filled. Structure content with unconventional arrangements that still maintain readability, using exposed margins and gutters rather than subtle spacing. Incorporate raw media displays that reject typical containers - images and videos that break layout boundaries or cut against expected containment. The entire design should feel deliberately unpolished but thoughtfully constructed, creating a blog experience that values content authenticity and rejects decorative distraction, making the reading experience feel intellectually honest and directly connected to the content's substance rather than its presentation.", zh: "设计一个采用野蛮主义网页设计方法的博客界面,其特色是文章布局、分类部分和评论区域,这些元素都拥抱原始、未经过滤的设计原则。使用鲜明、高对比度的色彩调色板,以纯黑色、白色和偶尔的原色为主,拒绝渐变和阴影,而倾向于平面、朴素的色块。实现功能性而非装饰性的最小化动画,使用直接的状态变化而非平滑过渡,以强调数字媒介中的诚实性。创建暴露结构元素而非隐藏它们的UI组件 - 可见的网格、非圆角的边框,以及呈现为HTML默认样式而非经过样式化版本的表单元素。包含挑战传统层次结构的排版,使用超大标题,具有戏剧性的比例差异,等宽字体,以及有意识的戏剧性权重和大小变化。设计直白地展示其功能的导航 - 文本链接而非图标、可见的滚动条,以及拥抱功能胜于形式的分页控件。在布局中使用戏剧性的不对称和有意的错位排列,以拒绝典型设计的网格一致性,并将负空间视为强大的设计元素,而非需要填充的东西。结构化内容采用非常规排列,同时保持可读性,使用外露的页边距和装订线,而非微妙的间距。融入拒绝典型容器的原始媒体展示 - 图像和视频打破布局边界或切割预期的容纳空间。整个设计应该感觉刻意地未经润色但经过深思熟虑的构建,创造一种重视内容真实性并拒绝装饰性分心的博客体验,使阅读体验感觉理智诚实,并直接连接到内容的实质而非其呈现方式。" }, relatedThemes: ["cyber-ai-edit", "web3-landingpage", "artistic-blog"], model: "Claude 3.7 Sonnet", techStack: ["CSS Grid", "Vanilla JavaScript", "HTML5", "Markdown"], previewUrl: "https://themes.uiprompt.art/brutalist-blog/index.html" }, { id: "biophilic-login", title: "Biophilic Login", description: "Calming nature-inspired login screen with biophilic design elements", imageUrl: "https://themes.uiprompt.art/biophilic-login/biophilic-login.png", category: "authentication", uiStyle: "biophilic", prompt: "Design a biophilic login page interface that creates a sense of connection with nature, featuring organic shapes, natural textures, and living elements that evoke tranquility and well-being. Use a serene color palette inspired by natural environments - soft forest greens, gentle sky blues, earthy browns, and sunset oranges - to create a calm, welcoming atmosphere. Implement subtle animations that mimic natural movements - gentle leaf sway, cloud drift, or water ripple effects - as background elements and for feedback on user interactions. Design the login container with soft, organic forms rather than sharp geometric shapes, with edges that appear natural rather than perfectly straight, and incorporate subtle shadows that create natural depth. Include background elements that feature high-quality nature imagery, abstract representations of organic patterns (like leaf veins, water ripples, or wood grain), or subtle animated natural elements like gentle rainfall or dappled light effects. Create form elements that feel integrated with nature - input fields with borders inspired by organic forms, buttons that resemble natural elements like smooth stones or leaves, and focus states that bloom or grow rather than using standard highlights. Use typography that balances readability with natural character, selecting fonts with subtle organic qualities rather than harsh geometric forms. Design error and success states that use natural metaphors - perhaps a withering effect for errors and a blooming effect for success. Include subtle natural sound effects for interactions if appropriate for the context (like gentle rustling leaves for button hover or soft water sounds for form submission). The entire login experience should feel like a brief retreat into nature that reduces stress and provides a moment of calm before entering the digital space, creating a sense of biophilic restoration even in this brief interaction.", prompts: { en: "Design a biophilic login page interface that creates a sense of connection with nature, featuring organic shapes, natural textures, and living elements that evoke tranquility and well-being. Use a serene color palette inspired by natural environments - soft forest greens, gentle sky blues, earthy browns, and sunset oranges - to create a calm, welcoming atmosphere. Implement subtle animations that mimic natural movements - gentle leaf sway, cloud drift, or water ripple effects - as background elements and for feedback on user interactions. Design the login container with soft, organic forms rather than sharp geometric shapes, with edges that appear natural rather than perfectly straight, and incorporate subtle shadows that create natural depth. Include background elements that feature high-quality nature imagery, abstract representations of organic patterns (like leaf veins, water ripples, or wood grain), or subtle animated natural elements like gentle rainfall or dappled light effects. Create form elements that feel integrated with nature - input fields with borders inspired by organic forms, buttons that resemble natural elements like smooth stones or leaves, and focus states that bloom or grow rather than using standard highlights. Use typography that balances readability with natural character, selecting fonts with subtle organic qualities rather than harsh geometric forms. Design error and success states that use natural metaphors - perhaps a withering effect for errors and a blooming effect for success. Include subtle natural sound effects for interactions if appropriate for the context (like gentle rustling leaves for button hover or soft water sounds for form submission). The entire login experience should feel like a brief retreat into nature that reduces stress and provides a moment of calm before entering the digital space, creating a sense of biophilic restoration even in this brief interaction.", zh: "设计一个亲生物登录页面界面,创造与自然的连接感,具有有机形状、自然纹理和唤起宁静和幸福感的生命元素。使用受自然环境启发的宁静色彩调色板 - 柔和的森林绿、温和的天空蓝、泥土棕和日落橙 - 创造一种平静、欢迎的氛围。实现模仿自然运动的微妙动画 - 轻柔的叶子摇曳、云朵飘动或水波纹效果 - 作为背景元素和用户交互反馈。设计登录容器时采用柔软、有机的形式而非锐利的几何形状,边缘看起来自然而非完美直线,并融入创造自然深度的微妙阴影。包含呈现高质量自然图像的背景元素、有机模式的抽象表示(如叶脉、水波纹或木纹),或微妙的动画自然元素,如轻柔的降雨或斑驳的光影效果。创建感觉与自然融合的表单元素 - 边框灵感来自有机形态的输入字段、类似平滑石头或叶子等自然元素的按钮,以及绽放或生长而非使用标准高亮的焦点状态。使用平衡可读性和自然特性的排版,选择具有微妙有机质感而非刺硬几何形式的字体。设计使用自然隐喻的错误和成功状态 - 也许错误使用凋谢效果,成功使用绽放效果。如果情境适当,为交互包含微妙的自然音效(如按钮悬停时轻柔的树叶沙沙声或表单提交时柔和的水声)。整个登录体验应该感觉像是短暂地撤退到自然中,减轻压力,并在进入数字空间之前提供片刻宁静,即使在这种简短的交互中也创造亲生物恢复的感觉。" }, relatedThemes: ["eco-biophilic", "biophilic-mobile-todo", "notebook-web-app"], model: "Claude 3.7 Sonnet", techStack: ["React", "Tailwind CSS", "Framer Motion", "Howler.js"], previewUrl: "https://themes.uiprompt.art/biophilic-login/index.html" }, { id: "biophilic-mobile-todo", title: "Biophilic Mobile Todo", description: "Nature-inspired mobile to-do list application with calming aesthetic", imageUrl: "https://themes.uiprompt.art/biophilic-mobile-todo/biophilic-mobile-todo.png", category: "mobile", uiStyle: "biophilic", prompt: "Design a mobile to-do list application with a biophilic design approach featuring task lists, calendar views, and productivity tools inspired by natural elements and patterns. Use a soothing color palette derived from nature - forest greens, sky blues, earth tones, and soft neutrals - with subtle shifts in hue and saturation mimicking natural lighting conditions throughout the day. Implement gentle animations that mimic natural growth and movement - tasks being completed could mimic flowers blooming or leaves unfurling, list transitions could flow like water or drift like clouds, and loading states could pulse like gentle breathing. Design UI components with organic shapes rather than perfect geometry - containers with subtle irregularities in their borders, buttons with soft, rounded shapes reminiscent of river stones, and input fields framed by forms inspired by leaves or flower petals. Include texture and materials that evoke natural elements - subtle wood grain or leaf textures for backgrounds, paper-like textures for task cards, and droplet effects for interactive elements. Create task completion interactions that provide satisfying natural feedback - perhaps a sprouting plant that grows as tasks are completed, or a landscape that becomes more vibrant through productivity. Design calendar and date elements that connect to natural cycles - perhaps subtly changing seasonal imagery or colors that shift with time of day, creating a natural rhythm to planning. Use typography that balances clarity with organic character, selecting fonts with subtle natural inspirations. Incorporate nature-inspired sounds for interactions if appropriate - soft rustling for task completion or gentle water sounds for creating new items. Structure navigation with intuitive patterns found in nature - flowing pathways between sections and natural grouping of related elements. The entire application should feel like a calming natural space that reduces stress while organizing tasks, creating a biophilic environment that transforms productivity from a stressful activity into a more harmonious, natural process that enhances well-being while helping users stay organized.", prompts: { en: "Design a mobile to-do list application with a biophilic design approach featuring task lists, calendar views, and productivity tools inspired by natural elements and patterns. Use a soothing color palette derived from nature - forest greens, sky blues, earth tones, and soft neutrals - with subtle shifts in hue and saturation mimicking natural lighting conditions throughout the day. Implement gentle animations that mimic natural growth and movement - tasks being completed could mimic flowers blooming or leaves unfurling, list transitions could flow like water or drift like clouds, and loading states could pulse like gentle breathing. Design UI components with organic shapes rather than perfect geometry - containers with subtle irregularities in their borders, buttons with soft, rounded shapes reminiscent of river stones, and input fields framed by forms inspired by leaves or flower petals. Include texture and materials that evoke natural elements - subtle wood grain or leaf textures for backgrounds, paper-like textures for task cards, and droplet effects for interactive elements. Create task completion interactions that provide satisfying natural feedback - perhaps a sprouting plant that grows as tasks are completed, or a landscape that becomes more vibrant through productivity. Design calendar and date elements that connect to natural cycles - perhaps subtly changing seasonal imagery or colors that shift with time of day, creating a natural rhythm to planning. Use typography that balances clarity with organic character, selecting fonts with subtle natural inspirations. Incorporate nature-inspired sounds for interactions if appropriate - soft rustling for task completion or gentle water sounds for creating new items. Structure navigation with intuitive patterns found in nature - flowing pathways between sections and natural grouping of related elements. The entire application should feel like a calming natural space that reduces stress while organizing tasks, creating a biophilic environment that transforms productivity from a stressful activity into a more harmonious, natural process that enhances well-being while helping users stay organized.", zh: "设计一个采用亲生物设计方法的移动待办事项列表应用程序,其特色是受自然元素和模式启发的任务列表、日历视图和生产力工具。使用源自自然界的舒缓色彩调色板 - 森林绿、天空蓝、大地色调和柔和的中性色 - 并模仿全天自然光照条件的色调和饱和度微妙变化。实现模仿自然生长和运动的柔和动画 - 完成任务可以模仿花朵绽放或叶子展开,列表过渡可以像水流动或像云彩漂浮,而加载状态可以像轻柔的呼吸一样脉动。设计有机形状而非完美几何形的UI组件 - 边界略微不规则的容器,柔软圆润形状类似河石的按钮,以及由叶子或花瓣形状启发的输入字段框架。包含唤起自然元素的纹理和材质 - 背景采用微妙的木纹或叶纹,任务卡片采用类纸质感,交互元素采用水滴效果。创建提供满意自然反馈的任务完成交互 - 也许是随着任务完成而生长的萌芽植物,或者是通过生产力变得更加生机勃勃的景观。设计连接自然周期的日历和日期元素 - 也许是随着一天中时间变化而微妙变化的季节性图像或颜色,为计划创造自然节奏。使用平衡清晰度和有机特性的排版,选择具有微妙自然灵感的字体。在适当情况下为交互融入自然启发的声音 - 完成任务时的柔和沙沙声或创建新项目时的轻柔水声。以自然界中发现的直观模式构建导航 - 各部分之间的流动路径和相关元素的自然分组。整个应用程序应该感觉像是一个平静的自然空间,在组织任务的同时减轻压力,创造一个亲生物环境,将生产力从压力活动转变为更和谐、自然的过程,在帮助用户保持组织的同时增强福祉。" }, relatedThemes: ["eco-biophilic", "biophilic-login", "creative-planner"], model: "Claude 3.7 Sonnet", techStack: ["React Native", "Tailwind Native", "Reanimated", "React Native Sound"], previewUrl: "https://themes.uiprompt.art/biophilic-mobile-todo/index.html" }, { id: "glassmorphic-ai-news", title: "Glassmorphic AI News", description: "Modern AI news website landing page with elegant glassmorphism effects", imageUrl: "https://themes.uiprompt.art/glassmorphic-ai-news/glassmorphic-ai-news.png", category: "landing-page", uiStyle: "glassmorphism", prompt: "Design a sophisticated landing page for an AI news website using glassmorphism design principles. Create a futuristic yet elegant interface featuring frosted glass effects with subtle transparency, beautiful blur effects, and soft colorful backgrounds. The layout should include a prominent hero section showcasing the latest AI breakthrough, followed by news categories, trending topics, and a newsletter subscription section. Implement glass cards with subtle borders and shadows for news items, where each card contains a headline, short description, publication date, and relevant image. The navigation should be sleek with a semi-transparent glass effect that remains accessible while scrolling. Use a color palette of deep blues, purples, and teals with gradients that suggest technological advancement, complemented by vibrant accent colors for important interactive elements. Typography should be clean and modern, prioritizing readability while maintaining a tech-forward aesthetic. Incorporate subtle hover animations for cards and buttons that enhance the glass effect - perhaps slightly increasing transparency or glow. Design interactive elements like buttons and form fields with glass-like properties and soft, colorful glows on interaction. Include abstract, flowing background shapes or patterns that suggest data flows or neural networks, positioned subtly behind the glass elements to create depth. For mobile responsiveness, consider how the glass elements will adapt and stack while maintaining the elegant aesthetic. The overall impression should be of a cutting-edge digital publication that feels sophisticated, trustworthy, and immersive - using glassmorphism to create an interface that feels both futuristic and approachable for users seeking the latest in AI developments.", prompts: { en: "Design a sophisticated landing page for an AI news website using glassmorphism design principles. Create a futuristic yet elegant interface featuring frosted glass effects with subtle transparency, beautiful blur effects, and soft colorful backgrounds. The layout should include a prominent hero section showcasing the latest AI breakthrough, followed by news categories, trending topics, and a newsletter subscription section. Implement glass cards with subtle borders and shadows for news items, where each card contains a headline, short description, publication date, and relevant image. The navigation should be sleek with a semi-transparent glass effect that remains accessible while scrolling. Use a color palette of deep blues, purples, and teals with gradients that suggest technological advancement, complemented by vibrant accent colors for important interactive elements. Typography should be clean and modern, prioritizing readability while maintaining a tech-forward aesthetic. Incorporate subtle hover animations for cards and buttons that enhance the glass effect - perhaps slightly increasing transparency or glow. Design interactive elements like buttons and form fields with glass-like properties and soft, colorful glows on interaction. Include abstract, flowing background shapes or patterns that suggest data flows or neural networks, positioned subtly behind the glass elements to create depth. For mobile responsiveness, consider how the glass elements will adapt and stack while maintaining the elegant aesthetic. The overall impression should be of a cutting-edge digital publication that feels sophisticated, trustworthy, and immersive - using glassmorphism to create an interface that feels both futuristic and approachable for users seeking the latest in AI developments.", zh: "使用玻璃态设计原则为AI新闻网站设计一个精致的着陆页。创建一个既未来主义又优雅的界面,具有磨砂玻璃效果、微妙的透明度、美丽的模糊效果和柔和的彩色背景。布局应包括一个突出展示最新AI突破的主要英雄部分,随后是新闻类别、热门话题和通讯订阅部分。为新闻项目实现带有微妙边框和阴影的玻璃卡片,每张卡片包含标题、简短描述、发布日期和相关图片。导航应该是流畅的,具有半透明玻璃效果,在滚动时保持可访问性。使用深蓝色、紫色和青色的色彩调色板,搭配暗示技术进步的渐变,并由鲜艳的强调色补充重要的交互元素。排版应简洁现代,优先考虑可读性,同时保持面向科技的美学。为卡片和按钮融入微妙的悬停动画,增强玻璃效果 - 也许略微增加透明度或发光效果。设计具有玻璃般特性的交互元素,如按钮和表单字段,交互时带有柔和、彩色的光芒。包含抽象、流动的背景形状或模式,暗示数据流或神经网络,巧妙地置于玻璃元素后面以创造深度。对于移动响应性,考虑玻璃元素如何适应和堆叠,同时保持优雅的美学。整体印象应该是一个尖端的数字出版物,感觉精致、值得信赖和身临其境 - 使用玻璃态设计创建一个既未来主义又易于接近的界面,适合寻求AI最新发展的用户。" }, relatedThemes: ["digital-dashboard", "modern-banking", "notebook-web-app"], model: "Claude 3.7 Sonnet", techStack: ["React", "Tailwind CSS", "Framer Motion"], previewUrl: "https://themes.uiprompt.art/glassmorphic-ai-news/index.html", isPremium: !0 }, { id: "neumorphic-dashboard", title: "Neumorphic Dashboard", description: "Modern dashboard with soft, dimensional neumorphic elements", imageUrl: "https://themes.uiprompt.art/neumorphic-dashboard/neumorphic-dashboard.png", category: "dashboard", uiStyle: "neumorphism", prompt: "Design a dashboard interface with neumorphic design principles featuring elevated cards, statistics widgets, and navigation elements that appear softly extruded from the background. Use a subtle monochromatic color palette with light grays and gentle shadows to create soft 3D effects, maintaining a 45-degree light source consistency throughout. Implement delicate hover states where elements appear to slightly depress into the surface, with smooth transitions that enhance the dimensional effect. Create UI components with consistent rounded corners and dual shadows (light and dark) that simulate physical depth while maintaining a modern, clean aesthetic. Include subtle background textures that enhance the material simulation without overwhelming the neumorphic effect. Design interactive elements like buttons and toggles with clear pressed states that mimic physical interaction with a soft surface. Structure the layout with proper spacing to allow each element's shadows to be distinct and visible. The overall experience should feel modern and tactile while maintaining excellent readability and clear visual hierarchy.", prompts: { en: "Design a dashboard interface with neumorphic design principles featuring elevated cards, statistics widgets, and navigation elements that appear softly extruded from the background. Use a subtle monochromatic color palette with light grays and gentle shadows to create soft 3D effects, maintaining a 45-degree light source consistency throughout. Implement delicate hover states where elements appear to slightly depress into the surface, with smooth transitions that enhance the dimensional effect. Create UI components with consistent rounded corners and dual shadows (light and dark) that simulate physical depth while maintaining a modern, clean aesthetic. Include subtle background textures that enhance the material simulation without overwhelming the neumorphic effect. Design interactive elements like buttons and toggles with clear pressed states that mimic physical interaction with a soft surface. Structure the layout with proper spacing to allow each element's shadows to be distinct and visible. The overall experience should feel modern and tactile while maintaining excellent readability and clear visual hierarchy.", zh: "设计一个采用新拟物设计原则的仪表板界面,具有凸起的卡片、统计小部件和导航元素,它们看起来从背景中柔和地凸显出来。使用柔和的单色调色板,配以浅灰色和柔和的阴影创造柔和的3D效果,始终保持45度光源的一致性。实现精致的悬停状态,使元素看似轻微陷入表面,通过平滑过渡增强立体效果。创建具有一致圆角和双重阴影(明暗)的UI组件,在保持现代简洁美学的同时模拟物理深度。包含微妙的背景纹理,增强材质模拟而不喧宾夺主新拟物效果。设计交互元素如按钮和开关,具有清晰的按压状态,模拟与柔软表面的物理交互。通过适当的间距构建布局,使每个元素的阴影都清晰可见。整体体验应该感觉现代且具有触感,同时保持出色的可读性和清晰的视觉层次。" }, relatedThemes: ["digital-dashboard", "glassmorphic-ai-news"], model: "Claude 3.7 Sonnet", techStack: ["React", "Neumorphism.io", "Framer Motion", "Tailwind CSS"], previewUrl: "https://themes.uiprompt.art/neumorphic-dashboard/index.html", isPremium: !0 }, { id: "retro-computing", title: "Retro Computing", description: "Nostalgic interface inspired by vintage computing systems", imageUrl: "https://themes.uiprompt.art/retro-computing/retro-computing.png", category: "landing-page", uiStyle: "retro", prompt: "Design a vintage computing interface that evokes the aesthetic of early personal computers and operating systems, featuring terminal-style text displays, pixel-perfect icons, and retro-inspired controls. Use a classic color palette dominated by phosphor greens, amber, or IBM blues on dark backgrounds, with high contrast ratios typical of early monitors. Implement scan-line effects and subtle CRT screen curvature to enhance the vintage display feel. Create UI components that reference classic operating systems - windows with characteristic title bars, command-line interfaces with blinking cursors, and menu systems with pixel-perfect dropdown shadows. Include authentic period-appropriate details like bitmap fonts, dithered gradients, and classic iconography. Design interactive elements that provide authentic feedback - buttons that depress with a classic 'click' effect, toggles that flip with mechanical precision, and hover states that mimic early highlight systems. Structure content in a way that respects the technical limitations of the era while maintaining modern usability standards. The overall experience should feel like using a lovingly restored vintage computer system, creating nostalgia while remaining functional and engaging for modern users.", prompts: { en: "Design a vintage computing interface that evokes the aesthetic of early personal computers and operating systems, featuring terminal-style text displays, pixel-perfect icons, and retro-inspired controls. Use a classic color palette dominated by phosphor greens, amber, or IBM blues on dark backgrounds, with high contrast ratios typical of early monitors. Implement scan-line effects and subtle CRT screen curvature to enhance the vintage display feel. Create UI components that reference classic operating systems - windows with characteristic title bars, command-line interfaces with blinking cursors, and menu systems with pixel-perfect dropdown shadows. Include authentic period-appropriate details like bitmap fonts, dithered gradients, and classic iconography. Design interactive elements that provide authentic feedback - buttons that depress with a classic 'click' effect, toggles that flip with mechanical precision, and hover states that mimic early highlight systems. Structure content in a way that respects the technical limitations of the era while maintaining modern usability standards. The overall experience should feel like using a lovingly restored vintage computer system, creating nostalgia while remaining functional and engaging for modern users.", zh: "设计一个唤起早期个人电脑和操作系统美学的复古计算机界面,具有终端风格的文本显示、像素完美的图标和复古风格的控件。使用经典的色彩调色板,以荧光绿、琥珀色或IBM蓝为主,配以深色背景,具有早期显示器典型的高对比度。实现扫描线效果和微妙的CRT屏幕曲率,增强复古显示感。创建参考经典操作系统的UI组件 - 带有特色标题栏的窗口、带有闪烁光标的命令行界面,以及带有像素完美下拉阴影的菜单系统。包含符合时代特征的细节,如点阵字体、抖动渐变和经典图标。设计提供真实反馈的交互元素 - 具有经典'点击'效果的按钮、以机械精度翻转的开关,以及模仿早期高亮系统的悬停状态。以尊重那个时代技术限制的方式构建内容,同时保持现代可用性标准。整体体验应该感觉像使用精心修复的复古计算机系统,在保持功能性和吸引现代用户的同时创造怀旧感。" }, relatedThemes: ["brutalist-blog", "arcade-gaming"], model: "Claude 3.7 Sonnet", techStack: ["Vanilla JS", "CSS Grid", "Web Components"], previewUrl: "https://themes.uiprompt.art/retro-computing/index.html", isPremium: !0 }, { id: "memphis-social", title: "Memphis Social", description: "Vibrant social media interface with bold Memphis design patterns", imageUrl: "https://themes.uiprompt.art/memphis-social/memphis-social.png", category: "social", uiStyle: "memphis", prompt: "Design a social media interface with Memphis Design principles featuring bold geometric patterns, playful compositions, and energetic layouts that challenge conventional grid systems. Use a vibrant color palette with characteristic 1980s Memphis colors - bright yellows, electric blues, hot pinks, and bold patterns with black and white accents. Implement playful animations where geometric shapes float and rotate subtly in the background, with interactive elements that respond with Memphis-style micro-animations. Create UI components that incorporate signature Memphis design elements - zigzag patterns, squiggly lines, bold dots, and asymmetrical shapes - while maintaining clear content hierarchy and readability. Include characteristic Memphis textures like confetti patterns, abstract squiggles, and geometric grids as decorative elements. Design navigation and interactive elements with bold, geometric shapes that reference the Memphis Group's furniture and objects. Structure the content layout with intentionally asymmetrical arrangements that still maintain usability and clear visual flow. The overall experience should feel energetic and rebellious while remaining functional, creating a contemporary social platform that celebrates the Memphis Design movement's spirit of breaking conventional design rules.", prompts: { en: "Design a social media interface with Memphis Design principles featuring bold geometric patterns, playful compositions, and energetic layouts that challenge conventional grid systems. Use a vibrant color palette with characteristic 1980s Memphis colors - bright yellows, electric blues, hot pinks, and bold patterns with black and white accents. Implement playful animations where geometric shapes float and rotate subtly in the background, with interactive elements that respond with Memphis-style micro-animations. Create UI components that incorporate signature Memphis design elements - zigzag patterns, squiggly lines, bold dots, and asymmetrical shapes - while maintaining clear content hierarchy and readability. Include characteristic Memphis textures like confetti patterns, abstract squiggles, and geometric grids as decorative elements. Design navigation and interactive elements with bold, geometric shapes that reference the Memphis Group's furniture and objects. Structure the content layout with intentionally asymmetrical arrangements that still maintain usability and clear visual flow. The overall experience should feel energetic and rebellious while remaining functional, creating a contemporary social platform that celebrates the Memphis Design movement's spirit of breaking conventional design rules.", zh: "设计一个采用孟菲斯设计原则的社交媒体界面,具有大胆的几何图案、趣味性构图和充满活力的布局,挑战传统网格系统。使用充满活力的色彩调色板,采用1980年代孟菲斯特色颜色 - 明亮的黄色、电光蓝、亮粉色,以及带有黑白点缀的大胆图案。实现趣味性动画,让几何形状在背景中微妙地漂浮和旋转,交互元素以孟菲斯风格的微动画响应。创建融入孟菲斯设计标志性元素的UI组件 - 锯齿图案、曲线、大胆的圆点和不对称形状 - 同时保持清晰的内容层次和可读性。包含孟菲斯特色纹理,如五彩纸屑图案、抽象曲线和几何网格作为装饰元素。设计采用大胆几何形状的导航和交互元素,参考孟菲斯集团的家具和物品。以刻意的不对称排列构建内容布局,同时保持可用性和清晰的视觉流动。整体体验应该感觉充满活力和叛逆,同时保持功能性,创造一个庆祝孟菲斯设计运动打破传统设计规则精神的现代社交平台。" }, relatedThemes: ["arcade-gaming", "cyber-ai-edit"], model: "Claude 3.7 Sonnet", techStack: ["React", "Tailwind CSS", "GSAP", "Three.js"], previewUrl: "https://themes.uiprompt.art/memphis-social/index.html", isPremium: !0 }, { id: "dark-mode-pro", title: "Dark Mode Pro", description: "Professional dark theme optimized for extended use and OLED displays", imageUrl: "https://themes.uiprompt.art/dark-mode-pro/dark-mode-pro.png", category: "productivity", uiStyle: "dark-mode", prompt: "Design a sophisticated dark mode interface optimized for OLED displays and extended use, featuring carefully crafted contrast levels and subtle color accents that reduce eye strain while maintaining visual hierarchy. Use a refined dark color palette with true blacks for OLED efficiency, complemented by carefully selected dark grays and subtle, non-jarring accent colors. Implement smooth transitions between different darkness levels, with interactive elements that provide clear visual feedback without harsh brightness changes. Create UI components with subtle depth through strategic use of darker and lighter elements, avoiding pure white text and using softer alternatives for better readability. Include thoughtful dark mode considerations like reduced contrast for secondary information, subtle shadows that work in dark contexts, and careful handling of image assets to prevent harsh visual transitions. Design state changes and hover effects that feel natural in dark environments, with special attention to maintaining readability and reducing eye strain during extended use. Structure information with clear visual hierarchy while maintaining the calming benefits of dark mode. The overall experience should feel professional and refined while providing the benefits of dark mode - reduced eye strain, better battery life on OLED displays, and elegant aesthetics suitable for both day and night use.", prompts: { en: "Design a sophisticated dark mode interface optimized for OLED displays and extended use, featuring carefully crafted contrast levels and subtle color accents that reduce eye strain while maintaining visual hierarchy. Use a refined dark color palette with true blacks for OLED efficiency, complemented by carefully selected dark grays and subtle, non-jarring accent colors. Implement smooth transitions between different darkness levels, with interactive elements that provide clear visual feedback without harsh brightness changes. Create UI components with subtle depth through strategic use of darker and lighter elements, avoiding pure white text and using softer alternatives for better readability. Include thoughtful dark mode considerations like reduced contrast for secondary information, subtle shadows that work in dark contexts, and careful handling of image assets to prevent harsh visual transitions. Design state changes and hover effects that feel natural in dark environments, with special attention to maintaining readability and reducing eye strain during extended use. Structure information with clear visual hierarchy while maintaining the calming benefits of dark mode. The overall experience should feel professional and refined while providing the benefits of dark mode - reduced eye strain, better battery life on OLED displays, and elegant aesthetics suitable for both day and night use.", zh: "设计一个为OLED显示屏和长期使用优化的精致暗色模式界面,具有精心制作的对比度和微妙的色彩重点,在保持视觉层次的同时减少眼疲劳。使用精致的暗色调色板,采用真实黑色以提高OLED效率,配以精心选择的深灰色和微妙、不刺眼的强调色。实现不同暗度级别之间的平滑过渡,交互元素提供清晰的视觉反馈,避免刺眼的亮度变化。通过战略性使用深色和浅色元素创建具有微妙深度的UI组件,避免纯白文本,使用更柔和的替代方案以提高可读性。包含周到的暗色模式考虑,如降低次要信息的对比度、在暗色环境中工作的微妙阴影,以及谨慎处理图像资源以防止刺眼的视觉过渡。设计在暗色环境中感觉自然的状态变化和悬停效果,特别注意在长期使用过程中保持可读性和减少眼疲劳。在保持暗色模式的舒缓效果的同时,用清晰的视觉层次构建信息。整体体验应该感觉专业和精致,同时提供暗色模式的好处 - 减少眼疲劳、提高OLED显示屏的电池寿命,以及适合日夜使用的优雅美学。" }, relatedThemes: ["cyber-ai-edit", "brutalist-blog"], model: "Claude 3.7 Sonnet", techStack: ["React", "Chakra UI", "Framer Motion"], previewUrl: "https://themes.uiprompt.art/dark-mode-pro/index.html" }, { id: "clay-ai-landing", title: "Clay AI Assistant", description: "Playful and approachable AI tool landing page with clay-like 3D elements", imageUrl: "https://themes.uiprompt.art/clay-ai-landing/clay-ai-landing.png", category: "landing-page", uiStyle: "claymorphism", prompt: "Design a landing page for an AI assistant tool featuring clay-like 3D elements that make complex technology feel approachable and friendly. Use a soft, playful color palette with pastel backgrounds and clay-textured UI elements that appear squeezable and tactile. Implement gentle animations where clay elements smoothly morph and squish on interaction, suggesting the malleability of putty or modeling clay. Create UI components that showcase AI features through clay-style illustrations - chatbot interfaces framed in squeezable bubbles, feature cards that look like pressed clay tablets, and call-to-action buttons that appear as satisfyingly pressable clay buttons. Include clay-textured backgrounds with subtle depth and shadows that enhance the dimensional feel without overwhelming the content. Design interactive elements with playful squish animations on hover and click, making the interface feel physically responsive. Structure the content to tell the AI tool's story through a series of clay-sculpted scenes, with features and benefits presented as interconnected clay dioramas. The overall experience should make advanced AI technology feel accessible and fun, using the clay aesthetic to create a sense of hands-on interaction with the product.", prompts: { en: "Design a landing page for an AI assistant tool featuring clay-like 3D elements that make complex technology feel approachable and friendly. Use a soft, playful color palette with pastel backgrounds and clay-textured UI elements that appear squeezable and tactile. Implement gentle animations where clay elements smoothly morph and squish on interaction, suggesting the malleability of putty or modeling clay. Create UI components that showcase AI features through clay-style illustrations - chatbot interfaces framed in squeezable bubbles, feature cards that look like pressed clay tablets, and call-to-action buttons that appear as satisfyingly pressable clay buttons. Include clay-textured backgrounds with subtle depth and shadows that enhance the dimensional feel without overwhelming the content. Design interactive elements with playful squish animations on hover and click, making the interface feel physically responsive. Structure the content to tell the AI tool's story through a series of clay-sculpted scenes, with features and benefits presented as interconnected clay dioramas. The overall experience should make advanced AI technology feel accessible and fun, using the clay aesthetic to create a sense of hands-on interaction with the product.", zh: "设计一个具有类粘土3D元素的AI助手工具落地页,让复杂的技术感觉平易近人且友好。使用柔和、趣味的色彩调色板,搭配粉彩背景和看起来可挤压、具有触感的粘土质地UI元素。实现温和的动画效果,粘土元素在交互时平滑变形和挤压,暗示像橡皮泥或模型粘土的可塑性。创建通过粘土风格插图展示AI功能的UI组件 - 装在可挤压气泡中的聊天机器人界面、看起来像压制粘土板的功能卡片,以及看起来令人满意可按压的粘土按钮。包含具有微妙深度和阴影的粘土质地背景,增强立体感而不喧宾夺主。设计具有趣味性挤压动画的交互元素,在悬停和点击时让界面感觉物理响应。通过一系列粘土雕刻场景来讲述AI工具的故事,将功能和优势呈现为相互关联的粘土场景。整体体验应该让先进的AI技术感觉易于接近和有趣,使用粘土美学创造与产品的动手交互感。" }, relatedThemes: ["neumorphic-dashboard", "sketchbook-gallery"], model: "Claude 3.7 Sonnet", techStack: ["React", "Three.js", "GSAP", "Tailwind CSS"], previewUrl: "https://themes.uiprompt.art/clay-ai-landing/index.html" }, { id: "swiss-news-portal", title: "Swiss News Grid", description: "Modern news portal with Swiss design principles for clear information hierarchy", imageUrl: "https://themes.uiprompt.art/swiss-news-portal/swiss-news-portal.png", category: "news", uiStyle: "swiss-international", prompt: "Design a digital news portal interface using Swiss International Style principles, emphasizing clear typography, grid-based layouts, and objective presentation of information. Use a minimalist color palette focused on black, white, and one accent color for highlighting breaking news or important categories. Implement subtle transitions that respect the grid system, with content blocks that slide and reorganize while maintaining mathematical precision. Create UI components that prioritize legibility and information hierarchy - article cards with clear typographic scale, navigation systems using sans-serif typefaces, and category indicators that use size and weight for emphasis rather than decorative elements. Include whitespace as an active design element, using generous margins and spacing to create clear content sections and improve readability. Design interactive elements that maintain Swiss design principles - hover states that reveal additional information through subtle typography changes rather than flashy effects, and buttons that emphasize function through form. Structure the news content using a modular grid system that adapts to different screen sizes while maintaining proportional relationships. The overall experience should feel authoritative and trustworthy, using Swiss design principles to present news content in a clear, organized, and objective manner that helps readers focus on the information without unnecessary decoration.", prompts: { en: "Design a digital news portal interface using Swiss International Style principles, emphasizing clear typography, grid-based layouts, and objective presentation of information. Use a minimalist color palette focused on black, white, and one accent color for highlighting breaking news or important categories. Implement subtle transitions that respect the grid system, with content blocks that slide and reorganize while maintaining mathematical precision. Create UI components that prioritize legibility and information hierarchy - article cards with clear typographic scale, navigation systems using sans-serif typefaces, and category indicators that use size and weight for emphasis rather than decorative elements. Include whitespace as an active design element, using generous margins and spacing to create clear content sections and improve readability. Design interactive elements that maintain Swiss design principles - hover states that reveal additional information through subtle typography changes rather than flashy effects, and buttons that emphasize function through form. Structure the news content using a modular grid system that adapts to different screen sizes while maintaining proportional relationships. The overall experience should feel authoritative and trustworthy, using Swiss design principles to present news content in a clear, organized, and objective manner that helps readers focus on the information without unnecessary decoration.", zh: "使用瑞士国际风格原则设计数字新闻门户界面,强调清晰的排版、基于网格的布局和客观的信息呈现。使用以黑白为主、一个强调色用于突出突发新闻或重要类别的极简配色方案。实现尊重网格系统的微妙过渡,内容块在保持数学精确性的同时滑动和重组。创建优先考虑可读性和信息层次的UI组件 - 具有清晰字体比例的文章卡片、使用无衬线字体的导航系统,以及使用大小和粗细而非装饰元素来强调的类别指示器。将留白作为主动设计元素,使用慷慨的边距和间距创建清晰的内容区块并提高可读性。设计保持瑞士设计原则的交互元素 - 通过微妙的字体变化而非华丽效果显示额外信息的悬停状态,以及通过形式强调功能的按钮。使用模块化网格系统构建新闻内容,在适应不同屏幕尺寸的同时保持比例关系。整体体验应该感觉权威和可信,使用瑞士设计原则以清晰、有组织和客观的方式呈现新闻内容,帮助读者专注于信息而不受不必要的装饰干扰。" }, relatedThemes: ["minimalist-blog", "dark-mode-pro"], model: "Claude 3.7 Sonnet", techStack: ["Next.js", "CSS Grid", "Typography.js", "Framer Motion"], previewUrl: "https://themes.uiprompt.art/swiss-news-portal/index.html", isPremium: !0 }, { id: "organic-notes", title: "Organic Notes", description: "Natural and fluid note-taking interface with organic design elements", imageUrl: "https://themes.uiprompt.art/organic-notes/organic-notes.png", category: "productivity", uiStyle: "organic", prompt: "Design a note-taking application interface with organic design principles, featuring fluid layouts and natural shapes that make digital note-taking feel more personal and intuitive. Use a nature-inspired color palette with soft, earthy tones and gentle gradients that mimic natural light and shadow. Implement organic animations where elements grow, flow, and transform naturally - notes unfold like leaves, lists grow like vines, and transitions feel as smooth as water ripples. Create UI components that incorporate natural forms - note cards with slightly irregular edges like torn paper, organically shaped containers for different note types, and navigation elements that follow natural curves. Include subtle textures inspired by natural materials like cotton paper or wood grain, adding depth without compromising readability. Design interactive elements that respond with natural motion - buttons that ripple like water drops, hover states that create gentle growth effects, and gestures that feel like interacting with physical materials. Structure the note organization system using organic clustering and natural grouping patterns, similar to how elements arrange themselves in nature. The overall experience should feel personal and calming, using organic design to create a digital note-taking environment that connects with users' natural writing and thinking processes.", prompts: { en: "Design a note-taking application interface with organic design principles, featuring fluid layouts and natural shapes that make digital note-taking feel more personal and intuitive. Use a nature-inspired color palette with soft, earthy tones and gentle gradients that mimic natural light and shadow. Implement organic animations where elements grow, flow, and transform naturally - notes unfold like leaves, lists grow like vines, and transitions feel as smooth as water ripples. Create UI components that incorporate natural forms - note cards with slightly irregular edges like torn paper, organically shaped containers for different note types, and navigation elements that follow natural curves. Include subtle textures inspired by natural materials like cotton paper or wood grain, adding depth without compromising readability. Design interactive elements that respond with natural motion - buttons that ripple like water drops, hover states that create gentle growth effects, and gestures that feel like interacting with physical materials. Structure the note organization system using organic clustering and natural grouping patterns, similar to how elements arrange themselves in nature. The overall experience should feel personal and calming, using organic design to create a digital note-taking environment that connects with users' natural writing and thinking processes.", zh: "使用有机设计原则设计笔记应用程序界面,具有流畅的布局和自然的形状,使数字笔记感觉更个性化和直观。使用自然启发的色彩调色板,采用柔和的大地色调和温和的渐变,模仿自然光影。实现有机动画,元素自然地生长、流动和转换 - 笔记像叶子一样展开,列表像藤蔓一样生长,过渡感觉如水波般平滑。创建融入自然形态的UI组件 - 边缘略微不规则如撕裂纸张的笔记卡片、针对不同笔记类型的有机形状容器,以及遵循自然曲线的导航元素。包含受自然材料启发的微妙纹理,如棉纸或木纹,在不影响可读性的同时增添深度。设计以自然运动响应的交互元素 - 像水滴一样波动的按钮、创造温和生长效果的悬停状态,以及感觉像与物理材料互动的手势。使用有机聚类和自然分组模式构建笔记组织系统,类似于自然界中元素的自组织方式。整体体验应该感觉个性化且令人平静,使用有机设计创造一个与用户自然书写和思维过程产生共鸣的数字笔记环境。" }, relatedThemes: ["sketchbook-gallery", "biophilic-dashboard"], model: "Claude 3.7 Sonnet", techStack: ["React", "SVG Animations", "React Spring", "Styled Components"], previewUrl: "https://themes.uiprompt.art/organic-notes/index.html", isPremium: !0 }, { id: "atomic-auth", title: "Atomic Auth Flow", description: "Modern authentication system using atomic design principles", imageUrl: "https://themes.uiprompt.art/atomic-auth/atomic-auth.png", category: "authentication", uiStyle: "atomic", prompt: "Design an authentication system interface using atomic design principles, creating a cohesive system of components that scales from basic elements to complete authentication flows. Use a professional color palette with clear primary and secondary colors for different states and actions, maintaining consistency across all authentication touchpoints. Implement smooth micro-interactions that provide clear feedback - form fields that validate in real-time, progress indicators that show authentication steps, and success/error states that animate naturally. Create UI components following atomic design hierarchy - from atoms (input fields, buttons, icons) to molecules (form groups, social login buttons) to organisms (complete login forms, signup flows) to templates (layout structures) to pages (full authentication views). Include consistent spacing, typography, and visual feedback systems that work together to create a trustworthy authentication experience. Design interactive elements that guide users through the authentication process - smart defaults, helpful validation messages, and clear error recovery paths. Structure the authentication flow to be both secure and user-friendly, with clear progress indicators and escape hatches at every step. The overall experience should feel professional and trustworthy while remaining efficient and easy to use, using atomic design to create a systematic and scalable authentication interface that works across different devices and contexts.", prompts: { en: "Design an authentication system interface using atomic design principles, creating a cohesive system of components that scales from basic elements to complete authentication flows. Use a professional color palette with clear primary and secondary colors for different states and actions, maintaining consistency across all authentication touchpoints. Implement smooth micro-interactions that provide clear feedback - form fields that validate in real-time, progress indicators that show authentication steps, and success/error states that animate naturally. Create UI components following atomic design hierarchy - from atoms (input fields, buttons, icons) to molecules (form groups, social login buttons) to organisms (complete login forms, signup flows) to templates (layout structures) to pages (full authentication views). Include consistent spacing, typography, and visual feedback systems that work together to create a trustworthy authentication experience. Design interactive elements that guide users through the authentication process - smart defaults, helpful validation messages, and clear error recovery paths. Structure the authentication flow to be both secure and user-friendly, with clear progress indicators and escape hatches at every step. The overall experience should feel professional and trustworthy while remaining efficient and easy to use, using atomic design to create a systematic and scalable authentication interface that works across different devices and contexts.", zh: "使用原子设计原则设计身份验证系统界面,创建一个从基本元素到完整身份验证流程的连贯组件系统。使用专业的配色方案,为不同状态和操作使用清晰的主次色彩,在所有身份验证接触点保持一致性。实现提供清晰反馈的平滑微交互 - 实时验证的表单字段、显示身份验证步骤的进度指示器,以及自然动画的成功/错误状态。按照原子设计层次创建UI组件 - 从原子(输入字段、按钮、图标)到分子(表单组、社交登录按钮)到有机体(完整登录表单、注册流程)到模板(布局结构)到页面(完整身份验证视图)。包含协同工作以创造可信赖身份验证体验的一致间距、排版和视觉反馈系统。设计引导用户完成身份验证过程的交互元素 - 智能默认值、有帮助的验证消息和清晰的错误恢复路径。构建既安全又用户友好的身份验证流程,在每个步骤都有清晰的进度指示器和退出选项。整体体验应该感觉专业和可信,同时保持高效和易用,使用原子设计创建一个系统化和可扩展的身份验证界面,适用于不同设备和场景。" }, relatedThemes: ["neumorphic-dashboard", "dark-mode-pro"], model: "Claude 3.7 Sonnet", techStack: ["React", "Storybook", "Styled System", "React Hook Form"], previewUrl: "https://themes.uiprompt.art/atomic-auth/index.html", isPremium: !0 }, { id: "bauhaus-design-system", title: "Bauhaus Design System", description: "Modern design system documentation with Bauhaus principles of form following function", imageUrl: "https://themes.uiprompt.art/bauhaus-design-system/bauhaus-design-system.png", category: "documentation", uiStyle: "bauhaus", prompt: "Design a design system documentation interface that embodies Bauhaus principles, emphasizing geometric forms, primary colors, and the unity of art, craft, and technology. Use the characteristic Bauhaus color palette of primary colors (red, yellow, blue) combined with black, white, and gray, arranged in geometric compositions that serve clear functional purposes. Implement animations that demonstrate component behavior through basic geometric transformations - rotation, translation, and scale, staying true to the Bauhaus principle of honest expression of function. Create UI components that celebrate their construction - navigation systems built from basic shapes like circles, squares, and triangles, content containers that expose their grid structure, and interactive elements that highlight their mechanical nature. Include Bauhaus-inspired patterns using basic geometric shapes and lines as functional design elements, not mere decoration. Design interactive states that reveal the underlying structure of elements - hover effects that expose grid systems, clicks that trigger geometric transitions, and focus states that highlight fundamental shapes. Structure the documentation layout using strict geometric principles and asymmetric balance, with clear hierarchy achieved through size, position, and color relationships. The overall experience should feel both educational and revolutionary, using Bauhaus principles to create a modern design system interface that teaches through its very construction, making complex design concepts accessible through fundamental geometric relationships.", prompts: { en: "Design a design system documentation interface that embodies Bauhaus principles, emphasizing geometric forms, primary colors, and the unity of art, craft, and technology. Use the characteristic Bauhaus color palette of primary colors (red, yellow, blue) combined with black, white, and gray, arranged in geometric compositions that serve clear functional purposes. Implement animations that demonstrate component behavior through basic geometric transformations - rotation, translation, and scale, staying true to the Bauhaus principle of honest expression of function. Create UI components that celebrate their construction - navigation systems built from basic shapes like circles, squares, and triangles, content containers that expose their grid structure, and interactive elements that highlight their mechanical nature. Include Bauhaus-inspired patterns using basic geometric shapes and lines as functional design elements, not mere decoration. Design interactive states that reveal the underlying structure of elements - hover effects that expose grid systems, clicks that trigger geometric transitions, and focus states that highlight fundamental shapes. Structure the documentation layout using strict geometric principles and asymmetric balance, with clear hierarchy achieved through size, position, and color relationships. The overall experience should feel both educational and revolutionary, using Bauhaus principles to create a modern design system interface that teaches through its very construction, making complex design concepts accessible through fundamental geometric relationships.", zh: "设计一个体现包豪斯原则的设计系统文档界面,强调几何形式、原色和艺术、工艺与技术的统一。使用包豪斯特征性的原色调色板(红、黄、蓝)结合黑、白、灰,以几何构图排列服务于明确的功能目的。通过基本几何变换实现展示组件行为的动画 - 旋转、平移和缩放,忠实于包豪斯功能诚实表达的原则。创建颂扬其构造的UI组件 - 由圆形、方形和三角形等基本形状构建的导航系统,暴露其网格结构的内容容器,以及突出其机械性质的交互元素。包含使用基本几何形状和线条作为功能设计元素而非纯装饰的包豪斯风格图案。设计揭示元素底层结构的交互状态 - 暴露网格系统的悬停效果、触发几何过渡的点击,以及突出基本形状的焦点状态。使用严格的几何原则和不对称平衡构建文档布局,通过大小、位置和色彩关系实现清晰的层次。整体体验应该既具教育性又具革命性,使用包豪斯原则创建一个通过其本身构造进行教学的现代设计系统界面,通过基本几何关系使复杂的设计概念变得容易理解。" }, relatedThemes: ["swiss-news-portal", "memphis-social"], model: "Claude 3.7 Sonnet", techStack: ["React", "Storybook", "SVG Animations", "CSS Grid"], previewUrl: "https://themes.uiprompt.art/bauhaus-design-system/index.html" }, { id: "vaporwave-music", title: "Vaporwave Beats", description: "Retro-futuristic music streaming platform with vaporwave aesthetics", imageUrl: "https://themes.uiprompt.art/vaporwave-music/vaporwave-music.png", category: "entertainment", uiStyle: "vaporwave", prompt: "Design a music streaming platform interface that embraces vaporwave aesthetics, combining 1980s and 1990s computing nostalgia with glitch art and cyberpunk elements. Use a characteristic vaporwave color palette featuring saturated pink and cyan gradients, purple hues, and glitch effects, complemented by period-appropriate visual artifacts like VHS tracking lines and CRT screen effects. Implement surreal animations that distort and glitch interface elements - album artwork that warps and shifts, playlist cards that fragment and reassemble, and transitions that simulate digital decay and compression artifacts. Create UI components that reference retro computing and early internet aesthetics - music players styled after vintage Windows Media Player, navigation elements that echo early web design, and status indicators that mimic old loading screens. Include classic vaporwave motifs like Greek statues, palm trees, and architectural elements, recontextualized through a digital glitch aesthetic. Design interactive elements that respond with appropriate retro-futuristic feedback - hover states that trigger VHS tracking distortion, clicks that cause momentary digital artifacts, and loading states that reference vintage computing. Structure the music library using a surreal grid system that occasionally breaks down and glitches, creating an intentionally disorienting but navigable interface. The overall experience should feel like discovering music in an alternative digital reality, using vaporwave aesthetics to create a nostalgic yet futuristic platform that celebrates digital decay and retrofuturism.", prompts: { en: "Design a music streaming platform interface that embraces vaporwave aesthetics, combining 1980s and 1990s computing nostalgia with glitch art and cyberpunk elements. Use a characteristic vaporwave color palette featuring saturated pink and cyan gradients, purple hues, and glitch effects, complemented by period-appropriate visual artifacts like VHS tracking lines and CRT screen effects. Implement surreal animations that distort and glitch interface elements - album artwork that warps and shifts, playlist cards that fragment and reassemble, and transitions that simulate digital decay and compression artifacts. Create UI components that reference retro computing and early internet aesthetics - music players styled after vintage Windows Media Player, navigation elements that echo early web design, and status indicators that mimic old loading screens. Include classic vaporwave motifs like Greek statues, palm trees, and architectural elements, recontextualized through a digital glitch aesthetic. Design interactive elements that respond with appropriate retro-futuristic feedback - hover states that trigger VHS tracking distortion, clicks that cause momentary digital artifacts, and loading states that reference vintage computing. Structure the music library using a surreal grid system that occasionally breaks down and glitches, creating an intentionally disorienting but navigable interface. The overall experience should feel like discovering music in an alternative digital reality, using vaporwave aesthetics to create a nostalgic yet futuristic platform that celebrates digital decay and retrofuturism.", zh: "设计一个拥抱蒸汽波美学的音乐流媒体平台界面,将20世纪80年代和90年代的计算机怀旧与故障艺术和赛博朋克元素相结合。使用特征性的蒸汽波配色方案,包括饱和的粉色和青色渐变、紫色色调和故障效果,配以符合时代特征的视觉效果,如VHS跟踪线条和CRT屏幕效果。实现对界面元素进行扭曲和故障处理的超现实动画 - 扭曲和变形的专辑封面、分裂和重组的播放列表卡片,以及模拟数字衰减和压缩失真的过渡效果。创建引用复古计算和早期互联网美学的UI组件 - 仿照经典Windows Media Player风格的音乐播放器、呼应早期网页设计的导航元素,以及模仿旧式加载屏幕的状态指示器。包含通过数字故障美学重新语境化的经典蒸汽波主题,如希腊雕像、棕榈树和建筑元素。设计以适当复古未来主义反馈响应的交互元素 - 触发VHS跟踪失真的悬停状态、导致瞬时数字失真的点击,以及引用复古计算的加载状态。使用偶尔崩溃和故障的超现实网格系统构建音乐库,创造一个刻意令人迷失方向但可导航的界面。整体体验应该感觉像在另类数字现实中发现音乐,使用蒸汽波美学创造一个怀旧yet未来主义的平台,颂扬数字衰减和复古未来主义。" }, relatedThemes: ["retro-computing", "cyber-ai-edit"], model: "Claude 3.7 Sonnet", techStack: ["React", "Three.js", "WebGL", "Tone.js"], previewUrl: "https://themes.uiprompt.art/vaporwave-music/index.html", isPremium: !0 }]