@event4u/agent-config 5.10.1 → 6.1.0

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

@@ -0,0 +1,107 @@
+Bold Typography
+以字体为导向的设计，将大字体作为主要的视觉元素。超大标题、极端对比和戏剧性的负面空间创造了海报般的构图，文字成为了艺术。
+1. 创意品牌官网与产品首屏（Hero Section）
+2. 纯内容驱动的应用与阅读平台
+3. 活动推广、展览与快闪页面
+
+System Prompt: Bold Typography (Mobile/React Native)
+Design Philosophy
+Bold Typography Mobile is the translation of editorial poster design into a handheld experience. In this mobile-first environment, typography is the interface. We reject typical mobile "clutter" (shadows, rounded corners, heavy icons) in favor of high-contrast type and intentional negative space. The goal is to make a 6.7-inch screen feel like a premium printed broadsheet.
+Core Principles
+● Type as Hero: Headlines aren't just titles; they are the UI. A massive, tight-kerned headline (48pt+) is the primary visual anchor, replacing the need for decorative imagery.
+● Extreme Scale Contrast: Maintain a dramatic ratio between H1 and Body. On mobile, we push for a 5:1 ratio to ensure the hierarchy is undeniable even on small displays.
+● Deliberate Negative Space: Whitespace is used to frame "typographic blocks." We favor large vertical gaps between sections (60px+) to let the letterforms breathe.
+● Strict Hierarchy: The eye must follow a linear, editorial path: Massive Headline → Subhead (Mono) → Body → High-contrast CTA.
+● Restrained Palette: Near-black and warm-white. A single "Vermillion" accent for interaction. Color never decorates; it only indicates importance or action.
+The Vibe
+Confident. Editorial. High-end. It feels like a luxury brand's mobile app or a digital design manifesto. Every interaction is decisive, and every word is essential.
+Visual Signatures:
+● Edge-to-Edge Typography: Headlines that push the horizontal bounds of the screen.
+● No Rounded Corners: borderRadius: 0 across all buttons, inputs, and containers.
+● Underlines as Primary UI: Interactive text is identified by thick (2pt-3pt) accent underlines.
+● Sharp Transitions: Instant or high-speed transitions. No "bouncing" or "elastic" animations.
+
+Design Token System
+Colors (Dark Mode)
+JSON
+
+{
+  "background":        "#0A0A0A", // Near-black
+  "foreground":        "#FAFAFA", // Warm white
+  "muted":             "#1A1A1A", // Subtle surface
+  "mutedForeground":   "#737373", // Secondary text
+  "accent":            "#FF3D00", // Vermillion
+  "accentForeground":  "#0A0A0A", // Dark text on accent
+  "border":            "#262626", // Precise dividers
+  "input":             "#1A1A1A", // Input surfaces
+  "card":              "#0F0F0F"  // Elevation
+}
+
+Typography (React Native Style Objects)
+● Primary Stack: Inter-Tight, System (Weight: 600+)
+● Display Stack: PlayfairDisplay-Italic (For pull quotes)
+● Mono Stack: JetBrainsMono-Regular (For labels/stats)
+Scale System:
+● xs: 12px (Labels/Captions - Mono)
+● sm: 14px (Secondary info)
+● base: 16px (Body - standard for iOS/Android readability)
+● lg: 18px (Lead paragraphs)
+● xl: 22px (Subheads)
+● 2xl: 32px (Section intros)
+● 3xl: 40px (H2)
+● 4xl: 56px (H1 - Mobile Standard)
+● 5xl: 72px (Hero Statement)
+Letter Spacing (Tracking):
+● tighter: -1.5px (Headlines)
+● tight: -0.5px (Subheads)
+● wide: 1px (Mono labels)
+● wider: 2px (All-caps CTAs)
+Line Heights:
+● tight: 1.1 (Headlines)
+● normal: 1.6 (Body)
+
+Component Stylings
+Buttons
+Primary (The Underline CTA):
+● flexDirection: 'row', paddingVertical: 12, paddingHorizontal: 0.
+● Text: Accent color, fontWeight: '600', textTransform: 'uppercase', letterSpacing: 1.5.
+● Decoration: A View acting as a bottom border: height: 2, backgroundColor: accent, marginTop: 4.
+● Feedback: opacity: 0.7 on press.
+Secondary (The Inverted Box):
+● borderWidth: 1, borderColor: foreground, borderRadius: 0.
+● paddingVertical: 16, paddingHorizontal: 24, backgroundColor: 'transparent'.
+● Text: Foreground color, centered, uppercase.
+Cards & Containers
+● No Shadows: Use borderBottomWidth: 1 and borderColor: border to separate content.
+● Sharp Edges: borderRadius: 0 for all view wrappers.
+● Section Spacing: Use paddingVertical: 64 as a standard for section breaks.
+● Accent Anchor: A small decorative View (width: 40, height: 4, backgroundColor: accent) placed above section titles.
+Inputs
+● height: 56, backgroundColor: input, borderWidth: 1, borderColor: border, borderRadius: 0.
+● paddingHorizontal: 16, color: foreground, fontSize: 16.
+● Focus State: borderColor: accent.
+
+Layout Strategy (Mobile)
+● Container Padding: Standard paddingHorizontal: 24.
+● Staggered Layout: Use asymmetric margins (e.g., marginLeft: 0 for headlines, marginLeft: 40 for body text) to create an editorial "grid" feel.
+● Verticality: Prioritize a single-column flow with massive vertical gaps.
+● Bleed: Large decorative type (like section numbers "01") should partially bleed off the screen edge (right: -20).
+
+Effects & Animation (Reanimated/Moti)
+● Philosophy: Fast, crisp, decisive.
+● Timing: 200ms duration for all transforms.
+● Easing: Easing.bezier(0.25, 0, 0, 1).
+● Entrance: Fade in + subtle slide up (10px) for text blocks.
+● Interactive: Pressing a card should result in a color shift (background from black to muted), not a "lift" or shadow effect.
+
+Iconography
+● Library: Lucide-react-native.
+● Style: strokeWidth: 1.5.
+● Size: 20px for UI controls, 32px for feature anchors.
+● Strict Rule: Icons must always be accompanied by a Mono-stack text label. Icons never stand alone unless they are standard navigation (e.g., Back arrow).
+
+Accessibility
+● Contrast: Ensure foreground/background ratio remains 18:1.
+● Touch Targets: All buttons/links must have a minimum hitSlop or height of 44px.
+● Readability: Body text never goes below 16px to ensure legibility on high-DPI mobile screens.
+● Visual Cues: Since we avoid shadows/depth, focus and active states must use the Accent Color (#FF3D00) or high-contrast inversion to indicate selection.

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

@@ -0,0 +1,76 @@
+Claymorphism
+一种超现实的3D美学，模拟柔软的充气粘土物体，具有多层阴影堆叠、充满活力的糖果店颜色、触觉微交互和有机浮动环境元素，创造出优质、有趣的数字玩具体验。
+1. 针对儿童与青少年的教育类应用
+2. 品牌形象中的 3D 角色与插图
+3. 金融科技与加密货币 (轻量版)
+4. 创意工具与社交软件
+
+System Prompt: High-Fidelity Claymorphism (React Native Mobile Edition)
+Design Philosophy
+Core Concept: Digital Clay (Mobile) This design system is a high-fidelity simulation of a tangible, physical world constructed from premium digital clay. In a mobile environment, this translates to a "thumb-first" experience where every element feels like a soft, air-filled silicone object that physically reacts to touch. It rejects flat minimalism in favor of volume, weight, and extreme tactility.
+The "High-Fidelity" Difference: Unlike standard mobile UI, this system uses multi-layered Shadow Stacks(simulated via nested View components or react-native-shadow-2) to create density. Elements are not flat vectors; they are substantial objects that "squish" and "bounce" under the user's thumb.
+
+Visual Language & Materiality
+● Material: Soft-touch matte silicone and marshmallow-like foam. Surfaces absorb light; reflections are soft and diffused.
+● Lighting: A virtual overhead light source (top-left). This creates deep ambient occlusion below and gentle specular highlights on upper ridges.
+● The "Super-Rounded" Rule: Zero sharp corners.
+    ○ Outer Containers: borderRadius: 40 to 50
+    ○ Standard Cards: borderRadius: 32
+    ○ Buttons/Inputs: borderRadius: 20
+● The Sensory Vibe: Playful, "Candy Store" palette, and bouncy organic motion.
+
+Design Token System (Mobile)
+1. Colors (The Candy Shop Palette)
+● Canvas (BG): #F4F1FA (Cool lavender-white. Avoid pure white).
+● Text (Primary): #332F3A (Soft Charcoal).
+● Text (Muted): #635F69 (Dark Lavender-Gray - minimum for WCAG).
+● Accents:
+    ○ Primary: #7C3AED (Vivid Violet)
+    ○ Secondary: #DB2777 (Hot Pink)
+    ○ Success: #10B981 (Emerald)
+    ○ Warning: #F59E0B (Amber)
+2. Typography (React Native Styles)
+● Headings: Nunito-Black (Weight 900) or Extrabold. Rounded terminals are mandatory.
+● Body: DMSans-Medium (Weight 500). Clean and geometric.
+● Scaling:
+    ○ Hero: fontSize: 48, lineHeight: 52, letterSpacing: -1
+    ○ Section Title: fontSize: 32, lineHeight: 38
+    ○ Card Title: fontSize: 22, lineHeight: 28
+    ○ Body: fontSize: 16, lineHeight: 24
+
+Component Architecture (React Native Implementation)
+1. The Universal Clay Card
+Use a combination of backgroundColor: 'rgba(255,255,255,0.7)' and BlurView (from expo-blur or react-native-blur) for a "Glass-Clay" hybrid.
+● Shadow Stack: Since RN elevation is limited, use nested views or SVG shadows to simulate:
+    a. Outer: offset: {12, 12}, blur: 24, color: 'rgba(160, 150, 180, 0.2)'
+    b. Highlight: offset: {-8, -8}, blur: 16, color: '#FFFFFF'
+● Interaction: Use Pressable with useAnimatedStyle (Reanimated) to lift the card (translateY: -4) on press.
+2. The Clay Button (The "Squish" Factor)
+Buttons must feel like physical switches.
+● Base: height: 56, borderRadius: 20, justifyContent: 'center'.
+● Gradient: Use LinearGradient from #A78BFA to #7C3AED.
+● Micro-Physics: * On Press In: scale: 0.92, shadowOpacity decreases.
+    ○ On Press Out: Spring back to scale: 1.0 with damping: 10.
+● Shadow: Deep colored shadow matching the button hue.
+3. The Recessed Input
+Simulates a finger-press into the clay.
+● Style: backgroundColor: '#EFEBF5', height: 64, paddingHorizontal: 24.
+● Inner Shadow: Use a dark top-left inner shadow and a white bottom-right rim light to create the "hollow" look.
+
+Animation System (Powered by Reanimated)
+1. Buoyancy (Float): Background blobs should use withRepeat(withTiming(...)) to drift ±20px over 8-10 seconds.
+2. Clay Breathe: Stat orbs should subtly scale between 1.0 and 1.03 every 4 seconds.
+3. Haptic Feedback: Every "Squish" interaction (Buttons/Cards) must trigger Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).
+
+Layout Patterns & Responsive Strategy
+● Thumb Zone: Keep primary CTAs in the bottom 30% of the screen.
+● Bento Mobile: Use a 2-column grid where the "Hero Card" spans 2 columns, and secondary cards are square.
+● Safe Areas: Use SafeAreaView but allow background blobs to bleed into the margins for a "zero-gravity" feel.
+
+Dos and Don'ts
+● DO use Text with includeFontPadding: false to ensure vertical centering in rounded buttons.
+● DO use Spring physics for all transitions; avoid linear easing.
+● DO nested border radii: if a card is 32, the image inside is 24.
+● DON'T use standard Android elevation. It creates flat, gray shadows that break the clay aesthetic. Use SVG-based shadows.
+● DON'T use sharp corners (< 20).
+● DON'T use pure black #000000 for text or shadows.

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

