粗野主义界面设计助手

粗野主义界面设计助手

这个 Skill 能做什么

设计具有强网格、机械排版、硬边界和功能暴露感的粗野主义网页与数据界面。

完成任务时重点处理：

• 刚性网格与极端字号对比
• 有限功能色、硬边框和信息密度
• 可用性、数据清楚度与受控质感

最终目标不是堆出一份看似完整的内容，而是交付能够直接使用、继续修改并清楚验收的结果。

什么时候使用

• 项目需要鲜明、直接、工业或档案感的界面，而不是柔和消费品风格。
• 用户需要设计具有强网格、机械排版、硬边界和功能暴露感的粗野主义网页与数据界面。
• 任务需要同时控制刚性网格与极端字号对比、有限功能色、硬边框和信息密度。

如果产品需要温和亲近感时只借用网格与排版，不强行套用全部风格，先处理前置条件，不要直接假装任务已经完成。

开始前需要什么

优先收集：

1. 产品目标、用户任务与页面范围 2. 代码仓库、技术栈和现有组件 3. 品牌资料、参考方向与禁用模式 4. 响应式、可访问性、性能和测试约束 5. 产品内容、数据类型和主要交互 6. 允许的粗糙程度、品牌色与目标设备

信息不必一次问完。先检查用户已经提供的材料，只追问会明显改变结果的问题。

执行步骤

1. 判断风格适配

确认产品内容能支撑直接、机械和高对比表达。

2. 建立结构网格

使用明确分区、粗边界、编号和对齐组织信息。

3. 设计排版层级

用极大标题、紧凑数据和等宽细节形成对比。

4. 控制颜色与质感

保持少量功能色，纹理只用于增强主题。

5. 实现交互状态

让按钮、表格、筛选和反馈保持直接清楚。

6. 反模板检查

删除无关圆角、渐变、柔影和装饰性玻璃效果。

输出格式

至少交付以下内容：

• **视觉规范**：网格、字体、颜色、边界和质感规则
• **界面实现**：可运行的页面与响应式组件
• **风格检查**：保留项、禁用项和可用性验证

所有文件使用能说明内容和版本的名称。若任务包含执行动作，还要记录执行状态、验证结果和可继续处理的材料。

完整示例

一个安全事件仪表盘使用硬边分区、事件编号和高对比告警色；严重信息醒目，但表格仍保持稳定列宽与键盘操作。

合理处理顺序：

1. 判断风格适配 2. 建立结构网格 3. 设计排版层级 4. 控制颜色与质感 5. 实现交互状态 6. 反模板检查

交付时应重点展示视觉规范、界面实现、风格检查，并说明尚未验证的部分。

质量检查清单

• [ ] 核心用户任务比修改前更容易发现和完成
• [ ] 组件、字体、颜色和间距形成一致系统
• [ ] 手机、平板、桌面和关键交互状态均已检查
• [ ] 功能、性能、SEO 和可访问性没有意外回退
• [ ] 强烈风格没有降低正文与数据可读性
• [ ] 装饰性噪点和退化效果不会影响性能与对比度

信息不足时怎么处理

• 不能运行项目时只做静态审计，并明确未验证项目。
• 需求冲突时优先保护核心任务和现有业务功能。
• 产品需要温和亲近感时只借用网格与排版，不强行套用全部风格。