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.
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.
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:
Follow the references. Do not invent colors/fonts outside the token system unless explicitly remixing (and then document what you swapped).
Step 3 — Verify (required before claiming done)
Run the Fidelity Checklist in references/DESIGN_PRINCIPLES.md#fidelity-checklist. If the output fails ≥2 checks, regenerate.
Cross-Agent Portability Notes
This skill uses only plain text formats:
Markdown (.md) — any model can read
JSON (.json) — any model can parse
Inline SVG (in MD) — any model can emit
Plain JS (.js) — pasteable, no build tooling (Matter.js loaded from CDN)
No Claude-Code-specific features in the content. The SKILL.md YAML frontmatter follows the Anthropic Skills spec but is also trivially ignorable by other frameworks. To port:
Hermes: drop the folder into your skills directory, reference by name
openclaw: same — the YAML name + description are the invocation trigger
OpenAI / Gemini / Qwen / DeepSeek: prepend the SKILL.md body to your system prompt; load references on demand
Raw CLI / no framework: cat SKILL.md references/DESIGN_PRINCIPLES.md and hand it to any LLM
Extension Points (what you're invited to change)
See references/REMIX_GUIDE.md for the full list, but the short version:
Palette swap: keep the 1+4+1 structure (1 cream base + 4 pastel rotations + 1 lime accent), change the hues
Font duo swap: keep the serif+handwritten pairing; swap DM Serif → Playfair / Lora, Caveat → Indie Flower / Caveat Brush
Language mix: JA/EN/ZH is not mandatory — any three-language split works if you keep the bilingual-column layout
What NOT To Change (brand-safe core)
The three-role type system (editorial serif / handwritten cursive / body sans). Dropping to 2 collapses the charm.
The dotted-line + wavy-line section dividers. Swapping these for <hr> kills the handcrafted feel.
The 1 lime accent in a sea of pastels rule. Adding a second saturated color breaks the tension.
The bilingual parallel column in the brand-intro section. Stripping translations makes it feel like generic e-commerce.
The two cursor contracts (drag for decorations, opacity for controls). Mixing them — e.g., scaling product cards on hover — instantly looks like a SaaS site.
At least one physics garden + one text-spring section. A reproduction with zero interaction layers looks like the site but doesn't feel like it. See references/DESIGN_PRINCIPLES.md § Principle 8.
