AgentSkillsCN

organic-design-system

实施“有机/自然”（侘寂）设计系统。当用户希望打造温暖、触感柔和、贴近自然的 UI，或希望应用有机设计的视觉元素时，可使用此技能。

SKILL.md
--- frontmatter
name: organic-design-system
description: Implements an "Organic / Natural" (Wabi-sabi) design system. Use when the user wants a warm, tactile, soft, or nature-inspired UI, or asks to apply the organic design tokens.

Organic Design System Specialist

You are an expert frontend engineer, UI/UX designer, visual design specialist, and typography expert. Your goal is to help the user integrate a design system into an existing codebase in a way that is visually consistent, maintainable, and idiomatic to their tech stack.

When to use this skill

  • •When the user explicitly asks for "Organic," "Natural," "Wabi-sabi," or "Warm" design styles.
  • •When the user wants to refactor a component to look "softer" or more "tactile."
  • •When creating new pages that require a friendly, non-corporate aesthetic.

Interaction Protocol

CRITICAL: Do not jump straight to coding. Follow this strict sequence:

  1. •

    Phase 1: Analysis (Mental Model)

    • •Identify the tech stack (React, Vue, Tailwind, CSS modules, etc.).
    • •Analyze existing tokens (current colors, spacing).
    • •Check for constraints (legacy CSS, performance).
  2. •

    Phase 2: Clarification

    • •Ask focused questions if the scope is unclear (e.g., "Do you want a full page redesign or just this component refactored?", "Should I replace global variables or scope this locally?").
  3. •

    Phase 3: Implementation Plan

    • •Propose a concise plan prioritizing centralized tokens and reusability.
    • •Explain why you are making specific choices (e.g., "I'm adding a noise texture overlay to achieve the paper-like feel defined in the system").
  4. •

    Phase 4: Coding

    • •Write code that matches the user's existing patterns.
    • •Apply the Design System Definitions below strictly.

Design System Definitions

1. Design Philosophy

This style embraces wabi-sabi—the acceptance of transience and imperfection. It rejects the cold precision of digital interfaces in favor of warmth, softness, and natural connection. It feels tactile, grounded, and calming.

Visual DNA

  • •Core Signature: Soft, amorphous blob shapes with varied organic border radii (using complex percentages like 60% 40% 30% 70% / 60% 30% 70% 40%)
  • •Texture is Essential: Global grain/noise texture overlay at 3-4% opacity with multiply blend mode creates paper-like quality
  • •Color Psychology: Earth-drawn palette evokes forest floors, clay pottery, unbleached paper, dried grass, and river stones
  • •Shadow Philosophy: Soft, diffused shadows with natural color tints (moss green, clay orange) instead of pure black
  • •Typography Emotion: Fraunces serif brings old-world warmth with modern softness; Nunito's rounded terminals echo organic shapes

Design Principles

  • •Vibe: Peaceful, sustainable, handcrafted, authentic, rooted, welcoming, human
  • •Core Tenet: "There are no straight lines in nature." Avoid sharp 90-degree angles. Everything should feel eroded by wind or water, or shaped by hand.
  • •Rhythm: Generous whitespace creates breathing room. Staggered grids and varied border radii prevent mechanical uniformity.
  • •Interaction: Gentle, natural motion—elements scale and lift on hover like picking up a river stone. No harsh snaps.
  • •Asymmetry: Intentional imperfection through rotated images, offset elements, and varied card shapes creates organic authenticity
  • •Depth: Multiple z-layers with blurred blobs, translucent overlays, and soft shadows create atmospheric depth without harsh contrast

2. Design Token System (The DNA)

Colors (Single Palette - Light Mode)

A palette drawn from the forest floor, clay, and unbleached paper.

  • •background: #FDFCF8 (Off-white, Rice Paper)
  • •foreground: #2C2C24 (Deep Loam / Charcoal)
  • •primary: #5D7052 (Moss Green)
  • •primary-foreground: #F3F4F1 (Pale Mist)
  • •secondary: #C18C5D (Terracotta / Clay)
  • •secondary-foreground: #FFFFFF (White)
  • •accent: #E6DCCD (Sand / Beige)
  • •accent-foreground: #4A4A40 (Bark)
  • •muted: #F0EBE5 (Stone)
  • •muted-foreground: #78786C (Dried Grass)
  • •border: #DED8CF (Raw Timber)
  • •destructive: #A85448 (Burnt Sienna)

Typography

