Use AI to quickly generate block code, then paste into Pala and configure fields manually.
A native AI integration is coming soon! Pala’s philosophy is to be a creative tool where AI handles the boring parts and gets out of the way most of the time. The upcoming integration will help with repetitive tasks without being heavy-handed.
Prompt Template
Generate a Svelte 5 component for a [describe your block].
Requirements:
- Use Svelte 5 syntax (no export let - fields are globally available)
- Use snake_case for all field names
- Include null checks (e.g., {#if image?.url})
- Make it responsive
- Don't include imports unless needed
Fields:
- [list fields with types, e.g., "headline (text)", "image (image with url and alt)"]
Style: [describe design]
Workflow
Generate code
Use the prompt with Claude, ChatGPT, etc.
Paste into Pala
Copy generated code into a new block’s code editor.
Add fields
Switch to Fields tab and manually add each field with proper types.
Test
Preview and refine as needed.
Example
Prompt:
Generate a Svelte 5 component for a feature card.
Requirements:
- Use Svelte 5 syntax (no export let - fields are globally available)
- Use snake_case for all field names
- Include null checks
- Responsive
Fields:
- icon (image with url and alt)
- headline (text)
- description (text)
- cta_link (link with url and label)
Style: Card with shadow, rounded corners, hover effect
<div class="card">
{#if icon?.url}
<img src={icon.url} alt={icon.alt} />
{/if}
{#if headline}
<h3>{headline}</h3>
{/if}
{#if description}
<p>{description}</p>
{/if}
{#if cta_link?.url}
<a href={cta_link.url}>{cta_link.label || "Learn more"}</a>
{/if}
</div>
<style>
.card {
background: white;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
}
.card:hover {
transform: translateY(-4px);
}
@media (max-width: 768px) {
.card { padding: 1.5rem; }
}
</style>
Common Issues
AI uses export let:
Remove it. Fields are globally available in Pala.
<!-- ❌ Don't do this -->
<script>
export let headline
</script>
<!-- ✅ Just use directly -->
<h1>{headline}</h1>
<!-- ❌ Bad -->
<img src={image.url} alt={image.alt} />
<!-- ✅ Good -->
{#if image?.url}
<img src={image.url} alt={image.alt} />
{/if}
Next Steps
