CSS Classes from HTML：AI辅助的VS Code扩展，从HTML自动生成CSS并与Figma无缝集成

CSS Classes from HTML是一款VS Code扩展，利用AI技术从HTML自动生成CSS类，并支持与Figma设计稿无缝集成，解决前端开发中CSS编写耗时、命名困难、设计还原繁琐等问题，显著提升开发效率。

现代前端开发存在四大效率问题：1. 重复劳动：HTML与CSS文件来回切换手动创建类名和样式；2. 命名困难：语义清晰且不冲突的类名需经验积累；3. 设计稿还原难：手动测量Figma尺寸、提取颜色字体易出错；4. 响应式适配：编写媒体查询重复工作量大。该扩展正是为解决这些痛点而生。

三种生成模式

1. 最小模式：适合原型开发/学习，生成基础CSS类，简洁易修改；
2. 最大模式：含完整Figma集成，导入设计令牌（颜色、字体、间距等）生成精确匹配的CSS规则；
3. 生产模式：压缩优化CSS，移除未使用规则，合并重复声明。

Figma集成流程

1. 获取Figma个人访问令牌；
2. 连接Figma文件URL，解析画布/图层；
3. 选择导入颜色、字体、间距、组件样式；
4. 自动生成CSS自定义变量（如--color-primary）确保设计与代码一致性。

项目感谢Anthropic Claude AI的支持，其可能参与：

• 代码架构设计与API设计建议；
• Figma API集成指导；
• CSS生成逻辑优化；
• 多语言文档翻译（乌、英、德）；
• 用户指南与API文档编写。 这种"AI辅助开发AI工具"模式体现了AI在软件开发全生命周期的渗透。

安装方式

1. VS Code Marketplace：搜索扩展或运行code --install-extension vutov-mykola.css-classes-from-html；
2. GitHub Releases：下载.vsix文件手动安装；
3. 源码构建：克隆仓库后npm install，vsce package生成安装包。

使用流程

1. 打开HTML文件→打开命令面板→选择生成模式；
2. 最大模式需输入Figma令牌和文件URL→选择导入内容→自动生成CSS。

配置选项

支持includeReset（CSS reset）、includeComments（注释）、optimizeCSS（优化）、generateResponsive（响应式）等设置。

适合场景：

• 设计驱动开发：快速将Figma稿转为网页；
• 组件库构建：批量生成组件基础样式；
• 原型迭代：同步设计变更到代码；
• 团队协作：统一设计令牌减少沟通成本；
• 学习实践：前端初学者学习CSS最佳实践。

使用需注意：

• 网络依赖：Figma集成需联网和有效令牌；
• 设计稿质量：生成结果依赖Figma结构与命名规范；
• 定制化需求：自动生成CSS可能需手动调整；
• 复杂布局限制：高度自定义布局的响应式规则需人工优化。

CSS Classes from HTML自动化重复性工作，让开发者专注于架构与交互设计。Figma集成弥合设计与开发鸿沟，推进"设计即代码"愿景。随着AI进步，期待更多智能工具提升软件开发效率与质量。