用途：该技能把 Figma 设计规格转为 Bitwarden Clients monorepo 内的 Angular 组件，并要求输出在视觉上匹配设计、同时遵循代码库既有规范。
主要流程与能力： 一、提取设计。通过 Figma MCP 的 get_design_context 获取设计，从 URL 中提取 fileKey 与 nodeId（node-id 中的 - 需转成 :），并传入 clientFrameworks: "angular" 与 clientLanguages: "typescript,html,css"。返回的 React+Tailwind 代码仅作结构参考，需完全转换为 Angular。 二、探索代码库。写代码前先了解目标位置约定：查看同目录 2–3 个兄弟组件的文件命名、模块结构、barrel 导出、是否 standalone；搜索可复用组件；阅读 tailwind.config 确定前缀（常见 tw-）与设计令牌；参考兄弟故事的 Storybook 结构、moduleMetadata、I18nMockService、argTypes；找到 I18nPipe 导入路径与语言消息文件。 三、映射设计令牌。将 Figma 的十六进制颜色、px 尺寸等原始 CSS 值映射到语义令牌，禁止直接使用原始 hex；无精确匹配时取最接近令牌并说明差异。 四、制定计划。确定 selector 前缀、基于 signal 的 input()/output()、ng-content 插槽、复用的既有组件、i18n key 与无障碍要点，先给用户确认再写文件。 五、实现。按探索到的模式创建组件 TS、模板 HTML、barrel index.ts、Storybook stories 及必要单测。约定包括：始终使用 ChangeDetectionStrategy.OnPush；signal 输入输出；内部状态用 signal() 与 viewChild()；模板使用 @if/@for/@switch，避免 ngClass/ngStyle；Tailwind 类带库前缀；所有用户可见字符串经 I18nPipe；复用 bit-label、bitButton、bit-hint 等；不使用 TypeScript enum，改用 Object.freeze 常量加同名类型别名；不使用 NgModules，新组件一律 standalone；文件上传使用 label for 指向隐藏 input，避免程序化 .click()。 六、验证。用 Playwright MCP 打开 Storybook iframe 地址，截图与 Figma 设计对照，测试交互行为；若 Storybook 未运行或 Playwright 不可用，提示用户手动验证。 七、迭代。将截图与原始 Figma 截图一并呈现，按需调整令牌、hover/focus 状态、无障碍与 i18n 文案。
限制：资料未提供该技能的安装方式、依赖环境、收费或平台信息，也暂未提供适用范围之外的细节。