Less is more #

Give the screen to the user’s main work and hide the rest. AI models default to bloated interfaces because they try to look thorough by showing every control, setting, badge, and caption at once. When you try to do everything on one screen, you do everything in a mediocre way.

Focus on what matters and do the important things well. Every extra button, label, and subtitle steals attention from the main task.

1. Use the inverted pyramid to find what matters #

Before writing layout code, ask: “What’s the user here to see, create, or do?”

• In a game design tool, the game description is the main thing.
• In an avatar builder, the avatar is the main thing.
• In a paint or code studio, the canvas is the main thing.

Order the screen with the Inverted Pyramid:

1. Forefront: Give 80% or more of the screen to the main subject and the single primary action.
2. Edges: Place secondary actions around the edges as compact icons that stay out of the way.
3. Hidden menu: Tuck all settings, presets, and export options inside a menu or popover. Settings support the work; they’re never the main event.

For deeper hierarchy rules, load the optional inverted-pyramid skill via kungfu load inverted-pyramid. You can also install it with npx skills add danicat/skills --skill inverted-pyramid -y.

2. Replace text buttons with icons and hover hints #

Not every button needs a visible text label. Putting words on every action turns a clean toolbar into a wall of text like [Copy Code] [Download File] [Open Settings] [Delete].

• Use Material Symbols ↗ such as settings, tune, content_copy, download, delete, and refresh for toolbar and card actions.
• Give every icon button an aria-label and a hover hint with popover="hint" or title. The label appears only when the user points at the button.
• Save visible text for the single primary button on the screen, kept to 1 or 2 words like Generate, Save, or Run.

3. Hide settings in a menu, never in a modal #

Details and settings should surface only when needed. Never dump sliders and dropdowns onto the main workspace, and never trap the user in a 1998-style modal dialog just to tweak a setting or view metadata.

• Put options behind one settings gear or tune sliders icon button that opens a light-dismiss popover="auto" menu. Clicking outside closes it right away.
• Anchor the popover to its button with anchor-name, position-anchor, and margin: 0 so it drops down from the toolbar instead of centering on the screen.
• Group rare options inside <details> and <summary> tags within the settings menu so the default view stays short.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
<style>
  .icon-btn { anchor-name: --config-btn; }
  #config-menu, #config-tip {
    position-anchor: --config-btn;
    position-area: block-end span-inline-start;
    position-try-fallbacks: flip-block, flip-inline;
    inset: auto;
    margin: 0;
  }
</style>

<!-- 1. Forefront: The avatar and primary prompt take 80%+ of the screen -->
<main class="studio">
  <header class="toolbar">
    <h1>Avatar Studio</h1>
    <!-- 2. Edges: Icon-only Material button + hover hint -->
    <button type="button" class="icon-btn"
            commandfor="config-menu" command="toggle-popover"
            interestfor="config-tip" aria-label="Settings">
      <span class="material-symbols-outlined" aria-hidden="true">tune</span>
    </button>
    <div id="config-tip" popover="hint">Settings</div>
  </header>

  <figure class="avatar-stage">
    <img src="avatar.webp" alt="Generated character avatar" width="512" height="512">
  </figure>

  <form class="prompt-bar">
    <input type="text" placeholder="Describe your avatar..." aria-label="Avatar prompt">
    <button type="submit">Generate</button>
  </form>

  <!-- 3. Hidden menu: Settings live in a light-dismiss popover -->
  <aside id="config-menu" popover="auto">
    <label>Style <select name="style"><option>Pixel</option><option>Vector</option></select></label>
    <details>
      <summary>Advanced</summary>
      <label>Seed <input type="number" name="seed" value="42"></label>
    </details>
  </aside>
</main>

4. Cut filler subtitles and redundant labels #

AI interfaces talk too much. When a heading, value, or icon is clear on its own, stop explaining it.

5. Write plain English without bragging #

When you do write text, make every word count. As the Harvard Business Review jargon study ↗ shows, writers use big words and hype to hide self-doubt, which lowers reader trust.

• No bragging or marketing speak: Cut blazing-fast, world-class, seamless, robust, cutting-edge, and next-generation. Good work speaks for itself.
• No office jargon: Replace leverage, utilize, holistic, and synergy with use, run, and complete.
• No AI throat-clearing: Cut delve into, tapestry, landscape, and In today's fast-paced world.
• Hit clear scores: Keep Gunning Fog at 11–15 and under 12 for UI copy, Slop under 20, and Vale at 0 errors and warnings.

To audit prose and strip AI clichés, load the optional deslopify skill via kungfu load deslopify. You can also install it with npx skills add danicat/skills --skill deslopify -y.

6. Apply the subtraction test #

This philosophy applies to code, CLI tools, docs, and life. Before adding any button, subtitle, flag, or feature, ask: “What breaks if you delete this?” If nothing breaks, delete it. For deeper scope pruning, load the optional uno-reverse skill via kungfu load uno-reverse or install it with npx skills add danicat/skills --skill uno-reverse -y.

Only keep what protects the user:

• Accessibility: Keep semantic HTML, keyboard focus, strong contrast, and aria-label on every icon button.
• Loud errors: When an action fails, fail fast and show the exact error and fix.
• Pre-delivery check: Confirm the main subject gets 80% of the screen, secondary tools use icons with hover hints, settings live in a popover, and no redundant subtitles remain.