Jane-xiaoer

Xiaoer Artstudio Design — AI skill for Claude Code

AI community

Design methodology reproduction kit from 小耳 Art Studio — Japanese-editorial aesthetic portable across Claude Code / Hermes / openclaw / any LLM.

How to install Xiaoer Artstudio Design

This entry records only its repository, not the path inside it, so there is no exact command to give. Open Jane-xiaoer/xiaoer-artstudio-design and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Xiaoer Artstudio Design does

Design methodology reproduction kit from 小耳 Art Studio — Japanese-editorial aesthetic portable across Claude Code / Hermes / openclaw / any LLM. CC-BY-4.0.

Alternatives in AI

Guizang Ppt Skill — AI-agent Skill for generating polished HTML slide decks: editorial magazine and Swiss layouts, image prompts 24.9k ★
Token Monitor — Local-first desktop widget for tracking token usage, costs, and limits across 32+ AI coding tools—including Cl 1.8k ★
Iai Personal Memory Engine — A cyber brain for your AI 866 ★

README

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.