Building a Portal with Slate AI

Slate AI can help create and refine portal content anywhere a WYSIWYG editor is available. In a portal, this can include generating HTML, CSS, and Liquid markup for static content blocks or other editable areas.

This article describes a lightweight process for using Slate AI to build an initial portal design, then refine it through focused prompts and testing.

For an overview of Slate AI capabilities, see Slate AI Overview.

⭐ Get Inspired

This article was adapted from a post by Technolutions staff in the Slate Community Forums' Get Inspired space. Have a great idea for a Get Inspired post? Let us know!

Before you begin

Confirm which portal part or component you want Slate AI to edit.
Add any exports or query data that Slate AI should be able to reference in the portal content.
Prepare institutional style details such as colors, button labels, office contact information, and links.

📝 Note
Open the specific component you want Slate AI to edit, such as a static content block, before prompting. This gives Slate AI the right editing context.

Start with a simple design prompt

Begin with a prompt that describes the portal section, audience, and primary content. For example:

Create a header for a campus visit portal using #00669e. Include the title Slate University Campus Visits, white text, and a clean layout for prospective students.

Then add more targeted prompts to refine individual pieces of the design.

Use targeted follow-up prompts

Goal	Example prompt
Add navigation or calls to action	`Add three buttons for Register for a Visit, Request Information, and Contact Admissions.`
Apply institutional style	`Make the buttons more rounded and use darker text inside the buttons.`
Add linked content	`Make the Register for a Visit button link to this form: [public form URL].`
Add footer details	`Add a centered footer with the admission office email, phone number, address, and social media links.`
Improve usability	`Make the layout more professional, modern, and easy to navigate for public visitors.`

Review the evolution

After each prompt, review the portal content visually and check the generated source. The screenshots below show an example moving from an initial layout to a more complete portal section.

Initial portal design created with Slate AI

Intermediate portal design after additional Slate AI prompts

Final example portal design after iterative Slate AI prompts

Validate the generated content

Preview the portal as a test record.
Confirm that buttons, links, and merge fields work as expected.
Review generated HTML, CSS, and Liquid markup before relying on it in production.
Test the layout on different viewport sizes if the portal will be used on mobile devices.

Slate AI can speed up the first draft of a portal design, but the generated content should still be reviewed, tested, and adjusted to match the institution's data, branding, and accessibility expectations.