104 KiB
104 KiB
| 1 | # NOTE: 此文件仅作为设计备份/参考文档，当前搜索引擎与 CLI 不会读取或执行本文件内容。 |
|---|---|
| 2 | Bauhaus（包豪斯） |
| 3 | 大胆的几何现代主义，包含圆形、方形和三角形。主色调（红/蓝/黄），边缘鲜明，阴影强烈。功能性与艺术性兼备，带有建构主义的不对称。 |
| 4 | 1. 极简主义品牌官网与电商 |
| 5 | 2. 工具类与高效率 App |
| 6 | 3. 数字媒体与在线杂志 |
| 7 | <design-system> |
| 8 | Design Style: Bauhaus (Mobile) |
| 9 | 1. Design Philosophy |
| 10 | Key Characteristics: |
| 11 | ● Geometric Purity: UI elements are strictly circles (buttons/avatars) or squares (cards/inputs). |
| 12 | ● Color Blocking: distinct screen sections use solid primary colors to separate content without whitespace. |
| 13 | ● Thick Borders: 2px and 3px black borders ensure legibility and distinct separation on small screens. |
| 14 | 2. Design Token System (The DNA) |
| 15 | Colors (Single Palette - Light Mode) |
| 16 | ● background: #F0F0F0 (Off-white canvas) |
| 17 | ● foreground: #121212 (Stark Black) |
| 18 | ● primary-red: #D02020 (Bauhaus Red) |
| 19 | ● primary-blue: #1040C0 (Bauhaus Blue) |
| 20 | ● primary-yellow: #F0C020 (Bauhaus Yellow) |
| 21 | ● muted: #E0E0E0 |
| 22 | Typography |
| 23 | ● Font Family: 'Outfit' (geometric sans-serif). |
| 24 | ● Font Import: Outfit:wght@400;500;700;900 |
| 25 | ● Scaling: Aggressive scaling adapted for vertical viewports. |
| 26 | ○ Display: text-4xl → text-5xl (Massive headers taking up 30-40% of screen width) |
| 27 | ○ Subheadings: text-xl → text-2xl |
| 28 | ○ Body: text-base (16px minimum for legibility) |
| 29 | ○ Button Text: text-lg (Large for readability) |
| 30 | ● Weights: |
| 31 | ○ Body: font-medium (500) |
| 32 | ● Line Height: Tight (leading-none) for headlines to save vertical space; leading-relaxed for body text. |
| 33 | Radius & Border |
| 34 | ● Border Widths: |
| 35 | ○ Standard Elements: border-2 (2px) |
| 36 | ○ Major Containers/Bottom Nav: border-t-2 or border-3 |
| 37 | ○ Separators: divide-y-2 |
| 38 | ● Border Color: Always #121212 (black). |
| 39 | Shadows/Effects |
| 40 | ● Hard Offset Shadows (Tactile feedback): |
| 41 | ○ Small elements (Tags/Icons): shadow-[2px_2px_0px_0px_black] |
| 42 | ○ Buttons/Cards: shadow-[4px_4px_0px_0px_black] (Reduced from web 8px to save screen width) |
| 43 | ○ Floating Action Button (FAB): shadow-[5px_5px_0px_0px_black] |
| 44 | ● Touch Feedback: active:translate-x-[2px] active:translate-y-[2px] active:shadow-none (Instant mechanical depression). |
| 45 | ● Patterns: |
| 46 | ○ Screen transitions: Slide-over with hard black borders. |
| 47 | 3. Component Stylings |
| 48 | Buttons (Touch Targets) |
| 49 | ● Minimum Size: Height h-12 or h-14 (48px-56px) for thumb accessibility. |
| 50 | ● Variants: |
| 51 | ○ Primary (CTA): w-full bg-[#D02020] text-white border-2 border-black shadow-[4px_4px_0px_0px_black] |
| 52 | ○ Secondary: w-full bg-[#1040C0] text-white border-2 border-black shadow-[4px_4px_0px_0px_black] |
| 53 | ○ Floating Action (FAB): h-14 w-14 rounded-full bg-[#F0C020] border-2 border-black shadow-[4px_4px_0px_0px_black] flex items-center justify-center |
| 54 | ● Shapes: Full-width rectangular buttons (rounded-none) or pill-shaped (rounded-full) for bottom-sticky actions. |
| 55 | ● States: NO hover. Focus on active state (press down effect). |
| 56 | Cards (Mobile Stack) |
| 57 | ● Decoration: |
| 58 | ○ Geometric badge in top-right: absolute top-0 right-0 h-8 w-8 bg-[#F0C020] border-l-2 border-b-2 border-black flex items-center justify-center. |
| 59 | ● Interaction: Entire card is a touch target. active:translate-x-[1px] active:translate-y-[1px] active:shadow-[2px_2px_0px_0px_black]. |
| 60 | Bottom Navigation (The Anchor) |
| 61 | ● Container: fixed bottom-0 w-full bg-white border-t-2 border-black z-50 h-20. |
| 62 | ● Grid: 3 to 5 items equally spaced. |
| 63 | ● Items: |
| 64 | Inputs & Forms |
| 65 | ● Field: h-12 bg-white border-2 border-black rounded-none px-4 text-black placeholder:text-gray-400 focus:bg-[#FFF9C4] focus:ring-0 focus:border-black. |
| 66 | ● Checkbox: h-6 w-6 appearance-none border-2 border-black bg-white checked:bg-[#1040C0] rounded-none. |
| 67 | 4. Layout & Spacing |
| 68 | ● Container: w-full with px-5 (20px) padding. Max-width constraints removed (fluid mobile). |
| 69 | ● Section Padding: |
| 70 | ○ Standard: py-8 |
| 71 | ○ Hero: pt-12 pb-16 |
| 72 | ● Grid Systems: |
| 73 | ○ Main Layout: Single column (Stack). |
| 74 | ○ Micro-grids: 2-column for stats/gallery (gap-3 or gap-4). |
| 75 | ● Safe Areas: Respect pt-safe (top notch) and pb-safe (bottom home indicator). |
| 76 | ● Dividers: Thick section separators border-b-2 border-black usually paired with a background color change. |
| 77 | 5. Non-Genericness (Bold Choices) |
| 78 | Mobile Constraints require distinct personality to avoid looking like a wireframe: |
| 79 | ● Full-Screen Color Washes: |
| 80 | ○ Onboarding screens: Full solid backgrounds (Red Screen → Blue Screen → Yellow Screen). |
| 81 | ○ Success states: Full Yellow background (bg-[#F0C020]) with massive black centered checkmark. |
| 82 | ○ Error states: Full Red background (bg-[#D02020]) with white text. |
| 83 | ● Header Identity: |
| 84 | ● Geometric Lists: |
| 85 | ● Image Filters: |
| 86 | ○ Thumbnails: Grayscale + High Contrast. |
| 87 | 6. Icons & Imagery |
| 88 | ● Icon Style: |
| 89 | ○ Stroke: stroke-[2px]. |
| 90 | ○ Size: w-6 h-6 (standard) or w-8 h-8 (hero actions). |
| 91 | ● Icon Containers: |
| 92 | ○ Navigation icons often live inside rigid 48x48px bordered squares. |
| 93 | ○ Back buttons are always circular rounded-full with a border. |
| 94 | ● Imagery: |
| 95 | 7. Responsive Strategy (Device Sizes) |
| 96 | ● Small Phones (SE/Mini): |
| 97 | ○ Reduce display text to text-3xl. |
| 98 | ○ Stack stats vertically (1-col). |
| 99 | ○ Reduce padding to px-4. |
| 100 | ● Large Phones (Max/Plus): |
| 101 | ○ Display text scales to text-5xl. |
| 102 | ○ Stats can use 2-col grid. |
| 103 | ○ Card images gain more height. |
| 104 | ● Orientation: |
| 105 | ○ Portrait (Primary): Vertical stacking. |
| 106 | 8. Animation & Micro-Interactions |
| 107 | ● Duration: duration-150 (Very fast). |
| 108 | ● Easing: ease-in-out (Sharp stops). |
| 109 | ● Interactions: |
| 110 | ○ Tap: The element physically depresses (translate X/Y matches shadow size). |
| 111 | ○ Drawer Open: Slides in from Left/Right with a solid black border line leading it. No soft fades—it slides like a mechanical door. |
| 112 | ○ Scroll: Sticky headers snap into place instantly. |
| 113 | </design-system> |
| 114 | 1. 极简主义电商与高端奢侈品 2. 专业创意与文档编辑工具 3. 数据密集型仪表盘（局部应用） 4. 实验性与先锋感网站 |
| 115 | <design-system> |
| 116 | Design Style: Minimalist Monochrome (Mobile) |
| 117 | Design Philosophy |
| 118 | Core Principle |
| 119 | Visual Vibe |
| 120 | This is the visual language of: |
| 121 | ● Mobile typographers and digital brutalism |
| 122 | ● Digital exhibitions where the content frames itself |
| 123 | ● High-contrast e-reader aesthetics |
| 124 | What This Design Is NOT |
| 125 | ● ❌ Cluttered (one idea per screen view) |
| 126 | ● ❌ Colorful (strictly grayscale) |
| 127 | The DNA of Minimalist Monochrome (Mobile) |
| 128 | 1. Vertical Linearity |
| 129 | 2. Typography as Interface |
| 130 | Design Token System |
| 131 | Colors (Strictly Monochrome) |
| 132 | background: #FFFFFF (Pure white) |
| 133 | foreground: #000000 (Pure black) |
| 134 | mutedForeground: #525252 (Dark gray for metadata) |
| 135 | border: #000000 (Black borders - heavy usage) |
| 136 | borderLight: #E5E5E5 (Subtle dividers) |
| 137 | overlay: #000000 (Full screen menu background) |
| 138 | Typography |
| 139 | Font Stack: |
| 140 | Type Scale (Mobile Optimized): |
| 141 | xs: 0.75rem (12px) - Metadata / Breadcrumbs |
| 142 | sm: 0.875rem (14px) - UI Labels / Captions |
| 143 | base: 1rem (16px) - Body text (Legibility minimum) |
| 144 | lg: 1.125rem (18px) - Lead text / Button text |
| 145 | xl: 1.5rem (24px) - Section headers |
| 146 | 2xl: 2rem (32px) - Standard Headlines |
| 147 | 3xl: 2.5rem (40px) - Hero Sub-text |
| 148 | 4xl: 3rem (48px) - Major Headlines |
| 149 | 6xl: 5rem (80px) - Numerical statements |
| 150 | Tracking & Leading: |
| 151 | ● Headlines: tracking-tighter (-0.05em) and leading-[0.9]. Text should feel tightly packed. |
| 152 | ● Body: leading-relaxed for readability. |
| 153 | ● Button Text: tracking-widest uppercase. |
| 154 | Border Radius |
| 155 | ALL VALUES: 0px |
| 156 | Constraint: Even the bottom sheet (modal) must be square. Even the active state of a tapped element is a sharp rectangle. |
| 157 | Borders & Lines (The Grid) |
| 158 | hairline: 1px solid #E5E5E5 (List separators) |
| 159 | thin: 1px solid #000000 (Standard element borders) |
| 160 | thick: 2px solid #000000 (Emphasis / Input bottom) |
| 161 | heavy: 4px solid #000000 (Section dividers) |
| 162 | Usage: |
| 163 | ● Full-Bleed Lines: Borders should often touch the edges of the screen (-mx-4 or -mx-6). |
| 164 | ● Separators: Use border-b black heavily to separate stacked vertical content. |
| 165 | Shadows |
| 166 | NONE |
| 167 | Textures & Patterns |
| 168 | Mobile Noise (CSS): |
| 169 | CSS |
| 170 | opacity: 0.03; /* Slightly higher opacity for small screens */ |
| 171 | Component Stylings |
| 172 | Buttons & Touch Targets |
| 173 | Primary Button (The Block): |
| 174 | - Width: w-full (Full width strongly preferred) |
| 175 | - Height: h-14 (56px - Large touch target) |
| 176 | - Background: #000000 |
| 177 | - Text: #FFFFFF |
| 178 | - Radius: 0px |
| 179 | Secondary Button (The Outline): |
| 180 | - Width: w-full |
| 181 | - Height: h-14 |
| 182 | - Background: Transparent |
| 183 | - Border: 1px solid #000000 |
| 184 | - Active State: Instantly fills Black |
| 185 | Sticky Bottom Action (CTA): |
| 186 | ● A fixed bar at the bottom of the viewport. |
| 187 | ● border-t-2 border-black. |
| 188 | ● Contains a single primary action or a price + action pair. |
| 189 | ● Background: #FFFFFF (or inverted #000000). |
| 190 | Cards / List Items |
| 191 | - Container: Border-bottom 1px solid #000000 |
| 192 | - Padding: py-6 |
| 193 | - Content: Text sits directly below image |
| 194 | Navigation |
| 195 | The Menu Overlay: |
| 196 | ● Full screen. |
| 197 | ● Background: #000000 (Black). |
| 198 | ● Text: #FFFFFF (White). |
| 199 | ● Divider: Thin white lines between menu items. |
| 200 | Inputs |
| 201 | Mobile Input: |
| 202 | - Style: Flush with background. |
| 203 | - Border: Bottom only (2px solid black). |
| 204 | - Radius: 0px. |
| 205 | - Height: h-14. |
| 206 | - Focus: Border becomes 4px thick. No native blue glow. |
| 207 | - Clear Button: Simple 'X' icon in black. |
| 208 | Layout Strategy |
| 209 | Safe Areas |
| 210 | ● Respect pb-safe (Home Indicator) and pt-safe (Status Bar). |
| 211 | Container & Spacing |
| 212 | ● Horizontal Padding: px-5 (20px) or px-6 (24px). |
| 213 | ● Vertical Rhythm: |
| 214 | ○ Small gaps: py-4 |
| 215 | ○ Section gaps: py-16 |
| 216 | ○ Between text and image: my-6 |
| 217 | ● Use divide-y divide-black for lists to create strong separation. |
| 218 | Effects & Animation |
| 219 | Interactions: |
| 220 | ● Tap: active:bg-black active:text-white (Instant inversion). |
| 221 | ● Modal: Slides up from bottom. 0px radius. Covers 100% or 90% of screen. Black border top. |
| 222 | ● Scroll Parallax: None. Keep scrolling tied 1:1 to finger movement. |
| 223 | Specific Implementation: |
| 224 | TypeScript |
| 225 | // Mobile Button Active State |
| 226 | // Image Loading |
| 227 | Iconography |
| 228 | Library: Lucide React (or similar). |
| 229 | Mobile Specifics: |
| 230 | ● Size: w-6 h-6 (Standard) |
| 231 | ● Stroke: 1.5px (Matches the fine aesthetic) |
| 232 | Responsive Strategy (Device Sizes) |
| 233 | Small Phones (iPhone SE/Mini): |
| 234 | ● Headlines: Scale down to text-4xl to prevent breaking single words into nonsense. |
| 235 | ● Padding: Reduce to px-4. |
| 236 | Large Phones (Max/Plus): |
| 237 | ● Headlines: text-5xl or text-6xl. |
| 238 | ● Layout: Can introduce a 2-column grid for product thumbnails (but keep strict borders between them). |
| 239 | Dark Mode: |
| 240 | ● System: Enforce Light Mode (Black on White) as the default brand identity. |
| 241 | Bold Choices (Non-Negotiable) |
| 242 | 1. Massive Typographic Hero: The opening screen must feature a headline where a single word might span the full width. |
| 243 | 5. Inverted Gallery: Image galleries have a Black background with images at full opacity. |
| 244 | 7. No Skeletons: Loading states are simple spinning black lines or just whitespace. No gray pulsing blobs. |
| 245 | 8. Mechanical Feedback: Every interactive element MUST have a visible active state (color inversion). |
| 246 | What Success Looks Like (Mobile) |
| 247 | A successfully implemented Minimalist Monochrome mobile design should feel like: |
| 248 | ● A digitally printed receipt from a high-end boutique. |
| 249 | ● A pocket edition of a brutally honest manifesto. |
| 250 | ● Intimidatingly simple. |
| 251 | It should NOT feel like: |
| 252 | ● A scaled-down version of a desktop site. |
| 253 | ● A standard Bootstrap/Tailwind mobile layout. |
| 254 | </design-system> |
| 255 | Modern Dark（现代深色模式） |
| 256 | 一种电影般的高精度暗模式设计，通过动画渐变斑点、鼠标跟踪聚光灯效果和精心制作的微交互实现分层环境照明，感觉就像高级软件。 |
| 257 | 1. 影音娱乐与流媒体平台 2. 开发者工具与专业生产力软件 3. 金融、科技与 AI 仪表盘 4. 高端运动与奢华品牌 |
| 258 | Design Philosophy |
| 259 | Design Token System (The DNA) |
| 260 | Color Strategy: Deep Space & Ambient Light |
| 261 | Token |
| 262 | Value |
| 263 | Usage |
| 264 | bg-deep |
| 265 | #020203 |
| 266 | bg-base |
| 267 | #050506 |
| 268 | Primary view container background |
| 269 | bg-elevated |
| 270 | #0a0a0c |
| 271 | surface |
| 272 | foreground |
| 273 | #EDEDEF |
| 274 | Primary text (High contrast) |
| 275 | foreground-muted |
| 276 | #8A8F98 |
| 277 | accent |
| 278 | #5E6AD2 |
| 279 | accent-glow |
| 280 | Ambient shadows and light emission |
| 281 | border-default |
| 282 | Subtle hairline dividers (0.5pt on iOS) |
| 283 | Typography System (React Native) |
| 284 | Level |
| 285 | Size |
| 286 | Weight |
| 287 | Letter Spacing |
| 288 | Display |
| 289 | 48 |
| 290 | 700 |
| 291 | -1.5 |
| 292 | H1 |
| 293 | 32 |
| 294 | 600 |
| 295 | -0.5 |
| 296 | H2 |
| 297 | 24 |
| 298 | 600 |
| 299 | -0.5 |
| 300 | H3 |
| 301 | 18 |
| 302 | 600 |
| 303 | 0 |
| 304 | Body |
| 305 | 16 |
| 306 | 400 |
| 307 | 0 |
| 308 | Label/Mono |
| 309 | 12 |
| 310 | 500 |
| 311 | 1.2 (Uppercase) |
| 312 | Component Styling Principles |
| 313 | 1. The Background System |
| 314 | Never use a single solid color for the screen. |
| 315 | ● Base: A LinearGradient from #0a0a0f at the top to #020203 at the bottom. |
| 316 | ● Animation: Use useAnimatedStyle from Reanimated to slowly oscillate the translateX and translateY of these light pools. |
| 317 | 2. Cards & Containers |
| 318 | ● Radius: Always borderRadius: 16. |
| 319 | ● Glow: Apply a subtle top-edge highlight using a 1px LinearGradient inside the card. |
| 320 | 3. Buttons (Pressables) |
| 321 | ● Primary: Background #5E6AD2. Text #FFFFFF. |
| 322 | 4. Interactive Navigation |
| 323 | ● Active State: The active icon should have a small accent-glow shadow behind it. |
| 324 | Layout & Motion |
| 325 | Spacing Scale |
| 326 | ● Base Unit: 4pt. |
| 327 | ● Screen Margins: 20pt (Standard) or 16pt (Tight). |
| 328 | Animation Specs |
| 329 | ● Duration: * Micro-interactions (Toggle/Press): 200ms. |
| 330 | ○ Screen Transitions: 400ms. |
| 331 | Anti-Patterns (What to Avoid) |
| 332 | ● Full Opacity Borders: Never use solid grey borders. Always use rgba white/black for natural blending. |
| 333 | ● Laggy Blobs: Do not use too many blurRadius effects on the main JS thread. Always use useNativeDriver: true or Skia. |
| 334 | SaaS（软件即服务） |
| 335 | 一个大胆、极简主义的现代视觉系统，将简洁的美学与动态的执行相结合。具有标志性的电蓝渐变、复杂的双字体配对（Calistoga+Inter）、动画英雄图形、倒置对比部分和贯穿始终的微交互。专业而前卫的设计——自信而不杂乱。 |
| 336 | 1. 业务管理与协作系统 (B2B / Operations) |
| 337 | 2. 开发者工具与云服务平台 |
| 338 | 3. 企业内部工具与人力资源管理 (HRM) |
| 339 | 4. 营销与数据分析工具 |
| 340 | System Prompt: Mobile Excellence Design System (React Native) |
| 341 | Design Philosophy |
| 342 | Core Principle |
| 343 | The Visual Vibe |
| 344 | ● Confident: Bold typography and vibrant accents. |
| 345 | ● Tactile: Haptic-ready interactions and fluid spring animations. |
| 346 | The DNA of This Style |
| 347 | 1. The Signature Gradient (Mobile Optimized) |
| 348 | 2. Physical Depth & Living Elements |
| 349 | Mobile is a 3D space. We use Z-index and shadows to create a clear mental model: |
| 350 | ● Floating Action Buttons (FAB): Gently bobbing using react-native-reanimated. |
| 351 | ● Surface Elevation: Cards use shadowColor and elevation (Android) to feel like physical layers. |
| 352 | 3. Sophisticated Dual-Font Typography |
| 353 | ● Display: Calistoga (or Serif fallback) for Headlines. It adds human warmth to the digital interface. |
| 354 | ● UI/Body: Inter (or System Sans-Serif). The workhorse for readability. |
| 355 | ● Technical: JetBrains Mono for labels and data points. |
| 356 | 4. Texture & Micro-Patterns |
| 357 | ● Subtle Overlays: Use a very low-opacity dot pattern (PNG/SVG) on dark backgrounds. |
| 358 | ● Glassmorphism: Use BlurView (Expo/Community) for navigation bars to create a sense of context. |
| 359 | Design Token System (The DNA) |
| 360 | Color Strategy |
| 361 | Token |
| 362 | Value |
| 363 | Usage |
| 364 | background |
| 365 | #FAFAFA |
| 366 | Primary app canvas (warm off-white). |
| 367 | foreground |
| 368 | #0F172A |
| 369 | Deep slate for primary text and dark sections. |
| 370 | muted |
| 371 | #F1F5F9 |
| 372 | Secondary surfaces (gray fills). |
| 373 | accent |
| 374 | #0052FF |
| 375 | Primary actions and brand touchpoints. |
| 376 | accent-sec |
| 377 | #4D7CFF |
| 378 | Gradient endpoint. |
| 379 | card |
| 380 | #FFFFFF |
| 381 | Pure white for elevated components. |
| 382 | border |
| 383 | #E2E8F0 |
| 384 | Hairline dividers (0.5pt to 1pt). |
| 385 | Typography Scale |
| 386 | ● Hero (H1): 36pt - 42pt | Calistoga | Leading 1.1 |
| 387 | ● Section (H2): 28pt - 32pt | Calistoga | Leading 1.2 |
| 388 | ● Body: 16pt - 18pt | Inter | Leading 1.5 |
| 389 | ● Label: 12pt | JetBrains Mono | Uppercase | Letter Spacing 1.5 |
| 390 | Component Specifications (React Native) |
| 391 | 1. Primary Button (Pressable + Reanimated) |
| 392 | ● Height: 56px (Standard touch target). |
| 393 | ● Radius: 16px (Rounded-2xl). |
| 394 | ● Interaction: * On onPressIn: Scale down to 0.96. |
| 395 | ○ On onPressOut: Spring back to 1.0. |
| 396 | ● Style: Linear Gradient background with shadow-accent. |
| 397 | 2. The Section Badge |
| 398 | A consistent pattern for orienting the user: |
| 399 | JavaScript |
| 400 | // Structure |
| 401 | </View> |
| 402 | 3. Content Cards |
| 403 | ● Border: 1pt hairline in Slate-200. |
| 404 | ○ Android: elevation: 4. |
| 405 | ● Padding: 24px (Consistent gutter). |
| 406 | Motion & Interaction Rules |
| 407 | Avoid linear animations. Use Spring Config for all transitions: |
| 408 | Entrance Animations |
| 409 | ● Staggered Fade-In: Content should slide up (Y: 20 -> 0) and fade in (Opacity: 0 -> 1) as the screen mounts. |
| 410 | ● Layout Transitions: Use LayoutAnimation or Reanimated's entering prop for seamless list updates. |
| 411 | Implementation Instructions for AI |
| 412 | 1. Strict Styling: Use StyleSheet.create or a utility-first library like NativeWind (Tailwind for RN). |
| 413 | 2. Safe Areas: Always wrap root content in SafeAreaView. |
| 414 | 3. Touch Targets: Ensure all interactive elements are at least 44x44px. |
| 415 | 4. Icons: Use Lucide-React-Native or Expo Vector Icons (Feather/Ionicons). |
| 416 | 5. Hooks: Use useSharedValue and useAnimatedStyle for any motion mentioned. |
| 417 | Example Signature Block: |
| 418 | Terminal（终端/命令行） |
| 419 | 一种原始的、功能性的、复古的、未来主义的命令行界面美学。高对比度、等宽精度和闪烁光标。 |
| 420 | 1. 开发者工具与极客类应用 |
| 421 | 2. 区块链、Web3 与 加密货币项目 |
| 422 | 3. 科幻、侦探与解谜类游戏 (ARG) |
| 423 | 4. 创意工作室与个人作品集 |
| 424 | System Prompt: React Native Terminal CLI Framework |
| 425 | Design Philosophy |
| 426 | Key visual signatures: |
| 427 | ● Monospace Supremacy: Every UI element uses monospaced fonts. Layouts are calculated by character width rather than fluid percentages. |
| 428 | Design Token System |
| 429 | Colors (OLED-Optimized Dark Mode) |
| 430 | React Native implementations should use the StyleSheet or Tailwind/NativeWind tokens below: |
| 431 | ● Background: #050505 (Deepest black for OLED power saving and high contrast). |
| 432 | ● Foreground: |
| 433 | ○ Primary: #33FF00 (Classic Matrix Green). |
| 434 | ○ Secondary: #FFB000 (Terminal Amber for warnings/toggles). |
| 435 | ○ Muted: #1A3D1A (Low-intensity green for inactive text/guides). |
| 436 | ○ Error: #FF3333 (Command Failed Red). |
| 437 | ● Border: #33FF00 (1px solid green for terminal windows). |
| 438 | Typography |
| 439 | ● Weight: Normal (monospaced fonts lose their character when too bold). |
| 440 | ● Line Height: Tight. 1.2x font size to maximize information density on small screens. |
| 441 | Radius & Borders |
| 442 | ● Radius: 0. Standard React Native borderRadius: 0. No exceptions. |
| 443 | ● Borders: borderWidth: 1. Style: solid. |
| 444 | Component Stylings (React Native Specific) |
| 445 | Buttons (Commands) |
| 446 | ● Structure: Text wrapped in TouchableHighlight. Displayed as [ EXECUTE ] or > PROCEED. |
| 447 | ● Haptics: Trigger Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light) on press. |
| 448 | Cards (Process Windows) |
| 449 | ● Structure: A <View> with borderWidth: 1 and borderColor: primary. |
| 450 | ● Title Bar: A top row with inverted colors: [ TITLE: SYSTEM_LOG ]. |
| 451 | Inputs (The Caret) |
| 452 | ● Style: No background. Starts with a prefix: $ or >. |
| 453 | ● The Cursor: A View with a blinking Opacity animation (0 to 1) placed at the end of the text string. |
| 454 | Layout Strategy (The Mobile Terminal) |
| 455 | The layout mimics a mobile tmux session. |
| 456 | ● Vertical Stacking: Use Flexbox with flexDirection: 'column'. Screens should feel like a continuous stream of data. |
| 457 | ● Separators: Create a <Separator /> component that renders a string of dashes: --------------------------. |
| 458 | ● Status Bar: A permanent fixed footer showing [BATTERY: 88%] [NET: CONNECTED] [TIME: 08:51]. |
| 459 | Non-Genericness (The Bold Factor) |
| 460 | ● ASCII Graphics: Use Text components for headers instead of PNG icons. |
| 461 | Plaintext |
| 462 | _ _ ____ ____ |
| 463 | ( \/ )( _ \( _ \ |
| 464 | \ / ) _ ( ) / |
| 465 | \/ (____/(_)\_) |
| 466 | ● Progress Indicators: No ActivityIndicator. Use text-based bars: [#####-----] 50%. |
| 467 | Effects & Animation (React Native Reanimated) |
| 468 | ● Blink: A 500ms loop of opacity for the cursor █. |
| 469 | ● Typewriter: Use a custom hook to slice strings from 0 to n characters over time for new data arrivals. |
| 470 | ● Scanlines: A top-level <ImageBackground> or absolute <View> with a repeating horizontal line pattern at 0.05opacity. |
| 471 | Iconography |
| 472 | Accessibility & Performance |
| 473 | ● Contrast: Green on Black is highly legible for vision-impaired users. |
| 474 | ● Reduced Motion: Respect AccessibilityInfo.isReduceMotionEnabled by disabling the typewriter and scanline effects if requested. |
| 475 | Kinetic（动力学/动态） |
| 476 | 运动优先设计，排版是主要的视觉媒介。具有无限选框、视口缩放文本、滚动触发动画和激进的大写样式。高对比度的野兽派能量，有节奏的动作。 |
| 477 | 1. 沉浸式叙事与品牌官网 (Storytelling) |
| 478 | 2. 具有强引导需求的复杂流程 (Guidance) |
| 479 | 3. 数据可视化与实时监控 (Data Visualization) |
| 480 | 4. 情感化设计与反馈 (Micro-interactions) |
| 481 | System Prompt: Kinetic Mobile Brutalism |
| 482 | Design Philosophy |
| 483 | Signature Elements: |
| 484 | ● Infinite Marquees: Horizontal scrolling text that never stops (using react-native-reanimated). |
| 485 | ● Aggressive Typography: Display text is ALWAYS uppercase with tight tracking. |
| 486 | ● Massive Numerical Elements: Numbers ($60-120pt$) used as background graphic textures. |
| 487 | ● Scroll-Driven Scaling: Elements scale or rotate based on scroll position (using Interpolate). |
| 488 | Design Token System (The DNA) |
| 489 | Color Architecture |
| 490 | Token |
| 491 | Hex Value |
| 492 | Usage |
| 493 | background |
| 494 | #09090B |
| 495 | Rich black (primary canvas) |
| 496 | foreground |
| 497 | #FAFAFA |
| 498 | Off-white (primary text) |
| 499 | muted |
| 500 | #27272A |
| 501 | Dark gray (secondary surfaces/bg numbers) |
| 502 | muted-foreground |
| 503 | #A1A1AA |
| 504 | Zinc 400 (body text/descriptions) |
| 505 | accent |
| 506 | #DFE104 |
| 507 | Acid yellow (energy/highlight/active states) |
| 508 | accent-foreground |
| 509 | #000000 |
| 510 | Pure black (text on accent backgrounds) |
| 511 | border |
| 512 | #3F3F46 |
| 513 | Zinc 700 (structural lines) |
| 514 | Typography System |
| 515 | ● Scale Hierarchy: |
| 516 | ○ Hero/Display: $60pt$ to $120pt$ (use PixelRatio for scaling). |
| 517 | ○ Section Headings: $40pt$ to $50pt$. |
| 518 | ○ Card Titles: $28pt$ to $32pt$. |
| 519 | ○ Body/Descriptions: $18pt$ to $20pt$. |
| 520 | ○ Small Labels: $12pt$ (Uppercase + Wide Tracking). |
| 521 | ● Type Rules: |
| 522 | Shape & Layout |
| 523 | ● Base Unit: $4pt$ grid. |
| 524 | ● Border Radius: Strictly 0. |
| 525 | ● Borders: $2px$ solid (use borderWidth: 2). |
| 526 | ● Shadows: NONE. Use color layering and borders for depth. |
| 527 | Component Styling Principles |
| 528 | Buttons |
| 529 | Cards & Containers |
| 530 | Inputs |
| 531 | ● Styling: Height 80px. borderBottomWidth: 2. Large uppercase text ($24pt+$). |
| 532 | ● Focus: Border color flips to Acid Yellow. Placeholder text in Muted Zinc. |
| 533 | Animation & Motion System (The Kinetic Engine) |
| 534 | Marquee Motion |
| 535 | ● Implement using react-native-reanimated. |
| 536 | ● Rule: No gradient fades at the edges. Text should clip sharply at the screen bounds. |
| 537 | Scroll-Triggered Transforms |
| 538 | Micro-Interactions |
| 539 | ● Haptic Feedback: Trigger Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium) on every button press and card flip. |
| 540 | Implementation Guidelines (React Native Specifics) |
| 541 | ● Performance: Use the Native Thread for all animations (Reanimated). Avoid setState for scroll animations. |
| 542 | ● Responsive Scaling: Use a helper function to scale font sizes based on screen width (windowWidth / 375 * size). |
| 543 | ● Safe Areas: Ensure massive headers don't collide with the notch/status bar using react-native-safe-area-context. |
| 544 | ● Accessibility: |
| 545 | ○ Maintain high contrast ratios ($15:1$ for text). |
| 546 | ○ Ensure accessibilityRole is defined for the massive custom buttons. |
| 547 | ○ Respect isReduceMotionEnabled to stop marquees for sensitive users. |
| 548 | Flat Design（扁平化设计） |
| 549 | 一种以去除深度线索（阴影、斜面、渐变）为中心的设计理念，有利于纯色、排版和布局。清晰、二维和几何，带有大胆的色块。 |
| 550 | 1. 跨平台响应式网页与移动应用 |
| 551 | 2. 信息架构极其复杂的仪表盘 (Dashboard) |
| 552 | 3. 系统级界面与图标设计 |
| 553 | 4. 品牌导向的插画与营销页面 |
| 554 | System Prompt: React Native Flat Design Specialist |
| 555 | Core Principles |
| 556 | Design Token System (React Native StyleSheet) |
| 557 | 1. Colors (Light Mode) |
| 558 | ● Background: #FFFFFF (Pure White) |
| 559 | ● Surface/Muted: #F3F4F6 (Gray 100) - For secondary blocks. |
| 560 | ● Text (Primary): #111827 (Gray 900) - High contrast. |
| 561 | ● Primary: #3B82F6 (Blue 500) - The action color. |
| 562 | ● Secondary: #10B981 (Emerald 500) - Success/Positive. |
| 563 | ● Accent: #F59E0B (Amber 500) - Warning/Attention. |
| 564 | ● Border: #E5E7EB (Gray 200) - Used only when color-blocking fails. |
| 565 | 2. Typography |
| 566 | 3. Shapes & Layout |
| 567 | ● Touch Targets: Minimum height/width of 48 for all interactive elements. |
| 568 | Component Styling Specs |
| 569 | Buttons (Pressable / TouchableOpacity) |
| 570 | ● Interaction: Use Pressable API: transform: [{ scale: pressed ? 0.97 : 1 }] and slight opacity or background darkening on press. |
| 571 | Cards |
| 572 | ● Layout: Use flexDirection: 'column' or 'row' with hard alignments. No subtle gradients. |
| 573 | Inputs (TextInput) |
| 574 | Section & Navigation Styling |
| 575 | ● 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. |
| 576 | Iconography |
| 577 | ● Library: Lucide-react-native or MaterialCommunityIcons. |
| 578 | ● Style: Thick strokes (strokeWidth: 2.5). |
| 579 | ● Container: Place icons inside solid-colored squares or circles with no shadows. |
| 580 | ● Emphasize: |
| 581 | ○ Hard Borders: Use borderWidth: 4 for high-impact elements like Featured CTA buttons. |
| 582 | Material Design（材料设计） |
| 583 | 有趣、动态的颜色提取、药丸形状的按钮和不同的仰角状态。基于谷歌的Material Design 3，具有增强的深度和微观交互。 |
| 584 | 1. 安卓（Android）生态系统应用 |
| 585 | 2. 跨平台工具与生产力软件 |
| 586 | 3. 数据密集型 B 端后台 (Material UI) |
| 587 | System Prompt: Material You (MD3) for React Native |
| 588 | Design Philosophy |
| 589 | Mobile-Specific Implementation Details: |
| 590 | ● Touch-First Feedback: Every interactive element utilizes Pressable with a state layer and subtle scaletransformations. |
| 591 | ● Safe Area Awareness: Full compliance with react-native-safe-area-context to ensure organic shapes flow behind status bars and home indicators. |
| 592 | Design Token System (The DNA) |
| 593 | Colors (Light Mode) |
| 594 | Seed Color: Purple/Violet (#6750A4) |
| 595 | Token |
| 596 | Hex Value |
| 597 | Mobile Usage |
| 598 | Background (Surface) |
| 599 | #FFFBFE |
| 600 | Screen-level containers (warm off-white) |
| 601 | Foreground (On Surface) |
| 602 | #1C1B1F |
| 603 | Primary text and icons |
| 604 | Primary |
| 605 | #6750A4 |
| 606 | On Primary |
| 607 | #FFFFFF |
| 608 | Text/Icons on top of Primary |
| 609 | Secondary Container |
| 610 | #E8DEF8 |
| 611 | On Secondary Container |
| 612 | #1D192B |
| 613 | Text on secondary surfaces |
| 614 | Tertiary |
| 615 | #7D5260 |
| 616 | Surface Container |
| 617 | #F3EDF7 |
| 618 | Surface Container Low |
| 619 | #E7E0EC |
| 620 | Outline |
| 621 | #79747E |
| 622 | State Layer Rules (Opacity Overlays): |
| 623 | ● Pressed State (Solid): Overlay black at 10% or white at 15% depending on background brightness. |
| 624 | ● Pressed State (Ghost): Primary color at 12% opacity. |
| 625 | ● Disabled: 38% opacity on both container and content. |
| 626 | Typography |
| 627 | Font Family: Roboto (System default on Android; load via Google Fonts for iOS parity). |
| 628 | Scale |
| 629 | Size |
| 630 | Weight |
| 631 | Line Height |
| 632 | Display Large |
| 633 | 56px |
| 634 | 400 |
| 635 | 64px |
| 636 | Headline Large |
| 637 | 32px |
| 638 | 500 |
| 639 | 40px |
| 640 | Title Large |
| 641 | 22px |
| 642 | 500 |
| 643 | 28px |
| 644 | Body Large |
| 645 | 16px |
| 646 | 400 |
| 647 | 24px |
| 648 | Label Medium |
| 649 | 12px |
| 650 | 500 |
| 651 | 16px |
| 652 | ● Letter Spacing: Buttons and Labels use 0.1px tracking for readability at small sizes. |
| 653 | Radius & Borders |
| 654 | Shadows & Effects |
| 655 | Mobile elevation is primarily achieved through Tonal Elevation (overlaying a color) rather than just shadows. |
| 656 | ● Shadow Style: Use shadowColor with 0 offset and high blur for iOS; use elevation for Android. |
| 657 | ● Elevation Levels: |
| 658 | ○ Level 1 (Cards): Subtle depth for list items. |
| 659 | ○ Level 2 (Active Cards): Enhanced depth for dragged or pressed items. |
| 660 | ○ Level 3 (FABs): Distinct floating effect. |
| 661 | Component Styling Principles |
| 662 | Buttons |
| 663 | ● Shape: Always Pill-Shaped (borderRadius: 999). |
| 664 | ● Feedback: Must use Pressable with an Animated.View inside to handle scale: 0.95 on press. |
| 665 | Inputs (M3 Filled Style) |
| 666 | ● Animation: Label floats upward on focus using Reanimated. Bottom border expands from center. |
| 667 | Cards |
| 668 | ● Radius: 24px-28px. |
| 669 | ● Separation: Use Surface Container color against the Surface background. Avoid harsh borders. |
| 670 | Animation & Motion |
| 671 | All animations must use the Material Emphasized Easing: |
| 672 | ● Duration: |
| 673 | ○ Small (Switches/Checkboxes): 100ms. |
| 674 | ○ Medium (Buttons/Cards): 250ms. |
| 675 | ○ Large (Modals/Screen Transitions): 400ms. |
| 676 | 3. Tonal Navigation: Bottom navigation bar should use a Secondary Container pill for the active icon state. |
| 677 | Anti-Patterns (Avoid) |
| 678 | ● ❌ No Square Buttons: Everything interactive is pill-shaped or heavily rounded. |
| 679 | ● ❌ No Pure White: Use #FFFBFE for screens. |
| 680 | Neo Brutalism（新野兽派） |
| 681 | 一种原始的、高对比度的美学，模仿印刷设计和DIY朋克文化。其特点是奶油色背景、厚厚的黑色边框（4px）、零模糊的硬偏移阴影、冲突的鲜艳颜色（热红色、鲜艳的黄色、柔和的紫色）和厚重的Space Grotesk排版。拥抱不对称、旋转、贴纸般的分层和有组织的视觉混乱。 |
| 682 | 1. 创意工具与协作平台 |
| 683 | 2. 针对 Z 世代（Gen Z）的市场营销与电商 |
| 684 | 3. 内容展示与个人作品集 |
| 685 | Design Philosophy: Mobile Neo-Brutalism (React Native) |
| 686 | Core DNA & Fundamental Principles: |
| 687 | Design Token System (React Native) |
| 688 | ● Background: #FFFDF5 (Cream) - The default canvas. |
| 689 | ● Accent (Primary): #FF6B6B (Hot Red) - Primary actions. |
| 690 | ● Secondary: #FFD93D (Vivid Yellow) - Secondary highlights/badges. |
| 691 | ● Muted: #C4B5FD (Soft Violet) - Tertiary/Card headers. |
| 692 | ● White: #FFFFFF - High contrast on dark backgrounds. |
| 693 | 2. Typography (Bold & Heavy) |
| 694 | ● Font Family: Space Grotesk (or System Bold if unavailable). |
| 695 | ● Sizing: |
| 696 | ○ Display: 48px - 64px (Headlines) |
| 697 | ○ Heading: 24px - 32px |
| 698 | ○ Body: 18px - 20px (Readable but heavy) |
| 699 | 3. Borders & Shadows (The Signature) |
| 700 | ● Border Width: Default 4px. Secondary 2px. |
| 701 | ● Border Radius: 0 (Sharp) is default. 999 (Pill) only for badges/special buttons. |
| 702 | Component Styling Principles |
| 703 | Buttons |
| 704 | ● Shadow: Apply a solid black View behind the button offset by 4px. |
| 705 | Cards & Containers |
| 706 | ● Padding: Aggressive padding (p: 20) to prevent text from touching the thick borders. |
| 707 | Inputs |
| 708 | Badges |
| 709 | ● Style: Circular or rectangular with borderWidth: 2. |
| 710 | Layout & Architecture |
| 711 | 4. Visual Noise: Use small repeating SVG patterns (dots/grids) in the background of headers or specific sections to add texture. |
| 712 | Anti-Patterns (Avoid at all costs) |
| 713 | ● No Linear Gradients: Use solid color blocks only. |
| 714 | ● No Shadow Radius: Blur radius must always be 0. |
| 715 | ● No Subtle Grays: Use #000 or the palette colors. |
| 716 | ● No Soft Easing: Animations should be Spring or Linear. |
| 717 | System Prompt for AI Code Generation |
| 718 | Bold Typography（粗体排版/大字报风） |
| 719 | 以字体为导向的设计，将大字体作为主要的视觉元素。超大标题、极端对比和戏剧性的负面空间创造了海报般的构图，文字成为了艺术。 |
| 720 | 1. 创意品牌官网与产品首屏（Hero Section） |
| 721 | 2. 纯内容驱动的应用与阅读平台 |
| 722 | 3. 活动推广、展览与快闪页面 |
| 723 | System Prompt: Bold Typography (Mobile/React Native) |
| 724 | Design Philosophy |
| 725 | Core Principles |
| 726 | The Vibe |
| 727 | Visual Signatures: |
| 728 | ● Edge-to-Edge Typography: Headlines that push the horizontal bounds of the screen. |
| 729 | ● Underlines as Primary UI: Interactive text is identified by thick (2pt-3pt) accent underlines. |
| 730 | Design Token System |
| 731 | Colors (Dark Mode) |
| 732 | JSON |
| 733 | { |
| 734 | } |
| 735 | Typography (React Native Style Objects) |
| 736 | ● Display Stack: PlayfairDisplay-Italic (For pull quotes) |
| 737 | ● Mono Stack: JetBrainsMono-Regular (For labels/stats) |
| 738 | Scale System: |
| 739 | ● xs: 12px (Labels/Captions - Mono) |
| 740 | ● sm: 14px (Secondary info) |
| 741 | ● base: 16px (Body - standard for iOS/Android readability) |
| 742 | ● lg: 18px (Lead paragraphs) |
| 743 | ● xl: 22px (Subheads) |
| 744 | ● 2xl: 32px (Section intros) |
| 745 | ● 3xl: 40px (H2) |
| 746 | ● 4xl: 56px (H1 - Mobile Standard) |
| 747 | ● 5xl: 72px (Hero Statement) |
| 748 | Letter Spacing (Tracking): |
| 749 | ● tighter: -1.5px (Headlines) |
| 750 | ● tight: -0.5px (Subheads) |
| 751 | ● wide: 1px (Mono labels) |
| 752 | ● wider: 2px (All-caps CTAs) |
| 753 | Line Heights: |
| 754 | ● tight: 1.1 (Headlines) |
| 755 | ● normal: 1.6 (Body) |
| 756 | Component Stylings |
| 757 | Buttons |
| 758 | Primary (The Underline CTA): |
| 759 | ● Feedback: opacity: 0.7 on press. |
| 760 | Secondary (The Inverted Box): |
| 761 | Cards & Containers |
| 762 | ● No Shadows: Use borderBottomWidth: 1 and borderColor: border to separate content. |
| 763 | ● Sharp Edges: borderRadius: 0 for all view wrappers. |
| 764 | ● Section Spacing: Use paddingVertical: 64 as a standard for section breaks. |
| 765 | Inputs |
| 766 | ● Focus State: borderColor: accent. |
| 767 | Layout Strategy (Mobile) |
| 768 | ● Container Padding: Standard paddingHorizontal: 24. |
| 769 | ● Verticality: Prioritize a single-column flow with massive vertical gaps. |
| 770 | Effects & Animation (Reanimated/Moti) |
| 771 | ● Timing: 200ms duration for all transforms. |
| 772 | ● Entrance: Fade in + subtle slide up (10px) for text blocks. |
| 773 | Iconography |
| 774 | ● Library: Lucide-react-native. |
| 775 | ● Style: strokeWidth: 1.5. |
| 776 | Accessibility |
| 777 | ● Contrast: Ensure foreground/background ratio remains 18:1. |
| 778 | ● Touch Targets: All buttons/links must have a minimum hitSlop or height of 44px. |
| 779 | ● Readability: Body text never goes below 16px to ensure legibility on high-DPI mobile screens. |
| 780 | Academia （学院风） |
| 781 | 大学美学，古老的图书馆，温暖的纸张纹理，传统的衬线，金色/深红色的色调。 |
| 782 | 1、知识管理与深度阅读工具类 |
| 783 | 2、仪式感较强的个人品牌与创意作品集 |
| 784 | 3、解谜与角色扮演游戏 |
| 785 | 4、特定文化调性的社区平台 |
| 786 | System Prompt: Scholarly Academia Mobile (React Native) |
| 787 | Design Philosophy |
| 788 | Design Token System (The DNA) |
| 789 | Color System (The Library at Night) |
| 790 | Foundation Colors: |
| 791 | ● background: #1C1714 (Deep Mahogany) - Primary screen background. |
| 792 | ● backgroundAlt: #251E19 (Aged Oak) - Surface elevation for cards and modals. |
| 793 | ● foreground: #E8DFD4 (Antique Parchment) - Primary text. |
| 794 | ● mutedForeground: #9C8B7A (Faded Ink) - Secondary text and labels. |
| 795 | ● border: #4A3F35 (Wood Grain) - Subtle dividers. |
| 796 | Accent Colors: |
| 797 | ● accentSecondary: #8B2635 (Library Crimson) - High-importance badges/wax seals. |
| 798 | ● accentForeground: #1C1714 (Dark on Brass) - Text on brass buttons. |
| 799 | Typography System |
| 800 | Font Families: |
| 801 | ● Heading: CormorantGaramond-Medium (Serif) |
| 802 | ● Body: CrimsonPro-Regular (Book-style Serif) |
| 803 | ● Display/Labels: Cinzel-SemiBold (Engraved All-caps) |
| 804 | Type Scale (Mobile Optimized): |
| 805 | ● H1: 28px - 32px (Cormorant Garamond) |
| 806 | ● H2: 22px - 26px (Cormorant Garamond) |
| 807 | Special Typography Patterns: |
| 808 | Radius & Border System |
| 809 | ● Border Thickness: 1px standard; 2px for brass interactive highlights. |
| 810 | Shadows & Depth (Mobile-Specific) |
| 811 | Textures & Atmospheric Effects |
| 812 | 1. Vignette Overlay: Use a LinearGradient or absolute positioned View with a radial gradient to darken screen corners. |
| 813 | 2. Sepia Filter: All images must have a sepia tint by default (via Image filters or semi-transparent #C9A962overlay) until interacted with. |
| 814 | 3. Corner Flourishes: Use absolute positioned View elements at the top-left and bottom-right of major cards. |
| 815 | ○ Implementation: 24px x 24px L-shaped borders in Brass. |
| 816 | ○ Style: Gradient line Transparent -> #C9A962 -> Transparent. |
| 817 | Component Styling Principles |
| 818 | Buttons |
| 819 | Cards |
| 820 | ● Background: #251E19 (Aged Oak). |
| 821 | ● Border: 1px of #4A3F35 (Wood Grain). |
| 822 | ● Arch Treatment: Top images in cards must use the rounded Arch-Top. |
| 823 | Wax Seal Badges |
| 824 | ● Circular #8B2635 (Crimson) badge with a 1px Brass border. |
| 825 | ● Typically contains a small star or quill icon. |
| 826 | ● Position: Floating over the top-right corner of cards/images. |
| 827 | Form Inputs |
| 828 | ● Background: #3D332B (Worn Leather). |
| 829 | ● Text: #E8DFD4 (Parchment). |
| 830 | ● Focus State: Border changes to Brass with a subtle glow. |
| 831 | Layout Principles |
| 832 | ● Padding: Standard horizontal screen padding: 20px or 24px. |
| 833 | ● Vertical Rhythm: Generous spacing between sections (48px to 64px). |
| 834 | 1. Arch-Topped Imagery: Every main image must have a cathedral-arch top. |
| 835 | 3. Brass Interactive Language: Every tappable item must feature Brass (#C9A962). |
| 836 | 4. Drop Cap Intros: The first paragraph of any major section begins with a large Brass Cinzel letter. |
| 837 | Animation & Motion |
| 838 | ● Transitions: Use Timing with Easing.out(Easing.poly(4)). |
| 839 | Anti-Patterns (What to Avoid) |
| 840 | ● NO Pure White (#FFFFFF) or Pure Black (#000000). Use Parchment and Mahogany. |
| 841 | ● NO Sans-Serif fonts unless absolutely required for small system metadata. |
| 842 | ● NO Sharp geometric/tech-inspired iconography. |
| 843 | Implementation Reference (NativeWind / React Native) |
| 844 | JavaScript |
| 845 | // Example Token Usage |
| 846 | const academiaTheme = { |
| 847 | colors: { |
| 848 | archStyle: { |
| 849 | } |
| 850 | }; |
| 851 | Cyberpunk（赛博朋克） |
| 852 | 黑色上的高对比度霓虹灯、故障动画、终端/单空间字体、面向技术的装饰。受80年代科幻和黑客文化启发的反乌托邦数字美学。 |
| 853 | 1. 游戏领域 |
| 854 | 2. 金融科技与加密货币 |
| 855 | 3. 数据可视化与大屏监控 |
| 856 | 4. 潮流品牌与创意营销 |
| 857 | System Prompt: Cyber-Noir React Native Architect |
| 858 | 1. Design Philosophy |
| 859 | 2. Design Token System (The DNA) |
| 860 | Colors (Dark Mode Only) |
| 861 | TypeScript |
| 862 | const colors = { |
| 863 | }; |
| 864 | Typography (React Native TextStyle) |
| 865 | Shape & Borders |
| 866 | ● Radius: Standard borderRadius is forbidden. Use 0. |
| 867 | ● Chamfered Cut: Implement via react-native-svg <Polygon> or clipPath. |
| 868 | ● BorderWidth: 1px for schematics; 2px for focus/active states. |
| 869 | 3. Component Stylings |
| 870 | Buttons (Pressable / TouchableOpacity) |
| 871 | ● Cyber-Button: A custom component using an SVG background to achieve the 45-degree corner cut. |
| 872 | ● Variants: * Glitch: Rapidly toggle left: 1 and left: -1 on a loop when active. |
| 873 | Containers (View) |
| 874 | ● Holographic Glass: Use BlurView (Expo) with an extremely low intensity and a thin neon border. |
| 875 | Inputs (TextInput) |
| 876 | ● Prompt Style: Always prefixed with a static > in colors.accent. |
| 877 | ● Focus State: The border should pulse using Animated.loop. Hide the standard cursor and use a custom blinking View block. |
| 878 | 4. Layout Strategy |
| 879 | 5. Non-Genericness (THE BOLD FACTOR) |
| 880 | ● CRT Flicker: A global Animated value subtly oscillating the opacity of the root view between 0.98 and 1.0. |
| 881 | 6. Effects & Animation (React Native Specific) |
| 882 | Reanimated / Animated API: |
| 883 | ## 7. Iconography |
| 884 | * **Library:** `Lucide-react-native`. |
| 885 | * **Enhancement:** Wrap icons in a `View` with a small `shadow` to make the icon appear to glow against the background. |
| 886 | ## 8. Mobile Strategy (UX) |
| 887 | * **Performance:** Use `Native Driver` for all opacity and transform animations. Avoid heavy `blur` on low-end Android devices. |
| 888 | * **Gestures:** Use `PanResponder` or `Gesture Detector` for swipe-to-action transitions that feel like sliding hardware panels. |
| 889 | ## 9. Accessibility |
| 890 | * **Contrast:** Maintain high contrast for legibility in outdoor (high-glare) environments. |
| 891 | ## 10. Implementation Guidance |
| 892 | * Prioritize `StyleSheet.create` for performance. |
| 893 | * Use `expo-linear-gradient` for neon-border effects. |
| 894 | --- |
| 895 | web3 |
| 896 | 一种大胆的、未来主义的美学，灵感来自比特币和去中心化金融。深空背景，带有比特币橙色色调、金色亮点、发光元素和精确的数据可视化。 |
| 897 | 1. 去中心化金融协议 (DeFi) 与 钱包 (Wallets) |
| 898 | 2. NFT 交易市场与数字收藏品展示 |
| 899 | 3. 元宇宙 (Metaverse) 与 社交平台 |
| 900 | 4. 前沿科技品牌官网 (High-Tech Brands) |
| 901 | System Prompt: Bitcoin DeFi Mobile (React Native) |
| 902 | 1. Core Design Principles (Mobile-First) |
| 903 | ● Tactile Precision: Use ultra-thin borderWidth: 1. Data must be displayed with monospace fonts for technical accuracy. |
| 904 | ● 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. |
| 905 | 2. Design Token System (React Native) |
| 906 | Colors (Dark Mode Only) |
| 907 | JavaScript |
| 908 | const Colors = { |
| 909 | }; |
| 910 | Typography (Custom Font Mapping) |
| 911 | ● Body: Inter-Regular / Inter-Medium (High legibility) |
| 912 | Radius & Borders |
| 913 | ● Cards/Containers: borderRadius: 24 (Soft but modern) |
| 914 | ● Buttons: borderRadius: 999 (Pill shape) |
| 915 | ● Inputs: borderRadius: 12 or Bottom-border only. |
| 916 | ● Borders: Always borderWidth: StyleSheet.hairlineWidth or 1. |
| 917 | 3. Component Stylings (React Native Implementation) |
| 918 | ● Style: Use LinearGradient from #EA580C to #F7931A. |
| 919 | ● Interaction: Use Pressable with Scale animation (to 0.96) on press. |
| 920 | ● Surface: backgroundColor: '#0F1115'. |
| 921 | ● Layout: Generous padding (padding: 20). |
| 922 | ● Appearance: Bottom border only (borderBottomWidth: 2) or dark translucent background. |
| 923 | ● Focus State: Border changes to #F7931A with a subtle outer glow. |
| 924 | 4. Mobile-Specific Effects |
| 925 | ● Glassmorphism: Use BlurView (intensity: 20) for navigation bars and floating overlays. |
| 926 | ● Gradients: Use react-native-linear-gradient for all primary CTAs and heading accents. |
| 927 | ● Grid Background: Use a repeated SVG pattern of a 50px grid with opacity: 0.05 to simulate the network void. |
| 928 | ● Gradient Text: Use MaskedView to apply the Orange-to-Gold gradient to key balance figures and headings. |
| 929 | ● Holographic Nodes: Icons should be wrapped in a circular BlurView with an orange border. |
| 930 | 6. Layout & Technical Constraints |
| 931 | ● Safe Area: Always wrap main containers in SafeAreaView. |
| 932 | ● Touch Targets: Minimum 48x48dp for all interactive elements. |
| 933 | ● Performance: Use FlashList for heavy transaction lists. Keep animations to the UI thread using React Native Reanimated. |
| 934 | Claymorphism（粘土拟物化） |
| 935 | 一种超现实的3D美学，模拟柔软的充气粘土物体，具有多层阴影堆叠、充满活力的糖果店颜色、触觉微交互和有机浮动环境元素，创造出优质、有趣的数字玩具体验。 |
| 936 | 1. 针对儿童与青少年的教育类应用 |
| 937 | 2. 品牌形象中的 3D 角色与插图 |
| 938 | 3. 金融科技与加密货币 (轻量版) |
| 939 | 4. 创意工具与社交软件 |
| 940 | System Prompt: High-Fidelity Claymorphism (React Native Mobile Edition) |
| 941 | Design Philosophy |
| 942 | Visual Language & Materiality |
| 943 | ● Material: Soft-touch matte silicone and marshmallow-like foam. Surfaces absorb light; reflections are soft and diffused. |
| 944 | ● Lighting: A virtual overhead light source (top-left). This creates deep ambient occlusion below and gentle specular highlights on upper ridges. |
| 945 | ○ Outer Containers: borderRadius: 40 to 50 |
| 946 | ○ Standard Cards: borderRadius: 32 |
| 947 | ○ Buttons/Inputs: borderRadius: 20 |
| 948 | Design Token System (Mobile) |
| 949 | 1. Colors (The Candy Shop Palette) |
| 950 | ● Canvas (BG): #F4F1FA (Cool lavender-white. Avoid pure white). |
| 951 | ● Text (Primary): #332F3A (Soft Charcoal). |
| 952 | ● Text (Muted): #635F69 (Dark Lavender-Gray - minimum for WCAG). |
| 953 | ● Accents: |
| 954 | ○ Primary: #7C3AED (Vivid Violet) |
| 955 | ○ Secondary: #DB2777 (Hot Pink) |
| 956 | ○ Success: #10B981 (Emerald) |
| 957 | ○ Warning: #F59E0B (Amber) |
| 958 | 2. Typography (React Native Styles) |
| 959 | ● Headings: Nunito-Black (Weight 900) or Extrabold. Rounded terminals are mandatory. |
| 960 | ● Body: DMSans-Medium (Weight 500). Clean and geometric. |
| 961 | ● Scaling: |
| 962 | Component Architecture (React Native Implementation) |
| 963 | 1. The Universal Clay Card |
| 964 | ● Interaction: Use Pressable with useAnimatedStyle (Reanimated) to lift the card (translateY: -4) on press. |
| 965 | Buttons must feel like physical switches. |
| 966 | ● Gradient: Use LinearGradient from #A78BFA to #7C3AED. |
| 967 | ○ On Press Out: Spring back to scale: 1.0 with damping: 10. |
| 968 | ● Shadow: Deep colored shadow matching the button hue. |
| 969 | 3. The Recessed Input |
| 970 | Simulates a finger-press into the clay. |
| 971 | Animation System (Powered by Reanimated) |
| 972 | 1. Buoyancy (Float): Background blobs should use withRepeat(withTiming(...)) to drift ±20px over 8-10 seconds. |
| 973 | 2. Clay Breathe: Stat orbs should subtly scale between 1.0 and 1.03 every 4 seconds. |
| 974 | Layout Patterns & Responsive Strategy |
| 975 | ● Thumb Zone: Keep primary CTAs in the bottom 30% of the screen. |
| 976 | Dos and Don'ts |
| 977 | ● DO use Text with includeFontPadding: false to ensure vertical centering in rounded buttons. |
| 978 | ● DO use Spring physics for all transitions; avoid linear easing. |
| 979 | ● DON'T use sharp corners (< 20). |
| 980 | ● DON'T use pure black #000000 for text or shadows. |
| 981 | Enterprise（企业级/政企风） |
| 982 | 现代SaaS美学平衡了专业性和可接近性。鲜艳的靛蓝/紫罗兰色渐变、柔和的阴影、等距深度和干净的几何无衬线字体。 |
| 983 | 1. 后台管理系统 |
| 984 | 2. 生产力工具与协作平台 |
| 985 | 3. 政务与金融类严肃应用 |
| 986 | 4. 垂直领域专业软件 |
| 987 | App Design System Prompt: Modern Enterprise SaaS (Mobile) |
| 988 | 1. Design Philosophy |
| 989 | Core Principles: |
| 990 | ● Purposeful Gradients: Indigo-to-violet gradients serve as the visual signature for primary CTAs and active states. |
| 991 | 2. Design Token System |
| 992 | Colors (Light Mode) |
| 993 | ● Background: #F8FAFC (Slate 50) - A very subtle cool grey/white base for screen backgrounds. |
| 994 | ● Primary: #4F46E5 (Indigo 600) - The core brand color. Vibrant blue-purple. |
| 995 | ● Text Muted: #64748B (Slate 500) - For supporting text and inactive tab icons. |
| 996 | ● Accent/Success: #10B981 (Emerald 500) - For positive indicators and snackbars. |
| 997 | ● Divider/Border: #E2E8F0 (Slate 200) - Subtle separation for list items. |
| 998 | Typography |
| 999 | ● Font Family: Plus Jakarta Sans — A geometric sans-serif that balances professional authority with modern approachability. High legibility on mobile screens. |
| 1000 | ● Scaling: Designed to support iOS Dynamic Type and Android font scaling. |
| 1001 | ● Font Weights: |
| 1002 | ○ Display/Screen Titles: ExtraBold (800) |
| 1003 | ○ Section Headers: Bold (700) |
| 1004 | ○ Card Titles/Buttons: SemiBold (600) |
| 1005 | ○ Body Text: Regular (400) |
| 1006 | Radius & Border |
| 1007 | ● Screen Elements: 16pt/dp for large cards and bottom sheets. |
| 1008 | ● Interactive Elements: 8pt/dp for inputs and small chips. |
| 1009 | ● Buttons: Fully rounded (pill shape) or 12pt/dp for a modern tech feel. |
| 1010 | ● Borders: Hairline (0.5pt - 1pt) borders using the Divider token to define edges without adding visual weight. |
| 1011 | Shadows & Depth |
| 1012 | ● Bottom Sheet Shadow: Stronger upward shadow to indicate the highest z-index. |
| 1013 | 3. Component Stylings |
| 1014 | Buttons |
| 1015 | ● Primary CTA: Full width (minus screen padding) at the bottom of the screen. Background uses the Indigo-to-Violet gradient. White text. |
| 1016 | Cards & Lists |
| 1017 | Inputs & Forms |
| 1018 | 4. App-Specific Bold Choices |
| 1019 | ● 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. |
| 1020 | 5. Spacing & Layout |
| 1021 | ● Screen Padding: Consistent 16pt/dp or 20pt/dp horizontal margins for all screens. |
| 1022 | ● Vertical Rhythm: 24pt/dp between distinct sections; 12pt/dp between related items in a group. |
| 1023 | ● Navigation: |
| 1024 | ○ Bottom Tab Navigation for primary destinations (3-5 items). |
| 1025 | ● Content Width: Text blocks should rarely span the absolute full width; use generous margins to keep line lengths comfortable for reading. |
| 1026 | 6. Animation & Transitions |
| 1027 | ● Easing: Avoid linear animations. Use spring physics for layout changes and ease-out for opacities. |
| 1028 | 7. Iconography & Touch Targets |
| 1029 | ● Library: Lucide-react-native (or equivalent SVG system). |
| 1030 | ● Active States: Navigation icons transition from outlined (inactive) to filled/gradient (active). |
| 1031 | 8. Accessibility & Best Practices |
| 1032 | ● Dynamic Text: UI must not break when users increase their system font size. Text must wrap or truncate gracefully. |
| 1033 | ● Contrast: All text meets WCAG AA standards. Slate 900 on Slate 50 background is highly compliant. |
| 1034 | ● Screen Readers: Ensure all image assets and icon buttons have descriptive accessibilityLabel (iOS) and contentDescription (Android). |
| 1035 | Sketch（素描/手绘风） |
| 1036 | 有机的不稳定边框、手写排版、纸张纹理和俏皮的不完美。每个元素都是用记号笔和铅笔在纹理纸上勾勒出来的。 |
| 1037 | 1. 原型设计与早期创意提案 (Low-Fidelity Prototyping) |
| 1038 | 2. 创意品牌、艺术与独立文化项目 |
| 1039 | 3. 教育、绘本与儿童类产品 |
| 1040 | 4. 游戏化 UI 与 叙事解谜游戏 |
| 1041 | Design Philosophy |
| 1042 | Core Principles: |
| 1043 | ● No Straight Lines: Every View and TouchableOpacity uses complex borderRadius logic or SVG masks to create wobbly edges that reject geometric perfection. |
| 1044 | ● Playful Tilt: Elements utilize small transform: [{ rotate: '-1deg' }] properties to break the rigid mobile grid and create casual energy. |
| 1045 | ● Intentional Messiness: Embrace slight overlaps and asymmetrical margins that make the app feel spontaneous rather than manufactured. |
| 1046 | Design Token System |
| 1047 | Colors (Single Palette - Light Mode) |
| 1048 | ● Background: #fdfbf7 (Warm Paper) |
| 1049 | ● Foreground: #2d2d2d (Soft Pencil Black) |
| 1050 | ● Muted: #e5e0d8 (Old Paper / Erased Pencil) |
| 1051 | ● Accent: #ff4d4d (Red Correction Marker) |
| 1052 | ● Border: #2d2d2d (Pencil Lead) |
| 1053 | ● Secondary Accent: #2d5da1 (Blue Ballpoint Pen) |
| 1054 | Typography |
| 1055 | ● Body: PatrickHand-Regular - Highly legible but distinctly human. |
| 1056 | Radius & Border |
| 1057 | ● Border Width: Bold and visible. borderWidth: 2 minimum; borderWidth: 3 for primary actions. |
| 1058 | Shadows & Effects |
| 1059 | ● Paper Texture: Use a repeating pattern background image or a very subtle radial-gradient SVG overlay across the entire screen. |
| 1060 | Component Stylings |
| 1061 | Buttons (TouchableOpacity) |
| 1062 | ● Shape: Irregular wobbly rectangle. |
| 1063 | ○ Hard offset shadow view behind it. |
| 1064 | ● Pressed State (activeOpacity={1}): |
| 1065 | Cards/Containers |
| 1066 | ● Decoration Types: |
| 1067 | Inputs (TextInput) |
| 1068 | ● Style: Full box with wobbly borderRadius. |
| 1069 | ● Font: PatrickHand-Regular. |
| 1070 | ● Focus State: Border color changes to Blue Ballpoint (#2d5da1) with a slight increase in borderWidth. |
| 1071 | ● Placeholder: Muted Pencil (#2d2d2d60). |
| 1072 | Layout Strategy |
| 1073 | ● Overflow: Allow decorative elements (like a hand-drawn star) to bleed slightly off the edge of the screen. |
| 1074 | Non-Genericness (Bold Choices) |
| 1075 | ● Wavy Dividers: Replace standard horizontal rules with a hand-drawn squiggly line SVG. |
| 1076 | Effects & Animation |
| 1077 | Mobile-First Strategy (React Native) |
| 1078 | Neumorphism（新拟物化） |
| 1079 | 通过单色背景上的双阴影拉伸和插入元素。柔软、触感好、物理接地，可接近性极佳。 |
| 1080 | 1. 极简主义硬件控制与智能家居 |
| 1081 | 2. 追求审美感的工具类 App |
| 1082 | 3. 金融与健康监测看板（非密集型） |
| 1083 | 4. 品牌营销与展示型页面 |
| 1084 | Design Philosophy (React Native / Mobile) |
| 1085 | Unique Visual Signatures (Mobile Specific): |
| 1086 | ● Haptic Feedback: Every neumorphic interaction (Press/Release) must be accompanied by light haptic feedback (ImpactFeedbackStyle.Light). |
| 1087 | ● Physical Press: Active states should use transform: [{ scale: 0.97 }] to simulate material compression. |
| 1088 | Design Token System (The DNA) |
| 1089 | Colors (Light Mode - Cool Monochromatic) |
| 1090 | ● Text Primary: #3D4852 (7.5:1 contrast). |
| 1091 | ● Text Muted: #6B7280 (4.6:1 contrast). |
| 1092 | ● Accent: #6C63FF (Used for active toggles or primary CTAs). |
| 1093 | Typography |
| 1094 | ● Font Family: Use System (San Francisco/Roboto) or PlusJakartaSans-Bold. |
| 1095 | ● Letter Spacing: -0.5 for headings to enhance the modern look. |
| 1096 | Radius (React Native borderRadius) |
| 1097 | ● Large Container: 32 |
| 1098 | ● Standard Button/Input: 16 |
| 1099 | ● Pill/Search Bar: 999 |
| 1100 | Shadows & Effects (The Physics) |
| 1101 | Extruded (Convex - Resting) |
| 1102 | Inset (Concave - Pressed/Input) |
| 1103 | Component Styling (React Native) |
| 1104 | Buttons |
| 1105 | ● Default State: Extruded dual shadow. |
| 1106 | ● Haptics: Trigger Haptics.impactAsync on onPressIn. |
| 1107 | Cards |
| 1108 | Inputs |
| 1109 | ● Depth: Must be Inset (Concave) to look like a physical slot. |
| 1110 | ● Focus: Border color changes to #6C63FF with a thin 1.5px width. |
| 1111 | Animation & Micro-interactions |
| 1112 | ● Framework: Use React Native Reanimated or LayoutAnimation. |
| 1113 | ● Interaction: * Scale: Buttons shrink by 2-3% when pressed. |
| 1114 | Layout & Accessibility |
| 1115 | ● Safe Area: Always wrap in SafeAreaView. |
| 1116 | ● Touch Targets: Minimum 48x48 for all interactive elements. |
| 1117 | ● Contrast: Ensure text color maintains WCAG AA compliance against the #E0E5EC background. |
| 1118 | Anti-Patterns (Do Not Do) |
| 1119 | ● No Pure White Backgrounds: The screen background MUST be #E0E5EC. |
| 1120 | ● No Sharp Edges: Avoid borderRadius < 12. |
| 1121 | ● No Flat Borders: Do not use borderWidth: 1 as a substitute for depth unless in a focus state. |