hao/skills
1
0
派生 0
代码 工单 合并请求 工作流 软件包 项目 发布 百科 活动

Add ui-ux-pro-max-skill

浏览代码
这个提交包含在：
codex
2026-02-06 08:01:02 +08:00
当前提交 a68e196fea
共修改 4 个文件，包含 161 行新增和 0 行删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件

35
ui-ux-pro-max-skill/SKILL.md 普通文件
查看文件

@@ -0,0 +1,35 @@
---
name: ui-ux-pro-max-skill
description: Curated UI/UX demo prompt library for web front-end design and build tasks. Use when asked to design or build website UI, landing pages, dashboards, product sites, or UI/UX demos, especially when the request matches a known category (SaaS, fintech/crypto, e-commerce, AI tools, healthcare, education, travel, real estate, etc.).
---
# UI UX Pro Max Skill
## Overview
Use the 39 curated demo prompts to quickly choose a matching UI style and then adapt the prompt to the user domain, features, and brand constraints.
## Workflow
1. Scan categories and demo names in `references/gallery-index.md`.
2. Open `references/gallery.csv` to read full prompts for the best matches.
3. Select the closest demo using category, keywords, and requested UI type (dashboard, landing page, marketplace, portfolio, etc.).
4. Adapt the chosen prompt to the user domain, required sections, tone, and tech stack.
5. Deliver a structured UI plan and (if requested) front-end scaffold guidance.
## Matching Rules
- **Primary match**: category + obvious keywords (e.g., "dashboard", "crypto", "clinic", "restaurant").
- **Secondary match**: similar information architecture (e.g., CRM and analytics dashboards, marketplaces, booking sites).
- **Mode**: respect light/dark preference if the user specifies it; otherwise keep the demo mode.
- If multiple matches exist, pick the one with the closest feature set and layout style; mention alternates briefly.
- If no good match exists, pick the nearest SaaS/analytics or general business layout and explain the adaptation.
## Output Template
- Selected demo: id, name, category, mode, url
- Why this match (1-2 sentences)
- Adapted prompt (edited from the demo prompt)
- UI structure (sections + key components)
- Visual notes (colors, typography, spacing, motion)
- Optional: front-end build notes (stack, layout grid, component list)
## Resources
- `references/gallery-index.md`: quick category/name index for the 39 demos.
- `references/gallery.csv`: authoritative prompt data (includes prompts, colors, urls).

4
ui-ux-pro-max-skill/agents/openai.yaml 普通文件
查看文件

@@ -0,0 +1,4 @@
interface:
display_name: "UI UX Pro Max"
short_description: "Match web UI requests to 39 demo prompts."
default_prompt: "Pick the closest demo prompt and adapt it to the requested website, then outline the UI structure and key sections."

82
ui-ux-pro-max-skill/references/gallery-index.md 普通文件
查看文件

@@ -0,0 +1,82 @@
# Gallery Index (39 demos)
Use this index to quickly scan categories and demo names before opening gallery.csv for full prompts.
## AI/Chatbot
- 2. AI Chatbot Platform (light)
- 20. Sustainability Platform (light)
- 36. Generative Art Platform (dark)
- 39. AI Writing Assistant (light)
- 40. AI Image Generator (dark)
## Beauty/Spa
- 14. Beauty & Spa Service (light)
- 19. Coworking Space (light)
## Creative
- 6. Creative Agency Portfolio (light)
## Developer Tools
- 15. Developer Tools (dark)
## E-commerce
- 3. Luxury E-commerce (light)
## Education
- 7. Educational Platform (light)
## Entertainment
- 16. Music Streaming (dark)
## Events
- 18. Wedding & Events (light)
## Fintech/Crypto
- 4. Fintech Crypto Dashboard (dark)
- 28. Investment Platform (dark)
- 29. Payment Gateway (light)
- 30. Crypto Wallet (dark)
- 31. DeFi Yield Platform (dark)
- 32. CEX Trading Platform (dark)
- 33. DEX Swap Interface (dark)
## Fitness
- 11. Fitness & Gym App (dark)
## Food & Restaurant
- 10. Restaurant & Food (light)
## Gaming
- 9. Gaming Platform (dark)
## Healthcare
- 5. Health & Wellness App (light)
- 25. Telemedicine Platform (light)
- 26. Mental Health App (light)
## Legal
- 17. Legal Services (light)
## NFT/Web3
- 13. NFT & Web3 Platform (dark)
- 35. NFT Art Gallery (light)
## Other
- 22. Veterinary Clinic (light)
- 24. Medical Clinic Portal (light)
- 27. Digital Banking App (light)
## Pet Services
- 21. Pet Grooming & Spa (light)
- 23. Pet Adoption Platform (light)
## Real Estate
- 8. Real Estate Luxury (light)
## SaaS
- 1. SaaS Analytics Dashboard (light)
- 37. Sales CRM Platform (light)
- 38. Customer Support CRM (light)
## Travel
- 12. Travel & Tourism (light)

