关于 bolder
bolder 是 ui-craft 的一项技能,通过布局、动效、字体、强调色和标志性细节增强界面的表现力。它指导直接修改代码,同时保留层级并尊重减少动态效果的偏好。
主要功能
- 01提高布局变化幅度
- 02为焦点添加有目的的动效
- 03强化展示字体
- 04突出单一强调色
- 05添加或调整标志性细节
适用场景
- 01让产品界面更具辨识度
- 02强化营销页面的主视觉构图
- 03为焦点元素添加有目的的动效
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ educlopez/ ui-craft --skill bolder安装后在 Claude Code 中输入/bolder确认已加载。
详细介绍
**上下文:**此子技能是更广泛的 ui-craft 技能的一个观察视角。如果也安装了 ui-craft 技能,请先阅读其 SKILL.md,了解发现、反低质设计和工艺测试,然后应用以下特定视角。
让 $ARGUMENTS 处的 UI 更大胆。加载 ui-craft 技能并阅读 references/craft-intent.md。
**这是增强表现力,不是装饰。**提升设计的编辑自信,同时保持反低质设计的简洁。
按顺序应用(直接编辑代码):
- 声明更新后的工艺评估——用一行说明改动(差异度、动效、标志性设计)。
- 将 DESIGN_VARIANCE 提高 +1–2(上限为 10)。产品界面:采用不对称偏移、强化指标层级,或在应用外壳中打造展示亮点。营销页面:采用更有力的主视觉构图、打破区块节奏,或调整字体比例——参照
references/craft-intent.md中的差异度表。 - 若 MOTION_INTENSITY 低于 8,则提高 +1(上限为 10)——仅为焦点元素添加一种有目的的入场或悬停动画编排。遵循
prefers-reduced-motion。 - 字体排印——将展示字体的字重或字号提高一档;收紧标题字距;确保数字使用
tabular-nums。 - 强调色——在 3–5 个视口预算内强化焦点强调色的布置;为主卡片或 CTA 添加色调——切勿增加第二种强调色。
- 标志性设计——如果缺失或较弱,则添加或强化一个标志性设计亮点(见 craft-intent §3)。
**切勿添加:**紫青渐变、弹跳缓动、玻璃拟态叠层、表情符号、全大写标题、三个同等权重的图标卡片网格、彩纸碎片效果。
**参数限制:**如果差异度已达到 ≥9 或 MOTION 已达到 ≥9,则改为强化标志性设计和字体排印,不要进一步提高数值。
**输出:**编辑代码。打印评审格式表格。最后以更新后的工艺评估行收尾。
下一步:/critique——确认新增的个性没有损害层级,也没有沦为低质设计(第 1 级)。
评论
支持 Markdown