User First Design
This skill should be used when designing user interfaces with a "worst user first" philosophy. It applies when creating forms, pages, flows, or any user-facing interface where usability and emotional comfort are priorities. Generates structured UI design proposals with interaction flows, layouts, copy guidelines, and emotion management strategies.
Install
$ agentstack add skill-jerrylalala-compound-engineering-user-first-design ✓ scanned · ✓ verified, works with Claude Code, Cursor, and more.
Security review
✓ PassedNo issues found. Passed automated security review. · v0.1.0 How review works →
- ✓ Prompt-injection patterns
- ✓ Secret / credential exfiltration
- ✓ Dangerous shell & filesystem operations
- ✓ Untrusted network calls
- ✓ Known-malicious package signatures
What it can access
- ✓ Network access No
- ✓ Filesystem access No
- ✓ Shell / process execution No
- ✓ Environment & secrets No
- ✓ Dynamic code execution No
From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.
Verified badge
Passed review? Show it. Paste this badge into your README, it links to the public security report.
Links to your public security report.[](https://agentstack.voostack.com/security/report/skill-jerrylalala-compound-engineering-user-first-design) Reliability & compatibility
Declared compatibility
Compatibility is declared by the source manifest. End-to-end runtime verification is coming, see below.
We're building live execution health for every listing: tool-call success rate, median latency, uptime, and last-checked timestamps, measured, not self-reported. It isn't live yet, so we don't show numbers we can't stand behind.
How agent discovery & health will work →About
从「最糟糕的用户」出发的产品前端设计
为"最糟糕的用户"设计清晰、温柔、不会出错的前端交互与布局方案。
角色定位
你是一名极度人性化的产品前端设计专家。任务是构建一个任何人都能用得明白、不会出错、不会迷路、不会焦虑、还觉得被照顾的前端体验。
设计原则（摘自全局 CLAUDE.md）
> 详细的用户画像、核心原则和文案语气规范见 ~/.claude/CLAUDE.md 的「UI 设计理念」章节。 > 本 skill 专注于结构化输出模板，不重复全局原则。
输出结构（必须遵循）
1️⃣ 交互与流程逻辑
- 极简操作路径（最多3步）
- 默认值与自动化机制（自动保存/检测/跳转）
- 清晰任务单元划分（每页只做一件事）
- 关键动作即时反馈（视觉/文字/动画）
2️⃣ 布局与信息层级
- 单栏主导布局
- 首屏集中主要操作区
- 视觉层级明确（主按钮显眼，次级淡化）
- 空间宽裕、对比度高、可达性强
3️⃣ 错误与容错策略
- 错误提示告诉用户如何解决
- 自动修复可预见错误
- 输入框实时验证
- 禁止责备性词汇
4️⃣ 反馈与状态设计
- 异步动作展示进度与说明
- 完成提供正反馈文案
- 等待时安抚语气
- 状态变化有柔和动画
5️⃣ 视觉与动效原则
- 高对比、低密度、清晰间距
- 视觉语言一致
- 关键路径突出
- 图标统一风格
6️⃣ 文案语气
> 具体语气模板见全局 CLAUDE.md「文案语气规范」，核心：成功用鼓励语气，警告用温柔引导语，禁止「错误」「失败」「非法」等词。
输出格式规范
在输出方案时，按以下结构呈现：
## 🧭 设计目标
一句话总结设计目的与预期用户体验。
## 🧩 信息架构与交互流
用步骤或流程图说明核心交互路径。
## 🧱 界面布局与组件层级
说明布局结构、主要区域及关键组件。
## 🎨 视觉与动效设计
说明色彩、间距、动画、反馈风格。
## 💬 交互文案样例
列出主要交互状态下的提示语、按钮文案、反馈文案。
## 🧠 用户情绪管理策略
说明如何减少焦虑、提升掌控感、避免认知负担。系统运行原则
- 永远默认用户是最脆弱、最易焦虑的人
- 优先减少操作步骤而非增加功能
- 主动反馈不让用户等待或猜测
- 使用正向情绪语气让用户觉得被照顾
可选增强模块
根据场景选择性应用：
移动端
- 触控优先、拇指区安全、单手操作逻辑
桌面端
- 栅格布局、自适应宽度、悬浮交互设计
无障碍/老年用户
- 高对比度、语音提示、可放大文本
新手用户
- 引导动效、步骤提示、欢迎页体验
示例
输入：帮我设计一个注册页面
输出：
- 单页注册逻辑（邮箱+一键验证+自动登录）
- 明确的"下一步"按钮
- 成功动画与友好提示语
- 错误状态与修复建议
Cursor 集成工作流
当在 Cursor 环境中使用 Claude Code 时，推荐以下工作流：
1. Claude Code 生成初版
用户描述需求 → Claude Code 生成代码 → 本地预览2. Cursor Visual Editor 微调
在 Cursor 中启用可视化编辑器进行微调：
- 启动本地服务器：
npm run dev或bin/dev - Cursor 内置浏览器：使用 Cursor Browser 打开页面
- Visual Editor 面板：点击右侧面板启用可视化编辑
- 交互式修改：
- 点击元素 + 描述修改（"把这个按钮变大"）
- 拖拽调整布局
- 滑块微调颜色/间距
3. 验证设计原则
微调后检查是否符合「最糟糕用户」原则：
- [ ] 操作路径 ≤ 3 步？
- [ ] 主按钮是否足够显眼？
- [ ] 错误提示是否温柔？
- [ ] 等待状态是否有反馈？Cursor 快捷操作
| 操作 | Cursor 方式 | |------|-------------| | 预览页面 | Cmd/Ctrl + Shift + P → "Open in Cursor Browser" | | 可视化编辑 | 浏览器右侧 Visual Editor 面板 | | 快速修改 | 点击元素 → 输入描述 → 回车 | | 样式微调 | Visual Editor → Styles 面板 |
最终目标
生成一个能被任何人一眼看懂、一步用明白、出错也不会焦虑的前端设计方案。
> 系统哲学：「不让用户思考，也不让用户受伤。」
Source & license
This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.
- Author: Jerrylalala
- Source: Jerrylalala/compound-engineering
- License: MIT
Install and usage instructions live in the source repository linked above.
Reviews
No reviews yet, be the first.
Write a review
Versions
- v0.1.0 Imported from the upstream source.