Convert Figma or design images to pixel-accurate Pug + Sass + TailwindCSS UI. Use when cutting a Figma design, implementing a new section from design, or for requests like cắt giao diện Figma, code lại UI theo thiết kế, bám thiết kế Figma, khớp thiết kế desktop, triển khai section từ ảnh thiết kế.
Convert a design image or Figma export into a pixel-accurate implementation using this workspace's Pug, Sass, TailwindCSS, and jQuery stack.
BEFORE writing any code, ALWAYS do all of the following:
.cursorrules in the workspace roottailwind.config.js in the workspace root.github/instructions/frontend-ui-design-system.instructions.mdview_image to understand the full layout.pug and files (see ).sassmixin or Sass @apply blocksBefore writing Pug, plan the HTML structure:
page
└── section.section-[name] ← wrap every main block in section
└── .container
└── .row ← use when flex columns are needed
├── .col(lg:w-6/12)
└── .col(lg:w-6/12)
Rules:
section.section-[name] naming applies inside <main> only (not header/footer)div(class="...") not div.class-name for Tailwind utilitiesh1 per page, h2 for section titles, h3 for cardsUse project tokens from tailwind.config.js (not arbitrary values) wherever possible.
Consult token-mapping.md for spacing, font-size, color, and breakpoint references.
Key rules:
mt-10 (= 40px), p-6 (= 24px)text-2xl (= 24px), text-base (= 16px)rem: prefix: rem:text-[18px] not text-[18px]lg:, xl:, 2xl: for desktop layoutsection.section-hero
.container
.row
.col(class="lg:w-7/12")
h1.section-hero__title Tiêu đề chính
p.section-hero__desc Mô tả nội dung
a.btn(href="#") Xem thêm
.col(class="lg:w-5/12")
+PugImg()
Rules:
+PugImg() mixin for ALL images — never hardcode img tags with pathsdiv.row > div.col pattern for flex column layoutsclass="" attribute.section-hero
@apply py-20 bg-white
&__title
@apply text-3xl font-bold text-gray-900 mb-6
&__desc
@apply text-base text-gray-600 mb-8
Rules:
.section-hero__title, .section-hero__desc@apply for all Tailwind utilities inside Sass blocks.pug file in src/components/[section-name]/src/components/_core/index.sass if it's a new componentsrc/js/main.jssrc/js/swiper.js$()) syntax$(document).ready() or $(window).on('load', ...)Compare the rendered output to the design image:
@apply tokens.row
each item in [1,2,3]
.col(class="lg:w-4/12")
.card-item
+PugImg()
h3.card-item__title Tiêu đề
p.card-item__desc Mô tả
section.section-intro(style="background-image: url(...)")
.container
h2.section-intro__title ...
.section-intro
@apply relative bg-cover bg-center
// use tailwind class, not hardcoded CSS
.swiper-wrapper > .swiper-slidesrc/js/swiper.js using new Swiper()