---
name: dudu-design
description: Use this skill to generate well-branded interfaces and assets for dudu (嘟嘟语音输入法), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
user-invocable: true
---

Read the README.md file within this skill, and explore the other available files.

Key facts: dudu is a paid voice input method (语音输入法) for Mac/Windows/iOS/Android — push-to-talk dictation with streaming recognition. Minimal aesthetic, light/dark themes via `data-theme="dark"`, single accent blue, Lucide line icons, circle-mouth line logo. Link `styles.css` for all tokens; reusable React components live in `components/` (Button, Switch, MicBar, RecognitionOverlay, …); full-screen interactive recreations in `ui_kits/desktop` and `ui_kits/mobile`.

If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.

If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts _or_ production code, depending on the need.

Hard rules: 一屏一个蓝色主按钮；无渐变；无 emoji；浮层永远深色玻璃；文案短、用"你"、无句号。

## 单源与闸（改 UI 前必读）

- **登记先行（L1 无例外）**：新颜色/字号/间距 → `tokens/*.css`；新组件 → `components/` + 登记簿 `index.html` 加卡；新图标 → `icons.js` + `icon-map.json`。登记后跑 `node design-pipeline/export-tokens.mjs` 再写端代码。
- **业务代码禁止**：字面色（hex/rgb/hsl，一律 var(--*) / DuduTheme）、内联 `<path>`（走 `Icon` 组件）、未登记的 SF Symbol。确属例外加行内 `ds-ignore: 理由`。
- **闸**：`node design-pipeline/check-ds.mjs`（真相源自检 7 道）· `check-code.mjs`（四端代码侧）· `export-tokens.mjs --check`（产物零 diff）。pre-commit（`git config core.hooksPath .githooks` 启用）与 CI 双挂。
- **预览评审**：`node design/serve.mjs` → http://localhost:5180（登记簿 index.html 与 ui_kits）。
- **组件源码（components/ 或 icons.js）变更后**：`node design-pipeline/bundle-components.mjs` 重建原型运行时 `_ds_bundle.js` 并随改动提交（ui_kits 页消费的是该 bundle）。
- 全景说明：`doc/frontend-overview.html`。
