@event4u/agent-config 5.10.1 → 6.1.0

package/dist/agent-src/skills/design-intelligence/data/design-languages/saas.txt

@@ -0,0 +1,109 @@
+SaaS
+一个大胆、极简主义的现代视觉系统，将简洁的美学与动态的执行相结合。具有标志性的电蓝渐变、复杂的双字体配对（Calistoga+Inter）、动画英雄图形、倒置对比部分和贯穿始终的微交互。专业而前卫的设计——自信而不杂乱。
+1. 业务管理与协作系统 (B2B / Operations)
+2. 开发者工具与云服务平台
+3. 企业内部工具与人力资源管理 (HRM)
+4. 营销与数据分析工具
+
+System Prompt: Mobile Excellence Design System (React Native)
+Design Philosophy
+Core Principle
+Clarity through structure, character through bold detail. This system adapts high-end editorial aesthetics for the palm of the hand. It rejects the "miniature website" feel in favor of a native-first, tactile experience.
+Whitespace is a precision instrument for thumb-driven navigation. Motion is not decoration; it is spatial feedback. Color is concentrated into a single, Electric Blue signature that guides the user through the app's hierarchy.
+The Visual Vibe
+"High-Tech Boutique." Imagine a premium fintech app combined with a modern design portfolio. It feels engineered, yet artistic; minimal, yet alive.
+● Confident: Bold typography and vibrant accents.
+● Sophisticated: Layered shadows and dual-font systems that whisper "quality."
+● Tactile: Haptic-ready interactions and fluid spring animations.
+● Premium: Generous "safe areas" and elevated surfaces.
+
+The DNA of This Style
+1. The Signature Gradient (Mobile Optimized)
+The Electric Blue gradient (#0052FF → #4D7CFF) is the heartbeat. In React Native, this is implemented via react-native-linear-gradient.
+● Usage: Primary Buttons, Active Tab Icons, Header Backgrounds, and Progress Indicators.
+● Why: Gradients provide depth on mobile screens where flat colors often feel "dead."
+2. Physical Depth & Living Elements
+Mobile is a 3D space. We use Z-index and shadows to create a clear mental model:
+● Floating Action Buttons (FAB): Gently bobbing using react-native-reanimated.
+● Surface Elevation: Cards use shadowColor and elevation (Android) to feel like physical layers.
+● Pulsing States: Small status dots use a scale loop to signal "Active" or "Live."
+3. Sophisticated Dual-Font Typography
+● Display: Calistoga (or Serif fallback) for Headlines. It adds human warmth to the digital interface.
+● UI/Body: Inter (or System Sans-Serif). The workhorse for readability.
+● Technical: JetBrains Mono for labels and data points.
+4. Texture & Micro-Patterns
+To prevent "Flat Design Fatigue":
+● Subtle Overlays: Use a very low-opacity dot pattern (PNG/SVG) on dark backgrounds.
+● Glassmorphism: Use BlurView (Expo/Community) for navigation bars to create a sense of context.
+
+Design Token System (The DNA)
+Color Strategy
+Token
+Value
+Usage
+background
+#FAFAFA
+Primary app canvas (warm off-white).
+foreground
+#0F172A
+Deep slate for primary text and dark sections.
+muted
+#F1F5F9
+Secondary surfaces (gray fills).
+accent
+#0052FF
+Primary actions and brand touchpoints.
+accent-sec
+#4D7CFF
+Gradient endpoint.
+card
+#FFFFFF
+Pure white for elevated components.
+border
+#E2E8F0
+Hairline dividers (0.5pt to 1pt).
+Typography Scale
+● Hero (H1): 36pt - 42pt | Calistoga | Leading 1.1
+● Section (H2): 28pt - 32pt | Calistoga | Leading 1.2
+● Body: 16pt - 18pt | Inter | Leading 1.5
+● Label: 12pt | JetBrains Mono | Uppercase | Letter Spacing 1.5
+
+Component Specifications (React Native)
+1. Primary Button (Pressable + Reanimated)
+● Height: 56px (Standard touch target).
+● Radius: 16px (Rounded-2xl).
+● Interaction: * On onPressIn: Scale down to 0.96.
+    ○ On onPressOut: Spring back to 1.0.
+● Style: Linear Gradient background with shadow-accent.
+2. The Section Badge
+A consistent pattern for orienting the user:
+JavaScript
+
+// Structure
+<View style={{flexDirection: 'row', alignItems: 'center', borderRadius: 100, paddingHorizontal: 16, paddingVertical: 8, backgroundColor: 'rgba(0, 82, 255, 0.05)', borderWidth: 1, borderColor: 'rgba(0, 82, 255, 0.2)'}}>
+  <PulseDot color="#0052FF" />
+  <Text style={{fontFamily: 'JetBrains Mono', fontSize: 12, color: '#0052FF'}}>SECTION NAME</Text>
+</View>
+
+3. Content Cards
+● Border: 1pt hairline in Slate-200.
+● Shadow: * iOS: shadowOpacity: 0.1, shadowRadius: 10, shadowOffset: {width: 0, height: 4}.
+    ○ Android: elevation: 4.
+● Padding: 24px (Consistent gutter).
+
+Motion & Interaction Rules
+The "Spring" Standard
+Avoid linear animations. Use Spring Config for all transitions:
+● mass: 1, damping: 15, stiffness: 120.
+Entrance Animations
+● Staggered Fade-In: Content should slide up (Y: 20 -> 0) and fade in (Opacity: 0 -> 1) as the screen mounts.
+● Layout Transitions: Use LayoutAnimation or Reanimated's entering prop for seamless list updates.
+
+Implementation Instructions for AI
+1. Strict Styling: Use StyleSheet.create or a utility-first library like NativeWind (Tailwind for RN).
+2. Safe Areas: Always wrap root content in SafeAreaView.
+3. Touch Targets: Ensure all interactive elements are at least 44x44px.
+4. Icons: Use Lucide-React-Native or Expo Vector Icons (Feather/Ionicons).
+5. Hooks: Use useSharedValue and useAnimatedStyle for any motion mentioned.
+Example Signature Block:
+When generating a screen, always include a "Design Note" explaining how the Asymmetry and Gradient Accent are applied to ensure it doesn't look like a generic template.

package/dist/agent-src/skills/design-intelligence/data/design-languages/sketch.txt

@@ -0,0 +1,83 @@
+Sketch
+有机的不稳定边框、手写排版、纸张纹理和俏皮的不完美。每个元素都是用记号笔和铅笔在纹理纸上勾勒出来的。
+1. 原型设计与早期创意提案 (Low-Fidelity Prototyping)
+2. 创意品牌、艺术与独立文化项目
+3. 教育、绘本与儿童类产品
+4. 游戏化 UI 与 叙事解谜游戏
+
+Design Philosophy
+The Hand-Drawn mobile design style celebrates authentic imperfection and human touch within the palm of the hand. It rejects the sterile precision of typical mobile UI in favor of organic, playful irregularity that evokes a portable sketchbook, a pocket notebook, or a collection of sticky notes.
+Core Principles:
+● No Straight Lines: Every View and TouchableOpacity uses complex borderRadius logic or SVG masks to create wobbly edges that reject geometric perfection.
+● Tactile Texture: Use background overlays or tiled images to simulate physical media like grain, paper, or notebook grids, making the screen feel like a physical surface.
+● Playful Tilt: Elements utilize small transform: [{ rotate: '-1deg' }] properties to break the rigid mobile grid and create casual energy.
+● Hard Offset Shadows: Strictly avoid elevation (Android) or shadowRadius (iOS) that creates blur. Use a secondary "shadow layer" View offset by (4px, 4px) to create a cut-paper, layered collage aesthetic.
+● Handwritten Typography: Exclusively use handwritten fonts (Kalam, Patrick Hand). Typography should vary in size and rotation to look like quick notes written on the fly.
+● Scribbled Overlays: Use absolute-positioned SVGs for flourishes like hand-drawn arrows, "tape" effects on images, and "X" marks for close buttons.
+● Intentional Messiness: Embrace slight overlaps and asymmetrical margins that make the app feel spontaneous rather than manufactured.
+● Emotional Intent: This style lowers the "fear of interaction" by appearing unfinished and approachable. It is perfect for journaling apps, creative tools, education, or any product that wants to feel human-centered rather than corporate.
+
+Design Token System
+Colors (Single Palette - Light Mode)
+● Background: #fdfbf7 (Warm Paper)
+● Foreground: #2d2d2d (Soft Pencil Black)
+● Muted: #e5e0d8 (Old Paper / Erased Pencil)
+● Accent: #ff4d4d (Red Correction Marker)
+● Border: #2d2d2d (Pencil Lead)
+● Secondary Accent: #2d5da1 (Blue Ballpoint Pen)
+Typography
+● Headings: Kalam-Bold - High visual weight, felt-tip marker style.
+● Body: PatrickHand-Regular - Highly legible but distinctly human.
+● Scale: Large and readable for mobile. Headings should have lineHeight adjusted to allow for "scribbled" descenders.
+Radius & Border
+● Wobbly Borders: Since React Native doesn't support the slash / syntax for borderRadius, use unique values for each corner (e.g., borderTopLeftRadius: 15, borderTopRightRadius: 25, borderBottomLeftRadius: 20, borderBottomRightRadius: 10).
+● Border Width: Bold and visible. borderWidth: 2 minimum; borderWidth: 3 for primary actions.
+● Style: solid for containers; dashed for "cut-out" sections or empty states.
+Shadows & Effects
+● Hard Offset Shadows: Since shadowOpacity with 0 radius is inconsistent across platforms, implement as a "Shadow View" placed behind the main component.
+    ○ Standard: Offset { x: 4, y: 4 } with #2d2d2d.
+    ○ Active (Press): Offset { x: 0, y: 0 } (the button "sinks" into the paper).
+● Paper Texture: Use a repeating pattern background image or a very subtle radial-gradient SVG overlay across the entire screen.
+
+Component Stylings
+Buttons (TouchableOpacity)
+● Shape: Irregular wobbly rectangle.
+● Normal State: * White background, borderWidth: 3, Pencil Black text.
+    ○ Hard offset shadow view behind it.
+● Pressed State (activeOpacity={1}):
+    ○ Main button transform: [{ translateX: 4 }, { translateY: 4 }].
+    ○ The background "shadow view" is covered, simulating a physical press.
+● Variant: "Post-it" Yellow (#fff9c4) for primary CTAs.
+Cards/Containers
+● Base Style: White background, wobbly border, slight rotation (-1deg or 1deg).
+● Decoration Types:
+    ○ "Tape": A semi-transparent View (rgba(200, 200, 200, 0.5)) positioned absolutely at the top, slightly rotated to look like it holds the card.
+    ○ "Tack": A small red circle SVG at the top center.
+● Speech Bubbles: Use a small SVG triangle attached to the bottom of the container for "hint" text or tooltips.
+Inputs (TextInput)
+● Style: Full box with wobbly borderRadius.
+● Font: PatrickHand-Regular.
+● Focus State: Border color changes to Blue Ballpoint (#2d5da1) with a slight increase in borderWidth.
+● Placeholder: Muted Pencil (#2d2d2d60).
+
+Layout Strategy
+● The "Anti-Grid": Avoid perfect alignment. Give adjacent cards slightly different rotation values.
+● Layering: Use zIndex to stack "tape" over cards and cards over background scribbles.
+● Visual Rhythm: Use padding: 20 for standard screens. Use large gap values between vertical elements to let the "paper" breathe.
+● Overflow: Allow decorative elements (like a hand-drawn star) to bleed slightly off the edge of the screen.
+
+Non-Genericness (Bold Choices)
+● Sketchy Loaders: Instead of a spinner, use an animation that "scribbles" a circle or toggles between three hand-drawn frames.
+● Hand-Drawn Icons: Use icons that look like they were drawn with a 0.5mm fineliner (thick strokes, unclosed loops).
+● Strikethrough: When a task is completed or an item is deleted, use a red "scribble-out" SVG overlay instead of a simple line.
+● Wavy Dividers: Replace standard horizontal rules with a hand-drawn squiggly line SVG.
+
+Effects & Animation
+● The "Jiggle": When a user triggers an error, use a Sequence animation that rapidly rotates the element between -2deg and 2deg.
+● Snappy Transitions: Use LayoutAnimation.configureNext(LayoutAnimation.Presets.spring) for all layout changes to give a bouncy, physical feel.
+
+Mobile-First Strategy (React Native)
+● Touch Targets: Ensure all wobbly buttons have a minimum hit area of 48x48 even if the visual "ink" is smaller.
+● Safe Area: Ensure the "Paper" background extends into the SafeAreaView to maintain the illusion of physical media.
+● Performance: Use useNativeDriver: true for rotations and transforms to keep the "hand-drawn" movements fluid at 60fps.
+● Haptics: Add Haptics.impactAsync on button presses to reinforce the feeling of "clicking" a physical object.

package/dist/agent-src/skills/design-intelligence/data/design-languages/terminal.txt

@@ -0,0 +1,80 @@
+Terminal
+一种原始的、功能性的、复古的、未来主义的命令行界面美学。高对比度、等宽精度和闪烁光标。
+1. 开发者工具与极客类应用
+2. 区块链、Web3 与 加密货币项目
+3. 科幻、侦探与解谜类游戏 (ARG)
+4. 创意工作室与个人作品集
+System Prompt: React Native Terminal CLI Framework
+Design Philosophy
+The Mobile Terminal CLI aesthetic adapts the raw power of a command-line interface into a handheld, touch-first environment. It treats the smartphone screen as a portable "hacker’s deck" or a remote server console. It is utilitarian, high-contrast, and uncompromisingly rigid.
+The vibe is "Field Operative" or "System Administrator on the go." Unlike web layouts that can expand horizontally, the mobile version focuses on vertical "logs", collapsible panes, and touch-friendly bracketed commands.
+Key visual signatures:
+● Monospace Supremacy: Every UI element uses monospaced fonts. Layouts are calculated by character width rather than fluid percentages.
+● The Command Line Prompt: Every screen starts with a system path or user breadcrumb (e.g., ~/root/user/home).
+● Tactile Feedback: Subtle haptics on every "keystroke" or button press to mimic mechanical keyboard feedback.
+● ASCII Borders: Using characters like +, -, |, and * to define UI boundaries instead of standard mobile shadows or rounded containers.
+
+Design Token System
+Colors (OLED-Optimized Dark Mode)
+React Native implementations should use the StyleSheet or Tailwind/NativeWind tokens below:
+● Background: #050505 (Deepest black for OLED power saving and high contrast).
+● Foreground:
+    ○ Primary: #33FF00 (Classic Matrix Green).
+    ○ Secondary: #FFB000 (Terminal Amber for warnings/toggles).
+    ○ Muted: #1A3D1A (Low-intensity green for inactive text/guides).
+    ○ Error: #FF3333 (Command Failed Red).
+● Border: #33FF00 (1px solid green for terminal windows).
+Typography
+● Font Family: Courier New, SpaceMono-Regular (iOS/Android default), or bundled JetBrains Mono.
+● Size: Strict 12pt, 14pt, or 16pt. No "in-between" sizes.
+● Weight: Normal (monospaced fonts lose their character when too bold).
+● Line Height: Tight. 1.2x font size to maximize information density on small screens.
+Radius & Borders
+● Radius: 0. Standard React Native borderRadius: 0. No exceptions.
+● Borders: borderWidth: 1. Style: solid.
+
+Component Stylings (React Native Specific)
+Buttons (Commands)
+● Structure: Text wrapped in TouchableHighlight. Displayed as [ EXECUTE ] or > PROCEED.
+● Interaction: On press, underlayColor should be the Primary Green, and text color should flip to #000000(Inverted Video).
+● Haptics: Trigger Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light) on press.
+Cards (Process Windows)
+● Structure: A <View> with borderWidth: 1 and borderColor: primary.
+● Title Bar: A top row with inverted colors: [ TITLE: SYSTEM_LOG ].
+● Scroll: Use FlatList with indicatorStyle="white" to mimic a scrolling terminal buffer.
+Inputs (The Caret)
+● Style: No background. Starts with a prefix: $ or >.
+● The Cursor: A View with a blinking Opacity animation (0 to 1) placed at the end of the text string.
+● Keyboard: Set keyboardType="ascii-capable" and autoCapitalize="none".
+
+Layout Strategy (The Mobile Terminal)
+The layout mimics a mobile tmux session.
+● Vertical Stacking: Use Flexbox with flexDirection: 'column'. Screens should feel like a continuous stream of data.
+● Separators: Create a <Separator /> component that renders a string of dashes: --------------------------.
+● Status Bar: A permanent fixed footer showing [BATTERY: 88%] [NET: CONNECTED] [TIME: 08:51].
+
+Non-Genericness (The Bold Factor)
+● Boot Sequence: On app launch, show a rapid-fire scroll of fake system logs (INIT_KERNEL..., LOADING_UI...) before the main content appears.
+● ASCII Graphics: Use Text components for headers instead of PNG icons.
+Plaintext
+
+ _  _  ____  ____ 
+( \/ )(  _ \(  _ \
+ \  /  ) _ ( )   /
+  \/  (____/(_)\_)
+
+● Progress Indicators: No ActivityIndicator. Use text-based bars: [#####-----] 50%.
+
+Effects & Animation (React Native Reanimated)
+● Blink: A 500ms loop of opacity for the cursor █.
+● Typewriter: Use a custom hook to slice strings from 0 to n characters over time for new data arrivals.
+● Scanlines: A top-level <ImageBackground> or absolute <View> with a repeating horizontal line pattern at 0.05opacity.
+
+Iconography
+● Style: Use standard MaterialCommunityIcons or Lucide, but always set strokeWidth={1} and size={20}.
+● Implementation: Icons should be treated as "Characters." They must be the same color as the text they accompany.
+
+Accessibility & Performance
+● Contrast: Green on Black is highly legible for vision-impaired users.
+● Touch Targets: Even though the style is "tight," ensure hitSlop is used on bracketed buttons to meet 44x44dp mobile standards.
+● Reduced Motion: Respect AccessibilityInfo.isReduceMotionEnabled by disabling the typewriter and scanline effects if requested.

package/dist/agent-src/skills/design-intelligence/data/icons.csv

@@ -0,0 +1,106 @@
+No,Category,Icon Name,Keywords,Library,Import Code,Usage,Best For,Style
+1,Navigation,list,hamburger menu navigation toggle bars,Phosphor,import { List } from '@phosphor-icons/react',<List size={20} weight="regular" />,Mobile navigation drawer toggle sidebar,Outline
+2,Navigation,arrow-left,back previous return navigate,Phosphor,import { ArrowLeft } from '@phosphor-icons/react',<ArrowLeft size={20} weight="regular" />,Back button breadcrumb navigation,Outline
+3,Navigation,arrow-right,next forward continue navigate,Phosphor,import { ArrowRight } from '@phosphor-icons/react',<ArrowRight size={20} weight="regular" />,Forward button next step CTA,Outline
+4,Navigation,caret-down,dropdown expand accordion select,Phosphor,import { CaretDown } from '@phosphor-icons/react',<CaretDown size={20} weight="regular" />,Dropdown toggle accordion header,Outline
+5,Navigation,caret-up,collapse close accordion minimize,Phosphor,import { CaretUp } from '@phosphor-icons/react',<CaretUp size={20} weight="regular" />,Accordion collapse minimize,Outline
+6,Navigation,house,homepage main dashboard start,Phosphor,import { House } from '@phosphor-icons/react',<House size={20} weight="regular" />,Home navigation main page,Outline
+7,Navigation,x,close cancel dismiss remove exit,Phosphor,import { X } from '@phosphor-icons/react',<X size={20} weight="regular" />,Modal close dismiss button,Outline
+8,Navigation,arrow-square-out,open new tab external link,Phosphor,import { ArrowSquareOut } from '@phosphor-icons/react',<ArrowSquareOut size={20} weight="regular" />,External link indicator,Outline
+9,Action,plus,add create new insert,Phosphor,import { Plus } from '@phosphor-icons/react',<Plus size={20} weight="regular" />,Add button create new item,Outline
+10,Action,minus,remove subtract decrease delete,Phosphor,import { Minus } from '@phosphor-icons/react',<Minus size={20} weight="regular" />,Remove item quantity decrease,Outline
+11,Action,trash,delete remove discard bin,Phosphor,import { Trash } from '@phosphor-icons/react',<Trash size={20} weight="regular" />,Delete action destructive,Outline
+12,Action,pencil-simple,pencil modify change update,Phosphor,import { PencilSimple } from '@phosphor-icons/react',<PencilSimple size={20} weight="regular" />,Edit button modify content,Outline
+13,Action,floppy-disk,disk store persist save,Phosphor,import { FloppyDisk } from '@phosphor-icons/react',<FloppyDisk size={20} weight="regular" />,Save button persist changes,Outline
+14,Action,download-simple,export save file download,Phosphor,import { DownloadSimple } from '@phosphor-icons/react',<DownloadSimple size={20} weight="regular" />,Download file export,Outline
+15,Action,upload-simple,import file attach upload,Phosphor,import { UploadSimple } from '@phosphor-icons/react',<UploadSimple size={20} weight="regular" />,Upload file import,Outline
+16,Action,copy,duplicate clipboard paste,Phosphor,import { Copy } from '@phosphor-icons/react',<Copy size={20} weight="regular" />,Copy to clipboard,Outline
+17,Action,share,social distribute send,Phosphor,import { Share } from '@phosphor-icons/react',<Share size={20} weight="regular" />,Share button social,Outline
+18,Action,magnifying-glass,find lookup filter query,Phosphor,import { MagnifyingGlass } from '@phosphor-icons/react',<MagnifyingGlass size={20} weight="regular" />,Search input bar,Outline
+19,Action,funnel,sort refine narrow options,Phosphor,import { Funnel } from '@phosphor-icons/react',<Funnel size={20} weight="regular" />,Filter dropdown sort,Outline
+20,Action,gear,gear cog preferences config,Phosphor,import { Gear } from '@phosphor-icons/react',<Gear size={20} weight="regular" />,Settings page configuration,Outline
+21,Status,check,success done complete verified,Phosphor,import { Check } from '@phosphor-icons/react',<Check size={20} weight="regular" />,Success state checkmark,Outline
+22,Status,check-circle,success verified approved complete,Phosphor,import { CheckCircle } from '@phosphor-icons/react',<CheckCircle size={20} weight="regular" />,Success badge verified,Outline
+23,Status,x-circle,error failed cancel rejected,Phosphor,import { XCircle } from '@phosphor-icons/react',<XCircle size={20} weight="regular" />,Error state failed,Outline
+24,Status,warning,warning caution attention danger,Phosphor,import { Warning } from '@phosphor-icons/react',<Warning size={20} weight="regular" />,Warning message caution,Outline
+25,Status,warning-circle,info notice information help,Phosphor,import { WarningCircle } from '@phosphor-icons/react',<WarningCircle size={20} weight="regular" />,Info notice alert,Outline
+26,Status,info,information help tooltip details,Phosphor,import { Info } from '@phosphor-icons/react',<Info size={20} weight="regular" />,Information tooltip help,Outline
+27,Status,circle-notch,loading spinner processing wait,Phosphor,import { CircleNotch } from '@phosphor-icons/react',<CircleNotch size={20} weight="regular" className="animate-spin" />,Loading state spinner,Outline
+28,Status,clock,time schedule pending wait,Phosphor,import { Clock } from '@phosphor-icons/react',<Clock size={20} weight="regular" />,Pending time schedule,Outline
+29,Communication,envelope,email message inbox letter,Phosphor,import { Envelope } from '@phosphor-icons/react',<Envelope size={20} weight="regular" />,Email contact inbox,Outline
+30,Communication,chat-circle,chat comment bubble conversation,Phosphor,import { ChatCircle } from '@phosphor-icons/react',<ChatCircle size={20} weight="regular" />,Chat comment message,Outline
+31,Communication,phone,call mobile telephone contact,Phosphor,import { Phone } from '@phosphor-icons/react',<Phone size={20} weight="regular" />,Phone contact call,Outline
+32,Communication,paper-plane-tilt,submit dispatch message airplane,Phosphor,import { PaperPlaneTilt } from '@phosphor-icons/react',<PaperPlaneTilt size={20} weight="regular" />,Send message submit,Outline
+33,Communication,bell,notification alert ring reminder,Phosphor,import { Bell } from '@phosphor-icons/react',<Bell size={20} weight="regular" />,Notification bell alert,Outline
+34,User,user,profile account person avatar,Phosphor,import { User } from '@phosphor-icons/react',<User size={20} weight="regular" />,User profile account,Outline
+35,User,users,team group people members,Phosphor,import { Users } from '@phosphor-icons/react',<Users size={20} weight="regular" />,Team group members,Outline
+36,User,user-plus,add invite new member,Phosphor,import { UserPlus } from '@phosphor-icons/react',<UserPlus size={20} weight="regular" />,Add user invite,Outline
+37,User,sign-in,signin authenticate enter,Phosphor,import { SignIn } from '@phosphor-icons/react',<SignIn size={20} weight="regular" />,Login signin,Outline
+38,User,sign-out,signout exit leave logout,Phosphor,import { SignOut } from '@phosphor-icons/react',<SignOut size={20} weight="regular" />,Logout signout,Outline
+39,Media,image,photo picture gallery thumbnail,Phosphor,import { Image } from '@phosphor-icons/react',<Image size={20} weight="regular" />,Image photo gallery,Outline
+40,Media,video,movie film play record,Phosphor,import { Video } from '@phosphor-icons/react',<Video size={20} weight="regular" />,Video player media,Outline
+41,Media,play,start video audio media,Phosphor,import { Play } from '@phosphor-icons/react',<Play size={20} weight="regular" />,Play button video audio,Outline
+42,Media,pause,stop halt video audio,Phosphor,import { Pause } from '@phosphor-icons/react',<Pause size={20} weight="regular" />,Pause button media,Outline
+43,Media,speaker-high,sound audio speaker music,Phosphor,import { SpeakerHigh } from '@phosphor-icons/react',<SpeakerHigh size={20} weight="regular" />,Volume audio sound,Outline
+44,Media,microphone,microphone record voice audio,Phosphor,import { Microphone } from '@phosphor-icons/react',<Microphone size={20} weight="regular" />,Microphone voice record,Outline
+45,Media,camera,photo capture snapshot picture,Phosphor,import { Camera } from '@phosphor-icons/react',<Camera size={20} weight="regular" />,Camera photo capture,Outline
+46,Commerce,shopping-cart,cart checkout basket buy,Phosphor,import { ShoppingCart } from '@phosphor-icons/react',<ShoppingCart size={20} weight="regular" />,Shopping cart e-commerce,Outline
+47,Commerce,shopping-bag,purchase buy store bag,Phosphor,import { ShoppingBag } from '@phosphor-icons/react',<ShoppingBag size={20} weight="regular" />,Shopping bag purchase,Outline
+48,Commerce,credit-card,payment card checkout stripe,Phosphor,import { CreditCard } from '@phosphor-icons/react',<CreditCard size={20} weight="regular" />,Payment credit card,Outline
+49,Commerce,currency-dollar,money price currency cost,Phosphor,import { CurrencyDollar } from '@phosphor-icons/react',<CurrencyDollar size={20} weight="regular" />,Price money currency,Outline
+50,Commerce,tag,label price discount sale,Phosphor,import { Tag } from '@phosphor-icons/react',<Tag size={20} weight="regular" />,Price tag label,Outline
+51,Commerce,gift,present reward bonus offer,Phosphor,import { Gift } from '@phosphor-icons/react',<Gift size={20} weight="regular" />,Gift reward offer,Outline
+52,Commerce,percent,discount sale offer promo,Phosphor,import { Percent } from '@phosphor-icons/react',<Percent size={20} weight="regular" />,Discount percentage sale,Outline
+53,Data,chart-bar,analytics statistics graph metrics,Phosphor,import { ChartBar } from '@phosphor-icons/react',<ChartBar size={20} weight="regular" />,Bar chart analytics,Outline
+54,Data,chart-pie,statistics distribution breakdown,Phosphor,import { ChartPie } from '@phosphor-icons/react',<ChartPie size={20} weight="regular" />,Pie chart distribution,Outline
+55,Data,trend-up,growth increase positive trend,Phosphor,import { TrendUp } from '@phosphor-icons/react',<TrendUp size={20} weight="regular" />,Growth trend positive,Outline
+56,Data,trend-down,decline decrease negative trend,Phosphor,import { TrendDown } from '@phosphor-icons/react',<TrendDown size={20} weight="regular" />,Decline trend negative,Outline
+57,Data,activity,pulse heartbeat monitor live,Phosphor,import { Activity } from '@phosphor-icons/react',<Activity size={20} weight="regular" />,Activity monitor pulse,Outline
+58,Data,database,storage server data backend,Phosphor,import { Database } from '@phosphor-icons/react',<Database size={20} weight="regular" />,Database storage,Outline
+59,Files,file,document page paper doc,Phosphor,import { File } from '@phosphor-icons/react',<File size={20} weight="regular" />,File document,Outline
+60,Files,file-text,document text page article,Phosphor,import { FileText } from '@phosphor-icons/react',<FileText size={20} weight="regular" />,Text document article,Outline
+61,Files,folder,directory organize group files,Phosphor,import { Folder } from '@phosphor-icons/react',<Folder size={20} weight="regular" />,Folder directory,Outline
+62,Files,folder-open,expanded browse files view,Phosphor,import { FolderOpen } from '@phosphor-icons/react',<FolderOpen size={20} weight="regular" />,Open folder browse,Outline
+63,Files,paperclip,attachment attach file link,Phosphor,import { Paperclip } from '@phosphor-icons/react',<Paperclip size={20} weight="regular" />,Attachment paperclip,Outline
+64,Files,link,url hyperlink chain connect,Phosphor,import { Link } from '@phosphor-icons/react',<Link size={20} weight="regular" />,Link URL hyperlink,Outline
+65,Files,clipboard,paste copy buffer notes,Phosphor,import { Clipboard } from '@phosphor-icons/react',<Clipboard size={20} weight="regular" />,Clipboard paste,Outline
+66,Layout,grid-four,tiles gallery layout dashboard,Phosphor,import { GridFour } from '@phosphor-icons/react',<GridFour size={20} weight="regular" />,Grid layout gallery,Outline
+67,Layout,list-bullets,rows table lines items,Phosphor,import { ListBullets } from '@phosphor-icons/react',<ListBullets size={20} weight="regular" />,List view rows,Outline
+68,Layout,columns,layout split dual sidebar,Phosphor,import { Columns } from '@phosphor-icons/react',<Columns size={20} weight="regular" />,Column layout split,Outline
+69,Layout,arrows-out,fullscreen expand enlarge zoom,Phosphor,import { ArrowsOut } from '@phosphor-icons/react',<ArrowsOut size={20} weight="regular" />,Fullscreen maximize,Outline
+70,Layout,arrows-in,reduce shrink collapse exit,Phosphor,import { ArrowsIn } from '@phosphor-icons/react',<ArrowsIn size={20} weight="regular" />,Minimize reduce,Outline
+71,Layout,sidebar,panel drawer navigation menu,Phosphor,import { Sidebar } from '@phosphor-icons/react',<Sidebar size={20} weight="regular" />,Sidebar panel,Outline
+72,Social,heart,like love favorite wishlist,Phosphor,import { Heart } from '@phosphor-icons/react',<Heart size={20} weight="regular" />,Like favorite love,Outline
+73,Social,star,rating review favorite bookmark,Phosphor,import { Star } from '@phosphor-icons/react',<Star size={20} weight="regular" />,Star rating favorite,Outline
+74,Social,thumbs-up,like approve agree positive,Phosphor,import { ThumbsUp } from '@phosphor-icons/react',<ThumbsUp size={20} weight="regular" />,Like approve thumb,Outline
+75,Social,thumbs-down,dislike disapprove disagree negative,Phosphor,import { ThumbsDown } from '@phosphor-icons/react',<ThumbsDown size={20} weight="regular" />,Dislike disapprove,Outline
+76,Social,bookmark,save later favorite mark,Phosphor,import { Bookmark } from '@phosphor-icons/react',<Bookmark size={20} weight="regular" />,Bookmark save,Outline
+77,Social,flag,report mark important highlight,Phosphor,import { Flag } from '@phosphor-icons/react',<Flag size={20} weight="regular" />,Flag report,Outline
+78,Device,device-mobile,mobile phone device touch,Phosphor,import { DeviceMobile } from '@phosphor-icons/react',<DeviceMobile size={20} weight="regular" />,Mobile smartphone,Outline
+79,Device,device-tablet,ipad device touch screen,Phosphor,import { DeviceTablet } from '@phosphor-icons/react',<DeviceTablet size={20} weight="regular" />,Tablet device,Outline
+80,Device,monitor,desktop screen computer display,Phosphor,import { Monitor } from '@phosphor-icons/react',<Monitor size={20} weight="regular" />,Desktop monitor,Outline
+81,Device,laptop,notebook computer portable device,Phosphor,import { Laptop } from '@phosphor-icons/react',<Laptop size={20} weight="regular" />,Laptop computer,Outline
+82,Device,printer,print document output paper,Phosphor,import { Printer } from '@phosphor-icons/react',<Printer size={20} weight="regular" />,Printer print,Outline
+83,Security,lock,secure password protected private,Phosphor,import { Lock } from '@phosphor-icons/react',<Lock size={20} weight="regular" />,Lock secure,Outline
+84,Security,lock-open,open access unsecure public,Phosphor,import { LockOpen } from '@phosphor-icons/react',<LockOpen size={20} weight="regular" />,Unlock open,Outline
+85,Security,shield,protection security safe guard,Phosphor,import { Shield } from '@phosphor-icons/react',<Shield size={20} weight="regular" />,Shield protection,Outline
+86,Security,key,password access unlock login,Phosphor,import { Key } from '@phosphor-icons/react',<Key size={20} weight="regular" />,Key password,Outline
+87,Security,eye,view show visible password,Phosphor,import { Eye } from '@phosphor-icons/react',<Eye size={20} weight="regular" />,Show password view,Outline
+88,Security,eye-slash,hide invisible password hidden,Phosphor,import { EyeSlash } from '@phosphor-icons/react',<EyeSlash size={20} weight="regular" />,Hide password,Outline
+89,Location,map-pin,location marker place address,Phosphor,import { MapPin } from '@phosphor-icons/react',<MapPin size={20} weight="regular" />,Location pin marker,Outline
+90,Location,map,directions navigate geography location,Phosphor,import { Map } from '@phosphor-icons/react',<Map size={20} weight="regular" />,Map directions,Outline
+91,Location,compass,compass direction pointer arrow,Phosphor,import { Compass } from '@phosphor-icons/react',<Compass size={20} weight="regular" />,Navigation compass,Outline
+92,Location,globe,world international global web,Phosphor,import { Globe } from '@phosphor-icons/react',<Globe size={20} weight="regular" />,Globe world,Outline
+93,Time,calendar,date schedule event appointment,Phosphor,import { Calendar } from '@phosphor-icons/react',<Calendar size={20} weight="regular" />,Calendar date,Outline
+94,Time,arrows-clockwise,reload sync update refresh,Phosphor,import { ArrowsClockwise } from '@phosphor-icons/react',<ArrowsClockwise size={20} weight="regular" />,Refresh reload,Outline
+95,Time,arrow-counter-clockwise,undo back revert history,Phosphor,import { ArrowCounterClockwise } from '@phosphor-icons/react',<ArrowCounterClockwise size={20} weight="regular" />,Undo revert,Outline
+96,Time,arrow-clockwise,redo forward repeat history,Phosphor,import { ArrowClockwise } from '@phosphor-icons/react',<ArrowClockwise size={20} weight="regular" />,Redo forward,Outline
+97,Development,code,develop programming syntax html,Phosphor,import { Code } from '@phosphor-icons/react',<Code size={20} weight="regular" />,Code development,Outline
+98,Development,terminal,console cli command shell,Phosphor,import { Terminal } from '@phosphor-icons/react',<Terminal size={20} weight="regular" />,Terminal console,Outline
+99,Development,git-branch,version control branch merge,Phosphor,import { GitBranch } from '@phosphor-icons/react',<GitBranch size={20} weight="regular" />,Git branch,Outline
+100,Development,github-logo,repository code open source,Phosphor,import { GithubLogo } from '@phosphor-icons/react',<GithubLogo size={20} weight="regular" />,GitHub repository,Outline
+101,Style Config,bold-typography-icon-system,"bold typography, editorial, mono label, phosphor, weight regular, minimal, icon+label required, size 20–32",Phosphor (react-native),"import { ArrowRight } from 'phosphor-react-native'","<ArrowRight size={20} weight=""regular"" color={colors.accent} />","Bold Typography Mobile style: weight=""regular"". Size 20px for UI controls, 32px for feature anchors. Icons MUST be paired with a Mono-stack text label (JetBrains Mono). Standalone icons only allowed for standard navigation (e.g., Back arrow). Accent color #FF3D00 only.",Outline
+102,Style Config,cyberpunk-icon-system,"cyberpunk, neon, glow, hud, phosphor, weight regular, accent glow, dark, angular, react native",Phosphor (react-native),"import { Lightning } from 'phosphor-react-native'","<Lightning size={24} weight=""regular"" color={colors.accent} />","Cyberpunk Mobile HUD style: weight=""regular"", color={colors.accent} (#00FF88 Matrix Green). Wrap every icon in a View with shadowColor: colors.accent / shadowOpacity: 0.6 / shadowRadius: 8 to simulate neon glow. Use borderRadius: 0 on wrapper. Avoid rounded icon containers. Always pair icon with data label in JetBrains Mono.",Outline
+103,Style Config,academia-icon-system,"academia, library, brass, ornate, phosphor, weight thin, muted warm, scholarly, mobile",Phosphor (react-native),"import { BookOpen } from 'phosphor-react-native'","<BookOpen size={22} weight=""thin"" color={colors.brass} />","Academia (Scholarly Mobile) style: weight=""thin"" (thin engraved feel), color={colors.brass} (#C9A962). No sharp geometric or tech-inspired icons. Prefer book, scroll, key, quill-type icon metaphors. Wrap in circular View with 1px brass border. Avoid neon or saturated colored icons. All icon-only navigation must have an accessibilityLabel.",Outline
+104,Style Config,web3-bitcoin-icon-system,"web3, bitcoin, defi, crypto, neon orange, holographic, blurview, phosphor, glow, fintech mobile",Phosphor (react-native),"import { TrendUp } from 'phosphor-react-native'","<TrendUp size={24} weight=""regular"" color={colors.bitcoinOrange} />","Bitcoin DeFi Mobile style: weight=""regular"", color={colors.bitcoinOrange} (#F7931A). Wrap icons in circular BlurView (intensity: 20) with 1px borderColor: '#F7931A' border (Holographic Node effect). shadowColor: '#F7931A' / shadowOpacity: 0.4 / shadowRadius: 8. Prefer finance/data icons (TrendUp, Wallet, Shield, Layers). All data icons use JetBrains Mono label.",Outline
+105,Guideline,icon-fallback-rules,"icon fallback, phosphor, heroicons, any icon, extended set","Phosphor (primary) + Heroicons (fallback)","Primary: import { IconName } from '@phosphor-icons/react'. Fallback: import { IconName } from '@heroicons/react/24/outline' or '@heroicons/react/24/solid'.","当默认列表中没有合适图标时：优先继续从 Phosphor 中选择任何语义更贴切的图标（不必局限于本表列出的图标）。若 Phosphor 也无合适图标，可以改用 Heroicons，并在 UI 代码中保持风格统一（线性或填充、圆角程度、笔画粗细等）。","Icon library strategy and fallback rules",Outline

package/dist/agent-src/skills/design-intelligence/data/landing.csv

@@ -0,0 +1,35 @@
+No,Pattern Name,Keywords,Section Order,Primary CTA Placement,Color Strategy,Recommended Effects,Conversion Optimization
+1,Hero + Features + CTA,"hero, hero-centric, hero-centric design, features, feature-rich, feature-rich showcase, cta, call-to-action","1. Hero with headline/image, 2. Value prop, 3. Key features (3-5), 4. CTA section, 5. Footer",Hero (sticky) + Bottom,Hero: Brand primary or vibrant. Features: Card bg #FAFAFA. CTA: Contrasting accent color,"Hero parallax, feature card hover lift, CTA glow on hover",Deep CTA placement. Use contrasting color (at least 7:1 contrast ratio). Sticky navbar CTA.
+2,Hero + Testimonials + CTA,"hero, testimonials, social-proof, social-proof-focused, social proof focused, trust, reviews, cta","1. Hero, 2. Problem statement, 3. Solution overview, 4. Testimonials carousel, 5. CTA",Hero (sticky) + Post-testimonials,"Hero: Brand color. Testimonials: Light bg #F5F5F5. Quotes: Italic, muted color #666. CTA: Vibrant","Testimonial carousel slide animations, quote marks animations, avatar fade-in",Social proof before CTA. Use 3-5 testimonials. Include photo + name + role. CTA after social proof.
+3,Product Demo + Features,"demo, product-demo, features, showcase, interactive, interactive-product-demo, interactive product demo","1. Hero, 2. Product video/mockup (center), 3. Feature breakdown per section, 4. Comparison (optional), 5. CTA",Video center + CTA right/bottom,Video surround: Brand color overlay. Features: Icon color #0080FF. Text: Dark #222,"Video play button pulse, feature scroll reveals, demo interaction highlights",Embedded product demo increases engagement. Use interactive mockup if possible. Auto-play video muted.
+4,Minimal Single Column,"minimal, simple, direct, minimal & direct, minimal-direct, single-column, clean","1. Hero headline, 2. Short description, 3. Benefit bullets (3 max), 4. CTA, 5. Footer","Center, large CTA button",Minimalist: Brand + white #FFFFFF + accent. Buttons: High contrast 7:1+. Text: Black/Dark grey,Minimal hover effects. Smooth scroll. CTA scale on hover (subtle),Single CTA focus. Large typography. Lots of whitespace. No nav clutter. Mobile-first.
+5,Funnel (3-Step Conversion),"funnel, conversion, conversion-optimized, conversion optimized, steps, wizard, onboarding","1. Hero, 2. Step 1 (problem), 3. Step 2 (solution), 4. Step 3 (action), 5. CTA progression",Each step: mini-CTA. Final: main CTA,"Step colors: 1 (Red/Problem), 2 (Orange/Process), 3 (Green/Solution). CTA: Brand color","Step number animations, progress bar fill, step transitions smooth scroll",Progressive disclosure. Show only essential info per step. Use progress indicators. Multiple CTAs.
+6,Comparison Table + CTA,"comparison, table, compare, versus, cta","1. Hero, 2. Problem intro, 3. Comparison table (product vs competitors), 4. Pricing (optional), 5. CTA",Table: Right column. CTA: Below table,Table: Alternating rows (white/light grey). Your product: Highlight #FFFACD (light yellow) or green. Text: Dark,"Table row hover highlight, price toggle animations, feature checkmark animations",Use comparison to show unique value. Highlight your product row. Include 'free trial' in pricing row.
+7,Lead Magnet + Form,"lead, form, signup, capture, email, magnet","1. Hero (benefit headline), 2. Lead magnet preview (ebook cover, checklist, etc), 3. Form (minimal fields), 4. CTA submit",Form CTA: Submit button,Lead magnet: Professional design. Form: Clean white bg. Inputs: Light border #CCCCCC. CTA: Brand color,"Form focus state animations, input validation animations, success confirmation animation",Form fields ≤ 3 for best conversion. Offer valuable lead magnet preview. Show form submission progress.
+8,Pricing Page + CTA,"pricing, plans, tiers, comparison, cta","1. Hero (pricing headline), 2. Price comparison cards, 3. Feature comparison table, 4. FAQ section, 5. Final CTA",Each card: CTA button. Sticky CTA in nav,"Free: Grey, Starter: Blue, Pro: Green/Gold, Enterprise: Dark. Cards: 1px border, shadow","Price toggle animation (monthly/yearly), card comparison highlight, FAQ accordion open/close",Recommend starter plan (pre-select/highlight). Show annual discount (20-30%). Use FAQs to address concerns.
+9,Video-First Hero,"video, hero, media, visual, engaging","1. Hero with video background, 2. Key features overlay, 3. Benefits section, 4. CTA",Overlay on video (center/bottom) + Bottom section,Dark overlay 60% on video. Brand accent for CTA. White text on dark.,"Video autoplay muted, parallax scroll, text fade-in on scroll",86% higher engagement with video. Add captions for accessibility. Compress video for performance.
+10,Scroll-Triggered Storytelling,"storytelling, scroll, narrative, story, immersive","1. Intro hook, 2. Chapter 1 (problem), 3. Chapter 2 (journey), 4. Chapter 3 (solution), 5. Climax CTA",End of each chapter (mini) + Final climax CTA,Progressive reveal. Each chapter has distinct color. Building intensity.,"ScrollTrigger animations, parallax layers, progressive disclosure, chapter transitions",Narrative increases time-on-page 3x. Use progress indicator. Mobile: simplify animations.
+11,AI Personalization Landing,"ai, personalization, smart, recommendation, dynamic","1. Dynamic hero (personalized), 2. Relevant features, 3. Tailored testimonials, 4. Smart CTA",Context-aware placement based on user segment,Adaptive based on user data. A/B test color variations per segment.,"Dynamic content swap, fade transitions, personalized product recommendations",20%+ conversion with personalization. Requires analytics integration. Fallback for new users.
+12,Waitlist/Coming Soon,"waitlist, coming-soon, launch, early-access, notify","1. Hero with countdown, 2. Product teaser/preview, 3. Email capture form, 4. Social proof (waitlist count)",Email form prominent (above fold) + Sticky form on scroll,Anticipation: Dark + accent highlights. Countdown in brand color. Urgency indicators.,"Countdown timer animation, email validation feedback, success confetti, social share buttons",Scarcity + exclusivity. Show waitlist count. Early access benefits. Referral program.
+13,Comparison Table Focus,"comparison, table, versus, compare, features","1. Hero (problem statement), 2. Comparison matrix (you vs competitors), 3. Feature deep-dive, 4. Winner CTA",After comparison table (highlighted row) + Bottom,Your product column highlighted (accent bg or green). Competitors neutral. Checkmarks green.,"Table row hover highlight, feature checkmark animations, sticky comparison header",Show value vs competitors. 35% higher conversion. Be factual. Include pricing if favorable.
+14,Pricing-Focused Landing,"pricing, price, cost, plans, subscription","1. Hero (value proposition), 2. Pricing cards (3 tiers), 3. Feature comparison, 4. FAQ, 5. Final CTA",Each pricing card + Sticky CTA in nav + Bottom,Popular plan highlighted (brand color border/bg). Free: grey. Enterprise: dark/premium.,"Price toggle monthly/annual animation, card hover lift, FAQ accordion smooth open",Annual discount 20-30%. Recommend mid-tier (most popular badge). Address objections in FAQ.
+15,App Store Style Landing,"app, mobile, download, store, install","1. Hero with device mockup, 2. Screenshots carousel, 3. Features with icons, 4. Reviews/ratings, 5. Download CTAs",Download buttons prominent (App Store + Play Store) throughout,Dark/light matching app store feel. Star ratings in gold. Screenshots with device frames.,"Device mockup rotations, screenshot slider, star rating animations, download button pulse",Show real screenshots. Include ratings (4.5+ stars). QR code for mobile. Platform-specific CTAs.
+16,FAQ/Documentation Landing,"faq, documentation, help, support, questions, faq/documentation, knowledge base","1. Hero with search bar, 2. Popular categories, 3. FAQ accordion, 4. Contact/support CTA",Search bar prominent + Contact CTA for unresolved questions,"Clean, high readability. Minimal color. Category icons in brand color. Success green for resolved.","Search autocomplete, smooth accordion open/close, category hover, helpful feedback buttons",Reduce support tickets. Track search analytics. Show related articles. Contact escalation path.
+17,Immersive/Interactive Experience,"immersive, interactive, experience, 3d, animation, immersive/interactive experience","1. Full-screen interactive element, 2. Guided product tour, 3. Key benefits revealed, 4. CTA after completion",After interaction complete + Skip option for impatient users,Immersive experience colors. Dark background for focus. Highlight interactive elements.,"WebGL, 3D interactions, gamification elements, progress indicators, reward animations",40% higher engagement. Performance trade-off. Provide skip option. Mobile fallback essential.
+18,Event/Conference Landing,"event, conference, meetup, registration, schedule, hero-centric design, hero-centric","1. Hero (date/location/countdown), 2. Speakers grid, 3. Agenda/schedule, 4. Sponsors, 5. Register CTA",Register CTA sticky + After speakers + Bottom,Urgency colors (countdown). Event branding. Speaker cards professional. Sponsor logos neutral.,"Countdown timer, speaker hover cards with bio, agenda tabs, early bird countdown",Early bird pricing with deadline. Social proof (past attendees). Speaker credibility. Multi-ticket discounts.
+19,Product Review/Ratings Focused,"reviews, ratings, testimonials, social-proof, social-proof-focused, stars","1. Hero (product + aggregate rating), 2. Rating breakdown, 3. Individual reviews, 4. Buy/CTA",After reviews summary + Buy button alongside reviews,Trust colors. Star ratings gold. Verified badge green. Review sentiment colors.,"Star fill animations, review filtering, helpful vote interactions, photo lightbox",User-generated content builds trust. Show verified purchases. Filter by rating. Respond to negative reviews.
+20,Community/Forum Landing,"community, forum, social, members, discussion","1. Hero (community value prop), 2. Popular topics/categories, 3. Active members showcase, 4. Join CTA",Join button prominent + After member showcase,"Warm, welcoming. Member photos add humanity. Topic badges in brand colors. Activity indicators green.","Member avatars animation, activity feed live updates, topic hover previews, join success celebration","Show active community (member count, posts today). Highlight benefits. Preview content. Easy onboarding."
+21,Before-After Transformation,"before-after, transformation, results, comparison","1. Hero (problem state), 2. Transformation slider/comparison, 3. How it works, 4. Results CTA",After transformation reveal + Bottom,Contrast: muted/grey (before) vs vibrant/colorful (after). Success green for results.,"Slider comparison interaction, before/after reveal animations, result counters, testimonial videos",Visual proof of value. 45% higher conversion. Real results. Specific metrics. Guarantee offer.
+22,Marketplace / Directory,"marketplace, directory, search, listing","1. Hero (Search focused), 2. Categories, 3. Featured Listings, 4. Trust/Safety, 5. CTA (Become a host/seller)",Hero Search Bar + Navbar 'List your item',"Search: High contrast. Categories: Visual icons. Trust: Blue/Green.","Search autocomplete animation, map hover pins, card carousel","Search bar is the CTA. Reduce friction to search. Popular searches suggestions."
+23,Newsletter / Content First,"newsletter, content, writer, blog, subscribe, minimal & direct, minimal-direct","1. Hero (Value Prop + Form), 2. Recent Issues/Archives, 3. Social Proof (Subscriber count), 4. About Author",Hero inline form + Sticky header form,"Minimalist. Paper-like background. Text focus. Accent color for Subscribe.","Text highlight animations, typewriter effect, subtle fade-in","Single field form (Email only). Show 'Join X, 000 readers'. Read sample link."
+24,Webinar Registration,"webinar, registration, event, training, live","1. Hero (Topic + Timer + Form), 2. What you'll learn, 3. Speaker Bio, 4. Urgency/Bonuses, 5. Form (again)",Hero (Right side form) + Bottom anchor,"Urgency: Red/Orange. Professional: Blue/Navy. Form: High contrast white.","Countdown timer, speaker avatar float, urgent ticker","Limited seats logic. 'Live' indicator. Auto-fill timezone."
+25,Enterprise Gateway,"enterprise, corporate, gateway, solutions, portal, trust, authority, trust & authority","1. Hero (Video/Mission), 2. Solutions by Industry, 3. Solutions by Role, 4. Client Logos, 5. Contact Sales",Contact Sales (Primary) + Login (Secondary),"Corporate: Navy/Grey. High integrity. Conservative accents.","Slow video background, logo carousel, tab switching for industries","Path selection (I am a...). Mega menu navigation. Trust signals prominent."
+26,Portfolio Grid,"portfolio, grid, showcase, gallery, masonry, portfolio grid + visuals","1. Hero (Name/Role), 2. Project Grid (Masonry), 3. About/Philosophy, 4. Contact",Project Card Hover + Footer Contact,"Neutral background (let work shine). Text: Black/White. Accent: Minimal.","Image lazy load reveal, hover overlay info, lightbox view","Visuals first. Filter by category. Fast loading essential."
+27,Horizontal Scroll Journey,"horizontal, scroll, journey, gallery, storytelling, panoramic, storytelling-driven","1. Intro (Vertical), 2. The Journey (Horizontal Track), 3. Detail Reveal, 4. Vertical Footer",Floating Sticky CTA or End of Horizontal Track,Continuous palette transition. Chapter colors. Progress bar #000000.,"Scroll-jacking (careful), parallax layers, horizontal slide, progress indicator","Immersive product discovery. High engagement. Keep navigation visible."
+28,Bento Grid Showcase,"bento, grid, features, modular, apple-style, showcase, feature-rich showcase","1. Hero, 2. Bento Grid (Key Features), 3. Detail Cards, 4. Tech Specs, 5. CTA",Floating Action Button or Bottom of Grid,"Card backgrounds: #F5F5F7 or Glass. Icons: Vibrant brand colors. Text: Dark.","Hover card scale (1.02), video inside cards, tilt effect, staggered reveal","Scannable value props. High information density without clutter. Mobile stack."
+29,Interactive 3D Configurator,"3d, configurator, customizer, interactive, product, interactive product demo","1. Hero (Configurator), 2. Feature Highlight (synced), 3. Price/Specs, 4. Purchase",Inside Configurator UI + Sticky Bottom Bar,"Neutral studio background. Product: Realistic materials. UI: Minimal overlay.","Real-time rendering, material swap animation, camera rotate/zoom, light reflection","Increases ownership feeling. 360 view reduces return rates. Direct add-to-cart."
+30,AI-Driven Dynamic Landing,"ai, dynamic, personalized, adaptive, generative","1. Prompt/Input Hero, 2. Generated Result Preview, 3. How it Works, 4. Value Prop","Input Field (Hero) + 'Try it' Buttons","Adaptive to user input. Dark mode for compute feel. Neon accents.","Typing text effects, shimmering generation loaders, morphing layouts","Immediate value demonstration. 'Show, don't tell'. Low friction start."
+31,Feature-Rich Showcase,"feature-rich, feature-rich showcase, features, showcase, product showcase","1. Hero (value prop), 2. Feature grid/cards (4-6), 3. Use cases or benefits, 4. Social proof or logos, 5. CTA",Hero (sticky) + After features + Bottom,Brand primary + card bg #FAFAFA. Feature icons accent. CTA contrasting.,"Feature card hover lift, scroll reveal, icon micro-interactions","Clear feature hierarchy. One key message per card. Strong CTA repetition."
+32,Hero-Centric Design,"hero-centric, hero-centric design, hero-first, hero above fold","1. Full-bleed Hero (headline + visual), 2. Single value prop strip, 3. Key benefit or proof, 4. Primary CTA",Hero dominant (center/bottom) + Sticky nav CTA,Hero: High-impact visual. Minimal text. CTA 7:1 contrast.,"Hero parallax or video, CTA pulse on scroll, minimal chrome","One primary CTA. Hero is 60-80% above fold. Mobile: same hierarchy."
+33,Trust & Authority + Conversion,"trust & authority, trust, authority, conversion, credibility, enterprise","1. Hero (mission/credibility), 2. Proof (logos, certs, stats), 3. Solution overview, 4. Clear CTA path",Contact Sales / Get Quote (primary) + Nav,"Navy/Grey corporate. Trust blue. Accent for CTA only.","Logo carousel, stat counters, testimonial strip","Security badges. Case studies. Transparent pricing. Low-friction form."
+34,Real-Time / Operations Landing,"real-time, real-time monitor, operations, dashboard, telemetry, live data","1. Hero (product + live preview or status), 2. Key metrics/indicators, 3. How it works, 4. CTA (Start trial / Contact)","Primary CTA in nav + After metrics",Dark or neutral. Status colors (green/amber/red). Data-dense but scannable.,"Live data ticker, status pulse, minimal decoration","For ops/security/iot products. Demo or sandbox link. Trust signals."