xiaoer-artstudio-design

name	xiaoer-artstudio-design
description	Design methodology reproduction kit for 小耳 Art Studio (xiaoerai.xyz / uki-clone.vercel.app). Replicate the "Japanese stationery × independent artist portfolio" aesthetic — tender whitespace, dual typography, section-rotated pastel palette, hand-drawn SVG vocabulary, trilingual poetic copy, **plus the five-layer interaction system** (Matter.js physics garden, per-character text spring with optional pencil cursor, tangential rotor, idle-spin). Use when a user asks to build an artist portfolio, product showcase, or derivative-goods landing page in this gentle-editorial style. Portable across Claude Code / Hermes / openclaw / any agent framework — all assets are plain MD + JSON + SVG + JS.
version	2.0.0
author	Jane (小耳)
license	CC-BY-4.0
tags	["design","branding","artist-portfolio","japanese-editorial","handdrawn","interactive","matter-js","physics","text-spring"]
source_reference	xiaoerai.xyz / uki-clone.vercel.app (小耳 Art Studio — captured 2026-04-17, interaction layer added 2026-05-11)

小耳 Art Studio — Design Methodology Skill

Not a CSS copy. A methodology. Read references/DESIGN_PRINCIPLES.md first — the rest of this skill operationalizes those 8 principles.

v2.0 adds the interaction layer (the half of the site that lives in app.js, not styles.css) — physics garden, per-character text spring, tangential rotor, idle-spin. Without this layer, a reproduction looks like the site but doesn't feel like it.

What This Skill Reproduces

A trilingual (JA/EN/ZH) artist-portfolio aesthetic that reads like a Muji-meets-Hayao-Miyazaki zine, alive to the visitor's cursor:

Visual layer (Principles 1–7)

• Tender whitespace, not clinical minimalism
• Dual typography: DM Serif Display (editorial) × Caveat (handwritten) × system-ui (body)
• Pastel section palette (薄荷/奶油/樱粉/天青) with ONE high-saturation lime accent #c8ff00
• 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
• Idle motion: 4–7s float / sway / rotate on decorations; hero text slide-in

Interaction layer (Principle 8)

• Physics garden — decorative SVGs are Matter.js rigid bodies with gravity; the cursor can grab and throw them
• Text spring (pencil) — bio paragraphs split into per-character spans, repelled by a custom pencil cursor
• Text spring (plain) — news titles split into chars, repelled by raw cursor proximity
• Tangential rotor — small spinnable marks (sakura nav button) transfer cursor tangent as angular velocity
• Idle-spin — ornament plus-marks rotate slowly always, accelerate 6× on hover
• Nav ↔ physics coupling (optional) — opening the nav panel pushes the physics world's right wall left, compressing the decorations

When to Use (trigger conditions)

Invoke this skill when the user's request matches any of:

• "做一个艺术家作品集 / 独立品牌站 / 日系风格网站"
• "按小耳 Art Studio 的调性做一个 …"
• "做一个手作品牌 / 衍生品商店 / 策展人主页"
• "日系 / 手帐 / 生活杂志风的着陆页"