What your AI can do once it's connected

Once connected, your AI gains eight new abilities from BYQ. You'll never call these by name — your AI picks the right one from what you ask — but a quick look at them helps you write better prompts. They come in four simple pairs: one ability to find something and one to grab it, repeated for each part of the library.

‍

Sections: search, then fetch

Sections are the building blocks from the BYQ library — heroes, pricing tables, feature grids, footers, and more.

• search_byq_components — searches the section library by keyword or category. It returns a shortlist of matches, each with an id, name, description, tags, and a thumbnail, so your AI (and you) can pick the right one. Categories include Hero, Pricing, Features, Footer, and more.
• get_byq_component — takes the id of a section you've found and fetches its full integration prompt: a React and Tailwind reference build, a complete design spec covering layout, colour, type, interactions and responsive behaviour, setup notes, and explicit instructions to adapt it to your project rather than paste it in.

‍

Gems: search, then fetch

Gems are small, self-contained interaction effects — magnetic buttons, marquees, scroll reveals, hover states — that you drop on top of something you've already built.

• search_byq_gems — searches the gem library by effect or trigger. Each match comes back with a name, description, category, tags, the interactions it responds to (Hover, Click, Mouse Move, Loop), a thumbnail, and whether it uses GSAP.
• get_byq_gem — fetches a chosen gem in full, ready to attach to an existing element.

Gems are mostly GSAP-driven, but a good number are pure CSS or vanilla JavaScript with no dependencies at all. Each search result says which, so your AI can avoid pulling in a library your project doesn't already have.

‍

Wireframes: search, then fetch

Wireframes are unstyled layout structures — the bones of a section without any visual design on top. Useful when you want to own the styling and only need the arrangement.

• search_byq_wireframes — searches the wireframe library by section type. Matches return with a name, description, category, tags, and a thumbnail.
• get_byq_wireframe — fetches the chosen wireframe's structure for your AI to build on.

‍

Design systems: search, then fetch

Design systems are the visual language extracted from premium templates — colors, typography, spacing, and the rules around them. They're covered in depth in the Design Systems track.

• search_byq_styles — searches curated marketplace design systems (and any you've extracted yourself). It returns each system's name, tagline, and theme mode (light or dark), so you can match the mood you're after.
• get_byq_style — fetches a full design system in the format you need: DESIGN.md for teaching an AI the whole visual language, tokens.json for raw design tokens, or theme.css / variables.css to drop straight into your project.

‍

Why find and grab are separate

Keeping the two apart lets your AI work the way you would: it looks over a few matches before settling on one, the same way you'd glance at thumbnails before clicking. Give it a loose prompt and it leans on searching; name something specific and it can go almost straight to grabbing it. Either way, what you get is pulled from the real library rather than made up.

‍

You prompt in plain language

None of this requires you to memorize tool names. A prompt like "find a testimonial section with logos, apply our dark design system, and add a magnetic hover to the CTA" naturally maps to a section search, a section fetch, a style search, a style fetch, and a gem search — your AI sequences them for you. The chapters that follow show how each workflow plays out in practice.