DEVELOPER HANDOFF

预览、参数、代码，
直接复制。

同一套 Figma 原始数据已转换为 Web、iOS 和 Android 实现。选择平台后复制即可交付开发。

✓ 前端可用✓ 配置可用✓ sRGB 对齐

LIVE PREVIEW4×

320 × 320 px严格使用 Figma 图像裁切坐标

<div class="avatar-ring">
  <div class="avatar-mask">
    <img src="avatar.png" alt="Assistant avatar" />
  </div>
</div>

<style>
.avatar-ring {
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  padding: 4px;
  border-radius: 999px;
  background: linear-gradient(
    260.435887deg,
    #DFD3FF 2.7063%,
    #FFFFFF 42.576%,
    #C0DBFF 102.38%
  );
  box-shadow: inset 0 4px 2px rgba(169, 167, 167, 0.08);
}

.avatar-mask {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: #FFFFFF;
}

.avatar-mask img {
  position: absolute;
  left: 1px;
  top: -3.238px;
  width: 70px;
  height: 93.333px;
}
</style>

实现说明不要额外添加 Stroke；4 pt/dp 的可见圆环来自外层渐变与 72 尺寸头像之间的差值。

COMPONENT 02 · FIGMA 3667:74755

AI Progress Ring

圆环本身使用水平线性渐变，并用独立圆帽保证首尾颜色与 Figma 一致。

LIVE PREVIEW4×

73%via AI

320 × 320 px源组件 80 × 80 · 线性渐变

<div class="ai-ring">
  <i class="track"></i>
  <i class="progress"></i>
  <i class="cap start"></i>
  <i class="cap end"></i>
  <div class="label"><strong>73%</strong><span>via AI</span></div>
</div>

<style>
.ai-ring { position: relative; width: 80px; height: 80px; }
.track {
  position: absolute; inset: 0;
  border: 6px solid #F3F4F6;
  border-radius: 50%;
  box-sizing: border-box;
}
.progress {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: linear-gradient(90deg, #64A8FF 0%, #0860FF 100%);
  -webkit-mask:
    radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0),
    conic-gradient(from 0deg, #000 0deg 295.2deg, transparent 295.2deg);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.cap { position: absolute; width: 6px; height: 6px; border-radius: 50%; }
.cap.start { left: 37px; top: 0; background: #2E78FF; }
.cap.end { left: 3.521px; top: 21.246px; background: #64A8FF; }
.label { position: absolute; left: 14px; top: 23px; width: 52px; text-align: center; }
.label strong { display: block; color: #020617; font: 500 18px/21px system-ui; }
.label span { display: block; color: #8794A6; font: 400 12px/14px system-ui; }
</style>

实现说明渐变是覆盖整个 80 × 80 圆环的水平渐变，不是沿圆周变化的 conic gradient；轨道与进度环均为 6 pt/dp。

预览、参数、代码，直接复制。

AI Progress Ring

预览、参数、代码，
直接复制。