| 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 的调性做一个 …"
- "做一个手作品牌 / 衍生品商店 / 策展人主页"
- "日系 / 手帐 / 生活杂志风的着陆页"