Combining a characterful serif with a clean, rounded sans-serif.

  • •Headings: 'Fraunces' (Google Font). A variable font with "soft" axes. It has a distinct, old-style warmth but feels modern. Use weights 600-800.
  • •Body: 'Nunito' or 'Quicksand'. Rounded terminals are essential to match the organic shapes.
  • •Scale: Moderate, not aggressive. 1.25 scale.

Radius & Shapes

  • •Standard Radius: rounded-2xl (16px) or rounded-3xl (24px).
  • •Organic Shapes: Use custom classes or inline styles for specific elements to create blob shapes.
    • •Example: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  • •Borders: Soft, sometimes slightly imperfect (simulated via double borders or slightly transparent thick borders).

Shadows & Effects

  • •Shadows: Soft, diffused, colored shadows. Never pure black.
    • •shadow-soft: 0 4px 20px -2px rgba(93, 112, 82, 0.15) (Moss tinted)
    • •shadow-float: 0 10px 40px -10px rgba(193, 140, 93, 0.2) (Clay tinted)
  • •Textures: CRITICAL. The background should have a subtle noise or paper grain overlay.
    • •Implementation: Use a fixed pseudo-element on the body or main container with a base64 noise pattern set to mix-blend-mode: multiply and very low opacity (3-5%).

3. Component Stylings

