# Soia Dev Design UI > 设计界面的信息结构、交互、视觉与实现交接，保持已批准的品牌和样式边界。触发：设计这个界面、梳理交互流程、做 UI 设计交接 - Skill: `soia-team/soia-dev-design-ui` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add soia-team/soia-dev-design-ui` - Raw SKILL.md: https://api.skillmd.com/api/skills/soia-team/soia-dev-design-ui/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: soia-team (https://skillmd.com/u/soia-team) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/soia-team/soia-dev-design-ui --- # soia-dev-design-ui ## 客户可读说明 **能做什么：** 把用户任务变成清晰的界面与交互设计；按需要交付结构、状态说明、可见原型或实现交接。不是默认重做整站，也不代替产品规格和生产实现。 **如何使用：** 提供目标页面/流程、受众、平台、真实内容和现有设计。先读取适用的设计规范与当前页面；沿用已批准品牌、组件、token 和文案规则。用户要求保持样式时，只动获准部分。 ## 设计方法 - 先理顺主要任务、信息层级和下一步动作，再选布局。让关键内容可扫描，避免所有信息同等突出、为填空增加卡片或装饰。 - 对交互说明触发条件、结果、返回路径与状态归属。按实际流程覆盖加载、空态、失败、重试、禁用、权限和长内容；不虚构后台能力。 - 视觉从排版、密度、间距、对齐、颜色用途和跨页节奏出发。复用已有系统；确需探索时给有实质差别的可见方向，不强制固定数量或全套变体。 - 将窄屏、放大文字、键盘/焦点、触控和减少动态效果纳入真实设计。隐藏、折叠或挪位不得改变任务语义；图标动作有可理解名称。 - 内容和品牌资产缺失时明确占位与影响；不猜品牌色、不把假数据或静态交互包装为已接通能力。 ## 交付与验证 使用客户指定的工具和格式；需要 Open Design 原型、HTML deck 或动画时，由可用的工具能力执行，不能用其他产物冒充指定路线。缺工具时说明可交付的设计部分和未执行部分，不自动安装。 可见产物要实际渲染，在相关宽度检查层级、溢出与关键交互。交接说明组件/状态/token 对应和仍需决定的事项；图稿、原型通过不代表生产 UI 已验收。技术验收与 UX/视觉判断可由 audit-ui 分开做，但不是每次设计必须串行加载的依赖。 明确要求实现或改稿时，修改批准的设计产物；只有讨论或评审时不改文件。不要自动发布、替换正式稿或重设全局样式。 ## 使用边界 ### 依赖与安装 无强制第三方技能依赖；读取或编辑所选材料的能力由宿主提供。 默认项目单技能：`npx skills add soia-team/soia-open-dev-skills -a -s soia-dev-design-ui`，执行前核实当前参数。 整域需明确选择：Claude Code 使用 `claude plugin marketplace add` / `claude plugin install soia-dev@soia`，Codex 使用 `codex plugin marketplace add` / `codex plugin add soia-dev@soia`；市场为 soia-team/soia-open-skills，完整步骤见[官方安装说明](https://github.com/soia-team/soia-open-skills#安装)。 WorkBuddy 使用[专家安装说明](https://github.com/soia-team/soia-open-skills/blob/main/docs/install/workbuddy.md)，不由 npx 代装。上述命令不构成安装或发布授权。 **私密信息与中间数据：** 只使用授权材料并对引用脱敏；不需要凭据、不默认建立配置/state/cache。要求保存的交付物写批准位置，临时数据用 OS 临时目录；不将客户原文写进技能仓库。 **日志与完成回执：** 结果本身是主要交付；说明实际变更或未改动、关键依据与未验证部分，不强制额外报告。