gabrielobholz-corner-smoothing

Name: gabrielobholz-corner-smoothing
Author: gabrielobholz

github.com/gabrielobholz设计与 UI2147 次安装18 周前更新

关于 gabrielobholz-corner-smoothing

gabrielobholz-corner-smoothing 是一项用于生成 Apple／iOS 风格平滑圆角的设计技能，面向实现相关形状的开发者。它采用路径几何而非单纯增大 CSS 圆角，并说明半径约束、布局稳定和路径动画。

复制下面的命令，在终端中运行。

$npx skills add https://github.com/gabrielobholz/corner-smoothing-skill --skill gabrielobholz-corner-smoothing

安装后在 Claude Code 中输入/gabrielobholz-corner-smoothing确认已加载。

附带文件agents/openai.yamlreferences/implementation.md

当设计需要 Apple/iOS 风格的圆角平滑效果时，尤其是常见的 Figma 圆角平滑度 60% 效果，请使用基于路径的几何形状。仅靠 CSS border-radius 无法表达这种形状。

需求	使用方式
DOM/SVG 矩形	根据宽度、高度、半径和平滑度生成 `<path d="...">`
纯 CSS 组件	可以接受时使用 `clip-path: path("...")`，否则使用内联 SVG
Canvas/WebGL	使用相同的超椭圆采样点作为多边形/路径
与 Figma 效果一致	将 60% 作为 Apple/iOS 风格的目标值
普通圆角	使用 `smoothing: 0`

可复制粘贴的代码请参阅 implementation.md。

增大 border-radius 会改变半径，而不是圆角过渡效果。Apple 风格的平滑效果会保持半径不变，同时平缓直边与圆角之间的过渡。

使用 SVG 路径数据、clip-path: path(...)、Canvas Path2D 或框架专用的矢量路径。这可以避免布局技巧、嵌套蒙版、伪元素和异常边缘情况。

始终将半径限制为 min(width, height) / 2。这样可以防止组件变小或调整响应式布局时路径发生自相交。

当用户要求 Apple/iOS 风格的圆角但未指定其他数值时，请使用 smoothing: 60。普通圆形 border-radius 使用 0%，只有需要最大程度的风格化效果时才使用 100%。

平滑路径只应影响绘制/裁剪。为平滑度添加动画时，不要更改元素的宽度、高度、内边距或布局尺寸。

为平滑度添加动画时，保持 width、height 和 radius 不变，只更新生成的路径。如果还要为标签或数字添加动画，请使用固定尺寸的容器和等宽数字。

错误	修正方法
使用 `border-radius: 52px` 并称之为平滑效果	生成平滑路径
半径大于方框的一半	限制半径范围
平滑动画期间布局发生变化	保持布局不变，只更新路径
使用一次性的路径字符串	使用可重复使用的函数，并传入 `radius` 和 `smoothing`
默认使用 100%	Apple/iOS 风格使用 60%
使用会模糊边缘的 CSS 蒙版	优先使用 SVG 路径或清晰的矢量裁剪

支持 Markdown