Distill

educlopez/ui-craft/.agents/skills/distill

作者 educlopezceecc8e1fb0c2befda73da996435900d6dd0c1ac無授權條款375 個星標收錄於 2026年10月9日更新於 2026年10月9日儲存庫5 週前更新

Reduction pass — cuts content, structure, visuals, and dead code that doesn't answer a user question or drive an action, respecting CRAFT_LEVEL. Use when the UI feels cluttered, has too many CTAs, walls of text, or decorative noise, or when the user says "simplify this" / "it feels too busy". Invoke when the user asks for distill on their UI, or mentions 'distill' alongside design / UI / frontend work.

僅含說明Design & Creative
AI 產生的概覽

透過刪減不服務使用者的內容、結構、視覺元素與死程式碼來精簡介面。

功能
此技能對使用者介面執行一次「精簡」處理:移除不回答使用者問題、也不推動使用者行動的內容、結構元素、裝飾性視覺與死程式碼。它直接修改程式碼,以表格報告刪除了什麼及原因,並以一行前後對比的差值(區塊數、元件數、程式碼行數)作結。刪減力度由 CRAFT_LEVEL 參數控制,並明確保留無障礙相關元素。
適用情境
適用於介面顯得雜亂、行動呼籲過多、文字成牆或裝飾噪音過多時,或使用者要求簡化設計時。它面向設計、UI 或前端工作,並會引用更廣泛的 ui-craft 技能進行探索與反套路檢查。
執行需求
不附帶指令碼,僅為指示。它需要可編輯的 UI 程式碼庫,並引用配套的 ui-craft 技能及 references/modern-css.md 等參考檔案,以及 CRAFT_LEVEL 設定。
<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->

Context: this sub-skill is one lens of the broader ui-craft skill. If the ui-craft skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.

Distill the UI at $ARGUMENTS to its essence. Load the ui-craft skill.

The test for every section, component, prop, and word:

Does this answer a question the user is asking or drive an action they need to take? If not — cut it.

Knob gating (CRAFT_LEVEL):

  • ≤ 4 → be more aggressive with cuts; strip anything that doesn't directly drive action.
  • 5-7 → standard cuts per the test below.
  • 8+ → preserve signature details even if they don't directly drive action — the one memorable element that makes this feel designed stays.

Apply ruthlessly:

  1. Content — walls of text → 2-3 sentences max per landing section. Vague testimonials → specific metrics or cut. "Features" lists with 12 items → pick the 4 that matter. Placeholder copy → real or removed.
  2. Structure — identical card grids → asymmetric rows with real visuals. Three competing CTAs → one primary + one secondary. Breadcrumbs + title + subtitle + description + icon → pick the two that are load-bearing.
  3. Visuals — decorative gradient blobs → gone. Background patterns that don't carry meaning → gone. Duplicate iconography → gone.
  4. Visual weight reduction — if headings are shouting at weight 800 / 72px / tracking -0.04em, compress: 800 → 600, 72 → 56, -0.04 → -0.02. Don't remove hierarchy; tighten the range. Replace hard drop shadows with ambient + direct (references/modern-css.md) or 1px borders — never both. If every section is full-bleed and high-contrast, let some breathe.
  5. Code — unused props, dead branches, commented-out blocks, console.log, TODO notes without tickets — gone.
  6. Anti-slop overlap — if you see anything on the Anti-Slop Test (SKILL.md), cut it first.

Overlapping commands: for color overload (too many accents, decorative color), use /colorize. For motion noise, use /animate with MOTION_INTENSITY ≤ 3.

Output:

  • Edit code directly.
  • Report what was cut and why in a table:
CutWhy
  • End with a one-line delta: "Before: N sections / M components / X lines. After: …".

Guardrail: do not cut accessibility affordances (labels, focus styles, error text, reduced-motion fallbacks) — those always earn their space.

Next step: /polish — what survived the cut deserves the details (rung 1).

來源與署名

來源:educlopez/ui-craft位於.agents/skills/distill提交ceecc8e

授權條款: 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架