How I cut 40 minutes of coding into 40 seconds
A free AI prompt that turns messy HTML into clean React components
If you’ve ever copied HTML into a React project, you know the pain: repetitive edits, missing props, and wasted time.
After teaching over 200 developers React, I noticed this bottleneck kept coming up, so I created a solution.
That’s when I tried a simple AI prompt I’d been experimenting with.
The result? A production-ready React component in under a minute.
When to Use This Prompt
It works best for:
UI building blocks → Navbar, Footer, Hero section, Newsletter, Cards, Lists
Reusable components → Buttons, Inputs, Tabs, Accordions, Modals
Page sections → Pricing, Features, Testimonials
For simple UI components:
This prompt handles 100% of the work.
For complex UI components:
It can get you 70-90% of the way there, and you just need to fine-tune the result.
Remember to always double-check the code ChatGPT generates, especially for more complex components.
The workflow is dead simple:
Paste the prompt into ChatGPT and tell it the component name.
Drop in your raw HTML, and the AI spits out a clean, reusable React component.
Here is the prompt:
Act as a senior React + TypeScript developer.
Your task is to convert the following HTML code into a reusable React component using TypeScript, and name the component `[ComponentName]`.
The component should:
1. Props handling
- Only add props **if necessary** (e.g., when the component can be reused in multiple contexts).
- For structural components like Navbar, Footer, Hero Section, Newsletter, etc., do not force props, keep them mostly static unless variation is needed.
- Use TypeScript type annotations for all props.
- Prefer **union types (`|`)** or **enums** for constrained values.
2. Lists & repeated elements
- If the HTML contains repeated elements (e.g., nav links, social icons, cards), refactor them into an **array of objects** and render them with `.map`.
- Ensure each list item has a **unique key**.
3. For Navigation
- Use `<Link>` from **React Router v7** by default.
- Use `<NavLink>` only if **active link styling** is needed.
4. For icons:
- Replace svg icons with **lucide-react** equivalents if possible.
- If no lucide equivalent exists, keep the original `<svg>`.
5. For Code quality
- Keep JSX clean, readable, and maintainable.
- Organize code with clear separation of concerns
- Organize repeated arrays/objects **at the top** of the file.
- Keep event/state logic simple and effective.
- Break the component into further reusable pieces **only if needed** and if they can be reused in other parts of the app.
If any specific logic is needed to handle events or states, **implement it in a simple and effective way**.
Do you understand all the requirements? If yes, confirm by replying: “I am ready, send your HTML.”
✅ Example transformation
Input HTML:
<footer>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
<div>
<a href="<https://twitter.com>">Twitter</a>
<a href="<https://github.com>">GitHub</a>
</div>
</footer>
Output React (TypeScript):
const footerLinks = [
{ label: "Home", href: "/" },
{ label: "About", href: "/about" },
{ label: "Contact", href: "/contact" },
]
const socialLinks = [
{ label: "Twitter", href: "<https://twitter.com>" },
{ label: "GitHub", href: "<https://github.com>" },
]
export const Footer: React.FC = () => {
return (
<footer>
<ul>
{footerLinks.map((link) => (
<li key={link.href}>
<a href={link.href}>{link.label}</a>
</li>
))}
</ul>
<div>
{socialLinks.map((social) => (
<a key={social.href} href={social.href}>
{social.label}
</a>
))}
</div>
</footer>
)
}
Once ChatGPT or Claude confirms, simply drop your raw HTML into the input box.
Did this prompt help you? Did it work as you expected?
✨ If you find this helpful, show some love👏 and share it with other developers!