AI Prompts for Preline Blocks
Use source-aware AI prompts from Preline Blocks to generate UI in your app while preserving layout, assets, tokens, interactions, and responsive behavior.
What are AI Prompts?
AI Prompts are copy-ready instructions available in Preline Blocks. They give AI coding tools the source details they need to recreate a selected block inside your project without guessing from a screenshot or block title.
Each prompt is written for a specific block and describes the real source structure, layout, assets, token roles, interactions, responsive states, and final QA checks. Use it when you want an AI agent to adapt a Preline block to an existing codebase instead of pasting raw HTML only.
AI Prompts appear alongside the Preview and HTML tabs on block pages. Browse all available blocks in the Blocks library.
AI Prompts are designed to get agents as close as possible to the source block, but generated output is not guaranteed to be an exact 1:1 match. Complex layouts, plugin-backed interactions, and fine visual details work best when Preline UI, its JavaScript runtime, and any required assets or third-party plugins are already available in the destination project.
How to use AI Prompts
- Open a block page and choose the block you want to use.
- Switch to the AI Prompt tab.
- Click Copy Prompt.
- Paste the prompt into your AI coding tool, IDE, or CLI.
- Let the agent inspect your project and the exact source link in the prompt before writing to the target file or route.
- Review the generated output against the Preline preview and the prompt's QA checklist.
For better results, paste these instructions above the copied AI Prompt:
Use the Preline block AI Prompt below to add this component to the current project.
Before making changes:
- Inspect the project's framework, package manifest, theme, layout, existing components, icon library, routes, and dark-mode setup.
- Reuse existing components when they can match the referenced Preline block.
- Follow the project's current conventions without changing the block's layout, content, assets, responsive behavior, interactions, or accessibility.
- If existing dependencies cannot reproduce the required behavior, use Preline UI or the source library unless the project prohibits adding dependencies.
Implement the component in the requested file or route, then verify it against the source preview and QA checklist.
[Paste copied AI Prompt here]
What AI Prompts include
Source fidelity
Exact block scope, source partials, visible copy, data values, structure, spacing, and responsive behavior.
Token mapping
Instructions to map Preline token roles to the destination project's Tailwind, Bootstrap, or design-system tokens.
Assets and icons
Required image URLs, avatars, logos, SVG marks, ordinary icon rules, and fallback guidance when assets must be imported.
Interactions
Dropdowns, modals, tabs, carousels, editors, splitters, forms, third-party libraries, and accessibility behavior that must remain functional.
Project preflight and reuse
Checks for the destination framework, package manifest, theme, app shell, and existing components before adding new code or dependencies.
Final QA
Visual, responsive, interaction, accessibility, class, token, and asset checks to run before considering the block complete.
Best practices
Give the agent project context
Tell the agent which file, route, framework, component system, icon system, and theme tokens to use. Let it inspect existing code before implementing.
Reuse before rebuilding
AI Prompts tell agents to inspect existing components and compose the same source partial or behavior when it is already implemented. A different project primitive is suitable only when it preserves the source geometry, states, accessibility, and interactions.
Install Preline for the closest match
AI Prompts can adapt blocks into projects that do not use Preline, but blocks with Preline-specific tokens, JavaScript plugins, or package-backed behavior are easier to reproduce accurately when Preline UI is installed. When no faithful project equivalent exists, prompts use the Preline or source package by default unless your project explicitly prohibits new dependencies.
Verify emitted classes and assets
Check that generated Tailwind classes exist in your project, source-only token names were mapped or added deliberately, and required images, SVGs, logos, avatars, and package-backed assets render correctly.
Choose the right Preline AI workflow
Use AI Prompts for block-specific implementation guidance. Install Preline UI Agent Skills for reusable workflows such as theme generation and guided Preline MCP integration. Use Preline MCP when a supported agent should search and fetch current Preline components, blocks, documentation, and framework guidance directly.