数据密集仪表盘
Data-Dense Dashboard
BI 分析
活跃
Business intelligence dashboards, financial analytics, enterprise reporting, operational dashboards, data warehousing
请以「Data-Dense Dashboard」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #F5F5F5 / 辅色 #333333 / 强调 #f5f5f5
- 底 #0D0F16 / 正文 #EEF1F7 / 弱文 rgba(238,241,247,.68) / 卡面 #161923
- 圆角 10px / 按钮圆角 8px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a data-dense dashboard. Use: multiple chart widgets, KPI cards row, data tables with sorting, minimal padding (8-12px), efficient grid layout, filter sidebar, dense but readable typography, maximum information density.
- Primary Colors: Neutral primary (light grey/white #F5F5F5), data colors (blue/green/red), dark text #333333
- Effects & Animation: Hover tooltips, chart zoom on click, row highlighting on hover, smooth filter animations, data loading spinners
- CSS/Technical Keywords: display: grid, grid-template-columns: repeat(12, 1fr), gap: 8px, padding: 12px, font-size: 12-14px, overflow: auto for tables, compact card design, sticky headers
- Implementation Checklist: ☐ Grid layout 12 columns, ☐ KPI cards responsive, ☐ Tables sortable, ☐ Filters functional, ☐ Loading states for data, ☐ Export functionality
▍动效（只此一次，别加第二处）：
- 图表条形一次生长
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
3D 超写实
3D & Hyperrealism
通用
活跃
Gaming, product showcase, immersive experiences, high-end e-commerce, architectural viz, VR/AR
请以「3D & Hyperrealism」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #001F3F / 辅色 #228B22 / 强调 #800020
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 16px / 按钮圆角 12px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Build an immersive 3D interface using realistic textures, 3D models (Three.js/Babylon.js), complex shadows, realistic lighting, parallax scrolling (3-5 layers), physics-based motion. Include skeuomorphic elements with tactile detail.
- Primary Colors: Deep Navy #001F3F, Forest Green #228B22, Burgundy #800020, Gold #FFD700, Silver #C0C0C0
- Effects & Animation: WebGL/Three.js 3D, realistic shadows (layers), physics lighting, parallax (3-5 layers), smooth 3D (300-400ms)
- CSS/Technical Keywords: transform: translate3d, perspective: 1000px, WebGL canvas, Three.js/Babylon.js library, box-shadow: complex multi-layer, background: complex gradients, filter: drop-shadow()
- Implementation Checklist: ☐ WebGL/Three.js integrated, ☐ 3D models loaded, ☐ Parallax 3-5 layers, ☐ Realistic lighting verified, ☐ Complex shadows rendered, ☐ Physics animation smooth 300-400ms
▍动效（只此一次，别加第二处）：
- 层叠阴影一次落定
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
3D 产品预览
3D Product Preview
通用
活跃
E-commerce, furniture, fashion, automotive, electronics, jewelry, product configurators
请以「3D Product Preview」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #E8E8E8 / 辅色 #FFFFFF / 强调 #e8e8e8
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 16px / 按钮圆角 12px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a 3D product preview interface. Use: 360° rotation, drag-to-spin, pinch-to-zoom, AR preview button, material/color switcher, hotspot annotations, orbit controls, product configurator, smooth rendering.
- Primary Colors: Product-dependent, neutral backgrounds: Soft Grey #E8E8E8, Pure White #FFFFFF
- Effects & Animation: Drag-to-rotate, pinch-to-zoom, spin animation, AR placement, material switching, smooth orbit controls
- CSS/Technical Keywords: Three.js or model-viewer, OrbitControls, touch events for rotation, WebXR for AR, canvas with WebGL, loading placeholder, LOD for performance, environment lighting
- Implementation Checklist: ☐ 3D model loads fast, ☐ Rotation smooth, ☐ Zoom works (pinch/scroll), ☐ AR button functional, ☐ Colors switchable, ☐ Mobile touch works
▍动效（只此一次，别加第二处）：
- 层叠阴影一次落定
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
AI 原生界面
AI-Native UI
通用
活跃
AI products, chatbots, voice assistants, copilots, AI-powered tools, conversational interfaces
请以「AI-Native UI」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #6366F1 / 辅色 #10B981 / 强调 #F5F5F5
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 14px / 按钮圆角 10px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design an AI-native interface. Use: minimal chrome, conversational layout, streaming text area, typing indicators (3-dot pulse), context cards, subtle AI accent color (#6366F1), clean input field, response bubbles.
- Primary Colors: Neutral + single accent, #6366F1 (AI Purple), #10B981 (Success), #F5F5F5 (Background)
- Effects & Animation: Typing indicators (3-dot pulse), streaming text animations, pulse animations, context cards, smooth reveals
- CSS/Technical Keywords: chat bubble layout (flex-direction: column), typing animation (3 dots pulse), streaming text (overflow: hidden + animation), input: sticky bottom, context cards (border-left accent), minimal borders
- Implementation Checklist: ☐ Chat layout responsive, ☐ Typing indicator smooth, ☐ Input always visible, ☐ Context cards styled, ☐ AI responses distinct, ☐ User messages aligned right
▍动效（只此一次，别加第二处）：
- 一次淡入
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
无障碍 / 伦理设计
Accessible & Ethical
通用
活跃
色板为文字描述，见提示词
Government, healthcare, education, inclusive products, large audience, legal compliance, public
请以「Accessible & Ethical」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #2563EB / 辅色 #6b25eb / 强调 #ebad25
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 6px / 按钮圆角 6px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design toward enhanced accessibility criteria; verify complete-page conformance. Include: high contrast (7:1+), large text (16px+), keyboard navigation, screen reader compatibility, focus states visible (3-4px ring), semantic HTML, ARIA labels, skip links, reduced motion support (prefers-reduced-motion), 44x44px touch targets.
- Primary Colors: Measured high-contrast pairs (4.5:1 normal-text baseline; 7:1 enhanced target), simple primary, clear secondary, high luminosity (7:1+)
- Effects & Animation: Clear focus rings (3-4px), ARIA labels, skip links, responsive design, reduced motion, 44x44px touch targets
- CSS/Technical Keywords: color-contrast: 7:1+, font-size: 16px+, outline: 3-4px on :focus-visible, aria-label, role attributes, @media (prefers-reduced-motion), touch-target: 44x44px, cursor: pointer
- Implementation Checklist: ☐ complete-page conformance tested against the chosen target, ☐ 7:1+ contrast checked, ☐ Keyboard navigation tested, ☐ Screen reader tested, ☐ Focus visible 3-4px, ☐ Semantic HTML used, ☐ Touch targets 44x44px
▍动效（只此一次，别加第二处）：
- 无装饰动效（可访问性优先）
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
反抛光粗粝风
Anti-Polish / Raw Aesthetic
通用
活跃
Creative portfolios, artist sites, indie brands, handmade products, authentic storytelling, editorial
请以「Anti-Polish / Raw Aesthetic」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #FAFAF8 / 辅色 #4A4A4A / 强调 #1A1A1A
- 底 #0D0F16 / 正文 #EEF1F7 / 弱文 rgba(238,241,247,.68) / 卡面 #161923
- 圆角 0px / 按钮圆角 0px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design with anti-polish raw aesthetic. Use: hand-drawn elements, scanned textures, unfinished look, paper/pencil textures, collage style, authentic imperfection, sketch marks, tape/sticker overlays, human touch.
- Primary Colors: Paper White #FAFAF8, Pencil Grey #4A4A4A, Marker Black #1A1A1A, Kraft Brown #C4A77D
- Effects & Animation: No smooth transitions, hand-drawn animations, paper texture overlays, jitter effects, sketch reveal
- CSS/Technical Keywords: background: url(paper-texture.png), filter: grayscale() contrast(), border: hand-drawn SVG, transform: rotate(small random), no smooth transitions, sketch-style fonts, opacity variations
- Implementation Checklist: ☐ Textures loaded, ☐ Hand-drawn elements present, ☐ Imperfections intentional, ☐ Authentic feel achieved, ☐ Performance ok with textures, ☐ Accessibility maintained
▍动效（只此一次，别加第二处）：
- 无任何动效
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
Modern SaaS, creative agencies, branding, music platforms, lifestyle, premium products, hero sections
请以「Aurora UI」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #0080FF / 辅色 #FF1493 / 强调 #00FFFF
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 14px / 按钮圆角 10px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Create a vibrant gradient interface inspired by Northern Lights with mesh gradients, smooth color blends, flowing animations. Use complementary color pairs (blue-orange, purple-yellow), flowing background gradients, subtle continuous animations (8-12s loops), iridescent effects.
- Primary Colors: Complementary: Blue-Orange, Purple-Yellow, Electric Blue #0080FF, Magenta #FF1493, Cyan #00FFFF
- Effects & Animation: Large flowing CSS/SVG gradients, subtle 8-12s animations, depth via color layering, smooth morph
- CSS/Technical Keywords: background: conic-gradient or radial-gradient with multiple stops, animation: @keyframes gradient (8-12s), background-size: 200% 200%, filter: saturate(1.2), blend-mode: screen or multiply
- Implementation Checklist: ☐ Mesh/flowing gradients applied, ☐ 8-12s animation loop, ☐ Complementary colors used, ☐ Smooth color transitions, ☐ Iridescent effect subtle, ☐ Text contrast verified
▍动效（只此一次，别加第二处）：
- 渐变光斑 8-12s 缓慢流动（氛围）
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
便当盒网格
Bento Box Grid
通用
活跃
Dashboards, product pages, portfolios, Apple-style marketing, feature showcases, SaaS
请以「Bento Box Grid」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #FFFFFF / 辅色 #F5F5F5 / 强调 #ffffff
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 24px / 按钮圆角 10px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a Bento Box grid layout. Use: modular cards with varied sizes (1x1, 2x1, 2x2), Apple-style aesthetic, rounded corners (16-24px), soft shadows, clean hierarchy, asymmetric grid, neutral backgrounds (#F5F5F7), hover effects.
- Primary Colors: Neutral base + brand accent, #FFFFFF, #F5F5F5, brand primary
- Effects & Animation: grid-template with varied spans, rounded-xl (16px), subtle shadows, hover scale (1.02), smooth transitions
- CSS/Technical Keywords: display: grid, grid-template-columns: repeat(4, 1fr), grid-auto-rows: 200px, gap: 16px, border-radius: 24px, background: #FFFFFF, box-shadow: 0 4px 6px rgba(0,0,0,0.05)
- Implementation Checklist: ☐ Grid responsive (4→2→1 cols), ☐ Card spans varied, ☐ Rounded corners consistent, ☐ Shadows subtle, ☐ Content fits cards, ☐ Hover scale (1.02)
▍动效（只此一次，别加第二处）：
- 一次入场动效
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
仿生有机 2.0
Biomimetic / Organic 2.0
通用
活跃
Sustainability tech, biotech, advanced health, meditation, generative art platforms
请以「Biomimetic / Organic 2.0」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #FF9999 / 辅色 #00FF41 / 强调 #99ffff
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 22px / 按钮圆角 999px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a biomimetic organic interface. Use: cellular/fluid shapes, breathing animations, generative patterns, bioluminescent colors, physics-based movement, nature algorithms, life-like elements, flowing gradients.
- Primary Colors: Cellular Pink #FF9999, Chlorophyll Green #00FF41, Bioluminescent Blue
- Effects & Animation: Breathing animations, fluid morphing, generative growth, physics-based movement
- CSS/Technical Keywords: SVG morphing (SMIL or GSAP), canvas for generative, animation: breathing (scale pulse), filter: blur for organic, clip-path for cellular, WebGL for advanced, physics libraries
- Implementation Checklist: ☐ Organic shapes present, ☐ Animations feel alive, ☐ Generative elements, ☐ Performance monitored, ☐ Mobile fallback, ☐ Accessibility alt content
▍动效（只此一次，别加第二处）：
- 呼吸脉冲（scale 1→1.05 慢循环，官方 breathing）
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
Design portfolios, artistic projects, counter-culture brands, editorial/media sites, tech blogs
请以「Brutalism」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #FF0000 / 辅色 #0000FF / 强调 #FFFF00
- 底 #0D0F16 / 正文 #EEF1F7 / 弱文 rgba(238,241,247,.68) / 卡面 #161923
- 圆角 0px / 按钮圆角 0px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Create a brutalist design with raw, unpolished, stark aesthetic. Use pure primary colors (red, blue, yellow), black & white, no smooth transitions (instant), sharp corners, bold large typography, visible grid lines, default system fonts, intentional 'broken' design elements.
- Primary Colors: Primary: Red #FF0000, Blue #0000FF, Yellow #FFFF00, Black #000000, White #FFFFFF
- Effects & Animation: No smooth transitions (instant), sharp corners (0px), bold typography (700+), visible grid, large blocks
- CSS/Technical Keywords: border-radius: 0px, transition: none or 0s, font-family: system-ui or monospace, font-weight: 700+, border: visible 2-4px, colors: #FF0000, #0000FF, #FFFF00, #000000, #FFFFFF
- Implementation Checklist: ☐ No border-radius (0px), ☐ No transitions (instant), ☐ Bold typography (700+), ☐ Pure primary colors used, ☐ Visible grid/borders, ☐ Asymmetric layout intentional
▍动效（只此一次，别加第二处）：
- 瞬时位移（无平滑过渡即风格）
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
Educational apps, children's apps, SaaS platforms, creative tools, fun-focused, onboarding, casual games
请以「Claymorphism」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #FDBCB4 / 辅色 #ADD8E6 / 强调 #98FF98
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 26px / 按钮圆角 16px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a playful, toy-like interface with soft 3D, chunky elements, bubbly aesthetic, rounded edges (16-24px), thick borders (3-4px), double shadows (inner + outer), pastel colors, smooth animations. Perfect for children's apps and creative tools.
- Primary Colors: Pastel: Soft Peach #FDBCB4, Baby Blue #ADD8E6, Mint #98FF98, Lilac #E6E6FA, light BG
- Effects & Animation: Inner+outer shadows (subtle, no hard lines), soft press (200ms ease-out), fluffy elements, smooth transitions
- CSS/Technical Keywords: border-radius: 16-24px, border: 3-4px solid, box-shadow: inset -2px -2px 8px, 4px 4px 8px, background: pastel-gradient, animation: soft bounce (cubic-bezier 0.34, 1.56)
- Implementation Checklist: ☐ Border-radius 16-24px, ☐ Thick borders 3-4px, ☐ Double shadows (inner+outer), ☐ Pastel colors used, ☐ Soft bounce animations, ☐ Playful interactions
▍动效（只此一次，别加第二处）：
- 卡片 hover 轻浮起（材质动效）
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
Gaming platforms, tech products, crypto apps, sci-fi applications, developer tools, entertainment
请以「Cyberpunk UI」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #00FF00 / 辅色 #FF00FF / 强调 #00FFFF
- 底 #0D0F16 / 正文 #EEF1F7 / 弱文 rgba(238,241,247,.68) / 卡面 #161923
- 圆角 4px / 按钮圆角 2px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a cyberpunk interface. Use: neon colors on dark (#0D0D0D), terminal/HUD aesthetic, glitch effects, scanlines overlay, matrix green accents, monospace fonts, angular shapes, dystopian tech feel.
- Primary Colors: #00FF00 (Matrix Green), #FF00FF (Magenta), #00FFFF (Cyan), #0D0D0D (Dark)
- Effects & Animation: Neon glow (text-shadow), glitch animations (skew/offset), scanlines (::before overlay), terminal fonts
- CSS/Technical Keywords: background: #0D0D0D, color: #00FF00 or #FF00FF, font-family: monospace, text-shadow: 0 0 10px neon, animation: glitch (transform skew), ::before scanlines (repeating-linear-gradient)
- Implementation Checklist: ☐ Dark background only, ☐ Neon accents visible, ☐ Glitch effect subtle, ☐ Scanlines optional, ☐ Monospace font, ☐ Terminal aesthetic
▍动效（只此一次，别加第二处）：
- 扫描线一次扫过 + 标题辉光
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
深色模式（OLED 纯黑）
Dark Mode (OLED)
通用
活跃
Night-mode apps, coding platforms, entertainment, eye-strain prevention, OLED devices, low-light
请以「Dark Mode (OLED)」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #000000 / 辅色 #121212 / 强调 #0A0E27
- 底 #0D0F16 / 正文 #EEF1F7 / 弱文 rgba(238,241,247,.68) / 卡面 #161923
- 圆角 14px / 按钮圆角 10px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Create an OLED-optimized dark interface with deep black (#000000), dark grey (#121212), midnight blue accents. Use minimal glow effects, vibrant neon accents (green, blue, gold, purple), high contrast text. Optimize for eye comfort and OLED power saving.
- Primary Colors: Deep Black #000000, Dark Grey #121212, Midnight Blue #0A0E27
- Effects & Animation: Minimal glow (text-shadow: 0 0 10px), dark-to-light transitions, low white emission, high readability, visible focus
- CSS/Technical Keywords: background: #000000 or #121212, color: #FFFFFF or #E0E0E0, text-shadow: 0 0 10px neon-color (sparingly), filter: brightness(0.8) if needed, color-scheme: dark
- Implementation Checklist: ☐ Deep black #000000 or #121212, ☐ Vibrant neon accents used, ☐ Text contrast 7:1+, ☐ Minimal glow effects, ☐ OLED power optimization, ☐ No white (#FFFFFF) background
▍动效（只此一次，别加第二处）：
- 无入场，纯黑沉浸
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
维度分层
Dimensional Layering
通用
活跃
Dashboards, card layouts, modals, navigation, product showcases, SaaS interfaces
请以「Dimensional Layering」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #FFFFFF / 辅色 #F5F5F5 / 强调 #E0E0E0
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 16px / 按钮圆角 12px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design with dimensional layering. Use: z-index depth (multiple layers), overlapping cards, elevation shadows (4 levels), floating elements, parallax depth, backdrop blur for hierarchy, spatial UI feel.
- Primary Colors: Neutral base (#FFFFFF, #F5F5F5, #E0E0E0) + brand accent for elevated elements
- Effects & Animation: z-index stacking, box-shadow elevation (4 levels), transform: translateZ(), backdrop-filter, parallax
- CSS/Technical Keywords: z-index: 1-4 levels, box-shadow: elevation scale (sm/md/lg/xl), transform: translateZ(), backdrop-filter: blur(), position: relative for stacking, parallax on scroll
- Implementation Checklist: ☐ Layers clearly defined, ☐ Shadows show depth, ☐ Overlaps intentional, ☐ Hierarchy clear, ☐ Performance optimized, ☐ Mobile depth maintained
▍动效（只此一次，别加第二处）：
- 层叠阴影一次落定
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
电子墨水 / 纸感
E-Ink / Paper
通用
活跃
Reading apps, digital newspapers, minimal journals, distraction-free writing, slow-living brands
请以「E-Ink / Paper」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #FDFBF7 / 辅色 #F5F5F5 / 强调 #1A1A1A
- 底 #FAF7F0 / 正文 #111827 / 弱文 #5B6472 / 卡面 #FFFDF8
- 圆角 6px / 按钮圆角 4px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design an e-ink/paper style interface. Use: high contrast black on off-white, paper texture, no animations (instant transitions), reading-focused, minimal UI chrome, distraction-free, calm aesthetic, monochrome.
- Primary Colors: Off-White #FDFBF7, Paper White #F5F5F5, Ink Black #1A1A1A
- Effects & Animation: No motion blur, distinct page turns, grain/noise texture, sharp transitions (no fade)
- CSS/Technical Keywords: background: #FDFBF7 (paper white), color: #1A1A1A, transition: none, font-family: serif for reading, no gradients, border: 1px solid #E0E0E0, texture overlay (noise)
- Implementation Checklist: ☐ Paper background color, ☐ High contrast text, ☐ No animations, ☐ Reading optimized, ☐ Distraction-free, ☐ Print-friendly
▍动效（只此一次，别加第二处）：
- 无入场，hover 微阴影
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
杂志编辑网格
Editorial Grid / Magazine
通用
活跃
News sites, blogs, magazines, editorial content, long-form articles, journalism, publishing
请以「Editorial Grid / Magazine」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #000000 / 辅色 #FFFFFF / 强调 #000000
- 底 #FAF7F0 / 正文 #000000 / 弱文 #5B6472 / 卡面 #FFFDF8
- 圆角 6px / 按钮圆角 4px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design an editorial magazine layout. Use: asymmetric grid, pull quotes, drop caps, multi-column text, large imagery, bylines, section dividers, print-inspired typography, article hierarchy, white space balance.
- Primary Colors: High contrast: Black #000000, White #FFFFFF, accent brand color
- Effects & Animation: Smooth scroll, reveal on scroll, parallax images, text animations, page-flip transitions
- CSS/Technical Keywords: display: grid with named areas, column-count for text, ::first-letter for drop caps, blockquote styling, figure/figcaption, gap variations, font: serif for body, variable widths
- Implementation Checklist: ☐ Grid asymmetric, ☐ Typography editorial, ☐ Pull quotes styled, ☐ Drop caps present, ☐ Images large/impactful, ☐ Mobile reflows well
▍动效（只此一次，别加第二处）：
- 无入场，hover 微阴影
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
夸张极简
Exaggerated Minimalism
通用
活跃
Fashion, architecture, portfolios, agency landing pages, luxury brands, editorial
请以「Exaggerated Minimalism」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #000000 / 辅色 #FFFFFF / 强调 #000000
- 底 #0D0F16 / 正文 #EEF1F7 / 弱文 rgba(238,241,247,.68) / 卡面 #161923
- 圆角 2px / 按钮圆角 2px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design with exaggerated minimalism. Use: oversized typography (clamp 3rem-12rem), extreme negative space, black/white primary, single accent color only, bold statements, minimal elements, dramatic contrast.
- Primary Colors: #000000 (Black), #FFFFFF (White), single vibrant accent only
- Effects & Animation: font-size: clamp(3rem 10vw 12rem), font-weight: 900, letter-spacing: -0.05em, massive whitespace
- CSS/Technical Keywords: font-size: clamp(3rem, 10vw, 12rem), font-weight: 900, letter-spacing: -0.05em, color: #000 or #FFF, padding: 8rem+, single accent, no decorations
- Implementation Checklist: ☐ Typography oversized, ☐ White space extreme, ☐ Black/white dominant, ☐ Single accent only, ☐ Elements minimal, ☐ Statement clear
▍动效（只此一次，别加第二处）：
- 一次入场动效
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
色板为文字描述，见提示词
Web apps, mobile apps, cross-platform, startup MVPs, user-friendly, SaaS, dashboards, corporate
请以「Flat Design」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #2563EB / 辅色 #EA580C / 强调 #059669
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 4px / 按钮圆角 2px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Create a flat, 2D interface with bold colors, no shadows/gradients, clean lines, simple geometric shapes, icon-heavy, typography-focused, minimal ornamentation. Use 4-6 solid, bright colors in a limited palette with high saturation.
- Primary Colors: Solid bright: Red, Orange, Blue, Green, limited palette (4-6 max)
- Effects & Animation: No gradients/shadows, simple hover (color/opacity shift), fast loading, clean transitions (150-200ms ease), minimal icons
- CSS/Technical Keywords: box-shadow: none, background: solid color, border-radius: 0-4px, color: solid (no gradients), fill: solid, stroke: 1-2px, font: bold sans-serif, icons: simplified SVG
- Implementation Checklist: ☐ No shadows/gradients, ☐ 4-6 solid colors max, ☐ Clean lines consistent, ☐ Simple shapes used, ☐ Icon-heavy layout, ☐ High saturation colors, ☐ Fast loading verified
▍动效（只此一次，别加第二处）：
- 无入场，网格即秩序
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
Z 世代极繁主义
Gen Z Chaos / Maximalism
通用
活跃
Gen Z lifestyle brands, music artists, creative portfolios, viral marketing, fashion
请以「Gen Z Chaos / Maximalism」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #FF00FF / 辅色 #00FF00 / 强调 #FFFF00
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 14px / 按钮圆角 10px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a Gen Z chaos maximalist interface. Use: clashing bright colors, sticker overlays, collage aesthetic, raw/unpolished feel, mixed media, ironic elements, loud typography, GIF-heavy, internet culture references.
- Primary Colors: Clashing Brights: #FF00FF, #00FF00, #FFFF00, #0000FF
- Effects & Animation: Marquee scrolls, jitter, sticker layering, GIF overload, random placement, drag-and-drop
- CSS/Technical Keywords: mix-blend-mode: multiply/screen, transform: rotate(random), animation: jitter, marquee text, position: absolute for scattered elements, filter: saturate(150%), z-index chaos
- Implementation Checklist: ☐ Colors clash intentionally, ☐ Stickers/overlays present, ☐ Layout chaotic but usable, ☐ GIFs optimized, ☐ Mobile scrollable, ☐ Performance acceptable
▍动效（只此一次，别加第二处）：
- 卡片旋转归位一次
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
色板为文字描述，见提示词
Modern SaaS, financial dashboards, high-end corporate, lifestyle apps, modal overlays, navigation
请以「Glassmorphism」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #F5F5F5 / 辅色 #f5f5f5 / 强调 #f5f5f5
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 18px / 按钮圆角 10px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a glassmorphic interface with frosted glass effect. Use backdrop blur (10-20px), translucent overlays (rgba 10-30% opacity), vibrant background colors, subtle borders, light source reflection, layered depth. Perfect for modern overlays and cards.
- Primary Colors: Translucent white: rgba(255,255,255,0.1-0.3)
- Effects & Animation: Backdrop blur (10-20px), subtle border (1px solid rgba white 0.2), light reflection, Z-depth
- CSS/Technical Keywords: backdrop-filter: blur(15px), background: rgba(255, 255, 255, 0.15), border: 1px solid rgba(255,255,255,0.2), -webkit-backdrop-filter: blur(15px), z-index layering for depth
- Implementation Checklist: ☐ Backdrop-filter blur 10-20px, ☐ Translucent white 15-30% opacity, ☐ Subtle border 1px light, ☐ Vibrant background verified, ☐ Text contrast 4.5:1 checked
▍动效（只此一次，别加第二处）：
- 无入场动画，材质本身即视觉（毛玻璃+光斑为静态）
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
HUD 科幻界面
HUD / Sci-Fi FUI
通用
活跃
Sci-fi games, space tech, cybersecurity, movie props, immersive dashboards
请以「HUD / Sci-Fi FUI」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #00FFFF / 辅色 #0080FF / 强调 #FF0000
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 4px / 按钮圆角 2px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a futuristic HUD (Heads Up Display) or FUI. Use: thin lines (1px), neon cyan/blue on black, technical markers, decorative brackets, data visualization, monospaced tech fonts, glowing elements, transparency.
- Primary Colors: Neon Cyan #00FFFF, Holographic Blue #0080FF, Alert Red #FF0000
- Effects & Animation: Glow effects, scanning animations, ticker text, blinking markers, fine line drawing
- CSS/Technical Keywords: border: 1px solid rgba(0,255,255,0.5), color: #00FFFF, background: transparent or rgba(0,0,0,0.8), font-family: monospace, text-shadow: 0 0 5px cyan
- Implementation Checklist: ☐ Fine lines 1px, ☐ Neon glow text/borders, ☐ Monospaced font, ☐ Dark/Transparent BG, ☐ Decorative tech markers, ☐ Holographic feel
▍动效（只此一次，别加第二处）：
- 扫描线一次扫过 + 标题辉光
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
包容性设计
Inclusive Design
通用
活跃
色板为文字描述，见提示词
Public services, education, healthcare, finance, government, accessible consumer, inclusive
请以「Inclusive Design」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #059669 / 辅色 #DC2626 / 强调 #960532
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 6px / 按钮圆角 6px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design for universal accessibility: high contrast (7:1+), large text (16px+), keyboard-only navigation, screen reader optimization, enhanced accessibility criteria with complete-page verification, symbol-based color indicators (not color-only), haptic feedback, voice interaction support, reduced motion options.
- Primary Colors: Measured contrast pairs targeting 7:1 for normal text, avoid red-green only, symbol-based indicators, high contrast primary
- Effects & Animation: Haptic feedback (vibration), voice guidance, focus indicators (4px+ ring), motion options, alt content, semantic
- CSS/Technical Keywords: aria-* attributes complete, role attributes semantic, focus-visible: 3-4px ring, color-contrast: 7:1+, @media (prefers-reduced-motion), alt text on all images, form labels properly associated
- Implementation Checklist: ☐ complete-page conformance tested against the chosen target, ☐ 7:1+ contrast all text, ☐ Keyboard accessible (Tab/Enter), ☐ Screen reader tested, ☐ Focus visible 3-4px, ☐ No color-only indicators, ☐ Haptic fallback
▍动效（只此一次，别加第二处）：
- 无装饰动效（可访问性优先）
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
交互光标设计
Interactive Cursor Design
通用
活跃
色板为文字描述，见提示词
Creative portfolios, interactive experiences, agency sites, product showcases, gaming, entertainment
请以「Interactive Cursor Design」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #2563EB / 辅色 #6b25eb / 强调 #ebad25
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 14px / 按钮圆角 10px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design with interactive cursor effects. Use: custom cursor, cursor morphing on hover, magnetic cursor pull, cursor trails, blend mode cursors, click feedback animations, cursor as interaction tool, pointer transformation.
- Primary Colors: Brand-dependent, cursor accent color, high contrast for visibility
- Effects & Animation: Cursor scale on hover, magnetic pull to elements, cursor morphing, trail effects, blend mode cursors, click feedback
- CSS/Technical Keywords: cursor: none (custom), position: fixed for cursor element, mix-blend-mode: difference, transform on hover targets, magnetic effect (JS position lerp), trail with opacity fade, scale on click
- Implementation Checklist: ☐ Custom cursor works, ☐ Hover morph smooth, ☐ Magnetic pull subtle, ☐ Trail performance ok, ☐ Click feedback visible, ☐ Touch fallback provided
▍动效（只此一次，别加第二处）：
- 自定义光标点跟随
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
动态字排
Kinetic Typography
通用
活跃
色板为文字描述，见提示词
Hero sections, marketing sites, video platforms, storytelling, creative portfolios, landing pages
请以「Kinetic Typography」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #2563EB / 辅色 #6b25eb / 强调 #ebad25
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 14px / 按钮圆角 10px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design with kinetic typography. Use: animated text, scroll-triggered reveals, typing effects, letter-by-letter animations, morphing text, gradient text fills, oversized hero text, text as the main visual element.
- Primary Colors: Flexible - high contrast recommended, bold colors for emphasis, animation-friendly palette
- Effects & Animation: @keyframes text animation, typing effect, background-clip: text, GSAP ScrollTrigger, split text
- CSS/Technical Keywords: @keyframes for text animation, background-clip: text, GSAP SplitText, typing effect (steps()), transform on letters, scroll-triggered (Intersection Observer), variable fonts for morphing
- Implementation Checklist: ☐ Text animations smooth, ☐ Prefers-reduced-motion respected, ☐ Fallback for no-JS, ☐ Mobile performance ok, ☐ Typing effect timed, ☐ Scroll triggers work
▍动效（只此一次，别加第二处）：
- 标题描边-填充循环（字即动效）
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
孟菲斯设计
Memphis Design
通用
活跃
Creative agencies, music sites, youth brands, event promotion, artistic portfolios, entertainment
请以「Memphis Design」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #FF71CE / 辅色 #FFCE5C / 强调 #86CCCA
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 14px / 按钮圆角 999px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a Memphis style interface. Use: bold geometric shapes (triangles, squiggles, circles), bright clashing colors, 80s postmodern aesthetic, playful patterns, dotted textures, asymmetric layouts, decorative elements.
- Primary Colors: #FF71CE (Hot Pink), #FFCE5C (Yellow), #86CCCA (Teal), #6A7BB4 (Blue Purple)
- Effects & Animation: transform: rotate(), clip-path: polygon(), mix-blend-mode, repeating patterns, bold shapes
- CSS/Technical Keywords: clip-path: polygon() for shapes, background: repeating patterns, transform: rotate() for tilted elements, mix-blend-mode for overlays, border: dashed/dotted patterns, bold sans-serif
- Implementation Checklist: ☐ Geometric shapes visible, ☐ Colors bold/clashing, ☐ Patterns present, ☐ Layout asymmetric, ☐ Playful decorations, ☐ 80s vibe achieved
▍动效（只此一次，别加第二处）：
- 色块/盖章式一次砸落
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
微交互
Micro-interactions
通用
活跃
Mobile apps, touchscreen UIs, productivity tools, user-friendly, consumer apps, interactive components
请以「Micro-interactions」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #22C55E / 辅色 #EF4444 / 强调 #F59E0B
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 14px / 按钮圆角 999px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design with delightful micro-interactions: small 50-100ms animations, gesture-based responses, tactile feedback, loading spinners, success/error states, subtle hover effects, haptic feedback triggers for mobile. Focus on responsive, contextual interactions.
- Primary Colors: Subtle color shifts (10-20%), feedback: Green #22C55E, Red #EF4444, Amber #F59E0B
- Effects & Animation: Small hover (50-100ms), loading spinners, success/error state anim, gesture-triggered (swipe/pinch), haptic
- CSS/Technical Keywords: animation: short 50-100ms, transition: hover states, @media (hover: hover) for desktop, :active for press, haptic-feedback CSS/API, loading animation smooth loop
- Implementation Checklist: ☐ Micro-animations 50-100ms, ☐ Gesture-responsive, ☐ Tactile feedback visual/haptic, ☐ Loading spinners smooth, ☐ Success/error states clear, ☐ Hover effects subtle
▍动效（只此一次，别加第二处）：
- 图标一次弹跳（pop）
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
极简主义 / 瑞士风格
Minimalism & Swiss Style
通用
活跃
Enterprise apps, dashboards, documentation sites, SaaS platforms, professional tools
请以「Minimalism & Swiss Style」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #000000 / 辅色 #FFFFFF / 强调 #000000
- 底 #0D0F16 / 正文 #EEF1F7 / 弱文 rgba(238,241,247,.68) / 卡面 #161923
- 圆角 4px / 按钮圆角 2px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a minimalist landing page. Use: white space, geometric layouts, sans-serif fonts, high contrast, grid-based structure, essential elements only. Avoid shadows and gradients. Focus on clarity and functionality.
- Primary Colors: Monochromatic, Black #000000, White #FFFFFF
- Effects & Animation: Subtle hover (200-250ms), smooth transitions, sharp shadows if any, clear type hierarchy, fast loading
- CSS/Technical Keywords: display: grid, gap: 2rem, font-family: sans-serif, color: #000 or #FFF, max-width: 1200px, clean borders, no box-shadow unless necessary
- Implementation Checklist: ☐ Grid-based layout 12-16 columns, ☐ Typography hierarchy clear, ☐ No unnecessary decorations, ☐ text contrast measured against the chosen project target, ☐ Mobile responsive grid
▍动效（只此一次，别加第二处）：
- 无入场，网格即秩序
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
色板为文字描述，见提示词
Portfolio sites, storytelling platforms, interactive experiences, entertainment apps, creative, SaaS
请以「Motion-Driven」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #2563EB / 辅色 #6b25eb / 强调 #ebad25
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 14px / 按钮圆角 999px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Build an animation-heavy interface with scroll-triggered animations, microinteractions, parallax scrolling (3-5 layers), smooth transitions (300-400ms), entrance animations, page transitions. Use Intersection Observer for scroll effects, transform for performance, GPU acceleration.
- Primary Colors: Bold colors emphasize movement, high contrast animated, dynamic gradients, accent action colors
- Effects & Animation: Scroll anim (Intersection Observer), hover (300-400ms), entrance, parallax (3-5 layers), page transitions
- CSS/Technical Keywords: animation: @keyframes scroll-reveal, transform: translateY/X, Intersection Observer API, will-change: transform, scroll-behavior: smooth, animation-duration: 300-400ms
- Implementation Checklist: ☐ Scroll animations active, ☐ Parallax 3-5 layers, ☐ Entrance animations smooth, ☐ Page transitions fluid, ☐ GPU accelerated, ☐ Prefers-reduced-motion respected
▍动效（只此一次，别加第二处）：
- 图标一次弹跳（pop）
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
自然提纯
Nature Distilled
通用
活跃
Wellness brands, sustainable products, artisan goods, organic food, spa/beauty, home decor
请以「Nature Distilled」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #C67B5C / 辅色 #D4C4A8 / 强调 #B5651D
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 18px 24px 20px 26px / 按钮圆角 14px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design with nature distilled aesthetic. Use: muted earthy colors (terracotta, sand, olive), organic materials feel, warm tones, handmade warmth, natural textures, artisan quality, sustainable vibe, soft gradients.
- Primary Colors: Terracotta #C67B5C, Sand Beige #D4C4A8, Warm Clay #B5651D, Soft Cream #F5F0E1
- Effects & Animation: Subtle parallax, natural easing (ease-out), texture overlays, grain effects, soft shadows
- CSS/Technical Keywords: background: warm earth tones, color: #C67B5C #D4C4A8 #6B7B3C, border-radius: organic (varied), box-shadow: soft natural, texture overlays (grain), font: humanist sans-serif
- Implementation Checklist: ☐ Earth tones dominant, ☐ Warm feel achieved, ☐ Textures subtle, ☐ Handmade quality, ☐ Sustainable messaging, ☐ Calming aesthetic
▍动效（只此一次，别加第二处）：
- 无入场动画；grain 颗粒纹理常驻 + ease-out 缓动（手作静态感）
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
Gen Z brands, startups, creative agencies, Figma-style apps, Notion-style interfaces, tech blogs
请以「Neubrutalism」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #FFEB3B / 辅色 #FF5252 / 强调 #2196F3
- 底 #0D0F16 / 正文 #EEF1F7 / 弱文 rgba(238,241,247,.68) / 卡面 #161923
- 圆角 0px / 按钮圆角 0px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a neubrutalist interface. Use: high contrast, hard black borders (3px+), bright pop colors, no blur, sharp or slightly rounded corners, bold typography, hard shadows (offset 4px 4px), raw aesthetic but functional.
- Primary Colors: #FFEB3B (Yellow), #FF5252 (Red), #2196F3 (Blue), #000000 (Black borders)
- Effects & Animation: box-shadow: 4px 4px 0 #000, border: 3px solid #000, no gradients, sharp corners (0px), bold typography
- CSS/Technical Keywords: border: 3px solid black, box-shadow: 5px 5px 0px black, colors: #FFDB58 #FF6B6B #4ECDC4, font-weight: 700, no gradients
- Implementation Checklist: ☐ Hard borders (2-4px), ☐ Hard offset shadows, ☐ High saturation colors, ☐ Bold typography, ☐ No blurs/gradients, ☐ Distinctive 'ugly-cute' look
▍动效（只此一次，别加第二处）：
- 瞬时位移（无平滑过渡即风格）
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
新拟态（软 UI）
Neumorphism
通用
活跃
Health/wellness apps, meditation platforms, fitness trackers, minimal interaction UIs
请以「Neumorphism」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #C8E0F4 / 辅色 #F5E0E8 / 强调 #E8E8E8
- 底 #ECEAF2 / 正文 #0F172A / 弱文 #475569 / 卡面 #ECEAF2
- 圆角 18px / 按钮圆角 14px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Create a neumorphic UI with soft 3D effects. Use light pastels, rounded corners (12-16px), subtle soft shadows (multiple layers), no hard lines, monochromatic color scheme with light/dark variations. Embossed/debossed effect on interactive elements.
- Primary Colors: Light pastels: Soft Blue #C8E0F4, Soft Pink #F5E0E8, Soft Grey #E8E8E8
- Effects & Animation: Soft box-shadow (multiple: -5px -5px 15px, 5px 5px 15px), smooth press (150ms), inner subtle shadow
- CSS/Technical Keywords: border-radius: 12-16px, box-shadow: -5px -5px 15px rgba(0,0,0,0.1), 5px 5px 15px rgba(255,255,255,0.8), background: linear-gradient(145deg, color1, color2), transform: scale on press
- Implementation Checklist: ☐ Rounded corners 12-16px consistent, ☐ Multiple shadow layers (2-3), ☐ Pastel color verified, ☐ Monochromatic palette checked, ☐ Press animation smooth 150ms
▍动效（只此一次，别加第二处）：
- 开关/按钮的内凹按压反馈（150ms），无入场动画
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
有机亲自然
Organic Biophilic
通用
活跃
Wellness apps, sustainability brands, eco products, health apps, meditation, organic food brands
请以「Organic Biophilic」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #228B22 / 辅色 #8B4513 / 强调 #87CEEB
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 20px 26px 18px 28px / 按钮圆角 999px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a biophilic organic interface. Use: nature-inspired colors (greens, browns), organic curved shapes, rounded corners (16-24px), natural textures (wood, stone), flowing SVG elements, wellness aesthetic, earthy palette.
- Primary Colors: #228B22 (Forest Green), #8B4513 (Earth Brown), #87CEEB (Sky Blue), #F5F5DC (Beige)
- Effects & Animation: Rounded corners (16-24px), organic curves (border-radius variations), natural shadows, flowing SVG shapes
- CSS/Technical Keywords: border-radius: 16-24px (varied), background: earth tones, SVG organic shapes (blob), box-shadow: natural soft, color: #228B22 #8B4513 #87CEEB, texture overlays (subtle)
- Implementation Checklist: ☐ Earth tones dominant, ☐ Organic curves present, ☐ Natural textures subtle, ☐ Green accents, ☐ Rounded everywhere, ☐ Calming feel
▍动效（只此一次，别加第二处）：
- 有机形状轻微呼吸
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
视差叙事
Parallax Storytelling
通用
活跃
色板为文字描述，见提示词
Brand storytelling, product launches, case studies, portfolios, annual reports, marketing campaigns
请以「Parallax Storytelling」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #2563EB / 辅色 #6b25eb / 强调 #ebad25
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 14px / 按钮圆角 10px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a parallax storytelling page. Use: scroll-driven narrative, layered backgrounds (3-5 layers), fixed/sticky sections, cinematic transitions, progressive disclosure, full-screen chapters, depth perception.
- Primary Colors: Story-dependent, often gradients and natural colors, section-specific palettes
- Effects & Animation: transform: translateY(scroll), position: fixed/sticky, perspective: 1px, scroll-triggered animations
- CSS/Technical Keywords: position: fixed/sticky, transform: translateY(calc()), perspective: 1px, z-index layering, scroll-snap-type, Intersection Observer for triggers, will-change: transform
- Implementation Checklist: ☐ Layers parallax smoothly, ☐ Story flows naturally, ☐ Mobile alternative provided, ☐ Performance optimized, ☐ Skip option available, ☐ Reduced motion fallback
▍动效（只此一次，别加第二处）：
- hero 一次浮动 + 背景错位
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
色板为文字描述，见提示词
Indie games, retro tools, creative portfolios, nostalgia marketing, Web3/NFT
请以「Pixel Art」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #2563EB / 辅色 #6b25eb / 强调 #ebad25
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 0px / 按钮圆角 0px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a pixel art inspired interface. Use: pixelated fonts, 8-bit or 16-bit aesthetic, sharp edges (image-rendering: pixelated), limited color palette, blocky UI elements, retro gaming feel.
- Primary Colors: Primary colors (NES Palette), brights, limited palette
- Effects & Animation: Frame-by-frame sprite animation, blinking cursor, instant transitions, marquee text
- CSS/Technical Keywords: font-family: 'Press Start 2P', image-rendering: pixelated, box-shadow: 4px 0 0 #000 (pixel border), no anti-aliasing
- Implementation Checklist: ☐ Pixelated fonts loaded, ☐ Images sharp (no blur), ☐ CSS box-shadow for pixel borders, ☐ Retro palette, ☐ Blocky layout
▍动效（只此一次，别加第二处）：
- 无（锐利静态）
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
复古未来主义
Retro-Futurism
通用
活跃
Gaming, entertainment, music platforms, tech brands, artistic projects, nostalgic, cyberpunk
请以「Retro-Futurism」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #0080FF / 辅色 #FF006E / 强调 #00FFFF
- 底 #0D0F16 / 正文 #EEF1F7 / 弱文 rgba(238,241,247,.68) / 卡面 #161923
- 圆角 4px / 按钮圆角 2px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Build a retro-futuristic (cyberpunk/vaporwave) interface with neon colors (blue, pink, cyan), deep black background, 80s aesthetic, CRT scanlines, glitch effects, neon glow text/borders, monospace fonts, geometric patterns. Use neon text-shadow and animated glitch effects.
- Primary Colors: Neon Blue #0080FF, Hot Pink #FF006E, Cyan #00FFFF, Deep Black #1A1A2E, Purple #5D34D0
- Effects & Animation: CRT scanlines (::before overlay), neon glow (text-shadow+box-shadow), glitch effects (skew/offset keyframes)
- CSS/Technical Keywords: color: neon colors (#0080FF, #FF006E, #00FFFF), text-shadow: 0 0 10px neon, background: #000 or #1A1A2E, font-family: monospace, animation: glitch (skew+offset), filter: hue-rotate
- Implementation Checklist: ☐ Neon colors used, ☐ CRT scanlines effect, ☐ Glitch animations active, ☐ Monospace font, ☐ Deep black background, ☐ Glow effects applied, ☐ 80s patterns present
▍动效（只此一次，别加第二处）：
- 扫描线一次扫过 + 标题辉光
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
色板为文字描述，见提示词
Legacy apps, gaming, immersive storytelling, premium products, luxury, realistic simulations, education
请以「Skeuomorphism」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #2563EB / 辅色 #6b25eb / 强调 #ebad25
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 12px / 按钮圆角 10px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a realistic, textured interface with 3D depth, real-world metaphors (leather, wood, metal), complex gradients (8-12 stops), realistic shadows, grain/texture overlays, tactile press animations. Perfect for premium/luxury products.
- Primary Colors: Rich realistic: wood, leather, metal colors, detailed gradients (8-12 stops), metallic effects
- Effects & Animation: Realistic shadows (layers), depth (perspective), texture details (noise, grain), realistic animations (300-500ms)
- CSS/Technical Keywords: background: complex gradient (8-12 stops), box-shadow: realistic multi-layer, background-image: texture overlay (noise, grain), filter: drop-shadow, transform: scale on press (300-500ms)
- Implementation Checklist: ☐ Realistic textures applied, ☐ Complex gradients 8-12 stops, ☐ Multi-layer shadows, ☐ Texture overlays present, ☐ Tactile animations smooth, ☐ Depth effect pronounced
▍动效（只此一次，别加第二处）：
- 按钮按压物理感
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
Soft UI 演进
Soft UI Evolution
通用
活跃
Modern enterprise apps, SaaS platforms, health/wellness, modern business tools, professional, hybrid
请以「Soft UI Evolution」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #87CEEB / 辅色 #FFB6C1 / 强调 #90EE90
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 24px / 按钮圆角 18px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design evolved neumorphism with improved contrast (measured contrast targets), modern aesthetics, subtle depth, accessibility focus. Use soft shadows (softer than flat but clearer than pure neumorphism), better color hierarchy, improved focus states, modern 200-300ms animations.
- Primary Colors: Improved contrast pastels: Soft Blue #87CEEB, Soft Pink #FFB6C1, Soft Green #90EE90, better hierarchy
- Effects & Animation: Improved shadows (softer than flat, clearer than neumorphism), modern (200-300ms), focus visible, measured contrast targets
- CSS/Technical Keywords: box-shadow: softer multi-layer (0 2px 4px), background: improved contrast pastels, border-radius: 8-12px, animation: 200-300ms smooth, outline: 2-3px on focus, contrast: 4.5:1+
- Implementation Checklist: ☐ Contrast measured against the chosen project target, ☐ Soft shadows modern, ☐ Border-radius 8-12px, ☐ Animations 200-300ms, ☐ Focus states visible, ☐ Color hierarchy clear
▍动效（只此一次，别加第二处）：
- 阴影柔化过渡
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
空间界面（VisionOS）
Spatial UI (VisionOS)
通用
活跃
Spatial computing apps, VR/AR interfaces, immersive media, futuristic dashboards
请以「Spatial UI (VisionOS)」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #FFFFFF / 辅色 #ffffff / 强调 #ffffff
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 24px / 按钮圆角 10px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a VisionOS-style spatial interface. Use: frosted glass panels, depth layers, translucent backgrounds (15-30% opacity), vibrant colors for active states, gaze-hover effects, floating windows, immersive feel.
- Primary Colors: Frosted Glass #FFFFFF (15-30% opacity), System White
- Effects & Animation: Parallax depth, dynamic lighting response, gaze-hover effects, smooth scale on focus
- CSS/Technical Keywords: backdrop-filter: blur(40px) saturate(180%), background: rgba(255,255,255,0.2), border-radius: 24px, box-shadow: 0 8px 32px rgba(0,0,0,0.1), transform: scale on focus, depth via shadows
- Implementation Checklist: ☐ Glass effect visible, ☐ Depth layers clear, ☐ Hover states defined, ☐ Colors vibrant on active, ☐ Floating feel achieved, ☐ Contrast maintained
▍动效（只此一次，别加第二处）：
- 无入场动画，材质本身即视觉（毛玻璃+光斑为静态）
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
触感可形变 UI
Tactile Digital / Deformable UI
通用
活跃
Modern mobile apps, playful brands, entertainment, gaming UI, consumer products, interactive demos
请以「Tactile Digital / Deformable UI」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #C0C0C0 / 辅色 #FF9ECD / 强调 #87CEEB
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 26px / 按钮圆角 16px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a tactile deformable interface. Use: jelly/squishy buttons, press deformation effect, bounce-back animations, chrome/clay materials, spring physics, haptic-like feedback, material response, 3D depth on interaction.
- Primary Colors: Gradient metallics, Chrome Silver #C0C0C0, Jelly Pink #FF9ECD, Soft Blue #87CEEB
- Effects & Animation: Press deformation (scale + squish), bounce-back (cubic-bezier), material response, haptic-like feedback, spring physics
- CSS/Technical Keywords: transform: scale(0.95) on active, animation: bounce (cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow: inset for press, filter: brightness on press, spring physics (react-spring/framer-motion)
- Implementation Checklist: ☐ Press effect visible, ☐ Bounce-back smooth, ☐ Material feels tactile, ☐ Spring physics tuned, ☐ Mobile touch responsive, ☐ Reduced motion option
▍动效（只此一次，别加第二处）：
- 卡片 hover 轻浮起（材质动效）
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
高饱和色块
Vibrant & Block-based
通用
活跃
Startups, creative agencies, gaming, social media, youth-focused, entertainment, consumer
请以「Vibrant & Block-based」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #39FF14 / 辅色 #BF00FF / 强调 #FF1493
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 8px / 按钮圆角 6px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design an energetic, vibrant interface with bold block layouts, geometric shapes, high color contrast, large typography (32px+), animated background patterns, duotone effects. Perfect for startups and youth-focused apps. Use 4-6 contrasting colors from complementary/triadic schemes.
- Primary Colors: Neon Green #39FF14, Electric Purple #BF00FF, Vivid Pink #FF1493, Bright Cyan #00FFFF, Sunburst #FFAA00
- Effects & Animation: Large sections (48px+ gaps), animated patterns, bold hover (color shift), scroll-snap, large type (32px+), 200-300ms
- CSS/Technical Keywords: display: flex/grid with large gaps (48px+), font-size: 32px+, background: animated patterns (CSS), color: neon/vibrant colors, animation: continuous pattern movement
- Implementation Checklist: ☐ Block layout with 48px+ gaps, ☐ Large typography 32px+, ☐ 4-6 vibrant colors max, ☐ Animated patterns active, ☐ Scroll-snap enabled, ☐ High contrast verified (7:1+)
▍动效（只此一次，别加第二处）：
- 色块 hover 换色（瞬时）
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
复古胶片
Vintage Analog / Retro Film
通用
活跃
Photography portfolios, music/vinyl brands, vintage fashion, nostalgia marketing, film industry, cafes
请以「Vintage Analog / Retro Film」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #F5E6C8 / 辅色 #D4A574 / 强调 #4A7B7C
- 底 #FAF7F0 / 正文 #0F172A / 弱文 #6B6355 / 卡面 #FFFDF8
- 圆角 6px / 按钮圆角 4px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design with vintage analog film aesthetic. Use: film grain overlay, faded/desaturated colors, warm sepia tones, light leaks, VHS tracking effect, polaroid frame, analog warmth, nostalgic photography feel.
- Primary Colors: Faded Cream #F5E6C8, Warm Sepia #D4A574, Muted Teal #4A7B7C, Soft Pink #E8B4B8
- Effects & Animation: Film grain overlay, VHS tracking effect, polaroid shake, fade-in transitions, light leak animations
- CSS/Technical Keywords: filter: sepia() contrast() saturate(0.8), background: noise texture overlay, animation: VHS tracking (transform skew), light leak gradient overlay, border for polaroid frame, grain via SVG filter
- Implementation Checklist: ☐ Film grain visible, ☐ Colors faded/warm, ☐ Light leaks present, ☐ Nostalgic feel achieved, ☐ Performance with filters, ☐ Images look vintage
▍动效（只此一次，别加第二处）：
- 无入场，hover 微阴影
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
语音优先多模态
Voice-First Multimodal
通用
活跃
Voice assistants, accessibility apps, hands-free tools, smart home, automotive UI, cooking apps
请以「Voice-First Multimodal」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #FAFAFA / 辅色 #6B8FAF / 强调 #9B8FBB
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 14px / 按钮圆角 999px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a voice-first multimodal interface. Use: voice waveform visualization, listening state indicator, speaking animation, minimal visible UI, audio feedback cues, hands-free optimized, conversational flow, ambient design.
- Primary Colors: Calm neutrals: Soft White #FAFAFA, Muted Blue #6B8FAF, Gentle Purple #9B8FBB
- Effects & Animation: Voice waveform visualization, listening pulse, processing spinner, speak animation, smooth transitions
- CSS/Technical Keywords: Web Speech API integration, canvas for waveform, animation: pulse for listening, status indicators (color change), audio visualization (Web Audio API), minimal chrome, large touch targets
- Implementation Checklist: ☐ Voice recognition works, ☐ Visual feedback clear, ☐ Listening state obvious, ☐ Speaking animation smooth, ☐ Fallback UI provided, ☐ Accessibility excellent
▍动效（只此一次，别加第二处）：
- 声波条持续律动（波形=主题部件）
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
Y2K 千禧风
Y2K Aesthetic
通用
活跃
Fashion brands, music platforms, Gen Z brands, nostalgia marketing, entertainment, youth-focused
请以「Y2K Aesthetic」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #FF69B4 / 辅色 #00FFFF / 强调 #C0C0C0
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 50% / 按钮圆角 999px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a Y2K aesthetic interface. Use: neon pink/cyan colors, chrome/metallic textures, bubblegum gradients, glossy buttons, iridescent effects, 2000s futurism, star/sparkle decorations, bubble shapes, tech-optimistic vibe.
- Primary Colors: #FF69B4 (Hot Pink), #00FFFF (Cyan), #C0C0C0 (Silver), #9400D3 (Purple)
- Effects & Animation: linear-gradient metallic, glossy buttons, 3D chrome effects, glow animations, bubble shapes
- CSS/Technical Keywords: background: linear-gradient(135deg, #FF69B4, #00FFFF), filter: drop-shadow for glow, border-radius: 50% for bubbles, metallic gradients (silver/chrome), text-shadow: neon glow, ::before for sparkles
- Implementation Checklist: ☐ Neon colors balanced, ☐ Chrome effects visible, ☐ Glossy buttons styled, ☐ Bubble shapes decorative, ☐ Sparkle animations, ☐ Retro fonts loaded
▍动效（只此一次，别加第二处）：
- 渐变文字一次流光
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
Voice assistants, AI platforms, future-forward UX, smart home, contextual computing, ambient experiences
请以「Zero Interface」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #FAFAFA / 辅色 #F0F0F0 / 强调 #F5F1E8
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 14px / 按钮圆角 10px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Create a voice-first, gesture-based, AI-driven interface with minimal visible UI, progressive disclosure, voice recognition UI, gesture detection, AI predictions, smart suggestions, context-aware actions. Hide controls until needed.
- Primary Colors: Neutral backgrounds: Soft white #FAFAFA, light grey #F0F0F0, warm off-white #F5F1E8
- Effects & Animation: Voice recognition UI, gesture detection, AI predictions (smooth reveal), progressive disclosure, smart suggestions
- CSS/Technical Keywords: voice-commands: Web Speech API, gesture-detection: touch events, AI-predictions: hidden by default (reveal on hover), progressive-disclosure: show on demand, minimal UI visible
- Implementation Checklist: ☐ Voice commands responsive, ☐ Gesture detection active, ☐ AI predictions hidden/revealed, ☐ Progressive disclosure working, ☐ Minimal visible UI, ☐ Smart suggestions contextual
▍动效（只此一次，别加第二处）：
- 无动效（零界面）
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
Mobile-first apps needing high personality, onboarding flows, branding-forward product screens, artisan/design brands, editorial mobile experiences
请以「Bauhaus (包豪斯)」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #D02020 / 辅色 #1040C0 / 强调 #F0C020
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 0px / 按钮圆角 0px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a Bauhaus (包豪斯) mobile interface using bauhaus, geometric, constructivist, primary colors, hard shadow, bold, tactile, functional. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.
- Primary Colors: Primary Red #D02020, Primary Blue #1040C0, Primary Yellow #F0C020
- Effects & Animation: Hard offset shadows (4px 4px 0px black), mechanical press active:translate, no smooth hover — instant 0ms transitions, dot grid pattern on sections, slide-over transitions
- CSS/Technical Keywords: border-radius: 0px (cards/inputs) or 9999px (buttons/FAB), box-shadow: 4px 4px 0px 0px #121212, active:translate-x-[2px] active:translate-y-[2px] active:shadow-none, border: 2px solid #121212, font-family: Outfit, font-weight: 900 uppercase tracking-tighter (headlines)
- Implementation Checklist: ☐ Geometric shapes only (circle/square), ☐ Primary color blocking applied, ☐ Hard offset shadows 4px, ☐ border-2 border-black on all elements, ☐ Mechanical press active state, ☐ Outfit Black 900 uppercase headlines, ☐ Safe area (pt-safe pb-safe) respected, ☐ Thumb-friendly h-12/h-14 touch targets, ☐ No hover states (mobile-only), ☐ Vertical rhythm single-column stack
▍动效（只此一次，别加第二处）：
- 几何形状瞬时定位
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
Material 3 表现版
Material 3 Expressive (Mobile)
移动端
活跃
Android, Wear OS, and Pixel-aligned products using Material 3 components
请以「Material 3 Expressive (Mobile)」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #6750A4 / 辅色 #E8DEF8 / 强调 #7D5260
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 28px / 按钮圆角 999px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a Material 3 Expressive mobile interface with vibrant semantic color, contrasting shapes, flexible typography, adaptive components, spring motion, and reduced-motion alternatives.
- Primary Colors: Primary Violet #6750A4, Secondary Container #E8DEF8, Tertiary #7D5260
- Effects & Animation: Tonal elevation (overlay colors instead of strong shadows), pill-shaped buttons and chips (borderRadius 999), emphasized easing Easing.bezier(0.2,0,0,1), state layers (pressed overlays 10–15% opacity), Reanimated-filled label float for inputs, HapticFeedback on FAB/toggles
- CSS/Technical Keywords: borderRadius: 999 (buttons/chips), containerRadius: 16–28, backgroundColor: '#FFFBFE', colorPrimary: '#6750A4', colorSecondaryContainer: '#E8DEF8', colorSurfaceContainer: '#F3EDF7', outlineColor: '#79747E', Pressable state-layer overlay (opacity 0.1–0.15), Easing.bezier(0.2,0,0,1), HapticFeedback.impactMedium on FAB, floating label using Reanimated translateY/scale
- Implementation Checklist: ☐ MD3 color tokens applied (background/surface/container), ☐ All CTAs are pill-shaped, ☐ State-layer overlays instead of opacity 0.5 hacks, ☐ Emphasized easing used for all animations, ☐ Floating label inputs implemented, ☐ FAB uses tertiary color with correct elevation, ☐ Safe areas respected for organic shapes, ☐ No pure white background, ☐ No harsh box-shadows (ambient only)
▍动效（只此一次，别加第二处）：
- 状态层涟漪一次
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
液态玻璃
Liquid Glass
平台语言
活跃
色板为文字描述，见提示词
Apple-platform navigation, controls, and system-aligned app chrome
请以「Liquid Glass」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #2563EB / 辅色 #6b25eb / 强调 #ebad25
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 18px / 按钮圆角 10px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Apply Apple Liquid Glass sparingly to navigation and controls. Use dynamic translucent material, lensing, and fluid transitions while keeping content clear. Respect reduced transparency and reduced motion settings.
- Primary Colors: Adaptive translucent material derived from surrounding content; use color judiciously
- Effects & Animation: Lensing and refraction, adaptive translucency, and fluid morph transitions aligned to Apple platform behavior
- CSS/Technical Keywords: platform material, adaptive translucency, lensing, refraction, reduced transparency, reduced motion
- Implementation Checklist: ☐ Use for navigation and controls, ☐ Keep content on a separate layer, ☐ Apply color judiciously, ☐ Test reduced transparency, ☐ Test reduced motion, ☐ Verify text and control contrast
▍动效（只此一次，别加第二处）：
- 无入场动画，材质本身即视觉（毛玻璃+光斑为静态）
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
Spectrum（Adobe）
Adobe Spectrum
平台语言
活跃
色板为文字描述，见提示词
Creative tools, media workflows, document products, and Adobe-adjacent enterprise software
请以「Adobe Spectrum」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #2563EB / 辅色 #6b25eb / 强调 #ebad25
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 4px / 按钮圆角 4px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design an Adobe Spectrum professional tool with tokenized color, precise hierarchy, dense but legible controls, strong focus states, and cross-platform component consistency.
- Primary Colors: Spectrum semantic colors with product-specific accents
- Effects & Animation: Layered depth and restrained professional motion
- CSS/Technical Keywords: design tokens, semantic color, component states, focus-visible, reduced motion
- Implementation Checklist: Use official tokens and components; preserve platform conventions; test keyboard, contrast, zoom, motion preferences, and responsive behavior
▍动效（只此一次，别加第二处）：
- 无入场，1px 阴影过渡
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
Fluent 2（微软）
Fluent 2
平台语言
活跃
色板为文字描述，见提示词
Microsoft 365, Windows, Copilot, and enterprise line-of-business tools
请以「Fluent 2」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #2563EB / 辅色 #6b25eb / 强调 #ebad25
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 8px / 按钮圆角 6px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a Fluent 2 product surface using calm hierarchy, standardized corners, semantic tokens, subtle depth, and platform-aware components. Preserve Microsoft interaction patterns and accessible focus states.
- Primary Colors: Fluent neutral palette with brand and status tokens
- Effects & Animation: Subtle depth, calm transitions, platform-adaptive motion
- CSS/Technical Keywords: design tokens, semantic color, component states, focus-visible, reduced motion
- Implementation Checklist: Use official tokens and components; preserve platform conventions; test keyboard, contrast, zoom, motion preferences, and responsive behavior
▍动效（只此一次，别加第二处）：
- 阴影深度过渡（8px→16px）
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
Polaris（Shopify）
Shopify Polaris
平台语言
活跃
色板为文字描述，见提示词
Shopify admin apps, merchant tools, checkout, customer accounts, POS, and extensions
请以「Shopify Polaris」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #2563EB / 辅色 #6b25eb / 强调 #ebad25
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 12px / 按钮圆角 10px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a Shopify Polaris merchant workflow using official web components, admin-native hierarchy, clear actions, semantic status feedback, and consistent commerce patterns. Keep scope tied to Shopify surfaces.
- Primary Colors: Shopify admin semantic tokens and merchant brand accents
- Effects & Animation: Purposeful admin feedback and restrained transitions
- CSS/Technical Keywords: design tokens, semantic color, component states, focus-visible, reduced motion
- Implementation Checklist: Use official tokens and components; preserve platform conventions; test keyboard, contrast, zoom, motion preferences, and responsive behavior
▍动效（只此一次，别加第二处）：
- 无入场，微阴影过渡
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
对比分析仪表盘
Comparative Analysis Dashboard
BI 分析
补充
色板为文字描述，见提示词
Period-over-period reporting, A/B test dashboards, market comparison, competitive analysis, regional performance
请以「Comparative Analysis Dashboard」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #2563eb / 辅色 #ea580c / 强调 #059669
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 10px / 按钮圆角 8px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a comparison dashboard. Use: side-by-side metrics, period selectors (vs last month), delta indicators (+/-), benchmark lines, A/B comparison tables, winning/losing highlights, percentage change badges.
- Primary Colors: Comparison colors: primary (blue), comparison (orange/purple), delta indicator (green/red)
- Effects & Animation: Comparison bar animations (grow to value), delta indicator animations (direction arrows), highlight on compare
- CSS/Technical Keywords: display: flex for side-by-side, gap for comparison spacing, color coding (green up, red down), arrow indicators, diff highlighting, comparison table zebra striping
- Implementation Checklist: ☐ Period selector works, ☐ Deltas calculated, ☐ Colors meaningful, ☐ Benchmarks shown, ☐ Mobile stacks properly, ☐ Export comparison
▍动效（只此一次，别加第二处）：
- 图表条形一次生长
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
下钻分析
Drill-Down Analytics
BI 分析
补充
色板为文字描述，见提示词
Sales analytics, product analytics, funnel analysis, multi-dimensional data exploration, business intelligence
请以「Drill-Down Analytics」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #5725eb / 辅色 #db25eb / 强调 #ebad25
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 10px / 按钮圆角 8px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a drill-down analytics dashboard. Use: breadcrumb navigation, expandable sections, summary-to-detail flow, back button prominent, level indicators, context preservation, hierarchical data display.
- Primary Colors: Primary brand, breadcrumb colors, drill-level indicator colors, hierarchy depth colors
- Effects & Animation: Drill-down expand animations, breadcrumb click transitions, smooth detail reveal, level change smooth, data reload animation
- CSS/Technical Keywords: breadcrumb nav with separators, details/summary for expand, transition for drill animation, position: sticky breadcrumb, nested grid layouts, smooth scroll to detail
- Implementation Checklist: ☐ Breadcrumbs clear, ☐ Back navigation easy, ☐ Expand animation smooth, ☐ Context preserved, ☐ Mobile drill works, ☐ Deep links supported
▍动效（只此一次，别加第二处）：
- 图表条形一次生长
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
高管驾驶舱
Executive Dashboard
BI 分析
补充
色板为文字描述，见提示词
C-suite dashboards, business summary reports, decision-maker dashboards, strategic planning views
请以「Executive Dashboard」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #4d25eb / 辅色 #dc8426 / 强调 #F5F5F5
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 10px / 按钮圆角 8px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design an executive dashboard. Use: large KPI cards (4-6 max), trend sparklines, high-level summary only, clean layout with white space, traffic light indicators (red/yellow/green), at-a-glance insights, minimal detail.
- Primary Colors: Brand colors, professional palette (blue/grey/white), accent for KPIs, red for alerts/concerns
- Effects & Animation: KPI value animations (count-up), trend arrow direction animations, metric card hover lift, alert pulse effect
- CSS/Technical Keywords: display: flex for KPI row, large font-size (24-48px) for metrics, sparkline SVG inline, status indicators (border-left color), card shadows for hierarchy, responsive breakpoints
- Implementation Checklist: ☐ KPIs 4-6 maximum, ☐ Trends visible, ☐ Status colors clear, ☐ One-page view, ☐ Mobile simplified, ☐ Print-friendly layout
▍动效（只此一次，别加第二处）：
- 图表条形一次生长
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
财务仪表盘
Financial Dashboard
BI 分析
补充
Financial reporting, accounting dashboards, portfolio tracking, budget monitoring, banking analytics
请以「Financial Dashboard」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #22C55E / 辅色 #EF4444 / 强调 #003366
- 底 #0D0F16 / 正文 #EEF1F7 / 弱文 rgba(238,241,247,.68) / 卡面 #161923
- 圆角 10px / 按钮圆角 8px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a financial dashboard. Use: revenue/expense charts, profit margins, budget vs actual, cash flow waterfall, financial ratios, audit trail table, currency formatting, period comparisons.
- Primary Colors: Financial colors: profit (green #22C55E), loss (red #EF4444), neutral (grey), trust (dark blue #003366)
- Effects & Animation: Number animations (count-up), trend direction indicators, percentage change animations, profit/loss color transitions
- CSS/Technical Keywords: number formatting (Intl.NumberFormat), waterfall chart (positive/negative bars), variance coloring, table with totals row, sparkline for trends, sticky column headers
- Implementation Checklist: ☐ Currency formatted, ☐ Decimals consistent, ☐ P&L clear, ☐ Budget variance shown, ☐ Audit trail complete, ☐ Export to Excel
▍动效（只此一次，别加第二处）：
- 图表条形一次生长
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
热力图风格
Heat Map & Heatmap Style
BI 分析
补充
Geographical analysis, performance matrices, correlation analysis, user behavior heatmaps, temperature/intensity data
请以「Heat Map & Heatmap Style」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #0080FF / 辅色 #FF0000 / 强调 #ff7f00
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 10px / 按钮圆角 8px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a heatmap visualization. Use: color gradient scale (cool to hot), cell-based grid, intensity legend, hover tooltips, geographic or matrix layout, divergent color scheme for +/- values, accessible color alternatives.
- Primary Colors: Gradient scale: Cool (blue #0080FF) to hot (red #FF0000), neutral middle (white/yellow)
- Effects & Animation: Color gradient transitions on data change, cell highlighting on hover, tooltip reveal on click, smooth color animation
- CSS/Technical Keywords: display: grid, background: linear-gradient for legend, cell hover states, tooltip positioning, color scale (blue→white→red), SVG for geographic, canvas for large datasets
- Implementation Checklist: ☐ Color scale clear, ☐ Legend visible, ☐ Tooltips informative, ☐ Colorblind alternatives, ☐ Zoom/pan for geo, ☐ Performance for large data
▍动效（只此一次，别加第二处）：
- 图表条形一次生长
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
预测分析
Predictive Analytics
BI 分析
补充
色板为文字描述，见提示词
Forecasting dashboards, anomaly detection systems, trend prediction dashboards, AI-powered analytics, budget planning
请以「Predictive Analytics」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #dc9926 / 辅色 #a6dc26 / 强调 #26dcdc
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 10px / 按钮圆角 8px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a predictive analytics dashboard. Use: forecast lines (dashed), confidence intervals (shaded bands), trend projections, anomaly highlights, scenario toggles, AI insight cards, probability indicators.
- Primary Colors: Forecast line color (distinct from actual), confidence interval shading, anomaly highlight (red alert), trend colors
- Effects & Animation: Forecast line animation on draw, confidence band fade-in, anomaly pulse alert, smoothing function animations
- CSS/Technical Keywords: stroke-dasharray for forecast lines, fill-opacity for confidence bands, anomaly markers (circles), tooltip for predictions, toggle switches for scenarios, gradient for probability
- Implementation Checklist: ☐ Forecast line distinct, ☐ Confidence bands visible, ☐ Anomalies highlighted, ☐ Scenarios switchable, ☐ Predictions dated, ☐ Accuracy shown
▍动效（只此一次，别加第二处）：
- 图表条形一次生长
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
实时监控大屏
Real-Time Monitoring
BI 分析
补充
System monitoring dashboards, DevOps dashboards, real-time analytics, stock market dashboards, live event tracking
请以「Real-Time Monitoring」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #FF0000 / 辅色 #FFA500 / 强调 #22C55E
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 10px / 按钮圆角 8px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a real-time monitoring dashboard. Use: live status indicators (pulsing), streaming charts, alert notifications, connection status, auto-refresh indicators, critical alerts prominent, system health overview.
- Primary Colors: Alert colors: critical (red #FF0000), warning (orange #FFA500), normal (green #22C55E), updating (blue animation)
- Effects & Animation: Real-time chart animations, alert pulse/glow, status indicator blink animation, smooth data stream updates, loading effect
- CSS/Technical Keywords: animation: pulse for live, WebSocket for streaming, position: fixed for alerts, status-dot with animation, chart real-time updates, notification toast, connection indicator
- Implementation Checklist: ☐ Live updates working, ☐ Alert sounds optional, ☐ Connection status shown, ☐ Auto-refresh indicated, ☐ Critical alerts prominent, ☐ Offline fallback
▍动效（只此一次，别加第二处）：
- 图表条形一次生长
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
销售智能仪表盘
Sales Intelligence Dashboard
BI 分析
补充
色板为文字描述，见提示词
CRM dashboards, sales management, opportunity tracking, performance management, quota planning
请以「Sales Intelligence Dashboard」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #3325eb / 辅色 #eaad0c / 强调 #059669
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 10px / 按钮圆角 8px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a sales intelligence dashboard. Use: pipeline funnel, deal cards (kanban), quota gauges, leaderboard table, territory map, win/loss ratios, forecast accuracy, activity timeline.
- Primary Colors: Sales colors: won (green), lost (red), in-progress (blue), blocked (orange), quota met (gold), quota missed (grey)
- Effects & Animation: Deal movement animations, metric updates, leaderboard ranking changes, gauge needle movements, status change highlights
- CSS/Technical Keywords: kanban columns (flex), gauge chart (SVG arc), leaderboard ranking styles, map integration (Mapbox/Google), timeline vertical, deal card with status border
- Implementation Checklist: ☐ Pipeline stages shown, ☐ Deals draggable, ☐ Quotas visualized, ☐ Rankings updated, ☐ Territory clickable, ☐ CRM integration
▍动效（只此一次，别加第二处）：
- 图表条形一次生长
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
用户行为分析
User Behavior Analytics
BI 分析
补充
色板为文字描述，见提示词
Conversion funnel analysis, user journey tracking, engagement analytics, cohort analysis, retention tracking
请以「User Behavior Analytics」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #2542eb / 辅色 #059681 / 强调 #DC2626
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 10px / 按钮圆角 8px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a user behavior analytics dashboard. Use: funnel visualization, user flow diagrams (Sankey), conversion metrics, engagement heatmaps, cohort tables, retention curves, session replay indicators.
- Primary Colors: Funnel stage colors: high engagement (green), drop-off (red), conversion (blue), user flow arrows (grey)
- Effects & Animation: Funnel animation (fill-down), flow diagram animations (connection draw), conversion pulse, engagement bar fill
- CSS/Technical Keywords: SVG funnel with gradients, Sankey diagram library, percentage labels, cohort grid cells, retention chart (line/area), click heatmap overlay, session timeline
- Implementation Checklist: ☐ Funnel stages clear, ☐ Flow diagram readable, ☐ Conversions calculated, ☐ Cohorts comparable, ☐ Retention trends visible, ☐ Privacy compliant
▍动效（只此一次，别加第二处）：
- 图表条形一次生长
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
色差 RGB 分离
Chromatic Aberration / RGB Split
通用
补充
Music platforms, gaming, tech brands, creative portfolios, nightlife, entertainment, video platforms
请以「Chromatic Aberration / RGB Split」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #FF0000 / 辅色 #00FF00 / 强调 #0000FF
- 底 #0D0F16 / 正文 #EEF1F7 / 弱文 rgba(238,241,247,.68) / 卡面 #161923
- 圆角 14px / 按钮圆角 999px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design with chromatic aberration RGB split effect. Use: color channel offset (R/G/B), glitch aesthetic, retro tech feel, VHS error look, lens distortion, scan lines, noise overlay, analog imperfection.
- Primary Colors: Offset RGB: Red #FF0000, Green #00FF00, Blue #0000FF, Black #000000
- Effects & Animation: RGB offset animation, glitch timing, scan line movement, noise flicker, distortion on hover
- CSS/Technical Keywords: filter: drop-shadow with offset colors, text-shadow: RGB offset (-2px 0 red, 2px 0 cyan), animation: glitch (random offset), ::before for scanlines, mix-blend-mode: screen for overlays
- Implementation Checklist: ☐ RGB split visible, ☐ Glitch effect controlled, ☐ Scan lines subtle, ☐ Performance ok, ☐ Readability maintained, ☐ Reduced motion option
▍动效（只此一次，别加第二处）：
- 渐变文字一次流光
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
渐变网格（极光演进）
Gradient Mesh / Aurora Evolved
通用
补充
Hero sections, backgrounds, creative brands, music platforms, fashion, lifestyle, premium products
请以「Gradient Mesh / Aurora Evolved」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #00FFFF / 辅色 #FF00FF / 强调 #FFFF00
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 14px / 按钮圆角 10px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design with gradient mesh aurora effect. Use: multi-color mesh gradients, flowing color transitions, aurora/northern lights feel, iridescent overlays, holographic shimmer, prismatic effects, smooth color morphing.
- Primary Colors: Multi-stop gradients: Cyan #00FFFF, Magenta #FF00FF, Yellow #FFFF00, Blue #0066FF, Green #00FF66
- Effects & Animation: CSS mesh-gradient (experimental), SVG gradients, canvas gradients, smooth color morphing, flowing animation
- CSS/Technical Keywords: background: conic-gradient or mesh (SVG), animation: gradient flow (background-position), filter: hue-rotate for shimmer, mix-blend-mode: screen, canvas for complex mesh, multiple gradient layers
- Implementation Checklist: ☐ Mesh gradient visible, ☐ Colors flow smoothly, ☐ Aurora effect achieved, ☐ Performance acceptable, ☐ Text remains readable, ☐ Mobile renders ok
▍动效（只此一次，别加第二处）：
- 渐变光斑 8-12s 缓慢流动（氛围）
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
瑞士现代主义 2.0
Swiss Modernism 2.0
通用
补充
Corporate sites, architecture, editorial, SaaS, museums, professional services, documentation
请以「Swiss Modernism 2.0」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #000000 / 辅色 #FFFFFF / 强调 #F5F5F5
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 4px / 按钮圆角 2px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design with Swiss Modernism 2.0. Use: strict grid system (12 columns), Helvetica/Inter fonts, mathematical spacing, asymmetric balance, high contrast, minimal decoration, clean hierarchy, single accent color.
- Primary Colors: #000000, #FFFFFF, #F5F5F5, single vibrant accent only
- Effects & Animation: display: grid, grid-template-columns: repeat(12 1fr), gap: 1rem, mathematical ratios, clear hierarchy
- CSS/Technical Keywords: display: grid, grid-template-columns: repeat(12, 1fr), gap: 1rem (8px base unit), font-family: Inter/Helvetica, font-weight: 400-700, color: #000/#FFF, single accent
- Implementation Checklist: ☐ 12-column grid strict, ☐ Spacing mathematical, ☐ Typography hierarchy clear, ☐ Single accent only, ☐ No decorations, ☐ High contrast verified
▍动效（只此一次，别加第二处）：
- 无入场，网格即秩序
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
Music platforms, gaming, creative portfolios, tech startups, entertainment, artistic projects
请以「Vaporwave」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #FF71CE / 辅色 #01CDFE / 强调 #05FFA1
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 14px / 按钮圆角 999px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a vaporwave aesthetic interface. Use: sunset gradients (pink/cyan/purple), 80s-90s nostalgia, glitch effects, Greek statue imagery, palm trees, grid patterns, neon glow, retro-futuristic feel, dreamy atmosphere.
- Primary Colors: #FF71CE (Pink), #01CDFE (Cyan), #05FFA1 (Mint), #B967FF (Purple)
- Effects & Animation: text-shadow glow, linear-gradient, filter: hue-rotate(), glitch animations, retro scan lines
- CSS/Technical Keywords: background: linear-gradient(180deg, #FF71CE, #01CDFE, #B967FF), filter: hue-rotate(), text-shadow: neon glow, retro grid (perspective + linear-gradient), VHS scanlines
- Implementation Checklist: ☐ Sunset gradient present, ☐ Neon glow applied, ☐ Retro grid visible, ☐ Glitch effects subtle, ☐ Dreamy atmosphere, ☐ 80s-90s aesthetic
▍动效（只此一次，别加第二处）：
- 渐变文字一次流光
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
学术书卷（移动）
Academia (Scholarly Mobile)
移动端
补充
Knowledge management apps, deep reading tools, ritual-heavy personal brands, lore-heavy RPG/roleplay apps, culture-specific community platforms
请以「Academia (Scholarly Mobile)」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #1C1714 / 辅色 #251E19 / 强调 #14191c
- 底 #FAF7F0 / 正文 #0F172A / 弱文 #6B6355 / 卡面 #FFFDF8
- 圆角 6px / 按钮圆角 4px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a Academia (Scholarly Mobile) mobile interface using academia, library, mahogany, parchment, brass, crimson, serif, drop cap. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.
- Primary Colors: Mahogany #1C1714, Oak #251E19
- Effects & Animation: Deep mahogany backgrounds, oak surface cards, brass accented CTAs, arch-top hero/imagery, heavy vignette overlays, sepia-tinted images, drop caps with brass Cinzel, Roman numeral volume headings, slow timing-based animations (Easing.out poly(4)), zero neon or modern tech cues
- CSS/Technical Keywords: backgroundColor: '#1C1714', altSurface: '#251E19', textColor: '#E8DFD4', mutedBg: '#3D332B', borderColor: '#4A3F35', brass: '#C9A962', crimson: '#8B2635', borderRadius: 4 (default), archTopRadius: 100 for hero, shadowOpacity:0.4 shadowRadius:6 elevation:8 for cards, textShadow on headings, vignette overlay via LinearGradient
- Implementation Checklist: ☐ Mahogany/oak/parchment palette applied, ☐ Brass used on all tappable items, ☐ Arch-top imagery used in hero/cards, ☐ Drop caps & Roman numerals used, ☐ Vignette overlay present, ☐ No sans-serif body fonts, ☐ No neon/bright modern colors, ☐ Animations use non-spring timing, ☐ Inputs use worn-leather style, ☐ Wax seal badges implemented
▍动效（只此一次，别加第二处）：
- 无入场，hover 微阴影
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
加密 DeFi（移动）
Bitcoin DeFi (Mobile)
移动端
补充
DeFi dashboards, wallets, NFT marketplaces, Web3 social, metaverse utilities, high-tech fintech brands
请以「Bitcoin DeFi (Mobile)」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #F7931A / 辅色 #EA580C / 强调 #FFD600
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 14px / 按钮圆角 10px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a Bitcoin DeFi (Mobile) mobile interface using web3, bitcoin, defi, digital gold, fintech, wallet, orange, glassmorphism. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.
- Primary Colors: Bitcoin Orange #F7931A, Burnt Orange #EA580C, Digital Gold #FFD600
- Effects & Animation: Deep void + dark matter surfaces, Bitcoin orange/gold gradients for CTAs, pill buttons with glowing shadows, glassmorphic BlurView nav, monospace data rows, gradient text balances + masked orange-gold, pulsing status indicators and vertical ledger timelines, ultra-thin borders, high-precision typography
- CSS/Technical Keywords: backgroundColor: '#030304', cardBg: '#0F1115', textColor: '#FFFFFF', mutedText: '#94A3B8', borderColor: 'rgba(30,41,59,0.2)', accentBitcoin: '#F7931A', accentBurnt: '#EA580C', accentGold: '#FFD600', borderRadius: 24 for cards, radiusPill: 999 for buttons, BlurView intensity 20, LinearGradient on CTAs, shadowColor '#F7931A' shadowRadius up to 10, JetBrains Mono for numeric text
- Implementation Checklist: ☐ Void/dark-matter palette applied, ☐ Bitcoin orange/gold gradient buttons, ☐ BlurView nav implemented, ☐ Monospace for numeric data, ☐ Hairline borders on blocks, ☐ Gradient text on balances, ☐ Pulsing network status indicators, ☐ Ledger vertical timeline, ☐ Haptics on money actions, ☐ SafeArea + FlashList for heavy lists
▍动效（只此一次，别加第二处）：
- 一次入场动效
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
海报粗字排（移动）
Bold Typography (Mobile Poster)
移动端
补充
Creative brand heroes, reading-focused apps, event/exhibition pages, editorial mobile experiences, landing hero sections
请以「Bold Typography (Mobile Poster)」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #0A0A0A / 辅色 #FAFAFA / 强调 #0a0a0a
- 底 #0D0F16 / 正文 #EEF1F7 / 弱文 rgba(238,241,247,.68) / 卡面 #161923
- 圆角 14px / 按钮圆角 10px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a Bold Typography (Mobile Poster) mobile interface using bold typography, editorial, poster, broadsheet, vermillion, negative space, edge-to-edge type, underline CTA. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.
- Primary Colors: Near Black #0A0A0A, Warm White #FAFAFA
- Effects & Animation: Hero headlines 48–72px (5:1 vs body size), tight tracking (-1.5px), edge-to-edge type, massive vertical spacing (60px+), underline CTAs (2–3px accent line), instant 200ms transitions (no bounce), strictly 0px radius containers, color shifts for active state instead of elevation
- CSS/Technical Keywords: backgroundColor: '#0A0A0A', color: '#FAFAFA', accent: '#FF3D00', borderColor: '#262626', borderRadius: 0, paddingHorizontal: 24, headline style: fontSize:56–72, fontWeight:'700/800', letterSpacing:-1.5, lineHeight:1.1*fontSize, body: fontSize:16–18, lineHeight:1.6*fontSize, underline CTA: 2–3px height View under text, transition: 200ms cubic-bezier(0.25,0,0,1)
- Implementation Checklist: ☐ H1 at least 4–5× body size, ☐ All containers 0 radius, ☐ Underline CTA pattern used, ☐ Large vertical gaps between sections, ☐ No shadows or soft corners, ☐ Accent used only for interaction, ☐ Text bleeds to/over screen edges, ☐ Animation timings 200ms, ☐ Accessible contrast ≥ 18:1, ☐ Body text never below 16px
▍动效（只此一次，别加第二处）：
- 标题描边-填充循环（字即动效）
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
黏土拟态（移动）
Claymorphism (Mobile)
移动端
补充
Children education apps, teen social products, crypto gamification, creative tools, brand mascot-led apps
请以「Claymorphism (Mobile)」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #7C3AED / 辅色 #DB2777 / 强调 #abed3a
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 26px / 按钮圆角 16px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a Claymorphism (Mobile) mobile interface using claymorphism, clay, 3d, soft, bubbly, candy, playful, rounded. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.
- Primary Colors: Vivid Violet #7C3AED, Hot Pink #DB2777
- Effects & Animation: Multi-layer shadow stacks (nested View) to simulate clay depth, LinearGradient #A78BFA→#7C3AED buttons, borderRadius 40–50 outer / 32 cards / 20 buttons, Reanimated spring squish (scale 0.92 on press), BlurView glass-clay hybrid cards, floating blobs with slow ±20px drift, Haptics Light on every press
- CSS/Technical Keywords: backgroundColor: '#F4F1FA', cardBg: 'rgba(255,255,255,0.7)', textPrimary: '#332F3A', textMuted: '#635F69', accentPrimary: '#7C3AED', accentSecondary: '#DB2777', success: '#10B981', warning: '#F59E0B', radiusOuter: 50, radiusCard: 32, radiusButton: 20, shadowStack: 'nested View', gradientButton: ['#A78BFA', '#7C3AED'], springDamping: 10
- Implementation Checklist: ☐ Background uses #F4F1FA (no pure white), ☐ Multi-layer clay shadow stack applied, ☐ Cards use blurred glass-clay hybrid, ☐ Buttons squish to scale 0.92 on press, ☐ Spring physics on all interactions, ☐ Nunito Black for headings, ☐ Background blobs drifting, ☐ Haptics on every press, ☐ Nested border radius (card 32, inner 24), ☐ Bento layout with hero span
▍动效（只此一次，别加第二处）：
- 卡片 hover 轻浮起（材质动效）
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
赛博 HUD（移动）
Cyberpunk Mobile HUD
移动端
补充
Gaming dashboards, crypto/cyberpunk apps, sci-fi companion tools, hacker OS skins, data-heavy monitoring HUDs
请以「Cyberpunk Mobile HUD」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #0A0A0F / 辅色 #12121A / 强调 #0f0f0a
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 4px / 按钮圆角 2px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a Cyberpunk Mobile HUD mobile interface using cyberpunk, neon, glitch, chamfered, orbitron, jetbrains, scanlines, crt. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.
- Primary Colors: Void #0A0A0F, Card #12121A
- Effects & Animation: Deep void background with neon radiance, chamfered 45° corners via SVG/Skia, scanline overlay, CRT flicker opacity oscillation, glitch animations (translateX ±2), neon pulses around buttons, HUD corner brackets, terminal prompt text inputs, heavy use of blurView holographic panels
- CSS/Technical Keywords: backgroundColor: '#0A0A0F', cardBg: '#12121A', accent: '#00FF88', accent2: '#FF00FF', accent3: '#00D4FF', borderColor: '#2A2A3A', destructive: '#FF3366', borderRadius: 0, chamfer via SVG path, shadowColor accent with animated radius, scanline overlay View pointerEvents='none', withRepeat glitch translateX [-2,2,0], Easing.steps(2)
- Implementation Checklist: ☐ Chamfered corners used instead of radius, ☐ Scanline & CRT flicker implemented, ☐ Orbitron + JetBrains Mono typography, ☐ Neon glow shadows on primary buttons, ☐ Glitch animation on active states, ☐ Prompt-style inputs with custom cursor, ☐ HUD corner brackets implemented, ☐ Safe-area system status bar styled, ☐ Reduced motion disables glitch/flicker, ☐ Icons configured with Lucide accent color
▍动效（只此一次，别加第二处）：
- 扫描线一次扫过 + 标题辉光
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
企业 SaaS（移动）
Enterprise SaaS (Mobile)
移动端
补充
B2B backend management, productivity tools, government and finance mobile apps, SaaS companion apps, enterprise dashboards
请以「Enterprise SaaS (Mobile)」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #4F46E5 / 辅色 #7C3AED / 强调 #dce546
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 14px / 按钮圆角 10px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a Enterprise SaaS (Mobile) mobile interface using enterprise, saas, b2b, professional, indigo, violet, gradient, polished. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.
- Primary Colors: Indigo #4F46E5, Violet #7C3AED
- Effects & Animation: Indigo→Violet gradient primary CTAs + active tab highlights, colored card shadows rgba(79,70,229,0.08), pill buttons or 12pt radius, full-width CTA at screen bottom, spring press scale 0.97, floating label inputs with animated focus border, skeletal loading pulses (Indigo/Slate tint), Bottom Sheets with drag dismiss, swipe-to-action list cards, scroll-linked title collapse
- CSS/Technical Keywords: backgroundColor: '#F8FAFC', surfaceBg: '#FFFFFF', textPrimary: '#0F172A', textMuted: '#64748B', primary: '#4F46E5', secondary: '#7C3AED', success: '#10B981', border: '#E2E8F0', radiusCard: 16, radiusButton: 999, radiusInput: 8, shadowCard: 'rgba(79,70,229,0.08)', gradientPrimary: ['#4F46E5', '#7C3AED'], screenPadding: 20
- Implementation Checklist: ☐ Background #F8FAFC applied, ☐ Indigo→Violet gradient on primary CTA, ☐ Colored card shadows (not gray), ☐ Plus Jakarta Sans typography, ☐ Floating label inputs with Indigo focus, ☐ Scale 0.97 press with haptic Medium, ☐ Bottom Tab Navigation implemented, ☐ Safe Area strict compliance, ☐ Skeletal loading placeholders, ☐ Reduced Motion fallback
▍动效（只此一次，别加第二处）：
- 一次淡入
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
扁平触控（移动）
Flat Design Mobile (Touch-First)
移动端
补充
Cross-platform apps (iOS+Android parity), information-dense dashboards, system UI, brand illustration, onboarding flows, marketing pages, icon design
请以「Flat Design Mobile (Touch-First)」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #3B82F6 / 辅色 #10B981 / 强调 #f6af3b
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 4px / 按钮圆角 2px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a Flat Design Mobile (Touch-First) mobile interface using flat, 2D, no shadow, color blocking, geometric, bold, poster, icon. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.
- Primary Colors: Blue #3B82F6, Emerald #10B981
- Effects & Animation: Immediate press feedback (scale 0.97, no delay), color section blocking (full-width contrasting View), zero elevation/shadow, solid icon containers (colored squares/circles), geometric low-opacity shape overlays, bottom tabs solid fill (no floating)
- CSS/Technical Keywords: shadowOpacity: 0, elevation: 0, borderRadius: 6/12/999, height: 48 minimum touch targets, spacing: 4/8/16/24/32/48 system, backgroundColor (section blocking), Pressable scale: pressed ? 0.97 : 1, fontWeight: '800' heads / '600' sub / '400' body, letterSpacing: -0.5 heads / 1 labels, textTransform: 'uppercase' labels, strokeWidth={2.5} icons, borderWidth: 3/4 for featured CTAs
- Implementation Checklist: ☐ Zero elevation AND shadowOpacity on all elements, ☐ Color-blocking sections (not borders), ☐ All touch targets ≥ 48×48, ☐ No gradients on flat elements, ☐ Icons inside solid colored containers, ☐ Pressable scale feedback, ☐ Geometric shapes as bg decoration, ☐ Bold flat bottom tabs (no floating), ☐ Primary headlines much larger than body, ☐ 4pt spacing system throughout
▍动效（只此一次，别加第二处）：
- 无入场，网格即秩序
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
动效粗野（移动）
Kinetic Brutalism (Mobile)
移动端
补充
Immersive storytelling apps, brand flagship mobile, music/culture platforms, sports apps, underground zines, limited-edition product drops, performance dashboards
请以「Kinetic Brutalism (Mobile)」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #DFE104 / 辅色 #09090B / 强调 #0604e1
- 底 #0D0F16 / 正文 #EEF1F7 / 弱文 rgba(238,241,247,.68) / 卡面 #161923
- 圆角 0px / 按钮圆角 0px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a Kinetic Brutalism (Mobile) mobile interface using kinetic, brutalism, motion, marquee, acid yellow, uppercase, oversized, aggressive typography. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.
- Primary Colors: Acid Yellow #DFE104, Rich Black #09090B
- Effects & Animation: Infinite marquee (Reanimated, Linear easing, 5s loop, hard clip), hero parallax (scale 1.0→1.3 + fade), sticky section header push, card flood inversion on press (bg→#DFE104, text→#000000), haptic Medium on every press, scroll-triggered interpolate transforms, 0px radius, 2px borders, 100ms color transitions
- CSS/Technical Keywords: borderRadius: 0, borderWidth: 2, borderColor: '#3F3F46', backgroundColor: '#09090B', color: '#FAFAFA', fontWeight: '800 or 900', letterSpacing: -1 (large) or 2 (labels), lineHeight: 0.9–1.1 * fontSize, Reanimated withRepeat marquee timing 5000ms Easing.linear, Interpolate scroll→scale + opacity, Haptics.impactAsync(Medium), scale press: 0.95, 100ms color transitions
- Implementation Checklist: ☐ Infinite marquee rows (Reanimated, no fade edges), ☐ Hero parallax scroll (scale+opacity Interpolate), ☐ All display text uppercase, ☐ 0px border-radius, ☐ 2px borders, ☐ Acid yellow card flood on press, ☐ Haptic Medium on every interaction, ☐ Font scale helper (windowWidth/375*size), ☐ Safe area for massive headers, ☐ Reduced motion stops marquees
▍动效（只此一次，别加第二处）：
- 瞬时位移（无平滑过渡即风格）
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
极简单色（移动）
Minimalist Monochrome
移动端
补充
Luxury fashion e-commerce mobile, editorial publications, high-end portfolio apps, experimental/avant-garde brands, digital exhibitions
请以「Minimalist Monochrome」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #000000 / 辅色 #FFFFFF / 强调 #000000
- 底 #0D0F16 / 正文 #EEF1F7 / 弱文 rgba(238,241,247,.68) / 卡面 #161923
- 圆角 0px / 按钮圆角 2px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a Minimalist Monochrome mobile interface using monochrome, black white, editorial, austere, typographic, sharp, zero radius, high contrast. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.
- Primary Colors: Pure Black #000000, Pure White #FFFFFF
- Effects & Animation: Instant inversion active state (tap → bg-black text-white, zero transition-none), no shadows (strictly 2D), full-bleed horizontal rules (4px black section dividers), subtle paper noise texture (opacity: 0.03), slide-in page transitions with hard edge
- CSS/Technical Keywords: border-radius: 0px (ALL elements including modals), box-shadow: none, active:bg-black active:text-white transition-none, border-b-4 border-black (section dividers), divide-y divide-black (lists), font-family: Playfair Display (headers) + Source Serif 4 (body) + JetBrains Mono (labels), background-image: noise SVG opacity-[0.03]
- Implementation Checklist: ☐ 0px border-radius on ALL elements, ☐ No shadows anywhere, ☐ Instant inversion on every tap (transition-none), ☐ 4px black line separates hero from content, ☐ Safe area respected (pt-safe pb-safe), ☐ h-14 touch targets, ☐ Sticky section headers with border-b, ☐ Typography hero: word spans full screen width, ☐ Paper noise texture on backgrounds, ☐ Menu word-label instead of icon
▍动效（只此一次，别加第二处）：
- 无入场，网格即秩序
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
影院深色（移动）
Modern Dark (Cinema Mobile)
移动端
补充
Developer tools, pro productivity apps, fintech/trading dashboards, media/streaming platforms, AI tool interfaces, high-end gaming companion apps
请以「Modern Dark (Cinema Mobile)」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #020203 / 辅色 #050506 / 强调 #0a0a0c
- 底 #0D0F16 / 正文 #EEF1F7 / 弱文 rgba(238,241,247,.68) / 卡面 #161923
- 圆角 14px / 按钮圆角 10px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a Modern Dark (Cinema Mobile) mobile interface using dark mode, cinematic, ambient light, glassmorphism, deep black, indigo, glow, blur. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.
- Primary Colors: Deep #020203, Base #050506, Elevated #0a0a0c, Accent #5E6AD2
- Effects & Animation: Expo.out Bezier(0.16,1,0.3,1) easing; spring modals (damping:20 stiffness:90); haptic-linked press (Impact Light/Medium); animated ambient light blobs (Reanimated translateX/Y slow oscillation); BlurView glassmorphism headers/nav (intensity 20); scale press 0.97 → 1.0; avoid pure #000000 (OLED smear)
- CSS/Technical Keywords: borderRadius: 16 (cards/buttons), background: LinearGradient #0a0a0f→#020203, border: StyleSheet.hairlineWidth rgba(255,255,255,0.08), BlurView intensity={20} tint='dark', useAnimatedStyle + withRepeat (blob oscillation), Easing.bezier(0.16,1,0.3,1), withSpring damping:20 stiffness:90, Haptics.impactAsync(ImpactFeedbackStyle.Light), scale: 0.97 press
- Implementation Checklist: ☐ No pure #000000 backgrounds, ☐ LinearGradient base screen, ☐ Animated ambient blobs (Reanimated, native driver), ☐ BlurView on tab bar and headers, ☐ borderRadius 16 on all cards, ☐ Haptic feedback on every Pressable, ☐ Bezier(0.16,1,0.3,1) easing used, ☐ Accent glow behind primary button, ☐ No solid grey borders (rgba only), ☐ Bottom sheets replace all modals
▍动效（只此一次，别加第二处）：
- 无入场，纯黑沉浸
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
新粗野（移动）
Neo Brutalism (Mobile)
移动端
补充
Creative tools, collab platforms, Gen Z marketing & e-commerce, portfolio sites, sticker-book style content apps
请以「Neo Brutalism (Mobile)」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #FFFDF5 / 辅色 #FF6B6B / 强调 #FFD93D
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 0px / 按钮圆角 0px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a Neo Brutalism (Mobile) mobile interface using neo brutalism, pop art, stickers, thick borders, cream background, hot red, vivid yellow, soft violet. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.
- Primary Colors: Cream #FFFDF5, Hot Red #FF6B6B, Vivid Yellow #FFD93D
- Effects & Animation: Thick 4px black borders on all major elements, hard offset shadows (4–8px, no blur), mechanical press: translateX/Y equal to shadow offset, slightly rotated cards/badges (-2deg/2deg), high-saturation color blocking, spring/linear animations only
- CSS/Technical Keywords: borderWidth: 4 (primary), 2 (secondary), borderRadius: 0 or 999 (badges only), backgroundColor: '#FFFDF5', shadow implemented as offset View, transform: [{translateX:4},{translateY:4}] on PressIn, fontFamily: 'SpaceGrotesk-Bold', fontWeight: '700/900', transform: [{ rotate: '-1deg' }] on cards, padding: 20
- Implementation Checklist: ☐ 4px borders on major elements, ☐ Hard offset shadow implemented via extra View, ☐ Mechanical press hides shadow, ☐ Cream canvas background, ☐ Pop-art color palette used, ☐ Cards/badges slightly rotated, ☐ No gradients or soft shadows, ☐ Only bold/black type weights, ☐ Badges slapped with absolute positioning, ☐ Anti-patterns (no subtle gray, no blur) avoided
▍动效（只此一次，别加第二处）：
- 瞬时位移（无平滑过渡即风格）
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
新拟态（移动）
Neumorphism (Mobile)
移动端
补充
Minimal hardware controls, smart home apps, aesthetic utility tools, health monitors, brand showcase pages
请以「Neumorphism (Mobile)」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #6C63FF / 辅色 #E0E5EC / 强调 #f6ff63
- 底 #ECEAF2 / 正文 #0F172A / 弱文 #475569 / 卡面 #ECEAF2
- 圆角 18px / 按钮圆角 14px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a Neumorphism (Mobile) mobile interface using neumorphism, soft ui, dual shadow, extruded, inset, clay surface, monochromatic, cool grey. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.
- Primary Colors: Accent Violet #6C63FF, Clay Base #E0E5EC
- Effects & Animation: Full-screen #E0E5EC base, dual-layer shadow via nested View (light top-left + dark bottom-right), extruded convex resting state, inset concave pressed/input state, Reanimated scale 0.97 on press, shadow opacity interpolates 1→0.4 on press, Haptics Light on every interaction, 8pt grid, no blur shadows (no shadowRadius blend), nested depth (extruded card contains inset icon slot)
- CSS/Technical Keywords: backgroundColor: '#E0E5EC', textPrimary: '#3D4852', textMuted: '#6B7280', accent: '#6C63FF', shadowLight: 'rgba(255,255,255,0.6)', shadowDark: 'rgba(163,177,198,0.7)', insetBg: '#D1D9E6', radiusCard: 32, radiusButton: 16, radiusPill: 999, shadowOffset: 6, shadowRadius: 10
- Implementation Checklist: ☐ Single #E0E5EC base applied across all screens, ☐ Dual shadow (light+dark) implemented via nested View, ☐ Extruded resting state on cards/buttons, ☐ Inset concave state on inputs, ☐ Scale 0.97 press + shadow opacity interpolation, ☐ Haptics Light on all presses, ☐ No black shadows or white backgrounds, ☐ Nested depth pattern (extruded→inset), ☐ Accent #6C63FF on active/focus only, ☐ 8pt grid spacing
▍动效（只此一次，别加第二处）：
- 开关/按钮的内凹按压反馈（150ms），无入场动画
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
精品 SaaS（移动）
SaaS Mobile (High-Tech Boutique)
移动端
补充
B2B SaaS mobile dashboards, fintech apps, developer tool mobile companions, marketing analytics apps, HR/operations apps, modern business productivity
请以「SaaS Mobile (High-Tech Boutique)」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #0052FF / 辅色 #4D7CFF / 强调 #ffad00
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 14px / 按钮圆角 10px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a SaaS Mobile (High-Tech Boutique) mobile interface using saas, electric blue, gradient, fintech, spring animation, dual font, glassmorphism, boutique. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.
- Primary Colors: Electric Blue #0052FF, Gradient End #4D7CFF
- Effects & Animation: Spring animations (mass:1 damping:15 stiffness:120); gradient buttons (0052FF→4D7CFF); scale press 0.96→1.0 with haptics; floating FAB with gentle bobbing (Reanimated); glassmorphism BlurView navigation bars; staggered fade-in entrance (Y:20→0 + opacity:0→1); pulsing status dot on section badges; layout transitions (LayoutAnimation or Reanimated entering)
- CSS/Technical Keywords: borderRadius: 16 (buttons/cards), LinearGradient colors={['#0052FF','#4D7CFF']}, shadowOpacity: 0.1, shadowRadius: 10, elevation: 4, Haptics.impactAsync(ImpactFeedbackStyle.Light) on press, withSpring({mass:1, damping:15, stiffness:120}), withTiming Y:20→0 opacity:0→1 staggered entrance, LayoutAnimation.configureNext for list updates, BlurView on nav bars
- Implementation Checklist: ☐ SafeAreaView wraps all screens, ☐ All touch targets ≥ 44×44px, ☐ Spring config used for all transitions, ☐ Gradient buttons (not flat), ☐ Haptic on every Pressable, ☐ Section badges with PulseDot, ☐ Staggered entrance animation on screen mount, ☐ JetBrains Mono for data labels, ☐ Calistoga for hero headlines, ☐ Elevation/shadow on cards
▍动效（只此一次，别加第二处）：
- 一次淡入
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
手绘素描（移动）
Sketch Hand-Drawn (Mobile)
移动端
补充
Low-fidelity prototyping, creative brands, children/picturebook apps, education tools, journaling apps, gamified puzzles
请以「Sketch Hand-Drawn (Mobile)」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #FF4D4D / 辅色 #2D2D2D / 强调 #4dffff
- 底 #0D0F16 / 正文 #EEF1F7 / 弱文 rgba(238,241,247,.68) / 卡面 #161923
- 圆角 15px 25px 20px 10px / 按钮圆角 14px 22px 16px 10px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a Sketch Hand-Drawn (Mobile) mobile interface using sketch, hand-drawn, handwriting, wobbly, imperfect, paper, kalam, organic. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.
- Primary Colors: Red Marker #FF4D4D, Pencil Black #2D2D2D
- Effects & Animation: Wobbly borderRadius (unique per corner: 15/25/20/10), borderWidth 2–3 solid/dashed, hard offset shadow via rear View (4px,4px) #2D2D2D, Kalam Bold headings, PatrickHand Regular body, slight rotation (-1deg/1deg) on cards, absolute SVG scribble overlays (arrows/tape/tacks), jiggle -2deg↔2deg on error, LayoutAnimation spring on layout changes, Haptics on press, paper texture repeating background
- CSS/Technical Keywords: backgroundColor: '#FDFBF7', cardBg: '#FFFFFF', textPrimary: '#2D2D2D', accentRed: '#FF4D4D', accentBlue: '#2D5DA1', accentYellow: '#FFF9C4', border: '#2D2D2D', shadowView: 'offset 4px 4px #2D2D2D', wobblyRadius: [15,25,20,10], fontHeading: 'Kalam-Bold', fontBody: 'PatrickHand-Regular'
- Implementation Checklist: ☐ Warm paper background texture applied, ☐ Kalam Bold headings, ☐ Wobbly corner radii on all cards, ☐ Hard offset shadow View (not blur), ☐ Cards slightly rotated, ☐ Button press shifts to cover shadow, ☐ SVG tape/tack decorations, ☐ PatrickHand for inputs, ☐ Jiggle error animation, ☐ Minimum 48x48 touch targets
▍动效（只此一次，别加第二处）：
- 一次入场动效
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
终端 CLI 风（移动）
Terminal CLI (Mobile)
移动端
补充
Developer tools, Web3/blockchain apps, geek-culture apps, ARG games, sci-fi/noir gaming companions, hacker/security tools, creative studio portfolios
请以「Terminal CLI (Mobile)」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #33FF00 / 辅色 #050505 / 强调 #cc00ff
- 底 #0D0F16 / 正文 #EEF1F7 / 弱文 rgba(238,241,247,.68) / 卡面 #161923
- 圆角 4px / 按钮圆角 2px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a Terminal CLI (Mobile) mobile interface using terminal, cli, matrix green, monospace, hacker, ascii, command line, developer. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.
- Primary Colors: Matrix Green #33FF00, OLED Black #050505
- Effects & Animation: Blinking cursor (500ms opacity loop), typewriter text reveal hook, scanline overlay (repeating lines 0.05 opacity), ASCII art headers, instant color inversion on press (bg-green text-black), haptic on every keystroke, boot sequence splash on launch
- CSS/Technical Keywords: borderRadius: 0 (ALL elements), borderWidth: 1, borderColor: '#33FF00', backgroundColor: '#050505', color: '#33FF00', fontFamily: 'SpaceMono-Regular' or JetBrains Mono, fontSize: 12 or 14 or 16 only, lineHeight: 1.2x fontSize, Haptics.impactAsync(Light) on every press, useAnimatedValue blink 500ms, hitSlop: 12px all sides for bracketed buttons
- Implementation Checklist: ☐ 0px border-radius everywhere, ☐ ASCII-style borders on cards, ☐ Boot sequence on launch, ☐ Blinking cursor component, ☐ Typewriter hook for new content, ☐ Scanline overlay (0.05 opacity), ☐ Haptic on every button press, ☐ Footer status bar component, ☐ hitSlop on all bracketed buttons (44×44dp), ☐ Reduced motion respected
▍动效（只此一次，别加第二处）：
- 扫描线一次扫过 + 标题辉光
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
Spectrum 2（Adobe）
Spectrum 2
平台语言
补充
色板为文字描述，见提示词
New Adobe-style creative and document surfaces adopting Spectrum 2
请以「Spectrum 2」风格，设计实现：〔在这里写下你的页面需求与主题，主题由你确定〕
▍本页设计 token（实际使用值，直接可用）：
- 主色 #2563EB / 辅色 #6b25eb / 强调 #ebad25
- 底 #F8FAFC / 正文 #0F172A / 弱文 #475569 / 卡面 #FFFFFF
- 圆角 4px / 按钮圆角 4px
▍官方风格数据（ui-ux-pro-max styles.csv 原文，零改写）：
- AI Prompt Keywords: Design a Spectrum 2 professional surface with updated typography, approachable icons, layered depth, adaptive themes, and expressive but controlled visuals. Follow official Spectrum 2 tokens and component guidance.
- Primary Colors: Spectrum 2 semantic themes with updated contrast and personalization
- Effects & Animation: Updated depth, expressive illustration, adaptive motion
- CSS/Technical Keywords: design tokens, semantic color, component states, focus-visible, reduced motion
- Implementation Checklist: Use official tokens and components; preserve platform conventions; test keyboard, contrast, zoom, motion preferences, and responsive behavior
▍动效（只此一次，别加第二处）：
- 无入场，1px 阴影过渡
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标（信息行必须有语义：批次号/期号/坐标/档期）
- 按钮尾部箭头 →；中点分隔的 meta 串；逐卡片 fade-in 上升
- 无语义的 01/02/03 编号（内容是真实序列才可用编号）
- 默认 Inter/Roboto 字体；emoji 充当图标（一律内联 SVG）；米白+赤陶 #D97757 默认配色
▍验收：正文对比度 ≥4.5:1；:focus-visible 焦点环；prefers-reduced-motion 降级；响应式 375/768/1440 无横向滚动
复制提示词
Hero + Features + CTA
落地页结构 No.1
落地结构
Hero with headline/image > Value prop > Key features (3-5) > CTA section > Footer
请按「落地页结构：Hero + Features + CTA」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero with headline/image > Value prop > Key features (3-5) > CTA section > Footer
- Primary CTA Placement: Hero (sticky) + Bottom
- Color Strategy: Hero: Brand primary or vibrant. Features: Card bg #FAFAFA. CTA: Contrasting accent color
- Recommended Effects: Hero parallax, feature card hover lift, CTA glow on hover
- Conversion Optimization: Deep CTA placement. For CTA label text, verify at least 4.5:1 against the button fill; use 7:1 only when the product explicitly targets AAA normal-text contrast. Keep focus and component boundaries independently visible. Disable hero parallax under reduced motion and render its static final state.
▍本样板 token（实际使用值）：
- 主 #000000 / 辅 #FFFFFF / 强调 #000000 / 底 #0D0F16 / 圆角 4px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Hero + Testimonials + CTA
落地页结构 No.2
落地结构
Hero > Problem statement > Solution overview > Testimonials carousel > CTA
请按「落地页结构：Hero + Testimonials + CTA」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero > Problem statement > Solution overview > Testimonials carousel > CTA
- Primary CTA Placement: Hero (sticky) + Post-testimonials
- Color Strategy: Hero: Brand color. Testimonials: Light bg #F5F5F5. Quotes: Italic, muted color #666. CTA: Vibrant
- Recommended Effects: Testimonial carousel slide animations, quote marks animations, avatar fade-in
- Conversion Optimization: Social proof before CTA. Use a concise set of verified testimonials with photo, name, and role. CTA after social proof. Provide previous/next and pause controls; stop rotation on focus, hover, and reduced motion; announce slide position. Previous/next buttons and keyboard controls must expose every slide without dragging.
▍本样板 token（实际使用值）：
- 主 #FF0000 / 辅 #0000FF / 强调 #FFFF00 / 底 #0D0F16 / 圆角 0px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Product Demo + Features
落地页结构 No.3
落地结构
Hero > Product video/mockup (center) > Feature breakdown per section > Comparison (optional) > CTA
请按「落地页结构：Product Demo + Features」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero > Product video/mockup (center) > Feature breakdown per section > Comparison (optional) > CTA
- Primary CTA Placement: Video center + CTA right/bottom
- Color Strategy: Video surround: Brand color overlay. Features: Icon color #0080FF. Text: Dark #222
- Recommended Effects: Video play button pulse, feature scroll reveals, demo interaction highlights
- Conversion Optimization: Use an interactive demo only when it explains value better than static media. Provide captions, transcript, visible play/pause controls, and a non-video fallback; do not autoplay under reduced motion. Pause media when offscreen or hidden and keep the final product state available as static content.
▍本样板 token（实际使用值）：
- 主 #F5F5F5 / 辅 #f5f5f5 / 强调 #f5f5f5 / 底 #F8FAFC / 圆角 18px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Minimal Single Column
落地页结构 No.4
落地结构
Hero headline > Short description > Benefit bullets (3 max) > CTA > Footer
请按「落地页结构：Minimal Single Column」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero headline > Short description > Benefit bullets (3 max) > CTA > Footer
- Primary CTA Placement: Center, large CTA button
- Color Strategy: Minimalist: Brand + white #FFFFFF + accent. Verify CTA label text against its button fill at 4.5:1 minimum; use 7:1 only for an explicit AAA normal-text target.
- Recommended Effects: Minimal hover effects. Smooth scroll. CTA scale on hover (subtle)
- Conversion Optimization: Single CTA focus. Large typography. Lots of whitespace. No nav clutter. Mobile-first.
▍本样板 token（实际使用值）：
- 主 #F5E6C8 / 辅 #D4A574 / 强调 #4A7B7C / 底 #FAF7F0 / 圆角 6px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Funnel (3-Step Conversion)
落地页结构 No.5
落地结构
Hero > Step 1 (problem) > Step 2 (solution) > Step 3 (action) > CTA progression
请按「落地页结构：Funnel (3-Step Conversion)」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero > Step 1 (problem) > Step 2 (solution) > Step 3 (action) > CTA progression
- Primary CTA Placement: Each step: mini-CTA. Final: main CTA
- Color Strategy: Step colors: 1 (Red/Problem), 2 (Orange/Process), 3 (Green/Solution). CTA: Brand color
- Recommended Effects: Step number animations, progress bar fill, step transitions smooth scroll
- Conversion Optimization: Progressive disclosure. Show only essential info per step. Use progress indicators. Multiple CTAs.
▍本样板 token（实际使用值）：
- 主 #0080FF / 辅 #FF1493 / 强调 #00FFFF / 底 #F8FAFC / 圆角 14px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Comparison Table + CTA
落地页结构 No.6
落地结构
Hero > Problem intro > Comparison table (product vs competitors) > Pricing (optional) > CTA
请按「落地页结构：Comparison Table + CTA」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero > Problem intro > Comparison table (product vs competitors) > Pricing (optional) > CTA
- Primary CTA Placement: Table: Right column. CTA: Below table
- Color Strategy: Table: Alternating rows (white/light grey). Your product: Highlight #FFFACD (light yellow) or green. Text: Dark
- Recommended Effects: Table row hover highlight, price toggle animations, feature checkmark animations
- Conversion Optimization: Use comparison to show unique value. Highlight your product row. Include 'free trial' in pricing row.
▍本样板 token（实际使用值）：
- 主 #FF71CE / 辅 #FFCE5C / 强调 #86CCCA / 底 #F8FAFC / 圆角 14px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Lead Magnet + Form
落地页结构 No.7
落地结构
Hero (benefit headline) > Lead magnet preview (ebook cover, checklist, etc) > Form (minimal fields) > CTA submit
请按「落地页结构：Lead Magnet + Form」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero (benefit headline) > Lead magnet preview (ebook cover, checklist, etc) > Form (minimal fields) > CTA submit
- Primary CTA Placement: Form CTA: Submit button
- Color Strategy: Lead magnet: Professional design. Form: Clean white bg. Inputs: Light border #CCCCCC. CTA: Brand color
- Recommended Effects: Form focus state animations, input validation animations, success confirmation animation
- Conversion Optimization: Ask only for information necessary to deliver the lead magnet. Preview its value and show submission progress.
▍本样板 token（实际使用值）：
- 主 #C8E0F4 / 辅 #F5E0E8 / 强调 #E8E8E8 / 底 #ECEAF2 / 圆角 18px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Pricing Page + CTA
落地页结构 No.8
落地结构
Hero (pricing headline) > Price comparison cards > Feature comparison table > FAQ section > Final CTA
请按「落地页结构：Pricing Page + CTA」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero (pricing headline) > Price comparison cards > Feature comparison table > FAQ section > Final CTA
- Primary CTA Placement: Each card: CTA button. Sticky CTA in nav
- Color Strategy: Free: Grey, Starter: Blue, Pro: Green/Gold, Enterprise: Dark. Cards: 1px border, shadow
- Recommended Effects: Price toggle animation (monthly/yearly), card comparison highlight, FAQ accordion open/close
- Conversion Optimization: Highlight the plan that matches the intended audience and show actual annual savings transparently. Use FAQs to address concerns.
▍本样板 token（实际使用值）：
- 主 #228B22 / 辅 #8B4513 / 强调 #87CEEB / 底 #F8FAFC / 圆角 20px 26px 18px 28px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Video-First Hero
落地页结构 No.9
落地结构
Hero with video background > Key features overlay > Benefits section > CTA
请按「落地页结构：Video-First Hero」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero with video background > Key features overlay > Benefits section > CTA
- Primary CTA Placement: Overlay on video (center/bottom) + Bottom section
- Color Strategy: Use an overlay strong enough for text contrast. Brand accent for CTA. Light text only when the measured contrast passes.
- Recommended Effects: Video autoplay muted, parallax scroll, text fade-in on scroll
- Conversion Optimization: Use video only when it demonstrates value better than static media. Add captions for accessibility. Compress video for performance. Provide captions and a visible pause control; use a static poster when reduced motion is requested. Pause video when offscreen or hidden; the reduced-motion poster must preserve the final message and CTA.
▍本样板 token（实际使用值）：
- 主 #00FF00 / 辅 #FF00FF / 强调 #00FFFF / 底 #0D0F16 / 圆角 4px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Scroll-Triggered Storytelling
落地页结构 No.10
落地结构
Intro hook > Chapter 1 (problem) > Chapter 2 (journey) > Chapter 3 (solution) > Climax CTA
请按「落地页结构：Scroll-Triggered Storytelling」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Intro hook > Chapter 1 (problem) > Chapter 2 (journey) > Chapter 3 (solution) > Climax CTA
- Primary CTA Placement: End of each chapter (mini) + Final climax CTA
- Color Strategy: Progressive reveal. Each chapter has distinct color. Building intensity.
- Recommended Effects: ScrollTrigger animations, parallax layers, progressive disclosure, chapter transitions
- Conversion Optimization: Keep the narrative understandable without scroll-driven effects. Use progress indicator. Mobile: simplify animations. Keep DOM reading order complete; disable parallax and scroll-scrub under reduced motion. Pause scroll animation when offscreen or hidden and render each chapter in its final readable state under reduced motion.
▍本样板 token（实际使用值）：
- 主 #FF71CE / 辅 #01CDFE / 强调 #05FFA1 / 底 #F8FAFC / 圆角 14px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
AI Personalization Landing
落地页结构 No.11
落地结构
Dynamic hero (personalized) > Relevant features > Tailored testimonials > Smart CTA
请按「落地页结构：AI Personalization Landing」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Dynamic hero (personalized) > Relevant features > Tailored testimonials > Smart CTA
- Primary CTA Placement: Context-aware placement based on user segment
- Color Strategy: Adaptive based on user data. A/B test color variations per segment.
- Recommended Effects: Dynamic content swap, fade transitions, personalized product recommendations
- Conversion Optimization: Validate personalization with consent-aware product analytics. Requires analytics integration. Fallback for new users.
▍本样板 token（实际使用值）：
- 主 #001F3F / 辅 #228B22 / 强调 #800020 / 底 #F8FAFC / 圆角 16px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Waitlist/Coming Soon
落地页结构 No.12
落地结构
Hero with countdown > Product teaser/preview > Email capture form > Social proof (waitlist count)
请按「落地页结构：Waitlist/Coming Soon」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero with countdown > Product teaser/preview > Email capture form > Social proof (waitlist count)
- Primary CTA Placement: Email form prominent (above fold) + Sticky form on scroll
- Color Strategy: Anticipation: Dark + accent highlights. Countdown in brand color. Urgency indicators.
- Recommended Effects: Countdown timer animation, email validation feedback, success confetti, social share buttons
- Conversion Optimization: Explain early-access benefits without fabricated scarcity. Show a waitlist count only when it is current, verified, and dated. Provide a static launch deadline, pause decorative countdown motion when offscreen/hidden, and render the final readable timer state under reduced motion. Email form and referral actions remain keyboard operable.
▍本样板 token（实际使用值）：
- 主 #F5F5F5 / 辅 #333333 / 强调 #f5f5f5 / 底 #0D0F16 / 圆角 10px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Comparison Table Focus
落地页结构 No.13
落地结构
Hero (problem statement) > Comparison matrix (you vs competitors) > Feature deep-dive > Winner CTA
请按「落地页结构：Comparison Table Focus」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero (problem statement) > Comparison matrix (you vs competitors) > Feature deep-dive > Winner CTA
- Primary CTA Placement: After comparison table (highlighted row) + Bottom
- Color Strategy: Your product column highlighted (accent bg or green). Competitors neutral. Checkmarks green.
- Recommended Effects: Table row hover highlight, feature checkmark animations, sticky comparison header
- Conversion Optimization: Show value vs competitors. Measure comparison performance with product-specific analytics. Be factual. Include pricing if favorable.
▍本样板 token（实际使用值）：
- 主 #2563EB / 辅 #6b25eb / 强调 #ebad25 / 底 #F8FAFC / 圆角 14px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Pricing-Focused Landing
落地页结构 No.14
落地结构
Hero (value proposition) > Pricing cards (3 tiers) > Feature comparison > FAQ > Final CTA
请按「落地页结构：Pricing-Focused Landing」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero (value proposition) > Pricing cards (3 tiers) > Feature comparison > FAQ > Final CTA
- Primary CTA Placement: Each pricing card + Sticky CTA in nav + Bottom
- Color Strategy: Popular plan highlighted (brand color border/bg). Free: grey. Enterprise: dark/premium.
- Recommended Effects: Price toggle monthly/annual animation, card hover lift, FAQ accordion smooth open
- Conversion Optimization: Show actual monthly and annual totals and savings transparently. Explain plan differences and address objections in the FAQ.
▍本样板 token（实际使用值）：
- 主 #6750A4 / 辅 #E8DEF8 / 强调 #7D5260 / 底 #F8FAFC / 圆角 28px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
App Store Style Landing
落地页结构 No.15
落地结构
Hero with device mockup > Screenshots carousel > Features with icons > Reviews/ratings > Download CTAs
请按「落地页结构：App Store Style Landing」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero with device mockup > Screenshots carousel > Features with icons > Reviews/ratings > Download CTAs
- Primary CTA Placement: Download buttons prominent (App Store + Play Store) throughout
- Color Strategy: Dark/light matching app store feel. Star ratings in gold. Screenshots with device frames.
- Recommended Effects: Device mockup rotations, screenshot slider, star rating animations, download button pulse
- Conversion Optimization: Show real screenshots and only current verified ratings. Provide platform-specific CTAs, buttons and keyboard controls in addition to swipe, and pause any auto-rotation. Stop auto-rotation on focus, hover, offscreen/hidden, or reduced motion and render the selected screenshot as the static final state.
▍本样板 token（实际使用值）：
- 主 #D02020 / 辅 #1040C0 / 强调 #F0C020 / 底 #F8FAFC / 圆角 0px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
FAQ/Documentation Landing
落地页结构 No.16
落地结构
Hero with search bar > Popular categories > FAQ accordion > Contact/support CTA
请按「落地页结构：FAQ/Documentation Landing」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero with search bar > Popular categories > FAQ accordion > Contact/support CTA
- Primary CTA Placement: Search bar prominent + Contact CTA for unresolved questions
- Color Strategy: Clean, high readability. Minimal color. Category icons in brand color. Success green for resolved.
- Recommended Effects: Search autocomplete, smooth accordion open/close, category hover, helpful feedback buttons
- Conversion Optimization: Reduce support tickets. Track search analytics. Show related articles. Contact escalation path.
▍本样板 token（实际使用值）：
- 主 #87CEEB / 辅 #FFB6C1 / 强调 #90EE90 / 底 #F8FAFC / 圆角 24px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Immersive/Interactive Experience
落地页结构 No.17
落地结构
Full-screen interactive element > Guided product tour > Key benefits revealed > CTA after completion
请按「落地页结构：Immersive/Interactive Experience」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Full-screen interactive element > Guided product tour > Key benefits revealed > CTA after completion
- Primary CTA Placement: After interaction complete + Skip option for impatient users
- Color Strategy: Immersive experience colors. Dark background for focus. Highlight interactive elements.
- Recommended Effects: WebGL, 3D interactions, gamification elements, progress indicators, reward animations
- Conversion Optimization: Measure engagement for the specific audience and device mix. Performance trade-off. Provide skip option. Mobile fallback essential. Provide skip, keyboard, reduced-motion, and non-3D fallback paths. Pause animation when offscreen/hidden and preserve the completed final state when reduced motion is enabled.
▍本样板 token（实际使用值）：
- 主 #FDBCB4 / 辅 #ADD8E6 / 强调 #98FF98 / 底 #F8FAFC / 圆角 26px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Event/Conference Landing
落地页结构 No.18
落地结构
Hero (date/location/countdown) > Speakers grid > Agenda/schedule > Sponsors > Register CTA
请按「落地页结构：Event/Conference Landing」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero (date/location/countdown) > Speakers grid > Agenda/schedule > Sponsors > Register CTA
- Primary CTA Placement: Register CTA sticky + After speakers + Bottom
- Color Strategy: Urgency colors (countdown). Event branding. Speaker cards professional. Sponsor logos neutral.
- Recommended Effects: Countdown timer, speaker hover cards with bio, agenda tabs, early bird countdown
- Conversion Optimization: Early bird pricing with deadline. Social proof (past attendees). Speaker credibility. Multi-ticket discounts. Expose the exact deadline as text; pause decorative countdown motion offscreen/hidden and show a static final state under reduced motion.
▍本样板 token（实际使用值）：
- 主 #2563EB / 辅 #6b25eb / 强调 #ebad25 / 底 #F8FAFC / 圆角 12px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Product Review/Ratings Focused
落地页结构 No.19
落地结构
Hero (product + aggregate rating) > Rating breakdown > Individual reviews > Buy/CTA
请按「落地页结构：Product Review/Ratings Focused」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero (product + aggregate rating) > Rating breakdown > Individual reviews > Buy/CTA
- Primary CTA Placement: After reviews summary + Buy button alongside reviews
- Color Strategy: Trust colors. Star ratings gold. Verified badge green. Review sentiment colors.
- Recommended Effects: Star fill animations, review filtering, helpful vote interactions, photo lightbox
- Conversion Optimization: User-generated content builds trust. Show verified purchases. Filter by rating. Respond to negative reviews.
▍本样板 token（实际使用值）：
- 主 #2563EB / 辅 #6b25eb / 强调 #ebad25 / 底 #F8FAFC / 圆角 6px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Community/Forum Landing
落地页结构 No.20
落地结构
Hero (community value prop) > Popular topics/categories > Active members showcase > Join CTA
请按「落地页结构：Community/Forum Landing」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero (community value prop) > Popular topics/categories > Active members showcase > Join CTA
- Primary CTA Placement: Join button prominent + After member showcase
- Color Strategy: Warm, welcoming. Member photos add humanity. Topic badges in brand colors. Activity indicators green.
- Recommended Effects: Member avatars animation, activity feed live updates, topic hover previews, join success celebration
- Conversion Optimization: Preview real community value and simplify onboarding. Show member and activity counts only when current, verified, and dated; label activity as live only when backed by an active real-time source. Provide pause/update-frequency controls for moving feeds, stop work offscreen/hidden, and keep a static final state under reduced motion.
▍本样板 token（实际使用值）：
- 主 #000000 / 辅 #121212 / 强调 #0A0E27 / 底 #0D0F16 / 圆角 14px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Before-After Transformation
落地页结构 No.21
落地结构
Hero (problem state) > Transformation slider/comparison > How it works > Results CTA
请按「落地页结构：Before-After Transformation」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero (problem state) > Transformation slider/comparison > How it works > Results CTA
- Primary CTA Placement: After transformation reveal + Bottom
- Color Strategy: Contrast: muted/grey (before) vs vibrant/colorful (after). Success green for results.
- Recommended Effects: Slider comparison interaction, before/after reveal animations, result counters, testimonial videos
- Conversion Optimization: Visual proof of value. Measure the outcome with product-specific analytics. Real results. Specific metrics. Guarantee offer. Provide arrow buttons and keyboard steps so dragging is not required. Arrow buttons and keyboard steps expose the same final before/after positions; reduced motion removes reveal animation.
▍本样板 token（实际使用值）：
- 主 #2563EB / 辅 #6b25eb / 强调 #ebad25 / 底 #F8FAFC / 圆角 0px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Marketplace / Directory
落地页结构 No.22
落地结构
Hero (Search focused) > Categories > Featured Listings > Trust/Safety > CTA (Become a host/seller)
请按「落地页结构：Marketplace / Directory」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero (Search focused) > Categories > Featured Listings > Trust/Safety > CTA (Become a host/seller)
- Primary CTA Placement: Hero Search Bar + Navbar 'List your item'
- Color Strategy: Search: High contrast. Categories: Visual icons. Trust: Blue/Green.
- Recommended Effects: Search autocomplete animation, map hover pins, card carousel
- Conversion Optimization: Search is the primary CTA. Reduce friction with useful suggestions. For featured-listing carousels, provide previous/next and play/pause buttons, full keyboard access, and a single-pointer alternative to swiping; stop rotation on focus, hover, offscreen/hidden, or reduced motion and render the selected listing as the static final state.
▍本样板 token（实际使用值）：
- 主 #22C55E / 辅 #EF4444 / 强调 #F59E0B / 底 #F8FAFC / 圆角 14px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Newsletter / Content First
落地页结构 No.23
落地结构
Hero (Value Prop + Form) > Recent Issues/Archives > Social Proof (Subscriber count) > About Author
请按「落地页结构：Newsletter / Content First」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero (Value Prop + Form) > Recent Issues/Archives > Social Proof (Subscriber count) > About Author
- Primary CTA Placement: Hero inline form + Sticky header form
- Color Strategy: Minimalist. Paper-like background. Text focus. Accent color for Subscribe.
- Recommended Effects: Text highlight animations, typewriter effect, subtle fade-in
- Conversion Optimization: Keep the form to the fields actually required and link to a sample issue. Show a subscriber count only when it is current, verified, and dated; otherwise use qualitative social proof.
▍本样板 token（实际使用值）：
- 主 #39FF14 / 辅 #BF00FF / 强调 #FF1493 / 底 #F8FAFC / 圆角 8px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Webinar Registration
落地页结构 No.24
落地结构
Hero (Topic + Timer + Form) > What you'll learn > Speaker Bio > Urgency/Bonuses > Form (again)
请按「落地页结构：Webinar Registration」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero (Topic + Timer + Form) > What you'll learn > Speaker Bio > Urgency/Bonuses > Form (again)
- Primary CTA Placement: Hero (Right side form) + Bottom anchor
- Color Strategy: Urgency: Red/Orange. Professional: Blue/Navy. Form: High contrast white.
- Recommended Effects: Countdown timer, speaker avatar float, urgent ticker
- Conversion Optimization: State the event time and timezone in text. Claim limited seats or live status only when current capacity or stream state is verified and timestamped. Provide pause/hide controls for the urgency ticker, stop it offscreen/hidden, keep controls keyboard operable, and render a static final state under reduced motion.
▍本样板 token（实际使用值）：
- 主 #FF00FF / 辅 #00FF00 / 强调 #FFFF00 / 底 #F8FAFC / 圆角 14px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Enterprise Gateway
落地页结构 No.25
落地结构
Hero (Video/Mission) > Solutions by Industry > Solutions by Role > Client Logos > Contact Sales
请按「落地页结构：Enterprise Gateway」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero (Video/Mission) > Solutions by Industry > Solutions by Role > Client Logos > Contact Sales
- Primary CTA Placement: Contact Sales (Primary) + Login (Secondary)
- Color Strategy: Corporate: Navy/Grey. High integrity. Conservative accents.
- Recommended Effects: Slow video background, logo carousel, tab switching for industries
- Conversion Optimization: Path selection (I am a...). Mega menu navigation. Trust signals prominent. Provide pause/stop for video and rotating logos; stop on focus and reduced motion. Logo carousel controls must be keyboard operable; pause moving media offscreen/hidden and render a static final state under reduced motion.
▍本样板 token（实际使用值）：
- 主 #2563EB / 辅 #6b25eb / 强调 #ebad25 / 底 #F8FAFC / 圆角 8px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Portfolio Grid
落地页结构 No.26
落地结构
Hero (Name/Role) > Project Grid (Masonry) > About/Philosophy > Contact
请按「落地页结构：Portfolio Grid」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero (Name/Role) > Project Grid (Masonry) > About/Philosophy > Contact
- Primary CTA Placement: Project Card Hover + Footer Contact
- Color Strategy: Neutral background (let work shine). Text: Black/White. Accent: Minimal.
- Recommended Effects: Image lazy load reveal, hover overlay info, lightbox view
- Conversion Optimization: Visuals first. Filter by category. Fast loading essential.
▍本样板 token（实际使用值）：
- 主 #000000 / 辅 #FFFFFF / 强调 #000000 / 底 #0D0F16 / 圆角 4px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Horizontal Scroll Journey
落地页结构 No.27
落地结构
Intro (Vertical) > The Journey (Horizontal Track) > Detail Reveal > Vertical Footer
请按「落地页结构：Horizontal Scroll Journey」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Intro (Vertical) > The Journey (Horizontal Track) > Detail Reveal > Vertical Footer
- Primary CTA Placement: Floating Sticky CTA or End of Horizontal Track
- Color Strategy: Continuous palette transition. Chapter colors. Progress bar #000000.
- Recommended Effects: Scroll-jacking (careful), parallax layers, horizontal slide, progress indicator
- Conversion Optimization: Immersive product discovery. High engagement. Keep navigation visible. Preserve a normal vertical navigation path and disable scroll-jacking under reduced motion. Pause effects when offscreen/hidden and render every chapter in its final vertical reading state under reduced motion.
▍本样板 token（实际使用值）：
- 主 #FF0000 / 辅 #0000FF / 强调 #FFFF00 / 底 #0D0F16 / 圆角 0px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Bento Grid Showcase
落地页结构 No.28
落地结构
Hero > Bento Grid (Key Features) > Detail Cards > Tech Specs > CTA
请按「落地页结构：Bento Grid Showcase」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero > Bento Grid (Key Features) > Detail Cards > Tech Specs > CTA
- Primary CTA Placement: Floating Action Button or Bottom of Grid
- Color Strategy: Card backgrounds: #F5F5F7 or Glass. Icons: Vibrant brand colors. Text: Dark.
- Recommended Effects: Hover card scale (1.02), video inside cards, tilt effect, staggered reveal
- Conversion Optimization: Scannable value props. High information density without clutter. Mobile stack. Keep cards usable without hover and suppress tilt/stagger/video motion under reduced motion. Pause card media offscreen/hidden and render cards in their final readable state under reduced motion.
▍本样板 token（实际使用值）：
- 主 #F5F5F5 / 辅 #f5f5f5 / 强调 #f5f5f5 / 底 #F8FAFC / 圆角 18px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Interactive 3D Configurator
落地页结构 No.29
落地结构
Hero (Configurator) > Feature Highlight (synced) > Price/Specs > Purchase
请按「落地页结构：Interactive 3D Configurator」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero (Configurator) > Feature Highlight (synced) > Price/Specs > Purchase
- Primary CTA Placement: Inside Configurator UI + Sticky Bottom Bar
- Color Strategy: Neutral studio background. Product: Realistic materials. UI: Minimal overlay.
- Recommended Effects: Real-time rendering, material swap animation, camera rotate/zoom, light reflection
- Conversion Optimization: Let users inspect product details before purchase. Provide buttons and keyboard controls for rotate/zoom plus a 2D/specification fallback. Named rotate/zoom buttons and keyboard controls replace drag gestures; pause rendering offscreen/hidden and preserve the chosen configuration as the reduced-motion final state.
▍本样板 token（实际使用值）：
- 主 #F5E6C8 / 辅 #D4A574 / 强调 #4A7B7C / 底 #FAF7F0 / 圆角 6px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
AI-Driven Dynamic Landing
落地页结构 No.30
落地结构
Prompt/Input Hero > Generated Result Preview > How it Works > Value Prop
请按「落地页结构：AI-Driven Dynamic Landing」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Prompt/Input Hero > Generated Result Preview > How it Works > Value Prop
- Primary CTA Placement: Input Field (Hero) + 'Try it' Buttons
- Color Strategy: Adaptive to user input. Dark mode for compute feel. Neon accents.
- Recommended Effects: Typing text effects, shimmering generation loaders, morphing layouts
- Conversion Optimization: Immediate value demonstration. 'Show, don't tell'. Low friction start. Disable typing, shimmer, and morphing effects when reduced motion is requested. Pause loaders offscreen/hidden and render generated content in its final state under reduced motion.
▍本样板 token（实际使用值）：
- 主 #0080FF / 辅 #FF1493 / 强调 #00FFFF / 底 #F8FAFC / 圆角 14px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Feature-Rich Showcase
落地页结构 No.31
落地结构
Hero (value prop) > Feature grid/cards (4-6) > Use cases or benefits > Social proof or logos > CTA
请按「落地页结构：Feature-Rich Showcase」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero (value prop) > Feature grid/cards (4-6) > Use cases or benefits > Social proof or logos > CTA
- Primary CTA Placement: Hero (sticky) + After features + Bottom
- Color Strategy: Brand primary + card bg #FAFAFA. Feature icons accent. CTA contrasting.
- Recommended Effects: Feature card hover lift, scroll reveal, icon micro-interactions
- Conversion Optimization: Clear feature hierarchy. One key message per card. Strong CTA repetition.
▍本样板 token（实际使用值）：
- 主 #FF71CE / 辅 #FFCE5C / 强调 #86CCCA / 底 #F8FAFC / 圆角 14px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Hero-Centric Design
落地页结构 No.32
落地结构
Full-bleed Hero (headline + visual) > Single value prop strip > Key benefit or proof > Primary CTA
请按「落地页结构：Hero-Centric Design」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Full-bleed Hero (headline + visual) > Single value prop strip > Key benefit or proof > Primary CTA
- Primary CTA Placement: Hero dominant (center/bottom) + Sticky nav CTA
- Color Strategy: Hero: High-impact visual. Minimal text. Verify CTA label text against the button fill at 4.5:1 minimum; use 7:1 only for an explicit AAA normal-text target.
- Recommended Effects: Hero parallax or video, CTA pulse on scroll, minimal chrome
- Conversion Optimization: One primary CTA. Let the hero dominate the initial viewport without hiding the next content cue. Use a static hero and non-pulsing CTA when reduced motion is requested; provide video controls. Pause hero media offscreen/hidden and keep the final hero message and CTA static under reduced motion.
▍本样板 token（实际使用值）：
- 主 #C8E0F4 / 辅 #F5E0E8 / 强调 #E8E8E8 / 底 #ECEAF2 / 圆角 18px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Trust & Authority + Conversion
落地页结构 No.33
落地结构
Hero (mission/credibility) > Proof (logos, certs, stats) > Solution overview > Clear CTA path
请按「落地页结构：Trust & Authority + Conversion」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero (mission/credibility) > Proof (logos, certs, stats) > Solution overview > Clear CTA path
- Primary CTA Placement: Contact Sales / Get Quote (primary) + Nav
- Color Strategy: Navy/Grey corporate. Trust blue. Accent for CTA only.
- Recommended Effects: Logo carousel, stat counters, testimonial strip
- Conversion Optimization: Security badges. Case studies. Transparent pricing. Low-friction form. Provide pause/stop and stop the logo carousel on focus, hover, and reduced motion. Previous/next controls provide the keyboard equivalent; pause offscreen/hidden and render a static logo set under reduced motion.
▍本样板 token（实际使用值）：
- 主 #228B22 / 辅 #8B4513 / 强调 #87CEEB / 底 #F8FAFC / 圆角 20px 26px 18px 28px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词
Real-Time / Operations Landing
落地页结构 No.34
落地结构
Hero (product + live preview or status) > Key metrics/indicators > How it works > CTA (Start trial / Contact)
请按「落地页结构：Real-Time / Operations Landing」官方模式实现落地页：〔在这里写下你的产品/需求〕
▍官方结构（landing.csv 原文，零改写）：
- Section Order: Hero (product + live preview or status) > Key metrics/indicators > How it works > CTA (Start trial / Contact)
- Primary CTA Placement: Primary CTA in nav + After metrics
- Color Strategy: Dark or neutral. Status colors (green/amber/red). Data-dense but scannable.
- Recommended Effects: Live data ticker, status pulse, minimal decoration
- Conversion Optimization: Offer a demo or sandbox and show trust signals. Label telemetry as live only when backed by a current source, with update time and stale state. Provide pause/hide or update-frequency controls for tickers and previews, stop offscreen/hidden work, support keyboard controls, and render a static final snapshot under reduced motion.
▍本样板 token（实际使用值）：
- 主 #00FF00 / 辅 #FF00FF / 强调 #00FFFF / 底 #0D0F16 / 圆角 4px
▍必须避开（AI 指纹清单，frontend-design 原则）：
- ALL-CAPS 装饰性眉标；按钮尾部箭头 →；中点分隔 meta 串；逐卡片 fade-in
- 无语义 01/02/03 编号（结构分区名须有语义）；默认 Inter/Roboto；emoji 图标
▍验收：区块顺序严格按官方 Section Order；正文对比度 ≥4.5:1；:focus-visible；prefers-reduced-motion；响应式 375/768/1440
复制提示词