Claude Design의 handoff 패키지를 기반으로
iOS · Android · backend 세 플랫폼을 한 번에 구현하는 플러그인

<div style="display:flex;
     flex-direction:column;
     gap:20px">
  <div style="display:flex;
       justify-content:space-between">
    <span style="
      font-family:var(--font-heading);
      font-size:20px;
      color:var(--color-accent-300)">
      forest</span>
    <span style="font-size:15px">
      {{ greeting }}</span>
    <div sc-camel-on-click="{{ openSettings }}"
         style="width:40px;height:40px">
    </div>

{ "kind": "column",
  "style": { "gap": "20px" },
  "children": [
  { "kind": "row",
    "style": { "justify-content":
               "space-between" },
    "children": [
    { "kind": "text",
      "text": "Strings.Home.forest",
      "style": {
        "font-size": "20px",
        "color": "DesignTokens.Color.Accent._300" } },
    { "kind": "text", "bind": "greeting" },
    { "kind": "box",
      "on_click": "openSettings",
      "style": { "width": "40px",
                 "height": "40px" } }
    ] } ] }

VStack(alignment: .leading,
       spacing: 20) {
  HStack(alignment: .top) {
    VStack(alignment: .leading,
           spacing: 4) {
      Text(Strings.Home.forest)
        .font(Typography.heading(20))
        .foregroundStyle(Palette.accent300)
      Text(model.greeting)
        .font(Typography.body(15))
    }
    Spacer()
    Button(action: model.openSettings) {
      Circle().frame(width: 40, height: 40)
    }
  }
}

Column(
  verticalArrangement =
    Arrangement.spacedBy(20.dp)
) {
  Row(
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.Top
  ) {
    Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
      Text(text = Strings.Home.forest,
        style = Typography.heading(20.sp),
        color = Palette.accent300)
      Text(text = model.greeting,
        style = Typography.body(15.sp))
    }
    IconButton(onClick = model::openSettings) {
      Box(Modifier.size(40.dp).clip(CircleShape))
    }
  }
}

// generated by the server; never edit
public enum Strings {
  public enum Home {
    public static let chucheonMiksing = "추천 믹싱"
    public static let forest = "forest"
    public static let ibeonJuIlYeonsok = "이번 주 {streakCount}일 연속"
    public static let jeulgyeochatgi = "즐겨찾기"
  }

// generated by the server; never edit
object Strings {
  object Home {
    const val chucheonMiksing = "추천 믹싱"
    const val forest = "forest"
    const val ibeonJuIlYeonsok = "이번 주 {streakCount}일 연속"
    const val jeulgyeochatgi = "즐겨찾기"
  }