メニュー
Use when adding shadows, working out elevation, making elements feel raised or inset, designing flat UIs with subtle depth, or layering components for visual interest. Covers light-from-above, shadow elevation systems, two-part shadows (direct + ambient), depth in flat designs via lightness, and overlapping elements to create layers.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when defining a color palette, picking shades, fixing washed-out colors, choosing greys, hitting accessibility contrast, or coloring data visualizations. Covers HSL over hex, palette breadth (~10 colors × 5–10 shades), defining shades upfront, hue-rotation tricks for brightness, warm/cool greys, accessible contrast, and not relying on color alone.
Use when a UI is functionally complete but feels generic or unfinished — needs polish before shipping. Covers superchargeable defaults, accent borders, decorated backgrounds, empty-state-as-onboarding, fewer borders, and breaking out of conventional component shapes.
Use when a UI feels noisy, when nothing stands out, when buttons/nav/sections all compete for attention, or when you need to decide which element is primary vs secondary vs tertiary. Covers emphasis through weight and color (not just size), the grey-on-color trap, de-emphasizing competitors, label minimization, weight/contrast counterbalance, and action hierarchy.
Use when working with photos, icons, screenshots, or user-uploaded images. Covers picking quality photography, getting consistent text contrast over hero images, respecting an image's intended size (don't scale icons up, don't scale screenshots down), and defending layouts against unpredictable user-uploaded content.
Use when a layout feels cramped or arbitrary, when whitespace is being added by guesswork, when grids are forcing awkward sizes, when content groups feel ambiguous (which label belongs to which input), or when every screen size needs different magic numbers. Covers spacing scales, max-widths, grid escape hatches, mobile-first sizing, and the "more around than within" rule.
Use when starting a new UI, page, screen, or feature from scratch — design real features before chrome, work in low fidelity, ship the smallest version, pick a deliberate personality, and design from constrained systems instead of an open palette.
| name | depth |
| description | Use when adding shadows, working out elevation, making elements feel raised or inset, designing flat UIs with subtle depth, or layering components for visual interest. Covers light-from-above, shadow elevation systems, two-part shadows (direct + ambient), depth in flat designs via lightness, and overlapping elements to create layers. |
Depth in UI is a simulation of physical light. Every cue should be consistent with one mental model: light coming from above. When elements feel layered, the eye understands relative importance without you saying anything.
1. Light comes from above. Every depth cue derives from this:
To make a button feel raised:
box-shadow: 0 1px 3px rgba(0,0,0,0.2)).To make an input feel inset:
Hand-pick the lighter color — overlaying semi-transparent white desaturates the underlying color.
2. Shadows convey elevation, not just presence. Position elements on a virtual z-axis: more elevation → larger and softer shadow. The closer something feels to the user, the more their eye is drawn to it.
A working 5-step shadow system:
| Use | Shadow |
|---|---|
| Slight raise (button, raised card) | small offset, tight blur |
| Floating (dropdown, popover) | medium offset, medium blur |
| Lifted (sticky bar, tooltip) | larger offset, larger blur |
| Modal | large offset, large blur |
| Highest (drag preview) | very large offset, very soft blur |
Use shadow change as interaction feedback: drag-elevates (bigger shadow), click-flattens (smaller or none).
3. Real shadows have two parts. Inspect any well-crafted shadow on the web and you'll see two box-shadow layers, not one:
Combining them gives you a soft falloff with crisp edges:
box-shadow:
0 4px 6px rgba(0, 0, 0, 0.07),
0 5px 15px rgba(0, 0, 0, 0.1);
The ambient (tighter) shadow shrinks toward zero as elevation rises — a high-floating modal has almost no contact shadow.
4. Even flat designs can show depth. Without shadows:
Or use a solid (no-blur) shadow with vertical offset — keeps the flat aesthetic but suggests a small lift.
5. Overlap to create layers. One of the most effective ways to feel "designed":
For overlapping images that risk visual clash (matching background colors bleeding into each other), use one of:
0 1px 3px rgba(0,0,0,0.2).0 4px 6px rgba(0,0,0,0.1).0 15px 35px rgba(0,0,0,0.2).Heuristics distilled from Refactoring UI by Adam Wathan & Steve Schoger (https://refactoringui.com). Independent skill package; not affiliated with or endorsed by the authors.