AI Prompt Studio - Thư viện Prompt thông minh

# Bang & Olufsen — Style Reference > Scandinavian gallery trên nền sứ. Khi một trang B&O chuyển tối, sản phẩm được chiếu sáng như một tác phẩm điêu khắc trong hốc tường lúc nửa đêm; khi chuyển sáng, sản phẩm nổi trên lụa trắng, không có gì khác cạnh tranh sự chú ý. **Theme:** light Bang & Olufsen vận hành theo logic gallery-museum: những canvas sứ trắng gần như tinh khiết với sản phẩm nổi lên như các vật thể điêu khắc, bị ngắt quãng bởi những khoang màu full-bleed hiếm hoi — một màu tím ultramarine đậm nuốt chửng màn hình, thỉnh thoảng là một khoảnh khắc đỏ terracotta bão hòa — để tạo điểm nhấn cảm xúc. Typography là một neo-grotesque tùy chỉnh duy nhất (BeoSupreme) làm tất cả công việc kể chuyện: siêu khít ở kích thước display, uppercase với tracking rộng ở micro-labels, không cần typeface nào khác. Các component được tước bỏ đến tận xương: ghost controls hình pill, đường viền mảnh như sợi tóc, không bóng trang trí, không gradient button, không icon cầu kỳ. Grid rộng rãi, negative space là sự xa hoa. Mỗi sản phẩm có bệ đỡ nổi riêng; khoảng trắng xung quanh chính là căn phòng. Màu sắc được phân bổ như một vật liệu quý — khi xuất hiện, nó chiếm toàn bộ khung hình. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Porcelain Canvas | `#ffffff` | `--color-porcelain-canvas` | Nền trang, bề mặt product card, navigation bar — nền chủ đạo mà mọi sản phẩm nổi lên trên đó | | Bone | `#fcfaee` | `--color-bone` | Bề mặt phụ cho các khối ấm trung tính, chữ trên nền tối, canvas thay thế khi màu trắng có vẻ vô trùng | | Obsidian | `#191817` | `--color-obsidian` | Văn bản chính và thân sản phẩm — màu gần đen ấm, đọc mềm hơn #000000 thuần trên nền trắng | | Pure Ink | `#000000` | `--color-pure-ink` | Đường nét icon, micro-labels, đường viền mảnh, và những khoảnh khắc tương phản văn bản mạnh nhất |

# Raw Materials — Style Reference > brutalist editorial trên nền kem ấm **Theme:** light Raw Materials vận hành như một hệ thống typographic maximalist: một canvas kem ấm mang display type thường xuyên vượt quá 200px, với mọi phần tử bề mặt chính đều có màu sắc riêng biệt. Hệ thống từ bỏ một màu thương hiệu duy nhất để chọn bảy màu đánh dấu section (cam, tím, mực, xanh coban, đỏ thẫm, vàng, xanh lá) — những màu này gắn nhãn cho cả navigation lẫn content blocks, tạo nhịp điệu giống tạp chí zine, nơi màu sắc cho bạn biết mình đang ở chapter nào. Các bề mặt phẳng và bo tròn 16px — không shadow, không gradient, không elevation. Typography đảm nhận toàn bộ công việc phân cấp, nhảy từ caption 12px lên display headline 259px với bốn custom typefaces, tất cả đều dùng stylistic alternate "ss02". ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Ember Orange | `#ff3d00` | `--color-ember-orange` | Accent màu cam hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp | | Pulse Violet | `#5900cc` | `--color-pulse-violet` | Accent màu tím hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp | | Cobalt Blue | `#2835f8` | `--color-cobalt-blue` | Accent màu xanh hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp | | Crimson | `#ff003d` | `--color-crimson` | Accent màu đỏ hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp |

