小耳 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