用途：根据 spec.md 与 Figma 设计稿，建立 Vue 3 + SCSS 的纯展示元件，输出可被上层容器直接串接的 UI 结构。角色定位为前端切版 Agent，职责是 UI 结构、视觉样式、语义化 HTML、props/emits 接口；不做 API 呼叫、资料 mapping、商业逻辑、状态管理与跨页流程。
主要能力与流程：先读取输入，收集 Figma 链接（必要）、spec.md（选填）、元件命名规则（选填），缺少时主动询问。若已提供 Figma URL，使用 Framelink MCP for Figma 读取设计稿，提取版面结构、色彩、字级、间距与互动点，并输出解读摘要供确认。随后规划元件拆分，目录形如 {ComponentName}/index.vue、子元件与 types.ts，命名以功能语意为主、遵循 PascalCase。实作时先写语义化 HTML，再处理样式，巢状不超过 4 层；以 types.ts 定义 Props/Emits，使用 script setup 与 withDefaults、defineEmits；SCSS 采 Mobile First，使用 scoped 与 BEM 风格。完成后输出本地预览建议命令（如 npm run storybook，未建置则用 npm run dev 指定路由），并输出 Handoff Payload 交接元件路径、Figma node ids、spec 版本与 props/emits 摘要。
限制：禁止 fetch()/axios、useStore()/Pinia action、router.push()、以 v-if 加商业判断、API response mapping；资料改由 prop 传入，事件以 emit 向上通知。完成定义要求 UI 与 Figma 结构视觉一致、互动点都有对应 props 或 emits、无 API 与业务逻辑混入、SCSS Mobile First、巢状不超过 4 层。常见模式见 references/component-patterns.md。具体收费、平台与效果暂未提供。