# Tech Barcelona — Style Reference > Editorial tech manifesto trên nền marble trắng **Theme:** mixed Tech Barcelona vận hành bằng ngôn ngữ typography-first: một font neo-grotesque độc quyền (FavoritPro) với weight 400 cực nhẹ chi phối toàn bộ giao diện, để scale và khoảng trắng đảm nhận vai trò cấu trúc thay vì độ tương phản weight. Canvas chủ yếu là trắng và tĩnh lặng, với một màu cobalt xanh lam đậm (#0075ff) duy nhất dành riêng cho hành động — nó xuất hiện một lần dưới dạng button filled trong nav và không trang trí ở nơi nào khác. Màu gần đen #090707 dùng cho headline và nội dung hình ảnh, tạo độ tương phản mạnh với bề mặt trắng. Hero band đảo ngược mối quan hệ này: canvas đen, type trắng, logo hình học cỡ lớn. Các component phẳng và tối giản — hairline borders, không shadow, không gradient — để nhiếp ảnh và type tỷ lệ lớn gánh vác trọng lượng thị giác. Nhịp điệu tổng thể mang phong cách editorial: khoảng trắng dọc rộng rãi, display size cỡ lớn lên đến 80px, letter-spacing chặt kéo các headline lớn thành những khối đậm đặc, tự tin. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|---------| | Cobalt Action | `#0075ff` | `--color-cobalt-action` | Primary CTA buttons, điểm nhấn màu duy nhất trong toàn bộ giao diện — một xanh lam rực rỡ trên nền trung tính đơn sắc, dùng có chừng mực để báo hiệu hành động mà không cạnh tranh với nội dung | | Ink Black | `#090707` | `--color-ink-black` | Màu headline, border ảnh, display text cỡ lớn — gần đen với chút ấm nhẹ, chọn thay vì đen thuần để tạo cảm giác in ấn thay vì kỹ thuật số | | Graphite | `#212529` | `--color-graphite` | Body text, nav links, icon strokes, card borders — màu trung tính làm việc cho interface chrome và đoạn văn bản dễ đọc | | Pure White | `#ffffff` | `--color-pure-white` | Page canvas, bề mặt card, text trên hero tối và nền logo tối — thiết lập nền light-mode và tất cả bề mặt nội dung |

# HoneyBook — Style Reference > creative studio ngập nắng trên nền kem ấm — một marquee vàng tươi mở ra những mảng workspace trắng và những con dấu pill tối màu. **Theme:** light HoneyBook sử dụng ngôn ngữ sunlit-creative-studio: hero vàng tươi bão hòa, text xanh navy đậm ấm áp, và bề mặt sản phẩm trắng. Hệ thống thị giác được xây dựng trên sự căng thẳng giữa giọng display serif (STK Bureau Serif) và một sans geometric đầy tự tin (STK Bureau Sans), với một mặt chữ eyebrow all-caps nhỏ xíu (STK Gerhard) thì thầm 'editorial' phía trên các section header. Các nút là pill tuyệt đối — bo tròn hoàn toàn, màu navy đậm, không đổ bóng — khiến mỗi hành động như một con dấu vật lý đóng lên trang giấy. Các bề mặt vẫn yên tĩnh và trắng bên dưới fold; màu vàng xuất hiện như một khối màu có chủ đích cho các khoảnh khắc hero/marquee thay vì trang trí rải rác, tạo ra nhịp điệu entry-and-rest dễ nhận biết trên các trang dài. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Honey Yellow | `#fffa77` | `--color-honey-yellow` | Yellow wash cho highlight backgrounds, decorative bands, và soft emphasis phía sau nội dung. | | Marigold | `#fffa56` | `--color-marigold` | Accent fills trên card, headline underline strokes, icon highlights, secondary callouts — phiên bản hơi mạnh hơn của Honey Yellow cho những khoảnh khắc cần nổi bật trên nền trắng | | Inkwell | `#142127` | `--color-inkwell` | Dark borders và separators cho elevated surfaces và inverted UI. Không dùng làm màu CTA chính | | Carbon | `#131416` | `--color-carbon` | Body text và high-contrast borders trên light surfaces, alt dark fill cho emphasis blocks |

# Adora — Style Reference > impressionist museum behind frosted glass **Theme:** light Adora wraps a precise product-analytics interface inside an impressionist gallery — white cards and crisp dashboards sit on canvas-like backgrounds of swirling oil-paint color, with hand-drawn squiggle underlines giving headings a notebook-becoming-poster feel. The color story is white-surface discipline broken by a single vivid violet for action and a palette of pastel accents (sky blue, lime, bubblegum pink, hot magenta) that are used as small confetti, not washes. Shapes are confidently rounded: cards and the product frame are very generous (40-64px), badges and the floating nav pill are stadium-rounded, buttons are gently rounded (8-12px). Typography pairs a custom display face (PolySans) at heavy weights for headlines against Plus Jakarta Sans at 400-500 for UI, with universal -0.02em tracking pulling the whole system tight and contemporary. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Electric Violet | `#592eff` | `--color-electric-violet` | Primary action background, filled CTA buttons, active link borders, selected badge strokes — the single saturated chromatic that drives every conversion and active state | | Midnight Plum | `#21164c` | `--color-midnight-plum` | Headline text color, display-weight typography — deep violet-ink that reads as near-black but carries a violet undertone matching the primary | | Obsidian Charcoal | `#353241` | `--color-obsidian-charcoal` | Body text, paragraph copy, list items, icon strokes, default borders and dividers — the workhorse neutral that defines almost all interface line work | | Slate Smoke | `#5f5f69` | `--color-slate-smoke` | Secondary body text, muted helper copy, supporting metadata |

