Skip to content
Development
Command

/quieter

Tone down visual noise — lowers variance and motion, simplifies layout and color weight, keeps hierarchy clear. Use when the UI feels loud, busy, or over-designed, or when the user says "quieter", "more restrained", "simpler", or "tone it down".

From plugin
ui-craft
45925 skills2 agents25 commands1 hook
+1
> /plugin marketplace add educlopez/ui-craft
> /plugin install ui-craft@ui-craft

Command definition

quieter.md
description: Tone down visual noise — lowers variance and motion, simplifies layout and color weight, keeps hierarchy clear. Use when the UI feels loud, busy, or over-designed, or when the user says "quieter", "more restrained", "simpler", or "tone it down".
argument-hint: "[file or component path]"

Make the UI at `$ARGUMENTS` quieter. Load the `ui-craft` skill and read `references/craft-intent.md`.

**Reduce amplitude without gutting hierarchy.** Calm ≠ boring.

**Apply in order (edit code directly):**

1. **Declare an updated Craft Read** — one line: what softened. 2. **Lower DESIGN_VARIANCE** by −1–2 (floor 2). Simplify asymmetric breaks; return to clearer grid rhythm where layout was experimental. 3. **Lower MOTION_INTENSITY** by −1–2 (floor 2). Remove scroll reveals and stagger; keep hover/focus only. 4. **Visual weight** — compress display sizes one step (e.g. 56→48px); reduce shadow depth to hairline or ambient-only; fewer bordered containers. 5. **Color** — pull accent placements toward the 3 minimum; neutralize decorative tints; no new hues. 6. **Cut decorative motion** — idle animations, parallax, floating elements with no job.

**Preserve:** primary hierarchy, one CTA level, accessibility, states, signature detail only if it carries meaning (else simplify it).

**Overlap:** for structural cuts (sections, copy), also apply `/distill` logic. For color strategy, see `/colorize`.

**Output:** edit code. Print Review Format table. End with the updated Craft Read line.

**Next step:** `/critique` — confirm restraint did not flatten the hierarchy (rung 1).

Read more
@educlopez
Ships withui-craft

Ship designer-grade UI by default. A design engineering system for AI coding agents — install it as a skill or as the ui-craft CLI, and your agent starts designing like it has taste. Ask for a dashboard, get one you'd put in production.

45930 skills2 agents1 MCP
Get the whole plugin

Stars on GitHub

Momentum

stars in total
459
Star history of educlopez/ui-craft on GitHub, a chart by star-history.com

Other commands on ui-craft.

adapt

adapt

Command

Responsive layout pass covering breakpoints, touch targets, safe areas, and fluid type. Use when the UI has layout or touch…

@educlopez@educlopezInstall Command
animate

animate

Command

Motion design pass — adds purposeful animations or removes excessive ones, respecting MOTION_INTENSITY and the project's…

@educlopez@educlopezInstall Command
audit

audit

Command

Technical UI audit — a11y, performance, responsive. Produces a prioritized findings table.

@educlopez@educlopezInstall Command
bolder

bolder

Command

Amplify personality — raises layout variance and motion, strengthens typography and one signature detail, without slop. Use when…

@educlopez@educlopezInstall Command
brief

brief

Command

Write or update the project's durable design brief at .ui-craft/brief.md.

@educlopez@educlopezInstall Command
clarify

clarify

Command

UX copy review across buttons, errors, empty states, and form hints — critiques by default, applies only on request. Use when…

@educlopez@educlopezInstall Command

More commands from other plugins.

build
Auto-invoked

build

Command

Implement tasks incrementally — build, test, verify, commit. Add "auto" to run the whole plan in one approved pass.

@addyosmani@addyosmaniInstall Command