# Global Figma Bootstrap HTML
> Convert Figma designs into production-ready responsive HTML5 and Bootstrap pages. Use when Codex is asked to implement, recreate, or update a Figma design as static HTML/CSS using Bootstrap, especially when it must follow an existing project's HTML structure, style.css conventions, local images folder, SEO metadata, accessibility requirements, and desktop/tablet/mobile responsive behavior.
- Skill: `designteamdev/global-figma-bootstrap-html` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add designteamdev/global-figma-bootstrap-html`
- Raw SKILL.md: https://api.skillmd.com/api/skills/designteamdev/global-figma-bootstrap-html/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: designteamdev (https://skillmd.com/u/designteamdev)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/designteamdev/global-figma-bootstrap-html
---
# Global Figma Bootstrap HTML
## Core Workflow
1. Review project files before writing code:
- Existing HTML files for structure, naming convention, section hierarchy, comments, and reusable patterns.
- Existing Bootstrap implementation.
- Existing `style.css` conventions.
- Figma design sections, content order, typography, spacing, colors, imagery, and responsive behavior.
- Existing local assets, images, icons, and content.
2. Convert the Figma design into semantic HTML5 + Bootstrap:
- Follow the existing HTML file structure exactly.
- Keep the content hierarchy and section order identical to the Figma design.
- Maintain content consistency throughout the page.
- Do not change content unless required for valid, accessible HTML.
- Reuse existing section structures when similar sections already exist.
- Use common section spacing first. If a section needs different padding, add an extra class and override that padding.
- Use anchor tags for links and button-like links: ``. Do not use `