# Design UI With Restraint

> Design or improve websites, apps, dashboards, presentations, and interactive frontends with clear structure, useful interface elements, accurate visuals, and polished interactions.

- Skill: `wahnah/design-ui-with-restraint` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add wahnah/design-ui-with-restraint`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wahnah/design-ui-with-restraint/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: wahnah (https://skillmd.com/u/wahnah)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/wahnah/design-ui-with-restraint

---


# Design clear interfaces

## Structure and hierarchy

- Build the layout around what the user needs to understand or do.
- Give each page, section, or card one clear title.
- Add headings, labels, badges, numbers, and descriptions only when they provide useful information.
- Use cards, navigation, buttons, and other familiar patterns when they suit the content, not by default.
- Keep implementation notes, demo-data disclaimers, and internal explanations out of the interface unless they matter to the user.

## Visuals and interaction

- Match the visual style to the project and its audience.
- Make charts, diagrams, images, and animations clearly reflect the underlying content.
- Keep spacing, alignment, typography, image sizes, and visual groupings consistent.
- Make interactions clear, useful, and predictable.
- Check the rendered result for visual errors, awkward motion, and responsive layout problems.

## Editing

- Change only what the request calls for and preserve the rest.
- When an element adds nothing, remove it. When it helps, keep it.

## Examples

- Remove `Schedule` above a card already titled `Calendar`.
- Remove decorative `01`, `02`, `03` numbering when the order does not matter.
- Place related chart items together and use matching colors for the same group.