SNO Design Studio widgets give you the freedom to create custom layouts and interactive features for your website using artificial intelligence. You don't need to know how to write code or have experience with web design. Instead, you describe what you want, and an AI tool helps you build it.
You can create everything from a simple collection of recent stories to a sophisticated photo carousel, a custom staff directory, or an interactive graphic.
With SNO Design Studio widgets, you can explore custom designs that previously would have required significant programming experience, while continuing to manage your publication's content through the familiar SNO publishing tools.
How Does It Work?
SNO's Design Studio widgets work differently from traditional WordPress widgets.
Instead of choosing from a fixed set of layout options, you describe how you'd like your content to look and behave. An AI tool such as ChatGPT, Gemini, or Claude generates the code needed to create that design.
SNO provides detailed technical instructions to help the AI understand how to build a design that works with your website.
Your content stays private during the design process.
The AI does not receive your actual stories, photographs, staff profiles, or other website data. It receives technical instructions describing the types of information your website can provide.
The AI generates two blocks of code: JavaScript and CSS. Those code blocks determine how your design looks and functions.
When visitors load your website, SNO supplies the appropriate content to your design. The JavaScript arranges that content, and the CSS controls its appearance.
In other words, the AI creates the design, but SNO supplies the content. Your stories, photographs, and other website data are not sent to the AI as part of this process.
Meet the Four Design Studio Widgets
SNO offers four types of Design Studio widgets, each intended for a different purpose. You will find them on the left side of Available Widgets in the Widget Control Panel.
SNO AI Story Designer
Create custom layouts for displaying stories from your publication in widgets areas.
You can build photo carousels, featured story displays, headline grids, magazine-style layouts, and more.
Like other story-based widgets, you can configure which stories should appear. The AI-generated code determines how those stories are presented, not which stories are selected.
SNO AI Sports Designer
Create custom displays for sports information. This widget is only available to sites that subscribe to the Site Booster bundle.
Use this widget to design sports-related features that present information from your publication's sports data, such as team information, schedules, and results.
You must have games published in the Game Scheduler area for this tool to work properly.
SNO AI Staff Designer
Create custom displays featuring your publication's staff members.
You might build a staff directory, an individual staff profile card, or a contributor spotlight that includes a photograph, biography, and recent stories.
You must have Staff Profiles published for this to work properly.
SNO AI HTML Designer
Create custom HTML-based designs that aren't tied to a specific collection of stories, sports information, or staff profiles.
This is the most flexible option for building standalone visual elements, custom layouts, and interactive features.
How to Create an AI Widget
You can add and create SNO Design Studio Widgets in in the Widget Control Panel, just like you do with standard SNO Widgets.
Step 1: Add a widget to your website
- Log in to your website's WordPress dashboard.
- Navigate to the Widget Control Panel (Hover on Appearance → Widgets).
- Find the AI Designer widget you'd like to use.
- Click and drag the widget into the widget area where you'd like it to appear on your site.
You can add SNO Design Studio widgets to the same widget areas where you use traditional SNO widgets.
Step 2: Configure your widget
Once you've added the widget, review its available settings.
Depending on the type of widget you've selected, you may see options for choosing stories, staff members, teams, or other content.
For example, with the SNO AI Story Designer, you can configure which stories the widget should display by selecting the category in the first column of widget settings just like in traditional SNO widgets.
These settings determine the content that SNO will supply to your design.
Step 3: Describe your design
Write a description of what you'd like your widget to look like.
You don't need to use technical terminology. Describe the layout as you would explain it to another person.
For example:
Create a featured story carousel with a large photograph, a prominent headline, and navigation thumbnails underneath. Show the story's author and publication date. Make sure the layout looks good on phones and desktop computers.
You can be as specific or as general as you'd like.
Consider describing the arrangement of photographs and headlines, the overall visual style, colors, spacing, and any interactive features.
The more clearly you describe what you want, the more likely the AI is to produce a design that matches your expectations.
Step 4: Copy your prompt
Use the widget's Copy Prompt button.
SNO automatically combines your design description with detailed technical guidance about your website and the widget.
This additional information helps the AI understand things such as:
- What types of content are available.
- How to access story headlines, photographs, authors, and other information.
- Which fonts and text conventions your publication uses.
- How to create responsive designs that work on different screen sizes.
- How to generate code compatible with SNO's publishing system.
You don't need to understand or modify these technical instructions.
The copied prompt does not include your actual stories, photos, website content, or user data. It contains your design instructions and technical information describing how the widget works.
Step 5: Generate your design using AI
Open your preferred AI tool, such as ChatGPT, Gemini, or Claude.
Paste the copied prompt into a new conversation and ask the AI to generate the design.
The AI should return two separate blocks of code:
JavaScript: Controls the structure and behavior of your design, including how content is arranged and how interactive features work.
CSS: Controls the visual appearance, including typography, colors, spacing, image sizes, and responsive layouts.
You don't need to understand either programming language.
Step 6: Add the generated code to your widget
Return to your WordPress dashboard and the SNO Design Studio widget you created.
You'll find separate fields for the JavaScript and CSS code.
- Copy the JavaScript code generated by the AI and paste it into the widget's JavaScript field.
- Copy the CSS code and paste it into the widget's CSS field.
- Save your widget.
Make sure you paste each code block into the correct field. You should copy the code itself, without the surrounding Markdown code fences that some AI tools display.
Step 7: Preview your design
Visit your website to see how your custom widget design looks.
Your new design should display the actual content selected through the widget's settings.
Check how it looks on both desktop and mobile devices. Pay particular attention to headline readability, photo cropping, spacing, and interactive features.
Making Changes to Your Design
One of the biggest advantages of SNO Design Studio widgets is that you can continue improving a design through conversation. If the design isn't quite what you want, you can refine it by going back to your AI tool and requesting that it revises the code.
For example, you might tell the AI:
Make the headlines a little smaller, increase the spacing between stories, and move the carousel navigation arrows to the bottom corners.
The AI can generate updated code reflecting your changes.
Copy the revised JavaScript and CSS into the corresponding widget fields, save the widget, and review the result on your site.
Tip: Continue working in the same AI conversation when refining a design. This helps the AI understand the code it previously generated and the changes you're requesting.
Tip: Sometimes the AI will tell you to find one single line of code and replace it with another line. If you’re not comfortable with doing this, simply ask the AI to provide the whole code block again, so you can copy and paste the entire code block with the changes into your widget.
You can experiment with different layouts, colors, typography, and interactions until you're satisfied.
What Happens When You Publish New Stories?
You don't need to regenerate your design whenever your website content changes.
Your AI-generated code controls how content is displayed, not the content itself.
For example, if you create a carousel displaying the five most recent stories in your News category, SNO will continue supplying the appropriate stories as new articles are published.
The same design can display different headlines, photographs, authors, and dates automatically.
This separation between content and design is what makes SNO Design Studio widgets practical for a regularly updated news website.
A Few Things to Keep in Mind
AI-generated designs aren't always perfect. You may need to request adjustments, particularly for complex layouts or interactive features.
Different AI tools may produce different results. Some models are better at generating sophisticated JavaScript and CSS than others. If a design doesn't work as expected, you can ask the AI to correct it or try another model.
You remain in control. You choose which widgets to create, where they appear, what content they display, and which generated code to use.
Your publication's content remains managed by SNO. The AI Designer process does not send your stories, photos, or staff data to an external AI service.