# Super — Style Reference > Sunlit paper desk with one amber marker **Theme:** mixed Super runs on a near-monochrome warm-neutral canvas that borrows the tactile grammar of a notebook — cream paper backgrounds, charcoal ink text, hairline dividers — and punctuates it with a single saturated amber that acts as the page's only chromatic accent. The result reads like a well-typeset document that has been wired to one working button: quiet, considered, and immediately legible about where to click. Typography is custom (Beausite) set tight at display sizes and confident at body sizes, giving the page editorial weight without heaviness. Components are lightweight — soft white cards sitting on cream, no decorative gradients, minimal elevation, ghost nav links, and a bold amber filled button as the sole loud element on most screens. The visual system extends Notion's own canvas palette (#f9f9f8, #37352f) and adds a sunlit warm accent to distinguish the brand from its parent tool. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Amber Pulse | `#ffbe3c` | `--color-amber-pulse` | Yellow supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color | | Cream Paper | `#f9f9f8` | `--color-cream-paper` | Page background and outer canvas. Borrowed from Notion's own workspace palette to position Super as its native publishing layer | | White Card | `#ffffff` | `--color-white-card` | Card and elevated surface that sits on Cream Paper. Provides subtle separation through brightness contrast rather than shadow | | Ink Charcoal | `#262a2e` | `--color-ink-charcoal` | Primary text, dominant foreground color, nav elements, and high-emphasis UI. The workhorse neutral of the entire system |

# Opennote — Style Reference > cuốn sổ da ấm áp trên trang giấy ngập nắng — giao diện mang cảm giác đóng thủ công, không phải gia công máy **Theme:** light Opennote nói bằng giọng của một cuốn sổ tay được yêu thích: giấy kem ấm, serif headlines mang cảm giác sắp chữ thủ công, và CTA màu nâu đen đọc như bìa da chứ không phải nút SaaS. Bảng màu gần như hoàn toàn achromatic — canvas màu ngà, mực than, đường kẻ graphite mảnh — với bốn điểm nhấn màu đậm (nâu đen, mực tím, rừng xanh, đỏ sẫm) được dùng tiết kiệm như ghi chú lề, không bao giờ làm màu nền. Chrome tối giản: border-radius 10px, một tông viền duy nhất, gần như không có shadow. Whitespace dẫn dắt bố cục, được ngắt quãng bằng các hình minh họa nét vẽ tay trôi nổi như những hình vẽ nguệch ngoạc bên lề. Kết quả là một sản phẩm trông như được thiết kế trong một studio với ánh sáng tự nhiên đẹp, chứ không phải một dashboard được tối ưu trong một sprint. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Ivory Page | `#fffdf8` | `--color-ivory-page` | Canvas chính, nền trang, bề mặt card. Màu trắng ngà ấm đọc như giấy, không phải màn hình | | Ink Charcoal | `#0a0a0a` | `--color-ink-charcoal` | Text chính, nét icon, body copy. Gần đen nhưng pha chút ấm khi đặt trên canvas màu ngà | | Pressed Black | `#000000` | `--color-pressed-black` | Màu tô illustration, SVG marks, chi tiết mực mảnh. Đen tuyền dành riêng cho lớp đồ họa vẽ tay | | Graphite Rule | `#e5e5e5` | `--color-graphite-rule` | Viền mảnh, divider, đường viền card, khung ảnh. Màu trung tính cấu trúc chủ đạo — mọi đường mảnh trên trang đều được vẽ bằng màu này |

