balsa-template-design

Design Distinctive Balsa Templates

Use this skill with $balsa-ui. This skill owns art direction and composition; $balsa-ui owns discovery, exact component contracts, installation, accessibility, source placement, and validation. Keep the implementation in Vue 3 <script setup lang="ts"> and preserve the active Balsa design system.

Ground the template in a subject

• Choose one concrete subject, audience, and primary job when the brief leaves them open.
• Build with realistic names, labels, values, states, and domain language. Keep demo content specific even when the template API remains reusable.
• Derive visual character from the subject's real materials, tools, artifacts, environment, and vernacular. Do not substitute generic SaaS copy or invented vanity metrics.

Art-direct before coding

Create a compact internal plan before editing:

1. Thesis — state the visual idea in one sentence.
2. Container model — choose the page structure: open canvas, bands, rails, list, table, master-detail, editorial columns, media frame, deliberate Card system, or another model justified by the content.
3. Typography — assign title, body, control, label, and data roles. Use the active theme's roles unless the brief explicitly calls for an authored design system.
4. Palette and material — map hierarchy to Balsa semantic tokens and theme-owned surfaces. Reserve product-specific color for decoration that need not adapt with the palette.
5. Density and rhythm — choose controlled density or generous space and repeat a small spacing rhythm consistently.
6. Signature — choose one memorable, subject-specific compositional move.
7. Restraint — name what stays quiet so the signature remains legible.

Use an ASCII wireframe when the hierarchy or container model is not obvious from the brief. If an attached reference or generated concept is the visual specification, extract this plan from it and preserve its hierarchy, density, geometry, and media treatment.