wangjia
911ceca079
Select 组件（用户拍板：下拉框全端共用一个真相源）： - design/components/forms/Select.jsx：自绘下拉——触发器同 Input （control-sm/radius-sm/border-1 + chevronDown），弹层同菜单 （radius-md/shadow-menu、选中项前置对勾、hover surface-2）， 外点/Esc 收起；登记簿加卡；icons.js 新增 chevronDown 并登记 icon-map - 原型 SettingsTray 与桌面 SettingsApp 同步换用（替换原生 select—— 其系统弹层样式/位置不可控，即 12A 截图问题） 原型组件运行时可再生（修复单源缺口）： - design-pipeline/bundle-components.mjs：用 desktop 现成 esbuild 重建 _ds_bundle.js（此前为 Claude 导出产物、仓库内无法再生，组件一改即 过期）；import 'react' 经全局 shim，命名空间不变；已实测原型页正常 - _ds_bundle.js 重建（15 个组件，含 Select/Icon） 设置窗口无边框： - tauri.conf settings 窗口 titleBarStyle=Overlay + hiddenTitle， 系统红绿灯悬浮左上；SettingsApp 自绘顶条（surface-2 + 下边框 + data-tauri-drag-region 可拖拽），对齐原型 MacWindow 规格 合并 feat/design-truth-source（真相源与闸体系）进本分支 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2.6 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）。 - 组件源码（components/ 或 icons.js）变更后：
node design-pipeline/bundle-components.mjs重建原型运行时_ds_bundle.js并随改动提交（ui_kits 页消费的是该 bundle）。 - 全景说明：
doc/frontend-overview.html。