# Doug–Alves — Style Reference > Oversized typographic monolith on warm charcoal **Theme:** mixed Doug Alves' portfolio treats every viewport like a gallery wall: one massive piece of typographic art dominates the dark hero, then the site steps down into compact, editorial information grids. The palette is ruthlessly achromatic — warm espresso black, bone white, and graphite — with no chromatic accent anywhere; all visual energy comes from type scale and contrast. Headlines run to 197px at weight 300 with aggressive negative tracking, while body copy stays at 16-18px, creating a 10:1 size ratio that makes the whole site feel like a single oversized poster surrounded by fine-print specifications. Layout is full-bleed with sections switching between warm-dark and white, and information always arranges into crisp multi-column grids separated by hairline graphite rules. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Espresso | `#1d1610` | `--color-espresso` | Hero and dark section background — warm-tinted near-black reads as architectural, not as raw #000, giving the oversized display type a gallery-wall feel | | Graphite | `#282828` | `--color-graphite` | Primary body text, structural borders, section dividers — the workhorse neutral that draws the hairline rules and most interface lines | | Slate | `#333333` | `--color-slate` | Secondary body and heading text — slightly lighter than Graphite, used for headings and emphasized body copy where Graphite is reserved for borders | | Obsidian | `#000000` | `--color-obsidian` | Display headings on light sections and pure-black accents — used sparingly for maximum impact on the white About and Latest sections |

# NGLORA — Style Reference > NGLORA — Formulary của Apothecary. Một không gian được tổ chức tỉ mỉ, nơi typography và ảnh sản phẩm được xử lý với độ chính xác khoa học. **Theme:** light Thiết kế gợi lên một formulary apothecary học thuật, nơi mọi yếu tố đều được trình bày với độ chính xác tỉ mỉ. Nó vận hành trên một bảng màu hạn chế rõ rệt gồm kem ấm và than chì, tạo ra một môi trường tương phản cao, ưu tiên chữ. Bố cục kiến trúc cứng nhắc với góc 0px sắc nét chiếm ưu thế, củng cố cảm giác trật tự và chất lượng lâm sàng. Điểm nhấn của hệ thống là sự căng thẳng typographic giữa serif nhân văn 'Zapf-Humanist' cho headline biểu cảm và sans-serif trung tính 'SuisseIntl' cho toàn bộ văn bản chức năng, mang lại vẻ cổ điển cho giao diện kỹ thuật số hiện đại. ## Tokens — Màu sắc | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Parchment | `#fffef2` | `--color-parchment` | Nền trang chính, bề mặt sáng. | | Charcoal | `#333333` | `--color-charcoal` | Văn bản chính, icon UI, nút chính, đường viền. | | Ink Black | `#000000` | `--color-ink-black` | Văn bản hero section, yếu tố văn bản có độ nhấn mạnh cao. | | Carbon | `#252525` | `--color-carbon` | Nền footer, bề mặt tối phụ. |

# Mailchimp — Style Reference > Vintage press meets electric yellow — an editorial print house with one neon switch. **Theme:** light Mailchimp's visual language feels like a vintage newspaper printing house that discovered electric color — warm near-black (#231e15) dominates nearly every surface and typographic element, while a single voltage-yellow (#ffe01b) CTA button commands every page. The type system splits between Graphik Web (a geometric sans at tight -0.013em tracking) for all body/UI text and Means Web (a display serif-adjacent face at -0.021em) for headlines — a newspaper/magazine editorial duality that's rare in SaaS. Cards are flatly borderless or carry a soft warm shadow (rgba(35,30,21,0.15)), never the blue-tinted floating shadows common to other platforms. Section backgrounds alternate between #ffffff, #f5f5f5, the warm cream #ebe1cd, and near-black #231e15, creating a banded editorial rhythm. The pill CTA (26px radius, yellow fill, dark stroke, dark text) is the one rounded form in a system that otherwise uses 3px or zero radius everywhere. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Press Black | `#231e15` | `--color-press-black` | Primary text, headings, button borders, backgrounds of dark sections — the near-black with a warm brown undertone that prevents harshness and reads as ink rather than void | | Voltage Yellow | `#ffe01b` | `--color-voltage-yellow` | Primary CTA buttons and nav 'Iniciar gratis' — one saturated hit of color on an otherwise near-monochrome page; impossible to miss without competing for dominance | | Teal Ink | `#004e56` | `--color-teal-ink` | Links, icon fills, image accents — muted teal provides navigational contrast against warm-neutral backgrounds without reading as a generic blue | | Warm Parchment | `#ebe1cd` | `--color-warm-parchment` | Section backgrounds for GDPR and feature callout bands — warm cream that reads as aged newsprint, warmer than gray |