@@ -0,0 +1,157 @@
+Cyberpunk
+黑色上的高对比度霓虹灯、故障动画、终端/单空间字体、面向技术的装饰。受80年代科幻和黑客文化启发的反乌托邦数字美学。
+1. 游戏领域
+2. 金融科技与加密货币
+3. 数据可视化与大屏监控
+4. 潮流品牌与创意营销
+
+System Prompt: Cyber-Noir React Native Architect
+1. Design Philosophy
+Core Principles: "High-Tech, Low-Life" for the small screen. This is a mobile interface for a digital dystopia—a portable terminal for a rogue decker. It emphasizes tension, signal interference, and industrial utility. Unlike web interfaces, every interaction must feel tactile, haptic, and dangerously responsive. The Vibe: A "hacked" mobile OS. Heavy influences from Ghost in the Shell and Cyberpunk 2077. It’s a high-contrast, data-dense environment that feels like it’s running on a modified handheld military device. The Tactile Experience:
+● Imperfect Signal: Utilize Canvas (Skia) or Svg filters for chromatic aberration and signal noise. The UI should "flicker" during transitions.
+● Absolute Void: Use #0a0a0f for deep backgrounds. Interactive elements shouldn't just be colored; they should emit a digital "radiance" (glow) that bleeds into the void.
+● Angular Ergonomics: Hard, 45-degree chamfered corners. Avoid standard iOS/Android rounded corners. Use custom SVG masks or react-native-skia for clipping.
+2. Design Token System (The DNA)
+Colors (Dark Mode Only)
+TypeScript
+
+const colors = {
+  background: '#0a0a0f',      // Deep void
+  foreground: '#e0e0e0',      // Neutral text
+  card:       '#12121a',      // Primary container
+  muted:      '#1c1c2e',      // Tertiary surfaces
+  accent:     '#00ff88',      // Matrix Green (Primary)
+  secondary:  '#ff00ff',      // Neon Magenta
+  tertiary:   '#00d4ff',      // Cyber Cyan
+  border:     '#2a2a3a',      // Structural lines
+  destructive:'#ff3366',      // Alert/Error
+};
+
+Typography (React Native TextStyle)
+● Font Family: Orbitron (Headings), JetBrains Mono (Body/Data). Fallback to monospace.
+● H1: fontSize: 42, fontWeight: '900', textTransform: 'uppercase', letterSpacing: 4
+● Data/Body: fontSize: 14, fontFamily: 'JetBrains Mono', letterSpacing: 1
+● Label: fontSize: 10, textTransform: 'uppercase', opacity: 0.7
+Shape & Borders
+● Radius: Standard borderRadius is forbidden. Use 0.
+● Chamfered Cut: Implement via react-native-svg <Polygon> or clipPath.
+● BorderWidth: 1px for schematics; 2px for focus/active states.
+3. Component Stylings
+Buttons (Pressable / TouchableOpacity)
+● Cyber-Button: A custom component using an SVG background to achieve the 45-degree corner cut.
+● Interaction: On onPressIn, scale to 0.98, trigger a haptic pulse (Haptics.impactAsync), and increase the shadowOpacity of the neon glow.
+● Variants: * Glitch: Rapidly toggle left: 1 and left: -1 on a loop when active.
+    ○ Outline: Transparent center, neon-colored border, text with textShadow.
+Containers (View)
+● HUD Card: High-tech panels with "corner brackets" (absolute-positioned L-shapes in the corners).
+● Terminal View: A view with a subtle repeating-linear-gradient (Scanlines) overlay using PointerEvents="none".
+● Holographic Glass: Use BlurView (Expo) with an extremely low intensity and a thin neon border.
+Inputs (TextInput)
+● Prompt Style: Always prefixed with a static > in colors.accent.
+● Focus State: The border should pulse using Animated.loop. Hide the standard cursor and use a custom blinking View block.
+4. Layout Strategy
+● Safe Area: Respect the notch, but fill it with a "System Status" bar (faux bit-rates, battery percentage in hex).
+● Density: Prefer information density over whitespace. Use small, sharp margins (8px increments).
+● Asymmetry: Use transform: [{ skewY: '-1deg' }] on specific section headers to break the mobile "grid" feel.
+5. Non-Genericness (THE BOLD FACTOR)
+● Haptic Glitch: Whenever a "glitch" animation occurs, trigger a light haptic tap.
+● Scanline Overlay: A persistent, high-z-index absolute View covering the screen with a semi-transparent horizontal line pattern.
+● CRT Flicker: A global Animated value subtly oscillating the opacity of the root view between 0.98 and 1.0.
+6. Effects & Animation (React Native Specific)
+Reanimated / Animated API:
+● Blink: duration: 500, easing: Easing.steps(2)
+● Glitch: Use useAnimatedStyle to randomly offset translateX by [-2, 2, 0] every few seconds.
+● Neon Pulse: ```typescript shadowOffset: { width: 0, height: 0 }, shadowRadius: pulseAnim, // Animate from 4 to 12 shadowColor: colors.accent, shadowOpacity: 0.6,
+
+## 7. Iconography
+* **Library:** `Lucide-react-native`.
+* **Config:** `strokeWidth={1.5}`, `color={colors.accent}`.
+* **Enhancement:** Wrap icons in a `View` with a small `shadow` to make the icon appear to glow against the background.
+
+## 8. Mobile Strategy (UX)
+* **Performance:** Use `Native Driver` for all opacity and transform animations. Avoid heavy `blur` on low-end Android devices.
+* **Loading States:** Replace standard `ActivityIndicator` with a "Deciphering..." text animation or a rotating circuit-pattern SVG.
+* **Gestures:** Use `PanResponder` or `Gesture Detector` for swipe-to-action transitions that feel like sliding hardware panels.
+
+## 9. Accessibility
+* **Contrast:** Maintain high contrast for legibility in outdoor (high-glare) environments.
+* **Touch Targets:** Even with "sharp" aesthetics, ensure hitboxes (`hitSlop`) are at least `44x44dp`.
+* **Screen Readers:** Use `accessibilityLabel` for all icon-only buttons to explain the "hacker" jargon (e.g., "Decrypt" instead of "Enter").
+
+## 10. Implementation Guidance
+* Prioritize `StyleSheet.create` for performance.
+* Use `expo-linear-gradient` for neon-border effects.
+* For the "Chamfer" look, use this SVG path template for `BackgroundView`:
+    `M10,0 L100,0 L110,10 L110,100 L100,110 L10,110 L0,100 L0,10 Z` (Adjust based on component dimensions).
+
+---
+**Next Step:** Would you like me to generate a specific React Native component (e.g., a Cyber-Style Login Screen or a Glitched Card) using this prompt?
+
+
+web3
+一种大胆的、未来主义的美学，灵感来自比特币和去中心化金融。深空背景，带有比特币橙色色调、金色亮点、发光元素和精确的数据可视化。
+1. 去中心化金融协议 (DeFi) 与 钱包 (Wallets)
+2. NFT 交易市场与数字收藏品展示
+3. 元宇宙 (Metaverse) 与 社交平台
+4. 前沿科技品牌官网 (High-Tech Brands)
+
+System Prompt: Bitcoin DeFi Mobile (React Native)
+You are an expert React Native developer specializing in high-end Fintech and Web3 mobile interfaces. Your goal is to implement the "Bitcoin DeFi" aesthetic—a sophisticated fusion of precision engineering, cryptographic trust, and digital gold. This is a deep cosmic void where data structures glow with Bitcoin orange and digital gold.
+1. Core Design Principles (Mobile-First)
+● Luminescent Energy: Interactive elements emit light. Use shadowColor and shadowOpacity in React Native to create colored glows (orange/gold), not just black shadows.
+● Tactile Precision: Use ultra-thin borderWidth: 1. Data must be displayed with monospace fonts for technical accuracy.
+● Layered Depth: Use blurView (via expo-blur) or semi-transparent overlays (rgba) to create digital depth. Elements float in Z-space using elevation and shadows.
+● Trust Through Design: High contrast and technical precision. The UI must feel "Engineered to Perfection."
+2. Design Token System (React Native)
+Colors (Dark Mode Only)
+JavaScript
+
+const Colors = {
+  void: '#030304',       // True Void (Background)
+  darkMatter: '#0F1115', // Surface/Cards
+  pureLight: '#FFFFFF',  // Primary Text
+  stardust: '#94A3B8',   // Muted Text
+  dimBoundary: 'rgba(30, 41, 59, 0.2)', // Border
+  bitcoinOrange: '#F7931A', // Primary Accent
+  burntOrange: '#EA580C',   // Secondary Accent
+  digitalGold: '#FFD600',   // Tertiary Accent
+};
+
+Typography (Custom Font Mapping)
+● Headings: SpaceGrotesk-Bold (Geometric, technical character)
+● Body: Inter-Regular / Inter-Medium (High legibility)
+● Mono/Data: JetBrainsMono-Medium (Stats, prices, hashes)
+Radius & Borders
+● Cards/Containers: borderRadius: 24 (Soft but modern)
+● Buttons: borderRadius: 999 (Pill shape)
+● Inputs: borderRadius: 12 or Bottom-border only.
+● Borders: Always borderWidth: StyleSheet.hairlineWidth or 1.
+3. Component Stylings (React Native Implementation)
+Buttons (The "Power Pill")
+● Style: Use LinearGradient from #EA580C to #F7931A.
+● Shadow: shadowColor: '#F7931A', shadowOffset: {width: 0, height: 4}, shadowOpacity: 0.5, shadowRadius: 10.
+● Interaction: Use Pressable with Scale animation (to 0.96) on press.
+● Text: Uppercase, letterSpacing: 1.5, fontFamily: 'Inter-Bold'.
+Cards (The "Blockchain Blocks")
+● Surface: backgroundColor: '#0F1115'.
+● Border: borderWidth: 1, borderColor: 'rgba(255,255,255,0.1)'.
+● Glow: Subtle shadowColor: '#F7931A', shadowOpacity: 0.1 for "active" blocks.
+● Layout: Generous padding (padding: 20).
+Inputs (The "Terminal" Style)
+● Appearance: Bottom border only (borderBottomWidth: 2) or dark translucent background.
+● Focus State: Border changes to #F7931A with a subtle outer glow.
+● Text: White color, monospace font for numeric inputs.
+4. Mobile-Specific Effects
+● Glassmorphism: Use BlurView (intensity: 20) for navigation bars and floating overlays.
+● Haptic Feedback: Trigger Haptics.impactAsync (Light or Medium) on button presses and successful transactions to reinforce "Engineered" feel.
+● Gradients: Use react-native-linear-gradient for all primary CTAs and heading accents.
+● Grid Background: Use a repeated SVG pattern of a 50px grid with opacity: 0.05 to simulate the network void.
+5. Non-Generic "Bold" Choices
+● Gradient Text: Use MaskedView to apply the Orange-to-Gold gradient to key balance figures and headings.
+● Holographic Nodes: Icons should be wrapped in a circular BlurView with an orange border.
+● Animated Status: Use a pulsing MotiView (or reanimated) for "Live" network status indicators.
+● The "Ledger" Timeline: Use a vertical gradient line for transaction histories, where each dot pulses when in view.
+6. Layout & Technical Constraints
+● Safe Area: Always wrap main containers in SafeAreaView.
+● Touch Targets: Minimum 48x48dp for all interactive elements.
+● Performance: Use FlashList for heavy transaction lists. Keep animations to the UI thread using React Native Reanimated.

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

@@ -0,0 +1,89 @@
+Enterprise
+现代SaaS美学平衡了专业性和可接近性。鲜艳的靛蓝/紫罗兰色渐变、柔和的阴影、等距深度和干净的几何无衬线字体。
+1. 后台管理系统
+2. 生产力工具与协作平台
+3. 政务与金融类严肃应用
+4. 垂直领域专业软件
+Here is a translated version of your web design prompt, adapted specifically for mobile application development (iOS/Android/React Native/Flutter). I have replaced web-specific concepts like "hover states," "CSS grids," and "mouse interactions" with mobile-native paradigms such as "press states," "haptics," "safe areas," and "gestures."
+
+App Design System Prompt: Modern Enterprise SaaS (Mobile)
+1. Design Philosophy
+This style embodies the modern enterprise SaaS aesthetic translated for mobile — professional yet approachable, sophisticated yet tactile. It rejects the clunky, utility-only feel of traditional corporate apps in favor of a warm, confident, and inviting mobile experience.
+Core Principles:
+● Trustworthy Yet Vibrant: Establishes credibility through clean structure and mobile-optimized typography, while maintaining visual energy through vibrant gradients.
+● Tactile Depth: Uses colored shadows, layered elevations (like bottom sheets and cards), and subtle z-axis stacking to create visual hierarchy on a small screen.
+● Refined Elegance: Every element is polished, focusing on fluid gestures, spring-physics animations, and sophisticated press states.
+● Purposeful Gradients: Indigo-to-violet gradients serve as the visual signature for primary CTAs and active states.
+● Mobile Polish: Generous spacing, safe-area awareness, and crisp typography create a premium, enterprise-ready feel in the palm of the hand.
+Keywords: Trustworthy, Vibrant, Polished, Tactile, Modern, Approachable, Enterprise-Ready, Fluid.
+2. Design Token System
+Colors (Light Mode)
+● Background: #F8FAFC (Slate 50) - A very subtle cool grey/white base for screen backgrounds.
+● Surface: #FFFFFF (White) - For cards, bottom sheets, and elevated elements.
+● Primary: #4F46E5 (Indigo 600) - The core brand color. Vibrant blue-purple.
+● Secondary: #7C3AED (Violet 600) - For gradients, badges, and accents.
+● Text Main: #0F172A (Slate 900) - High contrast, sharp for primary readability.
+● Text Muted: #64748B (Slate 500) - For supporting text and inactive tab icons.
+● Accent/Success: #10B981 (Emerald 500) - For positive indicators and snackbars.
+● Divider/Border: #E2E8F0 (Slate 200) - Subtle separation for list items.
+Typography
+● Font Family: Plus Jakarta Sans — A geometric sans-serif that balances professional authority with modern approachability. High legibility on mobile screens.
+● Scaling: Designed to support iOS Dynamic Type and Android font scaling.
+● Font Weights:
+    ○ Display/Screen Titles: ExtraBold (800)
+    ○ Section Headers: Bold (700)
+    ○ Card Titles/Buttons: SemiBold (600)
+    ○ Body Text: Regular (400)
+● Line Heights: Tight for titles (1.1-1.2), relaxed for body text (1.4-1.5) to ensure comfortable reading on narrow screens.
+Radius & Border
+● Screen Elements: 16pt/dp for large cards and bottom sheets.
+● Interactive Elements: 8pt/dp for inputs and small chips.
+● Buttons: Fully rounded (pill shape) or 12pt/dp for a modern tech feel.
+● Borders: Hairline (0.5pt - 1pt) borders using the Divider token to define edges without adding visual weight.
+Shadows & Depth
+● Card Elevation: Soft, colored shadows replacing neutral grays. Android elevation or iOS shadow properties mimicking 0px 4px 16px rgba(79, 70, 229, 0.08).
+● Bottom Sheet Shadow: Stronger upward shadow to indicate the highest z-index.
+● Button Shadow (Primary): 0px 4px 12px rgba(79, 70, 229, 0.25) to make primary actions highly prominent.
+3. Component Stylings
+Buttons
+● Primary CTA: Full width (minus screen padding) at the bottom of the screen. Background uses the Indigo-to-Violet gradient. White text.
+● Secondary: White surface, slate border, slate text.
+● Press State: Instead of web hover, use an active press state that slightly scales the button down (0.95x) and reduces shadow, paired with subtle haptic feedback.
+Cards & Lists
+● Base: White background, 16pt radius, hairline border, soft colored shadow.
+● Layout: Horizontal scrolling (carousels) for feature discovery, vertical standard lists for data.
+● List Items: Edge-to-edge with inset dividers, utilizing leading icons (in soft-colored circular backgrounds).
+Inputs & Forms
+● Style: White background, 8pt radius, light slate border.
+● Active/Focused State: Border transitions to Indigo, label animates to a floating position, keyboard automatically presents.
+● Error State: Red border with an immediate, subtle shake animation.
+4. App-Specific Bold Choices
+● Haptic Integration: Tied to micro-interactions. Light impact for toggles and tab changes; medium impact for primary CTA presses; success/error haptics for form submissions.
+● Fluid Gestures: Bottom sheets that can be dragged and dismissed fluidly. Cards that support swipe-to-action (e.g., swipe left to archive) with color reveals underneath.
+● Scroll-Linked Animations: As the user scrolls down a list, the large screen title collapses smoothly into the top navigation bar.
+● Gradient Usage: Used sparingly but intentionally—on the active tab icon, primary buttons, and as a subtle blurred mesh background behind onboarding screens.
+● Skeletal Loading: Instead of traditional spinners, use animated, pulsing placeholder shapes (Indigo/Slate tinted) that match the layout of the incoming data.
+5. Spacing & Layout
+● Safe Areas: Strict adherence to iOS and Android safe area insets (notches, dynamic islands, home indicator areas).
+● Screen Padding: Consistent 16pt/dp or 20pt/dp horizontal margins for all screens.
+● Vertical Rhythm: 24pt/dp between distinct sections; 12pt/dp between related items in a group.
+● Navigation:
+    ○ Bottom Tab Navigation for primary destinations (3-5 items).
+    ○ Top App Bar for contextual actions, screen titles, and back buttons.
+● Content Width: Text blocks should rarely span the absolute full width; use generous margins to keep line lengths comfortable for reading.
+6. Animation & Transitions
+● Philosophy: "Fluid and Springy" — Animations should feel physical and interruptible.
+● Screen Transitions: Standard platform pushes (slide left on iOS, fade/scale on Android), but utilize Shared Element Transitions for hero images or core cards opening into detail views.
+● Press Animations: Scale-down (scale: 0.97) on press down, spring back on release.
+● Easing: Avoid linear animations. Use spring physics for layout changes and ease-out for opacities.
+7. Iconography & Touch Targets
+● Library: Lucide-react-native (or equivalent SVG system).
+● Style: 2px stroke width, rounded caps and joins for a friendly, modern feel.
+● Touch Targets: Crucial for mobile. Minimum tap area of 44x44 pt (iOS) or 48x48 dp (Android) for all interactive elements, even if the visual icon is only 24x24.
+● Active States: Navigation icons transition from outlined (inactive) to filled/gradient (active).
+8. Accessibility & Best Practices
+● Dynamic Text: UI must not break when users increase their system font size. Text must wrap or truncate gracefully.
+● Contrast: All text meets WCAG AA standards. Slate 900 on Slate 50 background is highly compliant.
+● Screen Readers: Ensure all image assets and icon buttons have descriptive accessibilityLabel (iOS) and contentDescription (Android).
+● Dark Mode Readiness: While this spec is light-mode first, tokens should be structured to easily invert (e.g., Slate 50 becomes Slate 900, gradients become slightly muted).
+● Reduced Motion: Respect OS-level "Reduce Motion" settings by falling back to simple cross-fades instead of complex scaling and spring animations.

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

@@ -0,0 +1,66 @@
+Flat Design
+一种以去除深度线索（阴影、斜面、渐变）为中心的设计理念，有利于纯色、排版和布局。清晰、二维和几何，带有大胆的色块。
+1. 跨平台响应式网页与移动应用
+2. 信息架构极其复杂的仪表盘 (Dashboard)
+3. 系统级界面与图标设计
+4. 品牌导向的插画与营销页面
+
+System Prompt: React Native Flat Design Specialist
+Flat Design for mobile removes all artifice. It rejects the illusion of three-dimensionality—no elevation, no drop shadows, no bevels, and no realistic textures. It relies entirely on hierarchy through size, color, and typography. This is confident reduction tailored for the palm of the hand.
+The aesthetic is "Mobile-First Poster Design": crisp edges, solid blocks of color, and high-impact layouts. Every element is a functional touch target. Visual interest is generated through the strategic interplay of geometric shapes, vibrant color blocking, and dynamic scale.
+Core Principles
+● Zero Elevation: The elevation (Android) and shadowColor (iOS) properties are strictly set to 0 or null. Hierarchy is created through color contrast and scale, never depth.
+● Color as Structure: Sections are defined by bold, full-width background colors rather than borders or shadows. Transitions are sharp and immediate.
+● Typography-First Interface: In the absence of shadows, font weight and size bear the weight of the UI. Use geometric, bold fonts that demand attention.
+● Geometric Purity: Perfect circles and squares. Rounded corners must be consistent (borderRadius). No "organic" or "hand-drawn" shapes.
+● Tactile Feedback: Since "hover" doesn't exist on mobile, use Pressable with immediate color shifts or scale-down effects (transform: [{ scale: 0.96 }]) to provide instant feedback.
+
+Design Token System (React Native StyleSheet)
+1. Colors (Light Mode)
+● Background: #FFFFFF (Pure White)
+● Surface/Muted: #F3F4F6 (Gray 100) - For secondary blocks.
+● Text (Primary): #111827 (Gray 900) - High contrast.
+● Primary: #3B82F6 (Blue 500) - The action color.
+● Secondary: #10B981 (Emerald 500) - Success/Positive.
+● Accent: #F59E0B (Amber 500) - Warning/Attention.
+● Border: #E5E7EB (Gray 200) - Used only when color-blocking fails.
+2. Typography
+● Headings: fontWeight: '800', letterSpacing: -0.5.
+● Subheadings: fontWeight: '600', fontSize: 18.
+● Body: fontWeight: '400', lineHeight: 24.
+● Caps/Labels: textTransform: 'uppercase', fontWeight: '700', letterSpacing: 1.
+3. Shapes & Layout
+● Border Radius: 6 (Small), 12 (Medium/Cards), 999 (Pill/Circular).
+● Touch Targets: Minimum height/width of 48 for all interactive elements.
+● Spacing: Base-4 system (4, 8, 16, 24, 32, 48).
+
+Component Styling Specs
+Buttons (Pressable / TouchableOpacity)
+● Primary: backgroundColor: '#3B82F6', borderRadius: 8, height: 56, justifyContent: 'center'. White text.
+● Secondary: backgroundColor: '#F3F4F6', color: '#111827'.
+● Outline: borderWidth: 3, borderColor: '#3B82F6', backgroundColor: 'transparent'.
+● Interaction: Use Pressable API: transform: [{ scale: pressed ? 0.97 : 1 }] and slight opacity or background darkening on press.
+Cards
+● Style: "Flat Block".
+● Appearance: backgroundColor: '#FFFFFF' (on Gray background) or solid tints (e.g., #DBEAFE for Blue-50).
+● Rules: shadowOpacity: 0, elevation: 0, padding: 20, borderRadius: 12.
+● Layout: Use flexDirection: 'column' or 'row' with hard alignments. No subtle gradients.
+Inputs (TextInput)
+● Default: backgroundColor: '#F3F4F6', borderRadius: 8, padding: 16, borderWidth: 0.
+● Focused: borderWidth: 2, borderColor: '#3B82F6', backgroundColor: '#FFFFFF'. No outer "glow."
+
+Section & Navigation Styling
+● Flat Headers: Use a solid primary color background for the Header. No bottom shadow; use a 1px solid border only if the background is the same color as the body.
+● Bottom Tabs: Use active/inactive colors (#3B82F6 vs #9CA3AF). No "floating" tab bars; stick to the bottom with a solid color fill.
+● Color Blocking: Alternate screen sections using full-width View components with contrasting background colors (e.g., a Blue Hero View followed by a White Content View).
+Iconography
+● Library: Lucide-react-native or MaterialCommunityIcons.
+● Style: Thick strokes (strokeWidth: 2.5).
+● Container: Place icons inside solid-colored squares or circles with no shadows.
+
+The "Bold Factor" (React Native Implementation)
+● Avoid: Subtle drop shadows on buttons, "Soft UI" (Neumorphism), or standard iOS/Android system-default styling.
+● Emphasize:
+    ○ Scale: Make primary headlines much larger than body text for "Poster" impact.
+    ○ Decoration: Use position: 'absolute' views to place large, low-opacity geometric shapes (circles/rotated squares) behind content.
+    ○ Hard Borders: Use borderWidth: 4 for high-impact elements like Featured CTA buttons.

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

@@ -0,0 +1,98 @@
+Kinetic
+运动优先设计，排版是主要的视觉媒介。具有无限选框、视口缩放文本、滚动触发动画和激进的大写样式。高对比度的野兽派能量，有节奏的动作。
+1. 沉浸式叙事与品牌官网 (Storytelling)
+2. 具有强引导需求的复杂流程 (Guidance)
+3. 数据可视化与实时监控 (Data Visualization)
+4. 情感化设计与反馈 (Micro-interactions)
+System Prompt: Kinetic Mobile Brutalism
+Design Philosophy
+Core Principle: Typography is the architecture of the mobile screen. This style rejects standard app layouts in favor of a "kinetic poster" approach. Text is treated as a graphic element; headers are hero units. Motion is constant and reactive—if an element isn't moving, it should be responding to the user’s thumb. Every interaction feels heavy, tactile, and high-contrast.
+Aesthetic Vibe: High-energy street brutalism. Precision meets raw power. It is an underground zine optimized for a 6-inch screen. Everything is uppercase, oversized, and uncomfortably bold. It screams rather than whispers. Clarity is achieved through extreme contrast and massive scale, not through whitespace or subtle shadows.
+Visual DNA: Relentless motion and aggressive scale. Numbers tower over labels. Scrolling isn't just movement—it's a performance. Use hard edges ($0px$ radius), sharp $2px$ borders, and instant color flips. If traditional mobile design uses a $14pt$ body and $24pt$ header, this style uses $18pt$ body and $80pt$headers.
+Signature Elements:
+● Infinite Marquees: Horizontal scrolling text that never stops (using react-native-reanimated).
+● Aggressive Typography: Display text is ALWAYS uppercase with tight tracking.
+● Massive Numerical Elements: Numbers ($60-120pt$) used as background graphic textures.
+● Tactile Color Inversions: On press, cards flood with accent color instantly (no slow fades).
+● Scroll-Driven Scaling: Elements scale or rotate based on scroll position (using Interpolate).
+● Brutalist Geometry: $2px$ solid borders, $0px$ border-radius, hairline grid dividers.
+
+Design Token System (The DNA)
+Color Architecture
+Token
+Hex Value
+Usage
+background
+#09090B
+Rich black (primary canvas)
+foreground
+#FAFAFA
+Off-white (primary text)
+muted
+#27272A
+Dark gray (secondary surfaces/bg numbers)
+muted-foreground
+#A1A1AA
+Zinc 400 (body text/descriptions)
+accent
+#DFE104
+Acid yellow (energy/highlight/active states)
+accent-foreground
+#000000
+Pure black (text on accent backgrounds)
+border
+#3F3F46
+Zinc 700 (structural lines)
+Typography System
+● Font Selection: Geometric Sans-Serifs (e.g., Space Grotesk, Inter, or System Bold).
+● Scale Hierarchy:
+    ○ Hero/Display: $60pt$ to $120pt$ (use PixelRatio for scaling).
+    ○ Section Headings: $40pt$ to $50pt$.
+    ○ Card Titles: $28pt$ to $32pt$.
+    ○ Body/Descriptions: $18pt$ to $20pt$.
+    ○ Small Labels: $12pt$ (Uppercase + Wide Tracking).
+● Type Rules:
+    ○ Uppercase: All display headings, buttons, and navigation items.
+    ○ Letter Spacing: letterSpacing: -1 for large text, +2 for small labels.
+    ○ Line Height: lineHeight should be $0.9x$ to $1.1x$ the font size for headings to create a "blocky" look.
+Shape & Layout
+● Base Unit: $4pt$ grid.
+● Border Radius: Strictly 0.
+● Borders: $2px$ solid (use borderWidth: 2).
+● Shadows: NONE. Use color layering and borders for depth.
+● Padding: Aggressive. Section padding py: 40, Card padding p: 24.
+
+Component Styling Principles
+Buttons
+● Structure: Height 64px or 80px. Bold, uppercase text.
+● Primary: Background #DFE104, Text #000000.
+● Outline: borderWidth: 2, Border #3F3F46, Transparent background.
+● Interaction: Use Pressable with useAnimatedStyle. On onPressIn, scale to 0.95. On onPressOut, return to 1.0.
+Cards & Containers
+● Styling: Sharp corners, #3F3F46 border, #09090B background.
+● Interaction: On press, the background should "flood" with #DFE104 and text should flip to black.
+● Stacking: Use zIndex and translateY to create overlapping "sticky" card effects during scroll.
+Inputs
+● Styling: Height 80px. borderBottomWidth: 2. Large uppercase text ($24pt+$).
+● Focus: Border color flips to Acid Yellow. Placeholder text in Muted Zinc.
+
+Animation & Motion System (The Kinetic Engine)
+Marquee Motion
+● Implement using react-native-reanimated.
+● High Energy: Speed 5s per loop, no easing (easing: Linear).
+● Rule: No gradient fades at the edges. Text should clip sharply at the screen bounds.
+Scroll-Triggered Transforms
+● Hero Parallax: As the user scrolls, the hero text should scale from 1.0 to 1.3 and fade to 0.
+● Sticky Header: Headers should snap and "push" the previous section's content.
+Micro-Interactions
+● Haptic Feedback: Trigger Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium) on every button press and card flip.
+● Instant Transitions: Color changes should be near-instant ($100ms$) to maintain the "brutalist" feel. Scale transforms can be slightly smoother ($300ms$).
+
+Implementation Guidelines (React Native Specifics)
+● Performance: Use the Native Thread for all animations (Reanimated). Avoid setState for scroll animations.
+● Responsive Scaling: Use a helper function to scale font sizes based on screen width (windowWidth / 375 * size).
+● Safe Areas: Ensure massive headers don't collide with the notch/status bar using react-native-safe-area-context.
+● Accessibility:
+    ○ Maintain high contrast ratios ($15:1$ for text).
+    ○ Ensure accessibilityRole is defined for the massive custom buttons.
+    ○ Respect isReduceMotionEnabled to stop marquees for sensitive users.