Xiaoer Artstudio Design

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 Clau

7 stars 1 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add Jane-xiaoer/xiaoer-artstudio-design --skill xiaoer-artstudio-design
Manual install
git clone --depth 1 https://github.com/Jane-xiaoer/xiaoer-artstudio-design.git /tmp/xiaoer-artstudio-design
mkdir -p ~/.claude/skills
cp -r /tmp/xiaoer-artstudio-design/. ~/.claude/skills/xiaoer-artstudio-design

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# 小耳 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
Read the full skill on GitHub

Details

Skill name
xiaoer-artstudio-design
Repo updated
11 May 2026

FAQ

What does the Xiaoer Artstudio Design skill do?

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 Clau

How do I install the Xiaoer Artstudio Design skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add Jane-xiaoer/xiaoer-artstudio-design --skill xiaoer-artstudio-design. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Xiaoer Artstudio Design popular?

It lives in Jane-xiaoer/xiaoer-artstudio-design, which has 7 GitHub stars and 1 forks.

Related skills

HTML Animation to Mp4

6

AZR-Software-Solutions/html-animation-to-mp4

Convert an HTML/CSS/JS animation — especially a Claude "Design" timeline artifact (a *.dc.html bundle exported from Claude) — into a clean, shareable MP4 using deterministic headless-browser frame capture plus ffmpeg. Use this whenever the user has a web/HTML animation, a Claude Design or Artifacts animation, a `.dc.html` file, an animated promo / explainer / motion graphic, and wants a video file (MP4, reel, short, clip) out of it — even if they don't say "render", "ffmpeg", or "headless". Trigger on phrasings like "convert this animation to mp4/video", "export my HTML animation as a video",

Frontend & Design

Webcloner

8

veyralabsgroup/webcloner

Website Cloner. Activate when a user wants to clone, replicate, or rebuild a website's visual design. Triggers on: "clone this website", "replicate this landing page", "rebuild this design in Next.js", "copy the layout of this site", "I want my site to look like X", "recreate this homepage". Designed for landings, marketing sites, portfolios, and ecommerce storefronts — not web applications, dashboards, or SaaS products with auth flows. Produces a pixel-accurate clone using spec-driven parallel construction with automated extraction.

Frontend & Design

Avatar Sticker Pack

7

bianzigege/avatar-sticker-pack

Generate a reusable sticker pack from one or more user-provided avatar images. Use when the user asks for avatar stickers, emoji packs, reaction stickers, chibi stickers, human-proportion and Q-version variants, transparent PNG stickers, or a paired sticker set for chat platforms.

Frontend & Design

Wcss Slurm

8

dawidlinek/slurm-wcss-skill

Use this skill for any HPC task on the WCSS site in Wrocław - the Bem2 and Lem clusters (partitions like bem2-cpu-short, lem-gpu-short), login node ui.wcss.pl, grants and PD storage from KDM / e-science.pl. Trigger on any mention of WCSS, KDM, Bem2, Lem, ui.wcss.pl, a PD directory, $PDDIR, finished_jobs, a Wrocław or Polish supercomputer, or a job ID on that site, whatever the question is about - writing sbatch, MPI, array or GPU (H100) jobs, CPU-hours or GPU-hours left on a grant service, whether a job fits, a job PENDING with QOSGrpCPUMinutesLimit or killed or failed, results in $TMPDIR afte

Frontend & Design

Bauhaus Design

7

capsrock/bauhaus-design-skill

Create frontends, posters, dashboards, and web UIs rooted in Bauhaus and Swiss International Typographic Style (Internationale Typografische Stil) design principles. Use this skill when the user mentions Bauhaus, Swiss design, International Typographic Style, grid systems, Josef Müller-Brockmann, Max Bill, Jan Tschichold, Herbert Bayer, László Moholy-Nagy, constructivism, De Stijl-influenced UI, or asks for designs that emphasize mathematical grids, typographic hierarchy, geometric abstraction, asymmetric layouts, or modernist clarity. Also trigger when the user wants a 'clean modernist' look,

Frontend & Design

Shain Dls

8

Dishain/Shain-Design-System-Skill

Token-based design system skill for Figma + code handoff. Use whenever working with Figma components, design tokens, color variables, token migration, component creation, design-to-code handoff, or DS audits. Trigger on: design system, DS, DLS, tokens, figma variables, component spec, token naming, token hierarchy, which color to use, variant properties, theme config, dark mode. Even for "which color should I use" or "create a component" — use this skill.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.