用途
该技能用于将 Figma 设计稿转化为生产质量的代码，主要面向 HTML、CSS 和 React（也提及 Vue/Svelte）实现。它编码了一套从 Figma 文件读取设计并产出一致代码的心智模型，覆盖完整工作流：读取自动布局、提取设计令牌、将组件变体映射为 props、处理响应式约束，以及判断何时“像素级完美”并非正确目标。
主要能力
- 自动布局到 CSS 映射：Figma 自动布局的方向、间距、内边距、对齐方式等均有直接 CSS 对应（flex-direction、gap、padding、align-items、justify-content 等）。无自动布局的框架使用绝对 X/Y 坐标，对应 position: absolute 子元素配合 position: relative 父元素。
- 变体属性到组件 props：Figma 变体属性名直接成为 prop 名，如 Size 映射为 size、State 映射为 disabled、Type 映射为 variant、HasIcon 映射为 icon。提供 Button 组件的完整 React 接口示例。
- 设计令牌到 CSS 变量：Figma 变量（原样式）映射为 CSS 自定义属性，保持相同命名层级，区分原始令牌与语义令牌，并提供色彩与文字样式的示例代码。
- 约束到响应式行为：Left/Right/Center/Scale/Top+Bottom 等约束分别对应 left/right、margin: 0 auto、width 百分比、top/bottom 等 CSS 实现。
- 常见任务指导：包括自动布局映射、排版比例提取与转换（行高转无单位、字距百分比转 em）、组件翻译、间距与尺寸实现、响应式处理、颜色与主题提取（含深色模式）、图标与资源处理（SVG 导出转 React 组件、位图多倍图导出）。
- 反模式清单：如硬编码截图十六进制色、滥用绝对定位、忽略自动布局猜测间距、把变体属性当 CSS 类、只实现单一固定断点、未经确认直接 px 转 rem 等。
- 易错点提醒：如 Figma 固定尺寸不等于 CSS 固定值、绝对定位坐标相对于直接父框架、字距百分比需除以 100 转 em、固定尺寸与包裹内容模式需在面板中确认、阴影扩展值可为负等。
使用方式
当用户从 Figma 稿、截图或设计规范实现 UI，询问特定 Figma 属性到 CSS 的翻译，需要匹配间距/字体/颜色值，将变体转为组件 props，讨论设计令牌或设计-代码同步，需要基于约束实现响应式，或涉及像素级完美、视觉 QA、设计评审与交接流程时触发。技能激活后首次响应以 🧢 emoji 开头。首次激活时还会检查已安装的伴随技能，缺失时提示安装命令 npx skills add AbsolutelySkilled/AbsolutelySkilled --skill <name>。
适用场景
适用于设计稿到代码的实现、设计规范解读、视觉保真度匹配、设计-开发交接等场景。
限制
不适用于无 Figma 设计来源的纯 CSS 架构问题，也不适用于品牌识别、Logo 创作或原创 UI 设计工作——该技能面向实现而非创造。