CSS Classes from HTML: AI-Powered VS Code Extension for Auto-Generating CSS from HTML and Seamless Figma Integration

CSS Classes from HTML is a VS Code extension that uses AI technology to automatically generate CSS classes from HTML and supports seamless integration with Figma designs. It addresses issues like time-consuming CSS writing, difficult class naming, and tedious design restoration in front-end development, significantly improving development efficiency.

Modern front-end development faces four efficiency issues: 1. Repetitive work: Switching between HTML and CSS files to manually create class names and styles; 2. Difficult naming: Semantically clear and non-conflicting class names require experience; 3. Hard design restoration: Manual measurement of Figma dimensions and extraction of colors/fonts are error-prone; 4. Responsive adaptation: Writing media queries involves heavy repetitive work. This extension was created to address these pain points.

Three Generation Modes

1. Minimal Mode: Suitable for prototype development/learning, generates basic CSS classes, simple and easy to modify;
2. Max Mode: Includes full Figma integration, imports design tokens (colors, fonts, spacing, etc.) to generate precisely matched CSS rules;
3. Production Mode: Compresses and optimizes CSS, removes unused rules, merges duplicate declarations.

Figma Integration Flow

1. Obtain Figma personal access token;
2. Connect Figma file URL, parse canvas/layers;
3. Select to import colors, fonts, spacing, component styles;
4. Automatically generate CSS custom variables (e.g., --color-primary) to ensure consistency between design and code.

The project thanks Anthropic Claude AI for its support, which may have participated in:

• Code architecture design and API design suggestions;
• Figma API integration guidance;
• CSS generation logic optimization;
• Multilingual document translation (Ukrainian, English, German);
• User guide and API document writing. This "AI-assisted development of AI tools" model reflects AI's penetration into the entire software development lifecycle.

Installation Methods

1. VS Code Marketplace: Search for the extension or run code --install-extension vutov-mykola.css-classes-from-html;
2. GitHub Releases: Download the .vsix file and install manually;
3. Source code build: Clone the repository, then run npm install and vsce package to generate the installation package.

Usage Flow

1. Open an HTML file → Open the command palette → Select a generation mode;
2. Max Mode requires entering Figma token and file URL → Select content to import → Auto-generate CSS.

Configuration Options

Supports settings like includeReset (CSS reset), includeComments (comments), optimizeCSS (optimization), generateResponsive (responsive), etc.

Applicable scenarios:

• Design-driven development: Quickly convert Figma designs to web pages;
• Component library construction: Batch generate basic component styles;
• Prototype iteration: Sync design changes to code;
• Team collaboration: Unify design tokens to reduce communication costs;
• Learning practice: Front-end beginners learn CSS best practices.

Notes for use:

• Network dependency: Figma integration requires internet access and a valid token;
• Design quality: Generation results depend on Figma structure and naming conventions;
• Customization needs: Auto-generated CSS may require manual adjustments;
• Complex layout limitations: Responsive rules for highly customized layouts need manual optimization.

CSS Classes from HTML automates repetitive tasks, allowing developers to focus on architecture and interaction design. Figma integration bridges the gap between design and development, advancing the "design as code" vision. With AI progress, we look forward to more intelligent tools to improve software development efficiency and quality.