Global Figma Bootstrap HTML
Core Workflow
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.
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:
<a href=""></a>. Do not use <button> in place of an anchor.
Implement SEO-friendly, accessible structure:
- Use
<!DOCTYPE html> and <html lang="en">.
- Include
title, description, keywords, viewport, and canonical when applicable.
- Use semantic elements such as
header, nav, main, section, article, aside, and footer.
- Use only one
h1 per page.
- Maintain proper
h2 and h3 hierarchy.
- Add meaningful image
alt text.
- Use accessible form labels.
- Maintain proper contrast and keyboard-friendly markup.
Bootstrap Rules
- Use only Bootstrap Grid System and
container.
- Do not use Bootstrap for other purposes.
- Do not use Bootstrap utility classes.
- Avoid Bootstrap classes that contain
!important in Bootstrap CSS. Use custom classes instead.
- Desktop, tablet, and mobile responsive layouts are mandatory.
CSS Rules
- Put all custom CSS in
style.css.
- Do not use inline CSS.
- Do not use
<style> tags in HTML.
- Define colors, fonts, spacing, and reusable values as CSS variables in
:root.
- Keep CSS organized section-wise.
- Mark major sections with comments, such as:
<!-- Hero Section -->
<!-- Features Section -->
<!-- Testimonial Section -->
<!-- Footer -->
- Match the Figma design as closely as possible:
- Font family
- Font size
- Font weight
- Line height
- Letter spacing
- Text transform
- Colors
- Background colors
- Border radius
- Shadows
- Padding
- Margin
- Gap
- Section spacing
- Card spacing
- Component alignment
- Button styles
- Form styles
- Hover states
- Responsive behavior
- Avoid
vw and rem unless the user specifically asks for them.
- Avoid classes on inline text elements such as
p, span, h1, h2, h3, h4, h5, and h6; style through parent classes where practical.
- Use inline-element classes only when necessary.
- Write readable, maintainable custom CSS.
- Remove unused CSS.
- Avoid
!important; use stronger selectors or multiple classes first. Use !important only when truly necessary.
- If the same section needs different styling on different pages, create a distinct section class name.
- Keep all media queries at the end of the file.
Reusable Components
- Reuse HTML structures and CSS classes when multiple sections have similar layouts.
- Avoid duplicate code.
- Follow the project's current class naming and code pattern.
Sliders And Animation
- Use third-party CDNs for sliders, animation, and other interactive features when needed.
- Use GSAP and ScrollTrigger for section reveal animations or letter animations only when necessary.
- Use Slick Slider for regular designed sliders.
- Use Swiper for specially designed sliders.
- Use Splide.js for marquee-type sliders.
Image Handling Rules
Use only images from the project's local images folder.
Never use:
http://localhost:3845 https://... Figma image URLs Base64 images Placeholder
images Stock images from web Generated images with AI
Use this image path format everywhere:
<img src="images/about-img.png" alt="About Image" />
If the Figma design includes an image that is not already in the local images folder, stop and ask for the missing asset instead of using remote, placeholder, stock, base64, or AI-generated imagery.
Match image position, size, aspect ratio, alignment, cropping, object fit, and spacing to the Figma design.
Responsive Targets
Verify the implementation at:
- Desktop:
1920px, 1440px, 1366px, 1280px
- Tablet:
1024px, 768px
- Mobile:
575px, 480px, 360px
Ensure:
- Proper stacking
- Responsive typography
- Responsive spacing
- No layout breaking
- No horizontal scrolling
- No incoherent overlap
Output Standard
Deliver:
- Complete HTML file.
- Complete
style.css file.
- Responsive Bootstrap implementation.
- Pixel-perfect Figma matching.
- SEO-friendly structure.
- Accessible markup.
- Clean, maintainable, production-ready code.
Additional Mandatory Implementation Rules
Figma Accuracy (Highest Priority)
The final HTML implementation must match the provided Figma design as closely as possible.
Do NOT approximate layouts.
Follow exactly:
- Section order
- Content hierarchy
- Typography
- Font family
- Font size
- Font weight
- Line height
- Letter spacing
- Colors
- Spacing
- Margin
- Padding
- Grid structure
- Border radius
- Shadows
- Hover states
- Alignment
- Component sizing
- Image proportions
- Desktop and mobile behavior
The final output should visually match the Figma design with pixel-perfect accuracy.
If any design inconsistency appears between existing HTML and Figma, prioritize maintaining the existing project structure while reproducing the Figma layout as accurately as possible.
HTML & Component Rules
- Follow the existing project HTML structure and naming conventions.
- Reuse existing components whenever possible.
- Do not create unnecessary wrappers.
- Keep markup clean and semantic.
- Maintain scalable architecture.
CSS Rules
- Put all custom styles inside:
style.css
JavaScript Rules (Mandatory)
All custom JavaScript must be placed inside:
common.js
Do NOT place custom scripts inside HTML pages unless specifically required.
Requirements:
- Use Vanilla JavaScript by default.
- Use jQuery only when necessary.
- Write reusable functions.
- Validate elements before execution.
- Keep functions modular.
- Avoid duplicate event listeners.
- Use event delegation where applicable.
- Maintain clean naming conventions.
Example:
const element = document.querySelector(".selector");
if (element) {
// functionality
}
Interaction & Animation Rules
Every JavaScript interaction should feel smooth and polished.
Apply smooth behavior where appropriate:
- smooth transitions
- smooth scrolling
- fade effects
- subtle transforms
- smooth open/close states
- hover transitions
- stagger animations
- loading transitions
Preferred tools:
- CSS transitions
- GSAP
- ScrollTrigger
Avoid:
- sudden jumps
- abrupt state changes
- excessive animations
- laggy interactions
Animations should improve UX and must not reduce performance.
Functionality Rules
Implement functionality whenever required by design:
Examples:
- sliders
- tabs
- accordions
- filtering
- modals
- tooltips
- counters
- forms
- menus
- animations
- interactions
Use existing project patterns first before creating new implementations.
All functionality should feel production-ready.
Final Output Expectation
Deliver:
- Pixel-perfect HTML
- Responsive implementation
- Production-ready CSS
- Optimized JS inside common.js inside the js folder
- Smooth interactions
- Maintainable structure
- Clean reusable code
1---2name: global-figma-bootstrap-html3description: 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.4---56# Global Figma Bootstrap HTML78## Core Workflow9101. Review project files before writing code:11 - Existing HTML files for structure, naming convention, section hierarchy, comments, and reusable patterns.12 - Existing Bootstrap implementation.13 - Existing `style.css` conventions.14 - Figma design sections, content order, typography, spacing, colors, imagery, and responsive behavior.15 - Existing local assets, images, icons, and content.16172. Convert the Figma design into semantic HTML5 + Bootstrap:18 - Follow the existing HTML file structure exactly.19 - Keep the content hierarchy and section order identical to the Figma design.20 - Maintain content consistency throughout the page.21 - Do not change content unless required for valid, accessible HTML.22 - Reuse existing section structures when similar sections already exist.23 - Use common section spacing first. If a section needs different padding, add an extra class and override that padding.24 - Use anchor tags for links and button-like links: `<a href=""></a>`. Do not use `<button>` in place of an anchor.25263. Implement SEO-friendly, accessible structure:27 - Use `<!DOCTYPE html>` and `<html lang="en">`.28 - Include `title`, `description`, `keywords`, `viewport`, and `canonical` when applicable.29 - Use semantic elements such as `header`, `nav`, `main`, `section`, `article`, `aside`, and `footer`.30 - Use only one `h1` per page.31 - Maintain proper `h2` and `h3` hierarchy.32 - Add meaningful image `alt` text.33 - Use accessible form labels.34 - Maintain proper contrast and keyboard-friendly markup.3536## Bootstrap Rules3738- Use only Bootstrap Grid System and `container`.39- Do not use Bootstrap for other purposes.40- Do not use Bootstrap utility classes.41- Avoid Bootstrap classes that contain `!important` in Bootstrap CSS. Use custom classes instead.42- Desktop, tablet, and mobile responsive layouts are mandatory.4344## CSS Rules4546- Put all custom CSS in `style.css`.47- Do not use inline CSS.48- Do not use `<style>` tags in HTML.49- Define colors, fonts, spacing, and reusable values as CSS variables in `:root`.50- Keep CSS organized section-wise.51- Mark major sections with comments, such as:5253```html54<!-- Hero Section -->55<!-- Features Section -->56<!-- Testimonial Section -->57<!-- Footer -->58```5960- Match the Figma design as closely as possible:61 - Font family62 - Font size63 - Font weight64 - Line height65 - Letter spacing66 - Text transform67 - Colors68 - Background colors69 - Border radius70 - Shadows71 - Padding72 - Margin73 - Gap74 - Section spacing75 - Card spacing76 - Component alignment77 - Button styles78 - Form styles79 - Hover states80 - Responsive behavior81- Avoid `vw` and `rem` unless the user specifically asks for them.82- Avoid classes on inline text elements such as `p`, `span`, `h1`, `h2`, `h3`, `h4`, `h5`, and `h6`; style through parent classes where practical.83- Use inline-element classes only when necessary.84- Write readable, maintainable custom CSS.85- Remove unused CSS.86- Avoid `!important`; use stronger selectors or multiple classes first. Use `!important` only when truly necessary.87- If the same section needs different styling on different pages, create a distinct section class name.88- Keep all media queries at the end of the file.8990## Reusable Components9192- Reuse HTML structures and CSS classes when multiple sections have similar layouts.93- Avoid duplicate code.94- Follow the project's current class naming and code pattern.9596## Sliders And Animation9798- Use third-party CDNs for sliders, animation, and other interactive features when needed.99- Use GSAP and ScrollTrigger for section reveal animations or letter animations only when necessary.100- Use Slick Slider for regular designed sliders.101- Use Swiper for specially designed sliders.102- Use Splide.js for marquee-type sliders.103104## Image Handling Rules105106Use only images from the project's local images folder.107108Never use:109110```html111http://localhost:3845 https://... Figma image URLs Base64 images Placeholder112images Stock images from web Generated images with AI113```114115Use this image path format everywhere:116117```html118<img src="images/about-img.png" alt="About Image" />119```120121If the Figma design includes an image that is not already in the local images folder, stop and ask for the missing asset instead of using remote, placeholder, stock, base64, or AI-generated imagery.122123Match image position, size, aspect ratio, alignment, cropping, object fit, and spacing to the Figma design.124125## Responsive Targets126127Verify the implementation at:128129- Desktop: `1920px`, `1440px`, `1366px`, `1280px`130- Tablet: `1024px`, `768px`131- Mobile: `575px`, `480px`, `360px`132133Ensure:134135- Proper stacking136- Responsive typography137- Responsive spacing138- No layout breaking139- No horizontal scrolling140- No incoherent overlap141142## Output Standard143144Deliver:1451461. Complete HTML file.1472. Complete `style.css` file.1483. Responsive Bootstrap implementation.1494. Pixel-perfect Figma matching.1505. SEO-friendly structure.1516. Accessible markup.1527. Clean, maintainable, production-ready code.153154# Additional Mandatory Implementation Rules155156## Figma Accuracy (Highest Priority)157158The final HTML implementation must match the provided Figma design as closely as possible.159160Do NOT approximate layouts.161162Follow exactly:163164- Section order165- Content hierarchy166- Typography167- Font family168- Font size169- Font weight170- Line height171- Letter spacing172- Colors173- Spacing174- Margin175- Padding176- Grid structure177- Border radius178- Shadows179- Hover states180- Alignment181- Component sizing182- Image proportions183- Desktop and mobile behavior184185The final output should visually match the Figma design with pixel-perfect accuracy.186187If any design inconsistency appears between existing HTML and Figma, prioritize maintaining the existing project structure while reproducing the Figma layout as accurately as possible.188189---190191## HTML & Component Rules192193- Follow the existing project HTML structure and naming conventions.194- Reuse existing components whenever possible.195- Do not create unnecessary wrappers.196- Keep markup clean and semantic.197- Maintain scalable architecture.198199---200201## CSS Rules202203- Put all custom styles inside:204205```text206style.css207```208209- Use CSS variables for:210 - colors211 - typography212 - spacing213 - radius214 - transitions215216- Keep styles modular and section-wise.217218- Avoid duplicated CSS.219220- Keep media queries grouped at the end.221222---223224## JavaScript Rules (Mandatory)225226All custom JavaScript must be placed inside:227228```text229common.js230```231232Do NOT place custom scripts inside HTML pages unless specifically required.233234Requirements:235236- Use Vanilla JavaScript by default.237- Use jQuery only when necessary.238- Write reusable functions.239- Validate elements before execution.240- Keep functions modular.241- Avoid duplicate event listeners.242- Use event delegation where applicable.243- Maintain clean naming conventions.244245Example:246247```javascript248const element = document.querySelector(".selector");249250if (element) {251 // functionality252}253```254255---256257## Interaction & Animation Rules258259Every JavaScript interaction should feel smooth and polished.260261Apply smooth behavior where appropriate:262263- smooth transitions264- smooth scrolling265- fade effects266- subtle transforms267- smooth open/close states268- hover transitions269- stagger animations270- loading transitions271272Preferred tools:273274- CSS transitions275- GSAP276- ScrollTrigger277278Avoid:279280- sudden jumps281- abrupt state changes282- excessive animations283- laggy interactions284285Animations should improve UX and must not reduce performance.286287---288289## Functionality Rules290291Implement functionality whenever required by design:292293Examples:294295- sliders296- tabs297- accordions298- filtering299- modals300- tooltips301- counters302- forms303- menus304- animations305- interactions306307Use existing project patterns first before creating new implementations.308309All functionality should feel production-ready.310311---312313## Final Output Expectation314315Deliver:3163171. Pixel-perfect HTML3182. Responsive implementation3193. Production-ready CSS3204. Optimized JS inside common.js inside the js folder3215. Smooth interactions3226. Maintainable structure3237. Clean reusable code
designteamdev