General
Brand identity (logos, favicons) and form factors (desktop, tablet, mobile).
Design Principles
The principles your design and engineering teams should follow.
Styling
Theme, typography, UI framework, and iconography.
Layout
Reusable page templates for common app sections.
How visual specs feed code
Visual Design specs drive the generated Frontend:- The component library (Tailwind, Material, Chakra, Bootstrap) is set on the styling page
- The icon set (Lucide, Heroicons, Material, Font Awesome) is also on styling
- The theme tokens (color palette, typography, spacing) flow into the component theme
- The layout templates set the page chrome for each section type
FAQ
Can I customize the theme after generation?
Can I customize the theme after generation?
Yes. Edit the styling specs and re-run frontend generation, or edit theme tokens directly in the generated code via the Visual editor. Both paths work.
What if I want to use a UI framework that isn't in the dropdown?
What if I want to use a UI framework that isn't in the dropdown?
Pick the closest one (Tailwind is the most flexible) and override component-level styling via the visual editor and IDE. Custom UI frameworks aren’t in the catalog yet.
Do visual specs affect anything besides the frontend?
Do visual specs affect anything besides the frontend?
Mostly no. Email templates picked up by SendGrid use brand identity (logo, colors); other backend surfaces are visual-spec-agnostic.