Nguồn: Viet Tran
Chọn Phong Cách
Duolingo Style
Gamification, friendly, approachable, cartoon-like, rounded, playful, progress-focused, mascot-driven
Duolingo Green (#58CC02), Feather Blue (#1CB0F6), Owl Orange (#FF9600), White backgrounds, soft grays
Rounded corners (12-16px), cheerful animations, progress bars, streak counters, celebration confetti
Memrise Style
Space theme, cosmic, immersive, gradient backgrounds, futuristic learning, memory palace, mems
Deep Purple (#2B1055), Cosmic Blue (#1A1A2E), Yellow Gold (#FFD93D), White text, star-like accents
Gradient backgrounds, subtle particle effects, space imagery, glowing buttons, smooth progress animations
Minimalism & Swiss Style
Clean, simple, spacious, functional, white space, high contrast, geometric, sans-serif, grid-based, essential, Swiss typography, asymmetric layout, International Style, Helvetica
Monochromatic, Black & White, Neutral Palette (Beige, Grey), Primary colors as accents
Subtle hover effects, smooth transitions, sharp shadows (if any), clear typography hierarchy, fast loading
Minimalism Dark
Dark, matte, clean, spacious, focus, sophisticated, sharp, precision, distraction-free
Matte Black (#121212), Dark Grey (#1E1E1E), Dim White text (#E0E0E0), Subtle Borders (#333)
Zero shadows, 1px borders, subtle hover highlights, clean typography, high legibility
Neumorphism
Soft UI, embossed, debossed, convex, concave, light source, subtle depth, rounded corners, monochromatic
Light pastel colors, soft gradients, low-contrast colors, dominant single color with light/dark variations
Soft box-shadows (multiple layers), smooth press/release animation, subtle inner shadow, no hard lines
Neumorphism Dark
Soft UI, dark mode, convex, concave, low light, extruded, sleek, stealthy, matte finish
Dark Grey Background (#2a2a2a), Shadow Black (#1e1e1e), Highlight Grey (#363636), Accent Cyan/Orange
Double shadows (dark/light), subtle gradients, soft edges, pressed state simulation, minimal contrast
Glassmorphism
Frosted glass, transparent, blurred background, layered, vibrant background, light source, depth
Translucent colors, vibrant background colors (blue, purple, pink), white/light text
Background blur (backdrop-filter), subtle border, light source reflection, layered Z-index structure
Dark Glass
Dark frost, mysterious, smoke glass, premium, luxury, depth, blurred
Deep Midnight Blue/Purple backgrounds, Semi-transparent Black layers, White/Silver text
Dark backdrop-filter, white subtle borders (0.1 opacity), glowing text contrast
BRUTALISM
Raw, unpolished, stark, high contrast, plain text, default fonts, visible borders, unstyled links, asymmetric
Primary colors (Red, Blue, Yellow), Black & White, Neon accents, limited palette
No smooth transitions, sharp corners, bold typography, visible grid lines, large block elements, intentional "broken" look
Dracula / IDE Theme
Developer friendly, syntax highlighting, vampire theme, high contrast, coding aesthetic, monospace
Background (#282a36), Current Line (#44475a), Pink (#ff79c6), Purple (#bd93f9), Cyan (#8be9fd), Green (#50fa7b)
Vibrant text on dark backgrounds, neon borders, rounded tags, monospace font family (Fira Code, JetBrains Mono)
Solarpunk
Nature-tech, sustainable, organic, art nouveau, bright, sunny, plants, glass, gold, optimistic
Leaf Green (#7CB342), Sunlight Gold (#FDB813), Sky Blue (#81D4FA), Earthy Brown (#795548), Cream White
Stained glass overlays, flowing curves, intricate plant patterns, warm lighting, natural textures
Cyberpunk
Futuristic, dystopian, tech-noir, hacker aesthetic, glitch art, digital decay, high-tech low-life
Neon cyan, magenta, electric yellow, deep black, chrome silver, warning red, matrix green
Glitch effects, chromatic aberration, noise overlay, HUD elements, terminal fonts, data streams
Bauhaus
Geometric, functional, primary colors, sharp angles, circles, squares, triangles, abstract
Bauhaus Blue (#0055A4), Red (#EF3340), Yellow (#FFD700), Black, White
Clean grids, diagonal typography, geometric masks, bold asymmetry, absence of decoration
Memphis Design
80s revival, geometric shapes, bold patterns, playful, postmodern, eclectic, anti-minimalist
Bright primaries, pastels, clashing combinations, yellow, pink, teal, red, black outlines
Terrazzo patterns, squiggles, dots, zigzags, scattered geometric shapes, bold outlines
Soft Pastel
Cute, calming, baby-friendly, soft, feminine, sweet, candy-like, gentle
Baby Blue (#AEC6CF), Millennial Pink (#FFB7B2), Mint Green (#B2F7EF), Lavender (#E6E6FA), Cream
Rounded corners (large), soft drop shadows, white overlays, fluffy typography, doodle icons
Dark Mode OLED
Dark theme, low light, high contrast, deep black, midnight blue, eye-friendly, OLED
Deep black (#000000), dark grey (#121212), vibrant accent colors (Neon Green, Electric Blue, Gold) for highlights
Minimal glow effects, smooth dark-to-light transitions, reduced white light emission, focus on readability
3D & Hyperrealism
Depth, realistic textures, 3D models, spatial navigation, tactile, skeuomorphic elements, rich detail
Rich, deep colors, metallic, glossy, matte textures, complex gradients
Interactive 3D elements (WebGL/Three.js), complex shadows, realistic lighting, physics-based motion, parallax scrolling
Vibrant Blocks
Bold, energetic, playful, block layout, geometric shapes, high color contrast, duotone, modern
Complementary colors, triadic schemes, vibrant contrasts (e.g., Neon Green on Dark Blue), bright pastels
Large, distinct sections, animated background patterns, bold hover states, smooth scroll-snap, large typography
Accessible & Ethical
High contrast, large text, keyboard navigation, screen reader friendly, WCAG compliant, focus state, clear feedback
WCAG AA/AAA compliant color combinations, high luminosity contrast ratio, simple palette
Clear focus rings, ARIA attributes, skip links, responsive design, reduced motion option
Claymorphism
Soft 3D, chunky, playful, toy-like, bubbly, thick borders, double shadows, rounded edges
Pastel colors, soft gradients, light background, dominant color with light/dark variations
Inner and outer shadows (subtle), soft press/release animation, large, fluffy elements, no hard lines
Aurora UI
Vibrant gradients, smooth blend, Northern Lights effect, mesh gradient, luminous, atmospheric, abstract background
Complementary colors, vibrant colors (Blue, Purple, Pink, Teal), smooth color transitions
Large, flowing background gradients (CSS/SVG), subtle animation of the gradient, depth effect via color layering
Retro-Futurism
Vintage sci-fi, 80s aesthetic, neon glow, geometric patterns, CRT scanlines, pixel art, cyberpunk, vaporwave
Neon colors (Electric Blue, Hot Pink, Cyan), deep black background, metallic silver/gold accents, duotone
CRT screen effect (scanlines, distortion), neon glow text/borders, glitch effects, animated geometric patterns, monospace fonts
Gradient Mesh
Mesh gradients, organic shapes, fluid blobs, smooth transitions, abstract, modern, soft edges
Multi-color gradients, warm to cool transitions, pastel blends, soft harmonious palettes
CSS mesh gradients, SVG blob shapes, smooth color bleeding, subtle grain texture, depth illusion
Monochrome
Single color, tonal variations, shades and tints, sophisticated, elegant, unified, cohesive
Single hue with varying saturation/lightness, pure black to white gradations, accent via intensity
Subtle depth via shade variations, clean lines, refined typography, elegant hover states, minimal distractions
Paper & Ink
Handwritten, natural texture, organic, warm, nostalgic, sketch-like, traditional, tactile
Off-white, cream, sepia, ink black, muted earth tones, aged paper yellows
Paper grain texture, subtle shadows, handwritten fonts, ink splatters, torn edges, watercolor washes
Neon Glow
Neon lights, glowing effects, nightlife, electric, vibrant, futuristic, club aesthetic, LED
Neon pink, electric blue, lime green, hot magenta, cyan, on dark/black backgrounds
Text-shadow glow, box-shadow glow, pulsing animations, flickering effect, bloom, HDR-like contrast
Isometric 3D
Isometric perspective, 3D blocks, geometric shapes, technical, architectural, precise angles, flat 3D
Flat colors with shadows, pastel or vibrant palettes, consistent shading direction, complementary accent colors
CSS transforms for 3D effect, consistent 30° angle, layered shadows, pseudo-3D depth, clean vector style
Skeuomorphism
Realistic, tactile, physical metaphors, leather texture, wood grain, metal, stitching, embossing
Natural materials colors, leather browns, wood tones, metallic grays, rich textures
Realistic shadows, bevels, embossing, texture overlays, glossy reflections, physical button states
Flat Design 2.0
Flat, no gradients, simple icons, bold colors, clean typography, minimal shadows, Material-inspired
Solid bright colors, limited palette (3-5 colors), high saturation, white or light backgrounds
Subtle drop shadows, simple hover states, smooth micro-animations, card-based layouts, elevation
Gradient Duotone
Two-tone, gradient overlay, bold contrast, modern, trendy, Spotify-style, image filters
Two complementary colors, purple-orange, blue-pink, teal-coral, high contrast pairs
Gradient overlays on images, mix-blend-mode, color filter effects, bold text on gradients
Material Design 3
Google Material, elevation, motion, adaptive, dynamic color, rounded corners, tactile surfaces
Dynamic color palettes, tonal palettes, primary/secondary/tertiary, surface colors, on-colors
Elevation shadows (5 levels), ripple effects, state layers, smooth easing curves, FAB buttons
Nordic / Scandinavian
Hygge, cozy, natural, functional, light, airy, organic shapes, warm minimalism, nature-inspired
Soft whites, warm grays, muted pastels, natural wood tones, sage green, dusty blue, cream
Soft shadows, gentle gradients, natural textures, rounded organic shapes, plenty of whitespace
Japanese Zen
Wabi-sabi, zen, ma (negative space), asymmetry, imperfection, nature, tranquility, balance
Neutral earth tones, ink black, rice paper white, bamboo green, sakura pink, muted indigo
Subtle textures, ink wash effects, organic shapes, delicate typography, gentle transitions
Cách Sử Dụng
- Chọn style phù hợp
- Bấm Copy để copy thông tin
- Dán vào prompt khi yêu cầu AI tạo template
Prompt Template
<role>
Bạn là Chuyên gia Thiết kế Front-End (HTML/CSS) và Tối ưu hóa Anki Template. Bạn có khả năng phân tích ngôn ngữ thiết kế và chuyển đổi chính xác sang code sạch, nhẹ, responsive.
</role>
<context>
Người dùng cần một Anki Note Type mới dựa trên một phong cách (style) hình ảnh hoặc mô tả cụ thể. Template cần hoạt động mượt mà trên cả ứng dụng Anki Desktop và AnkiMobile/AnkiDroid.
</context>
<input_data>
**Style Reference**: [DÁN MÔ TẢ STYLE HOẶC CODE MẪU CỦA BẠN TẠI ĐÂY]
**Subject**: [Ngôn ngữ / Y học / Lập trình...]
**Card Type**: [Basic / Cloze / Type Answer...]
**Fields**: {{Front}}, {{Back}}
</input_data>
<constraints>
1. Sử dụng Modern CSS (Flexbox/Grid) để đảm bảo Responsive Design.
2. Code phải tách biệt rõ ràng: Front Template, Back Template, và Styling (CSS).
3. Đảm bảo font chữ dễ đọc, màu sắc tương phản tốt theo style đã cung cấp.
4. KHÔNG sử dụng Javascript phức tạp trừ khi cần thiết cho hiệu ứng động.
</constraints>
<task>
Hãy phân tích <input_data> và thực hiện theo quy trình tư duy từng bước:
1. Phân tích Style Reference (màu sắc, bố cục, font).
2. Viết code HTML cho mặt trước (Front) và mặt sau (Back).
3. Viết CSS tối ưu cho giao diện Mobile và Desktop.
4. Kiểm tra lại tính tương thích của các thẻ Anki ({{...}}).
</task>
<output_format>
Trả về kết quả dưới dạng 3 block code riêng biệt:
1. **Front Template** (HTML)
2. **Back Template** (HTML)
3. **Styling** (CSS)
</output_format>🎨 Tùy Chọn Màu Sắc
ColorHunt - Bộ sưu tập bảng màu
Nếu bạn muốn tùy chọn màu sắc riêng, hãy sử dụng ColorHunt.co để chọn bảng màu phù hợp.
Ví dụ cách sử dụng trong prompt:
Colors: Sử dụng bảng màu từ ColorHunt #264653, #2a9d8f, #e9c46a, #f4a261Gợi Ý Nhanh
| Mục đích | Style gợi ý | Lý do |
|---|---|---|
| Card đơn giản, dễ đọc | Minimalism | Load nhanh, ít distraction |
| Học ban đêm | Dark Mode OLED | Tiết kiệm pin, bảo vệ mắt |
| Card sang trọng, hiện đại | Glassmorphism | Hiệu ứng đẹp, chuyên nghiệp |
| Hỗ trợ người khiếm thị | Accessible | WCAG compliant, contrast cao |
| Card tiếng Nhật/Hàn | Minimalism + Dark Mode | Font Á Đông rõ ràng hơn |
| Card Y học/Giải phẫu | 3D Hyperrealism | Hình ảnh realistic, chi tiết |
| Card cho trẻ em | Claymorphism + Vibrant | Vui nhộn, màu sắc bắt mắt |
| Card STEM/Công nghệ | Retro-Futurism | Tech vibe, cyberpunk cool |
| Card lập trình/Code | Dark Mode + Brutalism | Giống IDE, monospace font |
| Card Mindfulness/Yoga | Aurora UI + Neumorphism | Thư giãn, nhẹ nhàng |
| Card Geography/Travel | Vibrant + Aurora | Màu sắc tươi sáng, sinh động |
| Card Art/Design | Glassmorphism + Brutalism | Creative, độc đáo |
| Card Finance/Business | Minimalism + Dark Mode | Chuyên nghiệp, nghiêm túc |
| Card nhạc cổ điển | Neumorphism | Thanh lịch, tinh tế |
| Card game/esports | Retro-Futurism + Vibrant | Gaming aesthetic, neon glow |
💡 Tip: Bắt đầu với Minimalism — load nhanh, dễ đọc.