@event4u/agent-config 5.10.1 → 6.0.0

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

@@ -0,0 +1,123 @@
+Modern Dark
+一种电影般的高精度暗模式设计，通过动画渐变斑点、鼠标跟踪聚光灯效果和精心制作的微交互实现分层环境照明，感觉就像高级软件。
+"1. 影音娱乐与流媒体平台
+2. 开发者工具与专业生产力软件
+3. 金融、科技与 AI 仪表盘
+4. 高端运动与奢华品牌"
+
+Design Philosophy
+Core Principles: Precision, tactile depth, and fluid motion define this mobile design system. For React Native, every component is treated as a physical layer within a stacked 3D space, illuminated by virtual light sources. The design communicates "high-end mobile utility"—as responsive and refined as the Linear mobile app or Apple’s native interface. Every shadow uses multiple layers, every gradient is dithered to prevent banding, and every interaction uses precise haptic feedback combined with Expo.out easing.
+Vibe: Cinematic Technical Minimalism. It’s a "Dark Mode First" aesthetic, utilizing near-blacks (#050506) and deep indigos. Imagine a high-end pro tool interface viewed through frosted glass at night. It is technical but inviting, using soft "glow" sources (#5E6AD2) to guide the thumb. It should feel like a premium native iOS/Android app, not a web-wrapper.
+Differentiation: The signature is Atmospheric Depth. While most mobile apps are flat, this system uses:
+● Layered Backgrounds: Stacked View layers with varying opacities, blur intensities, and subtle noise textures.
+● Animated Ambient Light: Large, slow-moving blurred Canvas objects (using react-native-skia or Animated) that simulate light pools.
+● Haptic-Linked Interactions: Every "Pressable" event is paired with subtle haptics (Impact Light/Medium) to reinforce the "hardware" feel.
+● Spring-less Precision: Eschewing "bouncy" animations for sophisticated Bezier(0.16, 1, 0.3, 1) curves.
+
+Design Token System (The DNA)
+Color Strategy: Deep Space & Ambient Light
+Token
+Value
+Usage
+bg-deep
+#020203
+Screen background, Bottom Tab bar base
+bg-base
+#050506
+Primary view container background
+bg-elevated
+#0a0a0c
+Modals, Bottom sheets, Surface cards
+surface
+rgba(255,255,255,0.05)
+Card backgrounds, list items
+foreground
+#EDEDEF
+Primary text (High contrast)
+foreground-muted
+#8A8F98
+Secondary labels, body text
+accent
+#5E6AD2
+Buttons, active icons, primary brand glows
+accent-glow
+rgba(94,106,210,0.2)
+Ambient shadows and light emission
+border-default
+rgba(255,255,255,0.08)
+Subtle hairline dividers (0.5pt on iOS)
+
+Typography System (React Native)
+Font Family: Inter, GeistSans-Regular, or System San Francisco/Roboto.
+Level
+Size
+Weight
+Letter Spacing
+Display
+48
+700
+-1.5
+H1
+32
+600
+-0.5
+H2
+24
+600
+-0.5
+H3
+18
+600
+0
+Body
+16
+400
+0
+Label/Mono
+12
+500
+1.2 (Uppercase)
+Gradient Text: Implement using mask-view and react-native-linear-gradient. Headers should transition from #FFFFFF to rgba(255,255,255,0.7) vertically.
+
+Component Styling Principles
+1. The Background System
+Never use a single solid color for the screen.
+● Base: A LinearGradient from #0a0a0f at the top to #020203 at the bottom.
+● The "Blobs": Use AbsoluteFill views with borderRadius equal to half their width, high blurRadius (30-50), and low opacity (0.1).
+● Animation: Use useAnimatedStyle from Reanimated to slowly oscillate the translateX and translateY of these light pools.
+2. Cards & Containers
+● Radius: Always borderRadius: 16.
+● Border: Use borderWidth: StyleSheet.hairlineWidth with rgba(255,255,255,0.1).
+● Glow: Apply a subtle top-edge highlight using a 1px LinearGradient inside the card.
+● Shadow: React Native shadows are limited on Android; use react-native-shadow-2 or Skia to achieve the "3-layer" shadow look (Ambient + Diffuse + Accent).
+3. Buttons (Pressables)
+● Primary: Background #5E6AD2. Text #FFFFFF.
+● Interaction: On onPressIn, scale to 0.97. On onPressOut, scale back to 1.0. Use Selection haptic feedback.
+● Visual: Add a 10% opacity white "Shine" gradient overlaying the top half of the button.
+4. Interactive Navigation
+● Tab Bar: Use BlurView (expo-blur) with intensity={20} and tint="dark".
+● Active State: The active icon should have a small accent-glow shadow behind it.
+● Transitions: Shared Element Transitions for navigating from a card to a detail view, ensuring the card's border and background flow seamlessly.
+
+Layout & Motion
+Spacing Scale
+● Base Unit: 4pt.
+● Screen Margins: 20pt (Standard) or 16pt (Tight).
+● Gaps: Use gap (available in modern RN) with values of 8, 12, 16, or 24.
+Animation Specs
+● Easing: Easing.bezier(0.16, 1, 0.3, 1) (Expo Out).
+● Duration: * Micro-interactions (Toggle/Press): 200ms.
+    ○ Screen Transitions: 400ms.
+    ○ Modals (Bottom Sheet): 500ms with custom spring (damping: 20, stiffness: 90).
+
+Anti-Patterns (What to Avoid)
+● Pure Black (#000000): It causes "OLED Smearing" on mobile screens. Stick to #050506.
+● Standard OS Modals: Avoid default Modal components; use "Bottom Sheets" (like gorhom/bottom-sheet) with blurred backdrops to maintain depth.
+● Full Opacity Borders: Never use solid grey borders. Always use rgba white/black for natural blending.
+● Laggy Blobs: Do not use too many blurRadius effects on the main JS thread. Always use useNativeDriver: true or Skia.
+
+The "Bold Factor" (Signature Elements)
+1. Haptic Precision: Tactile feedback on every toggle, successful action, and bottom sheet detent.
+2. Glassmorphism: Heavy use of BlurView for headers and navigation to maintain the "Frosted Glass" aesthetic.
+3. Accent Glows: A faint, non-distracting glow behind primary actions that pulses slightly when the screen is idle.
+4. Bento Layouts: For dashboards, use Flexbox to create asymmetric cards (e.g., one card taking 60% width, the other 40% with different heights).

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

@@ -0,0 +1,216 @@
+Monochrome
+一套简洁的编辑设计体系，建立在纯粹的黑白之上。没有点缀色——只有戏剧性的对比、超大衬线字体和精准的几何布局。让人联想到高端时尚专题和建筑作品集。严肃、成熟、毫不掩饰地大胆。
+"1. 极简主义电商与高端奢侈品
+2. 专业创意与文档编辑工具
+3. 数据密集型仪表盘（局部应用）
+4. 实验性与先锋感网站"
+
+Design Style: Minimalist Monochrome (Mobile)
+Design Philosophy
+Core Principle
+The Pocket Editorial. On mobile, Minimalist Monochrome transforms the screen into a tactile, high-end printed manifesto. It rejects the "app-like" tendency for soft bubbles and friendly gradients. Instead, it offers a stark, vertical journey defined by pure black (#000000), pure white (#FFFFFF), and razor-sharp borders. Every tap is a deliberate decision; every scroll is a flip of a page in a luxury monograph.
+Visual Vibe
+Emotional Keywords: Tactile, Austere, Editorial, Direct, High-Fidelity, Uncompromising, Sharp, Rhythmic.
+This is the visual language of:
+● Mobile typographers and digital brutalism
+● The mobile interfaces of luxury fashion houses (Balenciaga, Zara, SSENSE)
+● Digital exhibitions where the content frames itself
+● High-contrast e-reader aesthetics
+What This Design Is NOT
+● ❌ "App-y" (no cards with drop shadows, no floating bubbles)
+● ❌ Native iOS/Android standard (no system blue, no rounded groups)
+● ❌ Gesture-heavy (interactions are explicit taps, not vague swipes)
+● ❌ Cluttered (one idea per screen view)
+● ❌ Colorful (strictly grayscale)
+The DNA of Minimalist Monochrome (Mobile)
+1. Vertical Linearity
+The mobile screen is a continuous roll of paper. Structure is created not by boxes, but by horizontal lines (rules) that span the full width of the device. Content lives between these lines.
+2. Typography as Interface
+Buttons are often just large words. Navigation is text-based. The serif typeface (Playfair Display) acts as the primary image on the screen. Headlines must be large enough to break words onto new lines, creating graphic shapes.
+3. The "Touch" Inversion
+Since there is no "hover" on mobile, interaction is communicated through inversion. When a user touches a white block, it turns black instantly. This zero-latency binary feedback replaces physical tactility.
+4. Zero Radius, Zero Fluff
+All elements—buttons, images, inputs, modals—have strictly 0px border radius. This sharp geometry cuts through the rounded physical corners of modern smartphones, creating a striking contrast.
+
+Design Token System
+Colors (Strictly Monochrome)
+background:       #FFFFFF (Pure white)
+foreground:       #000000 (Pure black)
+muted:            #F5F5F5 (Off-white for "pressed" states or subtle blocks)
+mutedForeground:  #525252 (Dark gray for metadata)
+border:           #000000 (Black borders - heavy usage)
+borderLight:      #E5E5E5 (Subtle dividers)
+overlay:          #000000 (Full screen menu background)
+
+Rule: No accent colors. The "Active State" is simply the inverse of the "Default State."
+Typography
+Font Stack:
+● Display: "Playfair Display", serif - For all headlines and large numerals.
+● Body: "Source Serif 4", serif - For reading text.
+● UI/Labels: "JetBrains Mono", monospace - For tiny tags, dates, and technical specs.
+Type Scale (Mobile Optimized):
+Note: Sizes are calibrated to feel "massive" on a small screen without breaking layout.
+xs:   0.75rem  (12px) - Metadata / Breadcrumbs
+sm:   0.875rem (14px) - UI Labels / Captions
+base: 1rem     (16px) - Body text (Legibility minimum)
+lg:   1.125rem (18px) - Lead text / Button text
+xl:   1.5rem   (24px) - Section headers
+2xl:  2rem     (32px) - Standard Headlines
+3xl:  2.5rem   (40px) - Hero Sub-text
+4xl:  3rem     (48px) - Major Headlines
+5xl:  4rem     (64px) - "Cover" text (Often wraps)
+6xl:  5rem     (80px) - Numerical statements
+
+Tracking & Leading:
+● Headlines: tracking-tighter (-0.05em) and leading-[0.9]. Text should feel tightly packed.
+● Body: leading-relaxed for readability.
+● Button Text: tracking-widest uppercase.
+Border Radius
+ALL VALUES: 0px
+
+Constraint: Even the bottom sheet (modal) must be square. Even the active state of a tapped element is a sharp rectangle.
+Borders & Lines (The Grid)
+hairline:  1px solid #E5E5E5  (List separators)
+thin:      1px solid #000000  (Standard element borders)
+thick:     2px solid #000000  (Emphasis / Input bottom)
+heavy:     4px solid #000000  (Section dividers)
+
+Usage:
+● Full-Bleed Lines: Borders should often touch the edges of the screen (-mx-4 or -mx-6).
+● Separators: Use border-b black heavily to separate stacked vertical content.
+Shadows
+NONE
+
+Depth is strictly 2D. Layers are defined by opacity (100% vs 0%) or borders, never by shadows.
+Textures & Patterns
+Use subtle noise to simulate high-quality paper texture on mobile backgrounds to avoid a "sterile" feeling.
+Mobile Noise (CSS):
+CSS
+
+background-image: url("data:image/svg+xml,..."); /* Same noise SVG as web */
+opacity: 0.03; /* Slightly higher opacity for small screens */
+
+
+Component Stylings
+Buttons & Touch Targets
+Primary Button (The Block):
+- Width: w-full (Full width strongly preferred)
+- Height: h-14 (56px - Large touch target)
+- Background: #000000
+- Text: #FFFFFF
+- Radius: 0px
+- Typography: Uppercase, Mono or Serif, Tracking-widest
+- Active State: Instantly inverts to White bg, Black text
+
+Secondary Button (The Outline):
+- Width: w-full
+- Height: h-14
+- Background: Transparent
+- Border: 1px solid #000000
+- Active State: Instantly fills Black
+
+Sticky Bottom Action (CTA):
+● A fixed bar at the bottom of the viewport.
+● border-t-2 border-black.
+● Contains a single primary action or a price + action pair.
+● Background: #FFFFFF (or inverted #000000).
+Cards / List Items
+The "Stacked" Card:
+Instead of a box with padding, mobile cards are often full-width segments separated by borders.
+- Container: Border-bottom 1px solid #000000
+- Padding: py-6
+- Image: Aspect ratio 4:5 or 1:1, full width or padded
+- Content: Text sits directly below image
+- Interaction: Touching anywhere in the segment triggers "Active" state
+
+Navigation
+The "Bar":
+● Top: Minimal. Just a logo (Left) and a "MENU" text button or Hamburger (Right).
+● Bottom: Optional. If used, simple text labels or thin outline icons. border-t-2 border-black.
+The Menu Overlay:
+● Full screen.
+● Background: #000000 (Black).
+● Text: #FFFFFF (White).
+● List items: Massive text (text-4xl), serif, centered or left-aligned.
+● Divider: Thin white lines between menu items.
+Inputs
+Mobile Input:
+- Style: Flush with background.
+- Border: Bottom only (2px solid black).
+- Radius: 0px.
+- Height: h-14.
+- Focus: Border becomes 4px thick. No native blue glow.
+- Clear Button: Simple 'X' icon in black.
+
+
+Layout Strategy
+Safe Areas
+● Respect pb-safe (Home Indicator) and pt-safe (Status Bar).
+● Style Note: The Status Bar should be white text on black header, or black text on white header. High contrast.
+Container & Spacing
+● Horizontal Padding: px-5 (20px) or px-6 (24px).
+● Vertical Rhythm:
+    ○ Small gaps: py-4
+    ○ Section gaps: py-16
+    ○ Between text and image: my-6
+The "Scroll"
+● Design for the scroll. Use sticky headers for section titles (e.g., "Details", "Shipping") that stack as the user scrolls down, creating a filing cabinet effect.
+● Use divide-y divide-black for lists to create strong separation.
+
+Effects & Animation
+Motion Philosophy: Cut, Don't Fade.
+Mobile transitions should feel mechanical and instant, like a shutter clicking.
+Interactions:
+● Tap: active:bg-black active:text-white (Instant inversion).
+● Page Transition: Slide in from right (100% width) with a hard edge. No distinct shadow on the sliding page, just a clean line.
+● Modal: Slides up from bottom. 0px radius. Covers 100% or 90% of screen. Black border top.
+● Scroll Parallax: None. Keep scrolling tied 1:1 to finger movement.
+Specific Implementation:
+TypeScript
+
+// Mobile Button Active State
+className="bg-black text-white active:bg-white active:text-black active:border active:border-black transition-none"
+
+// Image Loading
+className="opacity-0 data-[loaded=true]:opacity-100 transition-opacity duration-300 ease-linear grayscale data-[loaded=true]:grayscale-0"
+
+
+Iconography
+Style: Stroke-based, Thin, Sharp.
+Library: Lucide React (or similar).
+Mobile Specifics:
+● Size: w-6 h-6 (Standard)
+● Stroke: 1.5px (Matches the fine aesthetic)
+● Touch: If an icon is a button, it must have a p-3 (12px) padding hit-box around it, even if the border is invisible.
+
+Responsive Strategy (Device Sizes)
+Small Phones (iPhone SE/Mini):
+● Headlines: Scale down to text-4xl to prevent breaking single words into nonsense.
+● Padding: Reduce to px-4.
+Large Phones (Max/Plus):
+● Headlines: text-5xl or text-6xl.
+● Layout: Can introduce a 2-column grid for product thumbnails (but keep strict borders between them).
+Dark Mode:
+● System: Enforce Light Mode (Black on White) as the default brand identity.
+● Inverted Sections: Use Dark Mode (White on Black) only for specific sections (Footer, Hero, Special Features) to create rhythm, not based on system settings.
+
+Bold Choices (Non-Negotiable)
+1. Massive Typographic Hero: The opening screen must feature a headline where a single word might span the full width.
+2. The "Hard" Line: A 4px black line (border-b-4) must separate the Hero from the content.
+3. Sticky Section Headers: As you scroll, the section title (e.g., "01. INFO") sticks to the top with a bottom border, stacking on top of the previous one.
+4. No Hamburger Icon: Use the word "MENU" in JetBrains Mono instead of an icon, if space permits.
+5. Inverted Gallery: Image galleries have a Black background with images at full opacity.
+6. Editorial Inputs: Form labels look like subheadings (Playfair Display, Italic).
+7. No Skeletons: Loading states are simple spinning black lines or just whitespace. No gray pulsing blobs.
+8. Mechanical Feedback: Every interactive element MUST have a visible active state (color inversion).
+
+What Success Looks Like (Mobile)
+A successfully implemented Minimalist Monochrome mobile design should feel like:
+● A digitally printed receipt from a high-end boutique.
+● A pocket edition of a brutally honest manifesto.
+● Clean, fast, and remarkably legible outdoors.
+● Intimidatingly simple.
+It should NOT feel like:
+● A scaled-down version of a desktop site.
+● A standard Bootstrap/Tailwind mobile layout.
+● An app trying to be "friendly.

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

@@ -0,0 +1,65 @@
+Neo Brutalism
+一种原始的、高对比度的美学，模仿印刷设计和DIY朋克文化。其特点是奶油色背景、厚厚的黑色边框（4px）、零模糊的硬偏移阴影、冲突的鲜艳颜色（热红色、鲜艳的黄色、柔和的紫色）和厚重的Space Grotesk排版。拥抱不对称、旋转、贴纸般的分层和有组织的视觉混乱。
+1. 创意工具与协作平台
+2. 针对 Z 世代（Gen Z）的市场营销与电商
+3. 内容展示与个人作品集
+
+Design Philosophy: Mobile Neo-Brutalism (React Native)
+Neo-brutalism in a mobile context is a high-energy rebellion against the "Glassmorphism" and "Minimalist" trends of iOS and Android. It translates the raw, "sticker-on-a-laptop" aesthetic into a tactile, thumb-friendly interface. While standard mobile design hides structure, Mobile Neo-brutalism enforces it. It treats the mobile screen as a physical collage board where elements don't just "float"—they occupy heavy, bordered space.
+Core DNA & Fundamental Principles:
+● Unapologetic Visibility: Reject subtle elevation. If a component exists, it must have a thick black border(borderWidth: 4). No soft shadows; use solid offset blocks for depth.
+● Tactile Feedback (The "Mechanical" Tap): Interactions shouldn't feel like "touching glass." Buttons must feel like physical switches. On press, they physically shift (translateX and translateY) to "cover" their shadow, creating a mechanical click-down sensation.
+● Sticker Layering: Treat screens as a series of layered paper cutouts. Use slight rotations (transform: [{ rotate: '-2deg' }]) on cards, badges, and text blocks to break the rigid mobile grid.
+● High-Voltage Palette: Use a "Pop Art" color scheme. A warm Cream background (#FFFDF5) paired with high-saturation Hot Red, Vivid Yellow, and Pure Black.
+● Anti-Smooth Motion: Avoid slow, easing transitions. Use snappy, spring-based animations or immediate state changes. Movement should feel like an arcade game, not a luxury car dashboard.
+Design Token System (React Native)
+1. Colors (The "High-Saturation" Palette)
+● Background: #FFFDF5 (Cream) - The default canvas.
+● Ink/Stroke: #000000 (Pure Black) - Used for ALL text, borders, and shadows.
+● Accent (Primary): #FF6B6B (Hot Red) - Primary actions.
+● Secondary: #FFD93D (Vivid Yellow) - Secondary highlights/badges.
+● Muted: #C4B5FD (Soft Violet) - Tertiary/Card headers.
+● White: #FFFFFF - High contrast on dark backgrounds.
+2. Typography (Bold & Heavy)
+● Font Family: Space Grotesk (or System Bold if unavailable).
+● Weights: Only 700 (Bold) and 900 (Black/Heavy). Avoid "Regular" or "Light."
+● Sizing:
+    ○ Display: 48px - 64px (Headlines)
+    ○ Heading: 24px - 32px
+    ○ Body: 18px - 20px (Readable but heavy)
+    ○ Label: 14px (All caps, tracking: 2).
+3. Borders & Shadows (The Signature)
+● Border Width: Default 4px. Secondary 2px.
+● Border Radius: 0 (Sharp) is default. 999 (Pill) only for badges/special buttons.
+● Hard Shadows: Non-blurry, solid black offsets.
+    ○ Small: offset: { width: 4, height: 4 }
+    ○ Medium: offset: { width: 8, height: 8 }
+Component Styling Principles
+Buttons
+● Structure: height: 56, borderWidth: 4, borderColor: '#000', borderRadius: 0.
+● Shadow: Apply a solid black View behind the button offset by 4px.
+● Interaction: Use Pressable. When pressed, use transform: [{ translateX: 4 }, { translateY: 4 }] to hide the shadow and simulate a physical press.
+● Text: fontFamily: 'SpaceGrotesk-Bold', textTransform: 'uppercase'.
+Cards & Containers
+● Style: backgroundColor: '#FFF', borderWidth: 4, borderColor: '#000'.
+● Rotation: Add transform: [{ rotate: '-1deg' }] to one card and rotate: '2deg' to the next to create a "scattered sticker" look.
+● Padding: Aggressive padding (p: 20) to prevent text from touching the thick borders.
+Inputs
+● Style: height: 64, borderWidth: 4, borderColor: '#000', backgroundColor: '#FFF'.
+● Focus State: Change backgroundColor to Yellow (#FFD93D) when focused. No soft "glow" or blue rings.
+Badges
+● Style: Circular or rectangular with borderWidth: 2.
+● Positioning: Use position: 'absolute' to "slap" them onto the corners of cards or images, often rotated.
+Layout & Architecture
+1. The "Staggered" Grid: Avoid perfectly aligned columns. Use marginTop or marginLeft offsets to make elements feel hand-placed.
+2. Marquees: Use auto-scrolling horizontal text lists for "Breaking News" or "Featured" sections to add motion without complexity.
+3. Iconography: Use thick-stroke icons (e.g., Lucide-ReactNative with strokeWidth={3}). Always wrap icons in a bordered square or circle.
+4. Visual Noise: Use small repeating SVG patterns (dots/grids) in the background of headers or specific sections to add texture.
+Anti-Patterns (Avoid at all costs)
+● No Linear Gradients: Use solid color blocks only.
+● No Shadow Radius: Blur radius must always be 0.
+● No Subtle Grays: Use #000 or the palette colors.
+● No Soft Easing: Animations should be Spring or Linear.
+● No "Standard" Border Radius: Avoid borderRadius: 8 or 12. It’s either 0 or 999.
+System Prompt for AI Code Generation
+System Role: You are an expert React Native developer specializing in Neo-Brutalist Mobile UI.Core Instruction: Generate code that strictly adheres to the Neo-Brutalist aesthetic.Styling Rules:Goal: Create a high-contrast, loud, and tactile mobile interface that feels mechanical and rebellious.

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

@@ -0,0 +1,75 @@
+Neumorphism
+通过单色背景上的双阴影拉伸和插入元素。柔软、触感好、物理接地，可接近性极佳。
+1. 极简主义硬件控制与智能家居
+2. 追求审美感的工具类 App
+3. 金融与健康监测看板（非密集型）
+4. 品牌营销与展示型页面
+
+Design Philosophy (React Native / Mobile)
+Core Principles: Neumorphism on mobile creates a tactile, physical interface through dual shadows. On React Native, this is achieved by layering View components or using specialized libraries to simulate the light source (top-left) and dark shadow (bottom-right). Every component is "molded" from the base material (#E0E5EC). Buttons are never flat; they are either "pillowed" (convex) or "wells" (concave/inset).
+Vibe: Premium, ceramic-like feel. It prioritizes the "thump" of a physical button press. It is a calm, monochromatic experience that uses depth rather than color to establish hierarchy.
+Unique Visual Signatures (Mobile Specific):
+● Dual-Shadow Layering: Since React Native's shadowColor only supports one direction, use nested Viewcomponents or react-native-shadow-2 to achieve the dual-light effect.
+● Haptic Feedback: Every neumorphic interaction (Press/Release) must be accompanied by light haptic feedback (ImpactFeedbackStyle.Light).
+● Physical Press: Active states should use transform: [{ scale: 0.97 }] to simulate material compression.
+● Full-Screen Surface: The entire app uses a single background color (#E0E5EC) to maintain the "continuous material" illusion.
+
+Design Token System (The DNA)
+Colors (Light Mode - Cool Monochromatic)
+● Background: #E0E5EC (The "Clay" base).
+● Text Primary: #3D4852 (7.5:1 contrast).
+● Text Muted: #6B7280 (4.6:1 contrast).
+● Accent: #6C63FF (Used for active toggles or primary CTAs).
+● Shadow Light: rgba(255, 255, 255, 0.6) (Top-Left).
+● Shadow Dark: rgba(163, 177, 198, 0.7) (Bottom-Right).
+Typography
+● Font Family: Use System (San Francisco/Roboto) or PlusJakartaSans-Bold.
+● Sizing: * Heading: 24pt-32pt, Bold.
+    ○ Body: 16pt, Medium.
+    ○ Caption: 12pt, Regular.
+● Letter Spacing: -0.5 for headings to enhance the modern look.
+Radius (React Native borderRadius)
+● Large Container: 32
+● Standard Button/Input: 16
+● Pill/Search Bar: 999
+
+Shadows & Effects (The Physics)
+Note: React Native requires specific shadow properties for iOS and elevation for Android. For high-fidelity Neumorphism, use a wrapping implementation.
+Extruded (Convex - Resting)
+● Outer Shadow (Dark): shadowOffset: { width: 6, height: 6 }, shadowOpacity: 1, shadowRadius: 10, shadowColor: 'rgba(163, 177, 198, 0.7)'
+● Inner Shadow (Light): shadowOffset: { width: -6, height: -6 }, shadowOpacity: 1, shadowRadius: 10, shadowColor: 'rgba(255, 255, 255, 0.6)'
+Inset (Concave - Pressed/Input)
+● Concept: Use a slightly darker background color (#D1D9E6) or internal gradients/shadows to simulate a "carved out" look.
+● Visual: backgroundColor: '#E0E5EC', plus internal borders of 1px with a darker shade at the top.
+
+Component Styling (React Native)
+Buttons
+● Base: height: 56, borderRadius: 16, justifyContent: 'center', alignItems: 'center'.
+● Default State: Extruded dual shadow.
+● Active State (Pressable): Remove outer shadows, apply scale: 0.98, and change background slightly to indicate an "inset" state.
+● Haptics: Trigger Haptics.impactAsync on onPressIn.
+Cards
+● Base: padding: 24, borderRadius: 32, backgroundColor: '#E0E5EC'.
+● Hierarchy: Use "Nested Depth." A card (Extruded) contains an Icon Container (Inset Deep).
+Inputs
+● Style: height: 50, borderRadius: 16, paddingHorizontal: 16.
+● Depth: Must be Inset (Concave) to look like a physical slot.
+● Focus: Border color changes to #6C63FF with a thin 1.5px width.
+
+Animation & Micro-interactions
+● Framework: Use React Native Reanimated or LayoutAnimation.
+● Transitions: Duration: 250ms, Easing: Bezier(0.4, 0, 0.2, 1).
+● Interaction: * Scale: Buttons shrink by 2-3% when pressed.
+    ○ Shadow Transition: Smoothly interpolate shadow opacity from 1 to 0.4 when an element is "pressed" into the surface.
+
+Layout & Accessibility
+● Safe Area: Always wrap in SafeAreaView.
+● Touch Targets: Minimum 48x48 for all interactive elements.
+● Spacing: Use a 8pt grid system (8, 16, 24, 32, 48).
+● Contrast: Ensure text color maintains WCAG AA compliance against the #E0E5EC background.
+
+Anti-Patterns (Do Not Do)
+● No Black Shadows: Never use rgba(0,0,0,x). Shadows must be blue-grey to match the "Cool Grey" material.
+● No Pure White Backgrounds: The screen background MUST be #E0E5EC.
+● No Sharp Edges: Avoid borderRadius < 12.
+● No Flat Borders: Do not use borderWidth: 1 as a substitute for depth unless in a focus state.

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.