bolder

概述

什么是 bolder？

bolder 是一项实用的界面设计技能，帮助你将安全、通用或视觉上平淡的界面转变为更具吸引力和记忆点的体验。它专注于增强视觉冲击力和个性，同时不牺牲可用性。如果你的设计过于保守、缺乏个性，或者用户反馈界面看起来普通无趣，bolder 提供了一个结构化的方法来提升你的作品。

谁适合使用 bolder？

这项技能非常适合前端开发者、React 团队和 UI/UX 设计师，他们希望：

• 摆脱通用设计模式
• 为界面增添活力、对比度和层次感
• 确保设计视觉上引人注目且保持无障碍
• 针对利益相关者关于平淡或难忘视觉的反馈做出响应

bolder 解决的问题

• 过于保守或可预测的布局
• 低对比度、扁平或静态的界面
• 缺乏品牌个性或视觉张力的设计
• 难以识别和解决界面为何显得平淡无奇的问题

使用方法

安装步骤

1. 使用 Agent Skills CLI 安装 bolder：

   npx skills add https://github.com/pbakaus/impeccable --skill bolder

2. 从 SKILL.md 文件开始，了解完整的工作流程概览。如有，查看 README.md、AGENTS.md 和 metadata.json 以获取更多背景信息。

工作流程概览

1. 必备准备
   • 调用 /frontend-design 获取基础设计原则和上下文信息。如果没有设计上下文，先运行 /teach-impeccable。
2. 评估当前状态
   • 识别设计为何显得过于保守：通用字体、基础色彩、缺乏比例、低对比度、静态元素或层次扁平。
   • 收集上下文：品牌个性、目的、受众及限制（如无障碍或品牌规范）。
3. 规划增强方案
   • 决定要增强的设计元素：对比度、比例、动效或层次。
   • 确保改动符合品牌和用户需求。
4. 增强设计
   • 在排版、色彩、布局和动效上应用更大胆的选择。
   • 变更后测试可用性和无障碍性。

适应你的项目

bolder 设计为可适配你自己的代码库和工作流程。将原则和检查表作为指导，而非逐字复制代码。该技能在 React 和现代前端环境中特别有效。

关键文件推荐阅读

• SKILL.md：主要工作流程和原则
• README.md、AGENTS.md、metadata.json：补充背景（如有）

常见问题

什么时候应该使用 bolder？

当你的界面设计被描述为平淡、通用、过于保守或缺乏个性时，使用 bolder。它在设计评审或利益相关者要求更强视觉冲击时尤其有用。

bolder 适用于 React 和现代前端技术栈吗？

是的，bolder 非常适合 React 及其他前端框架。其原则适用于任何需要提升视觉设计的 UI 代码库。

bolder 会影响可用性或无障碍吗？

bolder 强调在提升视觉冲击力的同时保持可用性。应用 bolder 建议后，请务必测试无障碍和用户体验。

哪里可以找到更多细节或示例？

打开技能目录中的 Files 选项卡，浏览完整文件树，包括参考资料和辅助脚本。建议从 SKILL.md 开始，了解核心工作流程。