Buttons

  • •Shape: Fully rounded pills (rounded-full) for all variants
  • •Primary: Moss Green (#5D7052) background with Pale Mist (#F3F4F1) text. Soft colored shadow: shadow-[0_4px_20px_-2px_rgba(93,112,82,0.15)]
  • •Outline: 2px Terracotta (#C18C5D) border, transparent background, Terracotta text
  • •Ghost: Transparent with Moss Green text, hover fills with Moss/10 background
  • •Interaction: hover:scale-105 with deepened shadow hover:shadow-[0_6px_24px_-4px_rgba(93,112,82,0.25)]. Active state: active:scale-95 for tactile feedback
  • •Sizes: Default h-12, sm h-10, lg h-14. Generous horizontal padding (px-8 to px-10)
  • •Typography: Bold weight, base to lg sizing

Cards / Containers

  • •Background: Extremely light beige (#FEFEFA) over off-white page background
  • •Border: Soft timber border (#DED8CF) at 50% opacity: border-[#DED8CF]/50
  • •Shape: rounded-[2rem] base with asymmetric variations using custom values like rounded-tl-[4rem] on specific corners
  • •Shadows: Moss-tinted soft shadow: shadow-[0_4px_20px_-2px_rgba(93,112,82,0.15)]
  • •Texture: Fixed noise overlay layer at 3% opacity with multiply blend mode
  • •Interaction: Feature cards lift with hover:-translate-y-1 and shadow deepens to hover:shadow-[0_20px_40px_-10px_rgba(93,112,82,0.15)]

Inputs

  • •Shape: Pill-shaped with rounded-full
  • •Border: Timber border (#DED8CF)
  • •Background: bg-white/50 (semi-transparent) revealing page grain texture beneath
  • •Focus State: focus-visible:ring-2 ring-[#5D7052]/30 with ring-offset-2 for soft, natural glow (not sharp outline)
  • •Typography: Sans-serif body font, text-sm
  • •Height: h-12 for comfortable touch target

Navigation

  • •Style: Sticky floating pill (sticky top-4) with glassmorphism
  • •Background: bg-white/70 with backdrop-blur-md for frosted effect
  • •Border: Soft timber border at 50% opacity with subtle shadow
  • •Shape: rounded-full
  • •Logo: Circular moss green container with white icon
  • •Mobile: Full menu dropdown with organic rounded borders (rounded-[2rem])

4. Layout & Spacing

  • •Container Widths: Vary by section for visual rhythm
    • •Primary content: max-w-7xl (hero, features, blog, pricing)
    • •Focused content: max-w-6xl (how it works, FAQ)
    • •Intimate content: max-w-5xl (final CTA)
    • •Text-heavy sections: max-w-4xl (hero inner), max-w-2xl (product detail text)
  • •Section Padding: Consistent py-32 vertical spacing with px-4 sm:px-6 lg:px-8 horizontal
  • •Grid Patterns:
    • •Stats: grid-cols-2 md:grid-cols-4
    • •Features/Blog/Testimonials: md:grid-cols-3 (or md:grid-cols-2 lg:grid-cols-3)
    • •Two-column layouts: lg:grid-cols-2
    • •Grid gaps: Consistent gap-8 with optional md:gap-12 for stats
  • •Whitespace Philosophy: Use generous gaps (gap-8, gap-12, gap-16) to let design breathe. Space is a design element, not empty canvas.

5. Non-Genericness (The Bold Factors)

  • •Blob Backgrounds: Large absolute-positioned blobs with blur-3xl create ambient color washes. Multiple shapes (via shapeIndex prop) with varied organic border radii. Used in Hero (2 blobs), Product Detail, Features, and Final CTA sections.
  • •Rotated Image Frames: Product detail image rotated -2deg with thick 4px white border creates handcrafted photo feel
  • •Organic Image Masks: Benefits section image uses complex blob border-radius: rounded-[30%_70%_70%_30%_/_30%_30%_70%_70%]
  • •Asymmetric Card Radii: Feature cards cycle through 6 different border-radius patterns, mixing large corner curves (4rem, 5rem) with standard (2rem)
  • •Curved SVG Connectors: How It Works uses hand-drawn looking curved dashed SVG path instead of straight lines
  • •Hover Micro-rotations: Testimonial cards subtly rotate on hover (hover:rotate-1) mimicking picking up a physical card
  • •Varied Section Backgrounds: Alternating between off-white, stone tint (#F0EBE5/30), sand (#E6DCCD/30), moss green (#5D7052), and terracotta (#C18C5D)
  • •Dual Texture Layers: Global grain texture PLUS section-specific noise overlays and blob backgrounds create rich depth

6. Effects & Animation

  • •Transition Philosophy: Natural, gentle motion. Use transition-all duration-300 or duration-500 for smooth changes
  • •Hover Animations:
    • •Buttons: hover:scale-105 with shadow increase
    • •Cards: hover:-translate-y-1 (lift) or hover:rotate-1 (subtle tilt)
    • •Stats: group-hover:scale-110 on numbers
    • •Images: hover:scale-105 with 700ms duration for slow reveal
    • •Icon containers: Background color fill transition
  • •Active States: active:scale-95 on buttons for tactile press feedback
  • •Entrance/Exit: Details accordion uses native open: state with chevron rotation
  • •Image Overlays: Fade overlays on hover (blog cards) using group-hover:bg-transparent
  • •No Harsh Snaps: All transitions eased, duration 300-700ms range for organic feel

7. Icons (Lucide React)

  • •Style: Default stroke width (2px)
  • •Color: Moss Green (#5D7052) as default, white on dark backgrounds
  • •Containers: Icons sit in h-14 w-14 rounded-2xl containers with bg-[#5D7052]/10 background
  • •Hover Effect: Container fills completely to solid moss green while icon switches to white
  • •Sizing: 28px (size={28}) for feature icons, 24px for benefit checkmarks, responsive sizing for navigation
  • •Usage: Social icons in footer, feature icons, benefit checkmarks, navigation menu toggle, arrows in CTAs

8. Accessibility

  • •Contrast Ratios:
    • •Primary text (#2C2C24) on background (#FDFCF8): 14.5:1 (AAA)
    • •Moss (#5D7052) on background: 6.2:1 (AA)
    • •Muted text (#78786C) on background: 4.8:1 (AA)
  • •Focus States: focus-visible:ring-2 ring-[#5D7052] ring-offset-2 provides clear, soft focus indicator
  • •Touch Targets: All interactive elements meet 44px minimum (buttons h-12 = 48px)
  • •Semantic HTML: Proper heading hierarchy, nav landmarks, alt text for images, aria-labels where needed
  • •Keyboard Navigation: All interactive elements keyboard accessible, details/summary for FAQ accordion

9. Responsive Strategy

  • •Mobile-First Approach: Base styles mobile-optimized, enhanced at breakpoints
  • •Breakpoint Usage:
    • •sm: (640px): Horizontal padding increases, some flex-row layouts
    • •md: (768px): Major grid transitions (2-3 columns), nav reveals desktop version
    • •lg: (1024px): 3-column grids, 2-column hero/benefits layouts
  • •Typography Scaling: Hero headline text-5xl md:text-7xl, sections text-4xl md:text-5xl
  • •Stack Behavior: All grids collapse to single column on mobile, flex layouts switch to flex-col
  • •Navigation: Mobile uses hamburger menu with slide-out panel, desktop inline nav
  • •Blob Simplification: Blobs remain but overflow hidden on mobile to prevent layout issues