关于 distill
distill 是 ui-craft 的设计子技能,面向希望精简界面的开发者。它以用户问题和行动为筛选标准,删减多余内容、结构与代码,同时保留无障碍支持。
主要功能
- 01按用户需求筛选内容与界面元素
- 02精简文案、结构和视觉装饰
- 03压缩视觉权重并保留层级
- 04清理未使用属性与无效代码
- 05保留无障碍功能并报告删减原因
适用场景
- 01精简内容过多的落地页
- 02减少重复卡片和竞争性行动按钮
- 03清理未使用属性、分支与调试输出
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ educlopez/ ui-craft --skill distill安装后在 Claude Code 中输入/distill确认已加载。
详细介绍
背景: 此子技能是更广泛的 ui-craft 技能的一个视角。如果也安装了 ui-craft 技能,请先阅读其 SKILL.md,了解 Discovery + Anti-Slop + Craft Test,然后应用以下特定视角。
提炼 $ARGUMENTS 处 UI 的精髓。加载 ui-craft 技能。
适用于每个区块、组件、属性和词语的测试:
这能回答用户正在提出的问题,或推动他们采取所需的操作吗?如果不能——删掉。
旋钮门控(CRAFT_LEVEL):
≤ 4→ 更大刀阔斧地删减;移除任何不能直接推动操作的内容。5-7→ 按照下方的测试进行常规删减。8+→ 保留标志性细节,即使它们不能直接推动操作——留下那个令人印象深刻、让设计独具特色的元素。
毫不留情地应用:
- 内容——大段文字 → 每个落地页区块最多保留 2-3 句话。空泛的用户评价 → 换成具体指标或删掉。包含 12 项的“功能”列表 → 选出最重要的 4 项。占位文案 → 换成真实内容或移除。
- 结构——相同的卡片网格 → 改为搭配真实视觉元素的不对称行。三个相互竞争的 CTA → 一个主要 CTA + 一个次要 CTA。面包屑 + 标题 + 副标题 + 描述 + 图标 → 只保留最关键的两项。
- 视觉元素——装饰性渐变色块 → 移除。没有实际意义的背景图案 → 移除。重复的图标 → 移除。
- 降低视觉权重——如果标题使用了 800 字重 / 72px / -0.04em 字距而显得过于醒目,就收敛一些:800 → 600,72 → 56,-0.04 → -0.02。不要去掉层级;缩小范围。将硬朗的投影替换为环境光 + 直射光(
references/modern-css.md)或 1px 边框——不要两者兼用。如果每个区块都采用全宽、高对比度设计,就让其中一些留白透气。 - 代码——未使用的属性、无用分支、注释掉的代码块、
console.log、没有关联工单的 TODO 注释——全部移除。 - Anti-Slop 重叠项——如果发现 SKILL.md 中 Anti-Slop Test 所列的内容,优先删掉。
命令重叠: 对于颜色过载(强调色过多、装饰性颜色),使用 /colorize。对于动作噪声,使用 /animate,并将 MOTION_INTENSITY ≤ 3。
输出:
- 直接编辑代码。
- 用表格说明删掉了什么以及原因:
| 删除项 | 原因 |
|---|
- 以一行 差异 结束:“之前:N 个区块 / M 个组件 / X 行。之后:……”。
防护原则:不要删掉无障碍设计功能(标签、焦点样式、错误文本、减少动态效果的回退方案)——这些始终值得保留。
下一步: /polish——删减后留下的内容值得进一步打磨(第 1 阶段)。
评论
支持 Markdown