wangjia
1a8089a96d
- doc/frontend-overview.html：一次 UI 改动的标准路径 / 真相源结构 / 五端消费对照 / 各道闸全景 / L1-L2-L3 分治 / 已知滞后（jiu frontend-overview 思想的 dudu 版） - design/SKILL.md 增补「单源与闸」章节（agent 改 UI 前必读） - doc/index.html 登记全景文档 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2.4 KiB
name, description, user-invocable
| name | description | user-invocable |
|---|---|---|
| dudu-design | 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. | 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）。 - 全景说明：
doc/frontend-overview.html。