UI to Frontend Skill

When implementing UI designs into front-end code, follow these steps:

Build checklist

1. Design accuracy: Match spacing, layout, fonts, colors, radius, borders, shadows, and hierarchy exactly.
2. Component architecture: Split the UI into reusable components (Button, Card, Badge, Section) with clean props.
3. Responsiveness: Ensure the UI adapts correctly for mobile, tablet, and desktop without overflow or broken alignment.
4. States & motion: Add hover, focus, active, disabled, loading states, plus transitions/animations if the design implies them.
5. Integration safety: Do not modify global CSS, theme files, or shared tokens unless explicitly required. Keep styles scoped.
6. Accessibility: Use semantic HTML, keyboard support, visible focus states, and ARIA where needed.
7. Performance: Avoid layout shifts, heavy effects, unnecessary wrappers, and repeated rendering.

Implementation workflow

• Identify the layout system first (grid/flex, container width, spacing scale)
• Extract or infer design tokens (font, colors, spacing, radius, shadows)
• Build the base structure first, then refine visuals to pixel-perfect
• Add responsive rules and test for small screens
• Add interactions and UI states last
• Keep code readable, consistent, and easy to integrate

Output requirements

• Start with a short component plan (what files/components will be created)
• Provide complete, ready-to-paste code (not fragments)
• Use the exact stack the user requests (React/Next/Vue/HTML/Flutter, Tailwind/CSS Modules/etc.)
• If assets are missing, use placeholders and specify expected size/format
• If anything is unclear, make the best assumption and list it at the end