菜单
Use this skill to generate future-facing, restrained, precise, warm-industrial, digitally playful interfaces for zupulse — Digital Music Practice Workspace. Contains colors, type, spacing, radius, shadow, and dashboard guidance.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/hikerpig/zupulse --skill zupulse-design命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | zupulse-design |
| description | Use this skill to generate future-facing, restrained, precise, warm-industrial, digitally playful interfaces for zupulse — Digital Music Practice Workspace. Contains colors, type, spacing, radius, shadow, and dashboard guidance. |
| user-invocable | true |
使用这个主题资料库辅助设计 Zupulse Digital Music Practice Workspace。先读项目根
DESIGN.md 确认当前产品契约；只有修改主题、token 或基础组件时，再用 css.json
理解品牌原语。应用运行时只消费 packages/web-viewer/src/styles/tokens.css，不得直接导入
本目录的 colors_and_type.css。
css.json — 结构化 token 理解源。colors_and_type.css — 主题 CSS 投影，不是产品运行时入口。runtime-token-map.json — 已正式采用的主题原语到运行时语义 token 映射。specs/reference-braun.png — Braun-like order 参考。specs/reference-teenage-engineering.png — Teenage Engineering color rhythm 参考。library-consumption.json — 推荐读取顺序。#f26b4f，珊瑚色动作信号；保持 future-facing、restrained、precise，不要改成冷蓝或渐变主视觉。#f0ede8 到 #181818；默认背景 #f0ede8，前景 #181818，表面 #f5f2ed，形成 warm-industrial 的灰暖白哑光与炭灰结构块。Space Grotesk 为 display、heading、body；IBM Plex Mono 只给 mono、数字、节拍与参数读数。56/40/32/24/20/18/16/12/11/14px，对应 display、h1、h2、h3、h4、lead、body、caption、eyebrow、mono。4px 为基准，token 仅用 4/8/12/16/24/32/48/64px；默认导航高 72px，侧栏宽 88px，内容最大宽 1440px。36/40/44/48px；默认中号按钮高 44px，输入框高 40px，适合精确、数据化操作。6/10/14/20/9999px；小控件偏硬朗，卡片与面板更柔和，但仍保持 restrained，而不是圆润消费感。0 1px 2px rgba(24,24,24,0.06) 到 0 30px 72px -24px rgba(24,24,24,0.28)，静态轻、浮层重。--zupulse-primary-400，背景切到 #1a1a1a，表面 #272727，保留珊瑚色节奏与精密软件气质。播放 / 循环 / 轨道 / 速度 / 打开乐谱：简短、功能导向、无修饰、无 emoji。