@event4u/agent-config 5.10.1 → 6.1.0

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

@@ -0,0 +1,133 @@
+Material Design
+有趣、动态的颜色提取、药丸形状的按钮和不同的仰角状态。基于谷歌的Material Design 3，具有增强的深度和微观交互。
+1. 安卓（Android）生态系统应用
+2. 跨平台工具与生产力软件
+3. 数据密集型 B 端后台 (Material UI)
+
+System Prompt: Material You (MD3) for React Native
+Design Philosophy
+Core Principles: Personal, adaptive, and spirited. This framework translates Material Design 3’s organic system into a mobile-first experience. It prioritizes tonal surfaces over stark whites, utilizes organic shapes with soft curves, and leverages mobile-specific haptics and gestures.
+Vibe: Friendly, soft, rounded, and tactile. The UI feels alive—responding to touch with fluid motion and "state layers." Surfaces are depth-aware, using tonal tinting rather than heavy shadows to define hierarchy.
+Mobile-Specific Implementation Details:
+● Touch-First Feedback: Every interactive element utilizes Pressable with a state layer and subtle scaletransformations.
+● Haptic Integration: Success, warning, and heavy interactions (like FAB presses) trigger HapticFeedback for a physical feel.
+● Atmospheric Depth: Since CSS backdrop-blur is heavy on mobile, we use layered View components with LinearGradient and absolute-positioned blurred shapes to simulate depth.
+● Safe Area Awareness: Full compliance with react-native-safe-area-context to ensure organic shapes flow behind status bars and home indicators.
+● Fluid Motion: Powered by Reanimated using the signature Material "Emphasized" easing.
+
+Design Token System (The DNA)
+Colors (Light Mode)
+Seed Color: Purple/Violet (#6750A4)
+Token
+Hex Value
+Mobile Usage
+Background (Surface)
+#FFFBFE
+Screen-level containers (warm off-white)
+Foreground (On Surface)
+#1C1B1F
+Primary text and icons
+Primary
+#6750A4
+Main CTAs, active tab icons, focus states
+On Primary
+#FFFFFF
+Text/Icons on top of Primary
+Secondary Container
+#E8DEF8
+Chips, inactive toggle tracks, subtle buttons
+On Secondary Container
+#1D192B
+Text on secondary surfaces
+Tertiary
+#7D5260
+FABs, badges, accent highlights
+Surface Container
+#F3EDF7
+Card backgrounds, Bottom Sheets
+Surface Container Low
+#E7E0EC
+Text inputs, search bars
+Outline
+#79747E
+Unfocused borders, dividers
+State Layer Rules (Opacity Overlays):
+● Pressed State (Solid): Overlay black at 10% or white at 15% depending on background brightness.
+● Pressed State (Ghost): Primary color at 12% opacity.
+● Disabled: 38% opacity on both container and content.
+Typography
+Font Family: Roboto (System default on Android; load via Google Fonts for iOS parity).
+Scale
+Size
+Weight
+Line Height
+Display Large
+56px
+400
+64px
+Headline Large
+32px
+500
+40px
+Title Large
+22px
+500
+28px
+Body Large
+16px
+400
+24px
+Label Medium
+12px
+500
+16px
+● Letter Spacing: Buttons and Labels use 0.1px tracking for readability at small sizes.
+Radius & Borders
+● Extra Small (8px): Chips, small tooltips.
+● Small (12px): Tooltips, mini-cards.
+● Medium (16px): Standard Cards, Selection Dialogs.
+● Large (28px): Main Screen Cards, Bottom Sheets.
+● Full (Pills): All Buttons, Search Bars, FABs.
+● Inputs: borderTopLeftRadius: 12, borderTopRightRadius: 12, borderBottomLeftRadius: 0, borderBottomRightRadius: 0.
+
+Shadows & Effects
+Mobile elevation is primarily achieved through Tonal Elevation (overlaying a color) rather than just shadows.
+● Shadow Style: Use shadowColor with 0 offset and high blur for iOS; use elevation for Android.
+● Elevation Levels:
+    ○ Level 0: No shadow, flat surface.
+    ○ Level 1 (Cards): Subtle depth for list items.
+    ○ Level 2 (Active Cards): Enhanced depth for dragged or pressed items.
+    ○ Level 3 (FABs): Distinct floating effect.
+● Blur Shapes: Use absolute positioned View components with Canvas (via react-native-skia) or pre-rendered blurred SVG assets to create atmospheric background "blobs."
+
+Component Styling Principles
+Buttons
+● Shape: Always Pill-Shaped (borderRadius: 999).
+● Feedback: Must use Pressable with an Animated.View inside to handle scale: 0.95 on press.
+● FAB: 56x56dp, Tertiary color, borderRadius: 16 (rounded square) or 28 (circular).
+Inputs (M3 Filled Style)
+● Visuals: Background #E7E0EC, flat bottom with 2px indicator.
+● Animation: Label floats upward on focus using Reanimated. Bottom border expands from center.
+Cards
+● Radius: 24px-28px.
+● Separation: Use Surface Container color against the Surface background. Avoid harsh borders.
+
+Animation & Motion
+All animations must use the Material Emphasized Easing:
+Easing.bezier(0.2, 0, 0, 1)
+● Duration:
+    ○ Small (Switches/Checkboxes): 100ms.
+    ○ Medium (Buttons/Cards): 250ms.
+    ○ Large (Modals/Screen Transitions): 400ms.
+
+The "Mobile Bold Factor"
+1. Haptic Choreography: Light haptics on toggle, medium on long-press.
+2. Organic Overlays: Backgrounds must feature at least two blurred organic shapes (Primary/Tertiary) at 15% opacity to break the "app-grid" feel.
+3. Tonal Navigation: Bottom navigation bar should use a Secondary Container pill for the active icon state.
+4. Edge-to-Edge: UI elements should bleed into the safe areas where appropriate (e.g., hero images) to feel modern.
+
+Anti-Patterns (Avoid)
+● ❌ No Square Buttons: Everything interactive is pill-shaped or heavily rounded.
+● ❌ No Pure White: Use #FFFBFE for screens.
+● ❌ No Default Opacity Cuts: Use the Tonal Palette tokens for states, not just opacity: 0.5.
+● ❌ No Harsh Shadows: If it looks like a "drop shadow," it's too heavy. It should look like an "ambient glow.

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.