$ loading_
帮助你从间距、字体、阴影与交互细节入手，系统提升界面精致感。
复制安装指令，让 AI 自动完成配置 · 推荐新手
请帮我安装 askskill 上的 "make-interfaces-feel-better" 技能： 1. 下载 https://raw.githubusercontent.com/affaan-m/ECC/main/skills/make-interfaces-feel-better/SKILL.md 2. 保存为 ~/.claude/skills/make-interfaces-feel-better/SKILL.md 3. 装好后重载技能，告诉我可以用了
请审查这个注册表单界面的设计细节，重点检查间距层级、输入框高度、按钮状态、错误提示、边框与阴影是否统一，并给出可直接执行的优化建议。
一份按模块整理的界面优化清单，包含具体问题、修改建议与预期效果。
我有一个卡片列表页面，请从标题字重、正文行高、图标尺寸、卡片内边距、文本换行和悬停状态等方面，提出让界面更精致的调整建议。
一组面向视觉与交互细节的改进建议，可直接用于设计稿或前端实现。
请检查这个移动端界面的按钮、标签和图标入口是否有足够点击区域，并结合动效反馈、选中状态和禁用状态，提出提升操作体验的优化方案。
一份聚焦移动端交互精修的建议列表，帮助减少误触并提升反馈清晰度。
Use this skill for the small design-engineering details that compound into a more polished interface.
Source: salvaged from stale community PR #1659 by linus707.
For nearby nested rounded surfaces:
outer radius = inner radius + padding
If padding is large, treat layers as separate surfaces instead of forcing the math. The point is optical coherence, not formula worship.
Geometric centering is not always visual centering. Icon buttons, play triangles, arrows, stars, and asymmetric icons often need a small offset. Fix the SVG when possible; otherwise adjust with a pixel-level margin or padding change.
Use borders for separation and focus rings. Use layered shadows when a card, button, dropdown, or popover needs depth. Shadows should be transparent and subtle enough to work across backgrounds.
text-wrap: balance on headings and short titles.text-wrap: pretty on short-to-medium body text, captions, descriptions,
and list items.font-variant-numeric: tabular-nums for counters, timers, prices, tables,
and other updating numbers.On macOS, apply antialiased font smoothing at the root layout when the project does not already do so:
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Images often need a subtle inset outline so their edges do not blur into the surface.
img {
outline: 1px solid rgba(0, 0, 0, 0.1);
outline-offset: -1px;
}
@media (prefers-color-scheme: dark) {
img {
outline-color: rgba(255, 255, 255, 0.1);
}
}
Use neutral black or white alpha outlines. Do not tint image outlines with the brand palette.
Use CSS transitions for interactive state changes because they can retarget when the user changes intent mid-motion. Reserve keyframes for staged one-shot entrances or loading sequences.
Good motion defaults:
translateY, and optionally blur.scale(0.96) for tactile buttons, with a way to disable it when the
movement distracts.Never use transition: all. Specify the changed properties:
.button {
transition-property: transform, background-color, box-shadow;
transition-duration: 150ms;
transition-timing-function: ease-out;
}
Use will-change only for first-frame stutter on compositor-friendly
properties such as transform, opacity, and filter. Never use
will-change: all.
Interactive controls should have at least a 40x40px hit area, ideally 44x44px where the layout allows it. Expand with a pseudo-element when the visible icon is smaller, but do not let expanded hit areas overlap.
When reviewing a UI polish pass, report concrete changes in before/after rows:
| Principle | Before | After |
|---|---|---|
| Concentric radius | Same radius on parent and child | Parent radius accounts for padding |
| Tabular numbers | Counter shifts as digits change | Counter uses tabular-nums |
| Transition scope | transition: all | Explicit transition properties |
Include file paths and properties when they are not obvious from the snippets. Omit principles that you checked but did not change.
…
通过双评审智能体对结果进行对抗式校验，提升输出发布前的可靠性
帮助你实现与迭代界面和交互体验，完成前端集成与设计优化。