菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
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 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.
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 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 | imagery |
| description | 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. |
Images either elevate a UI or destroy it. Treat photos as first-class assets (high-quality only), respect the size each image was drawn for, and don't trust user uploads to be reasonable.
1. Use professional or high-quality stock; never placeholders-then-snapshots. Bad photos drag down everything else, even if the layout, type, and color are perfect. Two viable paths:
Don't design with stand-in images planning to "swap in real ones later" — designs assembled around bad photos get re-broken when good photos arrive.
2. Text over photos needs consistent contrast. Photos are dynamic — bright in some regions, dark in others. White text becomes invisible in light areas; dark text disappears in dark areas. The fix is to reduce the photo's range so contrast becomes uniform. Pick from these techniques (combine if needed):
rgba(0,0,0,0.55)) tones down light areas; a white overlay does the opposite. Simplest fix.multiply blend mode. Useful when you also want the image to integrate with the palette.3. Every image has an intended size; respect it both ways.
4. User-uploaded content is hostile by default. You don't control aspect ratio, color, or quality. Two protections to apply:
background-size: cover) inside fixed-size containers. Crop the rest. Avatars, thumbnails, hero banners — any place layout matters.box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1)) or a semi-transparent inner border. The eye reads it as a defined edge without color conflict.rgba(0,0,0,0.55) for white text, rgba(255,255,255,0.55) for dark text.background-size: cover.inset 0 0 0 1px rgba(0,0,0,0.1), not a hard border.Heuristics distilled from Refactoring UI by Adam Wathan & Steve Schoger (https://refactoringui.com). Independent skill package; not affiliated with or endorsed by the authors.