Xiaoer Artstudio Design — AI skill for Claude Code

xiaoer-artstudio-design

**A design methodology reproduction kit** — open-sourced from [小耳 Art Studio](https://xiaoerai.xyz), a Japanese-editorial-meets-independent-artist portfolio aesthetic.

留白会呼吸，不是空。 *(Whitespace breathes, it's not emptiness.)*

Not a template. A **methodology**. Any model, in any agent framework (Claude Code / Hermes / openclaw / raw LLM API), can read this kit and reproduce the aesthetic — or remix it into their own brand.

What It Reproduces

Visual layer

• Tender whitespace, not clinical minimalism
• Dual typography: DM Serif Display (editorial) × Caveat (handwritten) × system-ui (body)
• Pastel section palette (薄荷 / 奶油 / 樱粉 / 天青) with ONE high-saturation lime #c8ff00 accent
• Hand-drawn SVG vocabulary: floral blobs, botanical vines, wavy underlines, dotted-line dividers
• Poetic micro-copy with onomatopoeia (uki uki / doki doki) and single-kanji product names
• Ambient motion: 4–7s float / sway on decorations, never scroll-triggered

Interaction layer ⭐ new in v2.0

• Physics garden — decorative SVGs become Matter.js rigid bodies. They fall with gravity, settle on a floor, and can be grabbed and thrown with the cursor.
• Text spring — paragraphs and titles are split into per-character s. Characters lean away from the cursor via spring forces and return to rest.
• Pencil cursor (optional, About-section variant) — replaces the system cursor with a hand-drawn pencil SVG that lerps toward the mouse and rotates to its movement direction. Chars are repelled by the pencil tip.
• Tangential rotor — small SVG marks (sakura, pinwheel) spin from the cursor's tangential momentum; coast and damp after the cursor leaves.
• Idle-spin — ornament plus-marks slowly rotate at all times; hover boosts speed 6×.
• Nav ↔ physics coupling (optional) — opening the menu panel pushes the physics world's right wall inward, compressing the decorations.

Without the interaction