40
ui-ux-pro-max-skill/references/gallery.csv 普通文件
查看文件

@@ -0,0 +1,40 @@
id,order,name,category,imageUrl,url,style,mode,primary_color,secondary_color,cta_color,background_color,implemented,prompt
1,1,SaaS Analytics Dashboard,SaaS,/thumbnails/saas-analytics-dashboard.png,/demo/saas-analytics-dashboard,Glassmorphism + Flat Design,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Create a modern SaaS analytics dashboard landing page with glassmorphism cards, hero section showcasing real-time data visualization, feature highlights with icons, pricing table, and trust badges. Focus on clarity and professional feel."
7,1,Educational Platform,Education,/thumbnails/educational-platform.png,/demo/educational-platform,Claymorphism + Vibrant & Block-based,light,#FDBCB4,#ADD8E6,#22C55E,#FFFFFF,true,"Create a playful educational platform landing page with claymorphism cards, course catalog preview, progress tracking demo, student testimonials, and enrollment CTA. Use vibrant, engaging colors."
21,1,Pet Grooming & Spa,Pet Services,/thumbnails/pet-grooming.png,/demo/pet-grooming,Claymorphism + Vibrant & Block-based,light,#FF9F43,#87CEEB,#FF9F43,#FFF8F0,true,"Create a friendly pet grooming service landing page with claymorphism cards, service packages, pet gallery, booking system, and testimonials from pet owners. Use playful warm colors."
2,2,AI Chatbot Platform,AI/Chatbot,/thumbnails/ai-chatbot-platform.png,/demo/ai-chatbot-platform,AI-Native UI + Minimalism,light,#6366F1,#10B981,#6366F1,#F5F5F5,true,"Design a minimal AI chatbot platform landing page with conversational UI preview, streaming text animation demo, feature cards with AI capabilities, integration logos, and a prominent 'Try Now' CTA. Use neutral tones with AI purple accent."
3,3,Luxury E-commerce,E-commerce,/thumbnails/luxury-ecommerce.png,/demo/luxury-ecommerce,Liquid Glass + Glassmorphism,light,#000000,#FFD700,#FFD700,#FFFFFF,true,"Build an elegant luxury e-commerce landing page with liquid glass effects, high-end product showcase, storytelling sections, premium brand values, and exclusive membership CTA. Emphasize sophistication and exclusivity."
4,4,Fintech Crypto Dashboard,Fintech/Crypto,/thumbnails/fintech-crypto.png,/demo/fintech-crypto,Glassmorphism + Dark Mode (OLED),dark,#0080FF,#39FF14,#39FF14,#0A0E27,true,"Create a dark mode fintech/crypto landing page with glassmorphism cards, real-time price charts preview, security features highlight, wallet integration showcase, and trust indicators. Focus on security and modern tech feel."
5,5,Health & Wellness App,Healthcare,/thumbnails/health-wellness.png,/demo/health-wellness,Neumorphism + Soft UI Evolution,light,#87CEEB,#90EE90,#22C55E,#F5F5F5,true,"Design a calming health and wellness app landing page with soft UI elements, neumorphic cards, feature showcase for meditation/fitness tracking, testimonials, and app download CTAs. Use calm, soothing colors."
6,6,Creative Agency Portfolio,Creative,/thumbnails/creative-agency.png,/demo/creative-agency,Brutalism + Motion-Driven,light,#FF0000,#0000FF,#FFFF00,#FFFFFF,true,"Build a bold creative agency portfolio landing page with brutalist elements, motion-driven animations, case study previews, team showcase, and contact form. Emphasize creativity and uniqueness."
8,8,Real Estate Luxury,Real Estate,/thumbnails/real-estate.png,/demo/real-estate,Glassmorphism + Minimalism,light,#0077B6,#FFD700,#0077B6,#FFFFFF,true,"Design an elegant real estate landing page with glassmorphism property cards, virtual tour preview, featured listings, agent profiles, and contact form. Focus on trust and premium feel."
9,9,Gaming Platform,Gaming,/thumbnails/gaming-platform.png,/demo/gaming-platform,3D & Hyperrealism + Retro-Futurism,dark,#FF006E,#00FFFF,#39FF14,#1A1A2E,true,"Build an immersive gaming platform landing page with 3D elements, retro-futuristic style, game showcase carousel, community features, and download CTA. Use vibrant neon colors on dark background."
10,10,Restaurant & Food,Food & Restaurant,/thumbnails/restaurant-food.png,/demo/restaurant-food,Vibrant & Block-based + Motion-Driven,light,#FF6B35,#8B4513,#FF6B35,#FFFAF0,true,"Create a warm restaurant landing page with vibrant food photography, menu preview, reservation system, chef story section, and location map. Use appetizing warm colors."
11,11,Fitness & Gym App,Fitness,/thumbnails/fitness-gym.png,/demo/fitness-gym,Vibrant & Block-based + Dark Mode (OLED),dark,#FF6B35,#0080FF,#FF6B35,#121212,true,"Design an energetic fitness app landing page with dark mode, workout preview cards, progress tracking demo, trainer profiles, and subscription CTAs. Use bold, motivating colors."
12,12,Travel & Tourism,Travel,/thumbnails/travel-tourism.png,/demo/travel-tourism,Aurora UI + Motion-Driven,light,#0080FF,#FF7F00,#FF7F00,#FFFFFF,true,"Build an inspiring travel agency landing page with aurora UI gradients, destination showcase, booking preview, traveler testimonials, and trip planner CTA. Use vibrant destination colors."
13,13,NFT & Web3 Platform,NFT/Web3,/thumbnails/nft-web3.png,/demo/nft-web3,Cyberpunk UI + Glassmorphism,dark,#FF00FF,#00FFFF,#FFD700,#0D0D0D,true,"Create a cyberpunk-style NFT platform landing page with glassmorphism cards, featured NFT gallery, wallet connection demo, creator spotlight, and marketplace preview. Use neon colors on dark background."
14,14,Beauty & Spa Service,Beauty/Spa,/thumbnails/beauty-spa.png,/demo/beauty-spa,Soft UI Evolution + Neumorphism,light,#FFB6C1,#90EE90,#FFD700,#FFF5F5,true,"Design a serene beauty spa landing page with soft UI elements, service menu, before/after gallery, booking system preview, and testimonials. Use soft pastels and calming aesthetics."
15,15,Developer Tools,Developer Tools,/thumbnails/developer-tools.png,/demo/developer-tools,Dark Mode (OLED) + Minimalism,dark,#39FF14,#0080FF,#39FF14,#0D0D0D,true,"Build a minimal developer tools landing page with dark mode, code snippet previews, feature comparison table, integration logos, and documentation link. Use syntax highlighting colors."
16,16,Music Streaming,Entertainment,/thumbnails/music-streaming.png,/demo/music-streaming,Dark Mode (OLED) + Vibrant & Block-based,dark,#1DB954,#FF1493,#1DB954,#121212,true,"Create a dark mode music streaming landing page with vibrant accents, playlist showcase, audio player preview, artist spotlight, and premium subscription CTA. Use album art-inspired colors."
17,17,Legal Services,Legal,/thumbnails/legal-services.png,/demo/legal-services,Trust & Authority + Minimalism,light,#1E3A5F,#FFD700,#1E3A5F,#FFFFFF,true,"Design a trustworthy legal services landing page with minimal design, practice areas showcase, attorney profiles, case results, and consultation booking. Use professional navy and gold."
18,18,Wedding & Events,Events,/thumbnails/wedding-events.png,/demo/wedding-events,Soft UI Evolution + Aurora UI,light,#FFD6E0,#FFD700,#FFD700,#FFFAF5,true,"Build a romantic wedding planning landing page with soft UI, portfolio gallery, vendor directory preview, planning tools showcase, and contact form. Use soft pink and gold accents."
19,19,Coworking Space,Beauty/Spa,/thumbnails/coworking-space.png,/demo/coworking-space,Vibrant & Block-based + Glassmorphism,light,#FFB6C1,#90EE90,#FFD700,#FFF5F5,true,"Create a vibrant coworking space landing page with glassmorphism cards, space tour preview, membership plans, amenities showcase, and booking CTA. Use energetic modern colors."
20,20,Sustainability Platform,AI/Chatbot,/thumbnails/sustainability-platform.png,/demo/sustainability-platform,Organic Biophilic + Minimalism,light,#6366F1,#10B981,#6366F1,#F5F5F5,true,"Design an eco-friendly sustainability platform landing page with organic biophilic elements, carbon footprint calculator preview, impact metrics, and certification badges. Use earth tones and greens."
22,22,Veterinary Clinic,Other,/thumbnails/veterinary-clinic.png,/demo/veterinary-clinic,Soft UI Evolution + Accessible & Ethical,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Design a caring veterinary clinic landing page with soft UI elements, services overview, vet team profiles, emergency contact section, and appointment booking. Use calming pet-friendly colors."
23,23,Pet Adoption Platform,Pet Services,/thumbnails/pet-adoption.png,/demo/pet-adoption,Motion-Driven + Claymorphism,light,#FF9F43,#87CEEB,#FF9F43,#FFF8F0,true,"Build a heartwarming pet adoption platform landing page with motion-driven pet cards, search filters preview, success stories, shelter partnerships, and adoption CTA. Use warm inviting colors."
24,24,Medical Clinic Portal,Other,/thumbnails/medical-clinic.png,/demo/medical-clinic,Accessible & Ethical + Minimalism,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Create a trustworthy medical clinic landing page with accessible design, services directory, doctor profiles, patient portal preview, and appointment booking. Focus on trust and accessibility."
25,25,Telemedicine Platform,Healthcare,/thumbnails/telemedicine.png,/demo/telemedicine,Soft UI Evolution + AI-Native UI,light,#87CEEB,#90EE90,#22C55E,#F5F5F5,true,"Design a modern telemedicine platform landing page with soft UI, video consultation preview, specialist directory, health tracking features, and app download CTAs. Use calming healthcare colors."
26,26,Mental Health App,Healthcare,/thumbnails/mental-health.png,/demo/mental-health,Neumorphism + Accessible & Ethical,light,#87CEEB,#90EE90,#22C55E,#F5F5F5,true,"Build a calming mental health app landing page with neumorphic elements, mood tracking preview, therapy session booking, resource library, and crisis support section. Use soothing pastels."
27,27,Digital Banking App,Other,/thumbnails/digital-banking.png,/demo/digital-banking,Glassmorphism + Trust & Authority,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Create a sleek digital banking landing page with glassmorphism cards, account overview preview, transaction features, security highlights, and mobile app download. Use trust-building colors."
28,28,Investment Platform,Fintech/Crypto,/thumbnails/investment-platform.png,/demo/investment-platform,Dark Mode (OLED) + Data-Dense Dashboard,dark,#0080FF,#39FF14,#39FF14,#0A0E27,true,"Design a professional investment platform landing page with dark mode, portfolio analytics preview, market data widgets, educational resources, and account signup. Focus on trust and data."
29,29,Payment Gateway,Fintech/Crypto,/thumbnails/payment-gateway.png,/demo/payment-gateway,Minimalism + Trust & Authority,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Build a conversion-focused payment gateway landing page with minimal design, integration code preview, pricing tiers, security certifications, and developer documentation link. Use professional colors."
30,30,Crypto Wallet,Fintech/Crypto,/thumbnails/crypto-wallet.png,/demo/crypto-wallet,Glassmorphism + Dark Mode (OLED),dark,#0080FF,#39FF14,#39FF14,#0A0E27,true,"Create a secure crypto wallet landing page with dark glassmorphism, multi-chain support showcase, security features, transaction preview, and download CTAs. Use crypto-native dark theme."
31,31,DeFi Yield Platform,Fintech/Crypto,/thumbnails/defi-yield.png,/demo/defi-yield,Cyberpunk UI + Glassmorphism,dark,#0080FF,#39FF14,#39FF14,#0A0E27,true,"Design a DeFi yield farming platform landing page with cyberpunk aesthetics, APY calculators, liquidity pools preview, tokenomics section, and wallet connect. Use neon on dark."
32,32,CEX Trading Platform,Fintech/Crypto,/thumbnails/cex-trading.png,/demo/cex-trading,Dark Mode (OLED) + Data-Dense Dashboard,dark,#0080FF,#39FF14,#39FF14,#0A0E27,true,"Build a professional centralized exchange landing page with dark mode, trading interface preview, market pairs, security features, and registration flow. Focus on trust and performance."
33,33,DEX Swap Interface,Fintech/Crypto,/thumbnails/dex-swap.png,/demo/dex-swap,Glassmorphism + Cyberpunk UI,dark,#0080FF,#39FF14,#39FF14,#0A0E27,true,"Create a decentralized exchange landing page with glassmorphism swap interface preview, supported tokens, liquidity provider benefits, governance features, and wallet integration. Use Web3 aesthetics."
35,35,NFT Art Gallery,NFT/Web3,/thumbnails/nft-art-gallery.png,/demo/nft-art-gallery,Minimalism + Motion-Driven,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Build an elegant NFT art gallery landing page with minimal design, curated collections, artist profiles, exhibition previews, and minting interface. Focus on art presentation."
36,36,Generative Art Platform,AI/Chatbot,/thumbnails/generative-art-platform.png,/demo/generative-art-platform,Minimalism + Gen Z Chaos,dark,#0080FF,#8B00FF,#22C55E,#0D0D0D,true,"Create a generative art platform landing page with dark mode, AI art generation preview, style gallery, creator tools showcase, and minting flow. Use canvas-neutral with vibrant accents."
37,37,Sales CRM Platform,SaaS,/thumbnails/sales-crm-platform.png,/demo/sales-crm-platform,Feature-Rich Showcase + Trust & Authority,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Design a professional sales CRM landing page with feature-rich showcase, pipeline visualization preview, integration logos, customer success stories, and free trial CTA. Use trust colors."
38,38,Customer Support CRM,SaaS,/thumbnails/customer-support-crm.png,/demo/customer-support-crm,Soft UI Evolution + Feature-Rich Showcase,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Build a friendly customer support CRM landing page with soft UI, ticket management preview, omnichannel features, AI chatbot integration, and pricing comparison. Use approachable colors."
39,39,AI Writing Assistant,AI/Chatbot,/thumbnails/ai-writing-assistant.png,/demo/ai-writing-assistant,AI-Native UI + Minimalism,light,#6366F1,#10B981,#6366F1,#F5F5F5,true,"Create an AI writing assistant landing page with minimal chrome, live writing demo, use case showcases, integration options, and subscription tiers. Use neutral with AI purple accent."
40,40,AI Image Generator,AI/Chatbot,/thumbnails/ai-image-generator.png,/demo/ai-image-generator,Dark Mode (OLED) + Bento Box Grid,dark,#0080FF,#8B00FF,#22C55E,#0D0D0D,true,"Design an AI image generation platform landing page with dark mode, generation preview gallery, style options, prompt examples, and credit-based pricing. Use creative vibrant accents."
1 id order name category imageUrl url style mode primary_color secondary_color cta_color background_color implemented prompt
2 1 1 SaaS Analytics Dashboard SaaS /thumbnails/saas-analytics-dashboard.png /demo/saas-analytics-dashboard Glassmorphism + Flat Design light #0080FF #8B00FF #22C55E #FFFFFF true Create a modern SaaS analytics dashboard landing page with glassmorphism cards, hero section showcasing real-time data visualization, feature highlights with icons, pricing table, and trust badges. Focus on clarity and professional feel.
3 7 1 Educational Platform Education /thumbnails/educational-platform.png /demo/educational-platform Claymorphism + Vibrant & Block-based light #FDBCB4 #ADD8E6 #22C55E #FFFFFF true Create a playful educational platform landing page with claymorphism cards, course catalog preview, progress tracking demo, student testimonials, and enrollment CTA. Use vibrant, engaging colors.
4 21 1 Pet Grooming & Spa Pet Services /thumbnails/pet-grooming.png /demo/pet-grooming Claymorphism + Vibrant & Block-based light #FF9F43 #87CEEB #FF9F43 #FFF8F0 true Create a friendly pet grooming service landing page with claymorphism cards, service packages, pet gallery, booking system, and testimonials from pet owners. Use playful warm colors.
5 2 2 AI Chatbot Platform AI/Chatbot /thumbnails/ai-chatbot-platform.png /demo/ai-chatbot-platform AI-Native UI + Minimalism light #6366F1 #10B981 #6366F1 #F5F5F5 true Design a minimal AI chatbot platform landing page with conversational UI preview, streaming text animation demo, feature cards with AI capabilities, integration logos, and a prominent 'Try Now' CTA. Use neutral tones with AI purple accent.
6 3 3 Luxury E-commerce E-commerce /thumbnails/luxury-ecommerce.png /demo/luxury-ecommerce Liquid Glass + Glassmorphism light #000000 #FFD700 #FFD700 #FFFFFF true Build an elegant luxury e-commerce landing page with liquid glass effects, high-end product showcase, storytelling sections, premium brand values, and exclusive membership CTA. Emphasize sophistication and exclusivity.
7 4 4 Fintech Crypto Dashboard Fintech/Crypto /thumbnails/fintech-crypto.png /demo/fintech-crypto Glassmorphism + Dark Mode (OLED) dark #0080FF #39FF14 #39FF14 #0A0E27 true Create a dark mode fintech/crypto landing page with glassmorphism cards, real-time price charts preview, security features highlight, wallet integration showcase, and trust indicators. Focus on security and modern tech feel.
8 5 5 Health & Wellness App Healthcare /thumbnails/health-wellness.png /demo/health-wellness Neumorphism + Soft UI Evolution light #87CEEB #90EE90 #22C55E #F5F5F5 true Design a calming health and wellness app landing page with soft UI elements, neumorphic cards, feature showcase for meditation/fitness tracking, testimonials, and app download CTAs. Use calm, soothing colors.
9 6 6 Creative Agency Portfolio Creative /thumbnails/creative-agency.png /demo/creative-agency Brutalism + Motion-Driven light #FF0000 #0000FF #FFFF00 #FFFFFF true Build a bold creative agency portfolio landing page with brutalist elements, motion-driven animations, case study previews, team showcase, and contact form. Emphasize creativity and uniqueness.
10 8 8 Real Estate Luxury Real Estate /thumbnails/real-estate.png /demo/real-estate Glassmorphism + Minimalism light #0077B6 #FFD700 #0077B6 #FFFFFF true Design an elegant real estate landing page with glassmorphism property cards, virtual tour preview, featured listings, agent profiles, and contact form. Focus on trust and premium feel.
11 9 9 Gaming Platform Gaming /thumbnails/gaming-platform.png /demo/gaming-platform 3D & Hyperrealism + Retro-Futurism dark #FF006E #00FFFF #39FF14 #1A1A2E true Build an immersive gaming platform landing page with 3D elements, retro-futuristic style, game showcase carousel, community features, and download CTA. Use vibrant neon colors on dark background.
12 10 10 Restaurant & Food Food & Restaurant /thumbnails/restaurant-food.png /demo/restaurant-food Vibrant & Block-based + Motion-Driven light #FF6B35 #8B4513 #FF6B35 #FFFAF0 true Create a warm restaurant landing page with vibrant food photography, menu preview, reservation system, chef story section, and location map. Use appetizing warm colors.
13 11 11 Fitness & Gym App Fitness /thumbnails/fitness-gym.png /demo/fitness-gym Vibrant & Block-based + Dark Mode (OLED) dark #FF6B35 #0080FF #FF6B35 #121212 true Design an energetic fitness app landing page with dark mode, workout preview cards, progress tracking demo, trainer profiles, and subscription CTAs. Use bold, motivating colors.
14 12 12 Travel & Tourism Travel /thumbnails/travel-tourism.png /demo/travel-tourism Aurora UI + Motion-Driven light #0080FF #FF7F00 #FF7F00 #FFFFFF true Build an inspiring travel agency landing page with aurora UI gradients, destination showcase, booking preview, traveler testimonials, and trip planner CTA. Use vibrant destination colors.
15 13 13 NFT & Web3 Platform NFT/Web3 /thumbnails/nft-web3.png /demo/nft-web3 Cyberpunk UI + Glassmorphism dark #FF00FF #00FFFF #FFD700 #0D0D0D true Create a cyberpunk-style NFT platform landing page with glassmorphism cards, featured NFT gallery, wallet connection demo, creator spotlight, and marketplace preview. Use neon colors on dark background.
16 14 14 Beauty & Spa Service Beauty/Spa /thumbnails/beauty-spa.png /demo/beauty-spa Soft UI Evolution + Neumorphism light #FFB6C1 #90EE90 #FFD700 #FFF5F5 true Design a serene beauty spa landing page with soft UI elements, service menu, before/after gallery, booking system preview, and testimonials. Use soft pastels and calming aesthetics.
17 15 15 Developer Tools Developer Tools /thumbnails/developer-tools.png /demo/developer-tools Dark Mode (OLED) + Minimalism dark #39FF14 #0080FF #39FF14 #0D0D0D true Build a minimal developer tools landing page with dark mode, code snippet previews, feature comparison table, integration logos, and documentation link. Use syntax highlighting colors.
18 16 16 Music Streaming Entertainment /thumbnails/music-streaming.png /demo/music-streaming Dark Mode (OLED) + Vibrant & Block-based dark #1DB954 #FF1493 #1DB954 #121212 true Create a dark mode music streaming landing page with vibrant accents, playlist showcase, audio player preview, artist spotlight, and premium subscription CTA. Use album art-inspired colors.
19 17 17 Legal Services Legal /thumbnails/legal-services.png /demo/legal-services Trust & Authority + Minimalism light #1E3A5F #FFD700 #1E3A5F #FFFFFF true Design a trustworthy legal services landing page with minimal design, practice areas showcase, attorney profiles, case results, and consultation booking. Use professional navy and gold.
20 18 18 Wedding & Events Events /thumbnails/wedding-events.png /demo/wedding-events Soft UI Evolution + Aurora UI light #FFD6E0 #FFD700 #FFD700 #FFFAF5 true Build a romantic wedding planning landing page with soft UI, portfolio gallery, vendor directory preview, planning tools showcase, and contact form. Use soft pink and gold accents.
21 19 19 Coworking Space Beauty/Spa /thumbnails/coworking-space.png /demo/coworking-space Vibrant & Block-based + Glassmorphism light #FFB6C1 #90EE90 #FFD700 #FFF5F5 true Create a vibrant coworking space landing page with glassmorphism cards, space tour preview, membership plans, amenities showcase, and booking CTA. Use energetic modern colors.
22 20 20 Sustainability Platform AI/Chatbot /thumbnails/sustainability-platform.png /demo/sustainability-platform Organic Biophilic + Minimalism light #6366F1 #10B981 #6366F1 #F5F5F5 true Design an eco-friendly sustainability platform landing page with organic biophilic elements, carbon footprint calculator preview, impact metrics, and certification badges. Use earth tones and greens.
23 22 22 Veterinary Clinic Other /thumbnails/veterinary-clinic.png /demo/veterinary-clinic Soft UI Evolution + Accessible & Ethical light #0080FF #8B00FF #22C55E #FFFFFF true Design a caring veterinary clinic landing page with soft UI elements, services overview, vet team profiles, emergency contact section, and appointment booking. Use calming pet-friendly colors.
24 23 23 Pet Adoption Platform Pet Services /thumbnails/pet-adoption.png /demo/pet-adoption Motion-Driven + Claymorphism light #FF9F43 #87CEEB #FF9F43 #FFF8F0 true Build a heartwarming pet adoption platform landing page with motion-driven pet cards, search filters preview, success stories, shelter partnerships, and adoption CTA. Use warm inviting colors.
25 24 24 Medical Clinic Portal Other /thumbnails/medical-clinic.png /demo/medical-clinic Accessible & Ethical + Minimalism light #0080FF #8B00FF #22C55E #FFFFFF true Create a trustworthy medical clinic landing page with accessible design, services directory, doctor profiles, patient portal preview, and appointment booking. Focus on trust and accessibility.
26 25 25 Telemedicine Platform Healthcare /thumbnails/telemedicine.png /demo/telemedicine Soft UI Evolution + AI-Native UI light #87CEEB #90EE90 #22C55E #F5F5F5 true Design a modern telemedicine platform landing page with soft UI, video consultation preview, specialist directory, health tracking features, and app download CTAs. Use calming healthcare colors.
27 26 26 Mental Health App Healthcare /thumbnails/mental-health.png /demo/mental-health Neumorphism + Accessible & Ethical light #87CEEB #90EE90 #22C55E #F5F5F5 true Build a calming mental health app landing page with neumorphic elements, mood tracking preview, therapy session booking, resource library, and crisis support section. Use soothing pastels.
28 27 27 Digital Banking App Other /thumbnails/digital-banking.png /demo/digital-banking Glassmorphism + Trust & Authority light #0080FF #8B00FF #22C55E #FFFFFF true Create a sleek digital banking landing page with glassmorphism cards, account overview preview, transaction features, security highlights, and mobile app download. Use trust-building colors.
29 28 28 Investment Platform Fintech/Crypto /thumbnails/investment-platform.png /demo/investment-platform Dark Mode (OLED) + Data-Dense Dashboard dark #0080FF #39FF14 #39FF14 #0A0E27 true Design a professional investment platform landing page with dark mode, portfolio analytics preview, market data widgets, educational resources, and account signup. Focus on trust and data.
30 29 29 Payment Gateway Fintech/Crypto /thumbnails/payment-gateway.png /demo/payment-gateway Minimalism + Trust & Authority light #0080FF #8B00FF #22C55E #FFFFFF true Build a conversion-focused payment gateway landing page with minimal design, integration code preview, pricing tiers, security certifications, and developer documentation link. Use professional colors.
31 30 30 Crypto Wallet Fintech/Crypto /thumbnails/crypto-wallet.png /demo/crypto-wallet Glassmorphism + Dark Mode (OLED) dark #0080FF #39FF14 #39FF14 #0A0E27 true Create a secure crypto wallet landing page with dark glassmorphism, multi-chain support showcase, security features, transaction preview, and download CTAs. Use crypto-native dark theme.
32 31 31 DeFi Yield Platform Fintech/Crypto /thumbnails/defi-yield.png /demo/defi-yield Cyberpunk UI + Glassmorphism dark #0080FF #39FF14 #39FF14 #0A0E27 true Design a DeFi yield farming platform landing page with cyberpunk aesthetics, APY calculators, liquidity pools preview, tokenomics section, and wallet connect. Use neon on dark.
33 32 32 CEX Trading Platform Fintech/Crypto /thumbnails/cex-trading.png /demo/cex-trading Dark Mode (OLED) + Data-Dense Dashboard dark #0080FF #39FF14 #39FF14 #0A0E27 true Build a professional centralized exchange landing page with dark mode, trading interface preview, market pairs, security features, and registration flow. Focus on trust and performance.
34 33 33 DEX Swap Interface Fintech/Crypto /thumbnails/dex-swap.png /demo/dex-swap Glassmorphism + Cyberpunk UI dark #0080FF #39FF14 #39FF14 #0A0E27 true Create a decentralized exchange landing page with glassmorphism swap interface preview, supported tokens, liquidity provider benefits, governance features, and wallet integration. Use Web3 aesthetics.
35 35 35 NFT Art Gallery NFT/Web3 /thumbnails/nft-art-gallery.png /demo/nft-art-gallery Minimalism + Motion-Driven light #0080FF #8B00FF #22C55E #FFFFFF true Build an elegant NFT art gallery landing page with minimal design, curated collections, artist profiles, exhibition previews, and minting interface. Focus on art presentation.
36 36 36 Generative Art Platform AI/Chatbot /thumbnails/generative-art-platform.png /demo/generative-art-platform Minimalism + Gen Z Chaos dark #0080FF #8B00FF #22C55E #0D0D0D true Create a generative art platform landing page with dark mode, AI art generation preview, style gallery, creator tools showcase, and minting flow. Use canvas-neutral with vibrant accents.
37 37 37 Sales CRM Platform SaaS /thumbnails/sales-crm-platform.png /demo/sales-crm-platform Feature-Rich Showcase + Trust & Authority light #0080FF #8B00FF #22C55E #FFFFFF true Design a professional sales CRM landing page with feature-rich showcase, pipeline visualization preview, integration logos, customer success stories, and free trial CTA. Use trust colors.
38 38 38 Customer Support CRM SaaS /thumbnails/customer-support-crm.png /demo/customer-support-crm Soft UI Evolution + Feature-Rich Showcase light #0080FF #8B00FF #22C55E #FFFFFF true Build a friendly customer support CRM landing page with soft UI, ticket management preview, omnichannel features, AI chatbot integration, and pricing comparison. Use approachable colors.
39 39 39 AI Writing Assistant AI/Chatbot /thumbnails/ai-writing-assistant.png /demo/ai-writing-assistant AI-Native UI + Minimalism light #6366F1 #10B981 #6366F1 #F5F5F5 true Create an AI writing assistant landing page with minimal chrome, live writing demo, use case showcases, integration options, and subscription tiers. Use neutral with AI purple accent.
40 40 40 AI Image Generator AI/Chatbot /thumbnails/ai-image-generator.png /demo/ai-image-generator Dark Mode (OLED) + Bento Box Grid dark #0080FF #8B00FF #22C55E #0D0D0D true Design an AI image generation platform landing page with dark mode, generation preview gallery, style options, prompt examples, and credit-based pricing. Use creative vibrant accents.