mcpField
B
bolder

bolder

github.com/educlopez设计与 UI407464 次安装2 周前更新
代码仓库

关于 bolder

bolder 是 ui-craft 的一项技能,通过布局、动效、字体、强调色和标志性细节增强界面的表现力。它指导直接修改代码,同时保留层级并尊重减少动态效果的偏好。

主要功能

  1. 01提高布局变化幅度
  2. 02为焦点添加有目的的动效
  3. 03强化展示字体
  4. 04突出单一强调色
  5. 05添加或调整标志性细节

适用场景

  1. 01让产品界面更具辨识度
  2. 02强化营销页面的主视觉构图
  3. 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。

**这是增强表现力,不是装饰。**提升设计的编辑自信,同时保持反低质设计的简洁。

按顺序应用(直接编辑代码):

  1. 声明更新后的工艺评估——用一行说明改动(差异度、动效、标志性设计)。
  2. 将 DESIGN_VARIANCE 提高 +1–2(上限为 10)。产品界面:采用不对称偏移、强化指标层级,或在应用外壳中打造展示亮点。营销页面:采用更有力的主视觉构图、打破区块节奏,或调整字体比例——参照 references/craft-intent.md 中的差异度表。
  3. 若 MOTION_INTENSITY 低于 8,则提高 +1(上限为 10)——仅为焦点元素添加一种有目的的入场或悬停动画编排。遵循 prefers-reduced-motion。
  4. 字体排印——将展示字体的字重或字号提高一档;收紧标题字距;确保数字使用 tabular-nums。
  5. 强调色——在 3–5 个视口预算内强化焦点强调色的布置;为主卡片或 CTA 添加色调——切勿增加第二种强调色。
  6. 标志性设计——如果缺失或较弱,则添加或强化一个标志性设计亮点(见 craft-intent §3)。

**切勿添加:**紫青渐变、弹跳缓动、玻璃拟态叠层、表情符号、全大写标题、三个同等权重的图标卡片网格、彩纸碎片效果。

**参数限制:**如果差异度已达到 ≥9 或 MOTION 已达到 ≥9,则改为强化标志性设计和字体排印,不要进一步提高数值。

**输出:**编辑代码。打印评审格式表格。最后以更新后的工艺评估行收尾。

下一步:/critique——确认新增的个性没有损害层级,也没有沦为低质设计(第 1 级)。

评论

支持 Markdown