菜单
Hi-Tuto design system for all frontend/UI work in this repo. Use whenever creating or modifying React components, pages, styles, Tailwind classes, or the mascot in frontend/ — ensures the Thinkby-inspired look (flat vivid color panels, one-sided shadows, square mascot) stays consistent.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Author Hi Tuto HTML lesson capsules. Use when emitting final lesson HTML, choosing scroll vs Canvas Studio vs slide shell, wiring tutor hooks, or applying postprocess/CSP constraints.
Source-grounding rules — cite retrieved facts, never invent specifics, prefer source packs over web when a document is attached. Use when a lesson has source packs or research. (Body pending Deep Agents skills wiring.)
Core pedagogy for Hi Tuto lessons — one mechanism per lesson, prerequisite ordering, active recall. Use when scoping or sequencing lesson content. (Body pending Deep Agents skills wiring.)
Data-synthesis guidance — generating plausible datasets for visualizations or simulations when no source data exists. Use during asset_plan for data-driven capsules. (Body pending Deep Agents skills wiring.)
Generate PBR meshes (Hunyuan 3D Pro) for Canvas Studio chapters only. Use when presentation is studio and subjects need realistic 3D. Studio chrome lives in ui-studio-style — this skill owns mesh generation only.
Simulation guidance — parameter sliders, physics/agent loops, and deterministic seeds. Use for simulation- or tool-archetype lessons. (Body pending Deep Agents skills wiring.)
| name | hituto-design |
| description | Hi-Tuto design system for all frontend/UI work in this repo. Use whenever creating or modifying React components, pages, styles, Tailwind classes, or the mascot in frontend/ — ensures the Thinkby-inspired look (flat vivid color panels, one-sided shadows, square mascot) stays consistent. |
Full source of truth: ui_ux_design/ui-ux-design.md (read it for anything not covered here).
Live implementations: frontend/tailwind.config.js (tokens), frontend/src/components/Mascot.tsx + BrandMark.tsx (canonical mascot SVGs), frontend/src/index.css (.font-display, .font-logo, .hard-card, .sticker, .btn-press), frontend/src/features/landing/Landing.tsx (reference-quality composition examples).
Warm cream canvas (bg-paper #FDF1E7) with flat, borderless cards in vivid fills — deep forest lime-dark #14380E and deep purples plum/cobalt alternate with light mint, pink-lavender lilac, peach, and one punchy blue sky tile. Vivid green lime/grass #2BC15D is the action color. Depth comes from one-sided bottom shadows (shadow-press = 0 4px 0 #14380E) on buttons and sticker pills only. A soft square mascot with tall calm eyes appears at one emotional moment per screen. Four-point sparkles ✦ decorate dark panels.
4px 4px 0 #000) on components — that's the rejected "Gumroad" look. Cards are flat: hard-card = rounded-4xl border-0 shadow-card.border-lime-dark on green, border-cobalt on lavender), headline highlight pills (border-[3px] border-ink on bg-lilac, slight rotation), and inside the mascot SVG.rounded-full bg-lime text-lime-dark font-extrabold shadow-press btn-press hover:brightness-105, no border. On dark panels use shadow-[0_4px_0_rgba(0,0,0,0.35)].bg-lime, text-plum, shadow-press…). Raw hex only inside Mascot/BrandMark SVGs.font-display (Plus Jakarta Sans 800, tracking -0.025em). The Fraunces soft serif (font-logo) is ONLY for the "Hi Tuto" wordmark.<Mascot mood="..."/> component — never redraw it as a blob. Colorways: study/mark vivid green + forest outline; tutor pale blue #CFE6FC + forest outline (sits on the sky tile); celebrate lavender + vivid purple #7C2FA8 outline (sits on deep purple/forest). Max one hero mascot per screen plus tiny 32px chips in chat pills.text-lime-dark on mint, text-plum on lilac, text-paper/text-mint on deep panels, ink on cream/peach/sky. Never white text on vivid lime.rounded-xl border-2 border-lime-dark bg-lime text-lime-dark font-extrabold shadow-[0_4px_0_#14380E] rotate-[-1.5deg]rounded-xl border-2 border-cobalt bg-lilac text-plum shadow-[0_4px_0_#35193B] rotate-[1.5deg]w-max max-w-full), tiny <Mascot mood="mark" className="h-8 w-8"/> chip inside.tailwind.config.js — the config watcher is broken on this machine; stale classes keep serving and changes silently don't render. lsof -ti :5173 | xargs kill then cd frontend && npm run dev.transform (animate-mascot-bob) override Tailwind translate utilities — wrap the mascot in a positioned div and animate the inner SVG.font-display is both a CSS component class and a Tailwind utility; both must stay mapped to Plus Jakarta Sans.One bold statement · one mascot moment · one dominant flat color field (make some of them DEEP forest/purple, not all light) · one sticker/achievement element · generous cream negative space. Verify against the checklist in ui_ux_design/ui-ux-design.md §13.