WAVE
Noise-cancelling headphones¥ 899Component
You might say
Turn this repeated product area into a component so one change updates every instance.
A component is a unit that groups a reusable piece of interface with the behavior it owns.For example, a product card can be shared by the home page, search results, and saved items when all show an image, price, and purchase action. An input field can also be a component. Components divide interface responsibility; not every tiny label needs to become one.
Know first
UI Component
How one product card is shared across pages
WAVE
Noise-cancelling headphones¥ 899The same card is maintained twice.
What a component owns
Keep repeated responsibility together: A card's structure, styles, and click behavior can be maintained together, so a price format or button-label change does not require edits on three pages.
Pages compose components: A page arranges navigation, cards, and filters for its current task. The same component can receive different product data while retaining consistent interaction and appearance.
Control what components display with parameters: Components accept parameters (called Props in React) to control what they display. For example, a product card component receives product name, price, and image from the outside. When you tell AI "make this component accept a title parameter", you're describing Props.
You can say this to an AI Agent
Turn the repeated event card into a component. Use it on the home, event, and search pages while keeping each page's image, title, and state as inputs. Afterward, check that the card looks and behaves consistently on all three pages.
Learn next
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check