# Yellowbird® — Style Reference > Tấm biển quảng cáo sốt cà chua kiểu retro dưới nắng trưa — một mặt phẳng vàng dưới mặt trời đen, từng chữ được vẽ bằng bút dạ đậm. Hệ thống thở qua tương phản màu sắc, không phải độ cao: vàng trên vàng được phân cách bởi các nét đen dày, với thẻ kem là điểm nghỉ trung tính duy nhất. **Theme:** light Yellowbird là một thế giới hai màu, dung lượng cao: một màu vàng tươi tràn ngập mọi section trong khi màu đen làm toàn bộ công việc cấu trúc và typography. Trang web mang phong cách như một tấm biển quảng cáo sốt vẽ tay — bề mặt phẳng, đường viền hairline dày thay vì đổ bóng, khoảng thở rộng rãi, và một custom display face chunky biến wordmark thành hero. Không có gradient depth, không glassmorphism, không xếp lớp card chồng card; sự phân cách không gian đến từ việc đổi màu (dải vàng → thẻ kem → nút đen) và padding rộng rãi. Interactive elements giữ ở mức tối thiểu và tự tin: hầu hết các bề mặt không có border trên nền vàng canvas, product cards dùng radius 30px và solid black stroke, và CTA thực sự duy nhất là nút pill đen đậm với chữ trắng. Màu xanh (#007aff) chỉ xuất hiện dưới dạng ghost-button border cho các hành động phụ, khiến nó có cảm giác như mượn tạm chứ không phải của riêng thương hiệu. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |-----|---------|-------|---------| | Sunglow | `#ffe845` | `--color-sunglow` | Brand canvas — nền chủ đạo cho tất cả các section, hero, footer, và announcement bar; cũng dùng cho product category tags và sticker burst shapes | | Sauce Bottle Black | `#000000` | `--color-sauce-bottle-black` | Text chính, tất cả border và hairline, product card strokes, mascot linework, và nền của primary action button dạng filled — làm toàn bộ công việc cấu trúc và typography nặng nhọc |

Khi viết HTML/CSS, tuân thủ các quy tắc sau: **HTML:** - Sử dụng semantic tags: header, nav, main, section, article, footer - Indent 2 spaces - Attributes theo thứ tự: id, class, data-*, src/href, alt/title - Luôn có alt cho images **CSS:** - Mobile-first approach - Sử dụng CSS variables cho colors, fonts - BEM naming convention khi phù hợp - Flexbox/Grid cho layout - Tránh !important

Một landing page hiệu quả cần có các section sau: 1. **Hero Section**: - Headline hấp dẫn - Subheadline mô tả ngắn gọn - CTA button nổi bật - Hình ảnh/video minh họa 2. **Features/Benefits**: - 3-6 tính năng chính - Icon + tiêu đề + mô tả ngắn 3. **Social Proof**: - Testimonials từ khách hàng - Logos đối tác/khách hàng

Hệ thống App Editor có cấu trúc file như sau: - **index.html**: File HTML chính, chứa cấu trúc trang - **styles.css**: File CSS cho styling - **script.js**: File JavaScript cho logic - **assets/**: Thư mục chứa hình ảnh, fonts, icons Khi chỉnh sửa: - Giữ nguyên cấu trúc file hiện có - Không tạo file mới trừ khi được yêu cầu - Đảm bảo các đường dẫn tương đối chính xác

Bạn là một chuyên gia thiết kế web. Khi tạo hoặc chỉnh sửa code, hãy tuân thủ các nguyên tắc sau: 1. **Responsive Design**: Luôn đảm bảo website hiển thị tốt trên mọi thiết bị (mobile, tablet, desktop) 2. **Clean Code**: Viết code sạch, dễ đọc, có comment khi cần thiết 3. **SEO Friendly**: Sử dụng semantic HTML, meta tags phù hợp 4. **Performance**: Tối ưu hóa hình ảnh, minify CSS/JS khi có thể 5. **Accessibility**: Đảm bảo website có thể truy cập được với mọi người dùng Khi được yêu cầu tạo hoặc sửa code, hãy trả về code hoàn chỉnh, có thể chạy ngay.