Accessible by default: what the page check catches
Headings, contrast, alt text, link names and more — the page check finds common problems before visitors do, and your AI can…
Content widget
Loop Carousel
Your posts, products or any content, in a carousel of cards you design yourself.
Build it with your AI
“Show the latest posts in a carousel using the Post card template, three per view.”
Live demo
See it working
Why we built the Design System before the widgets
AI-built pages only look consistent when the AI has a design system to use. That is why Uncoder’s widgets read every color,…
Connect Cursor and VS Code to WordPress with MCP
Create a scoped API key, add Uncoder’s MCP server to Cursor or VS Code, and build pages from your editor — even…
Five prompts that rebrand a WordPress site in minutes
Because every page uses the Design System, a rebrand is a handful of prompts — colors, fonts, buttons, spacing and a contrast…
How Claude builds a page with Uncoder, step by step
What happens between your prompt and a finished page: the build guide, the Design System, element trees, validation and the page check.
Uncoder 0.1: a WordPress builder your AI can use
The first public release: a visual editor, a full Theme Builder, 80 widgets and a built-in MCP server with 58 tools for…
Settings
43 settings in three tabs
Every setting below is in the editor — and available to your AI through get_widget_schema.
Content
21 settings
Loop
Loop item template
Query
Nothing found message
Featured image as CSS variable
Carousel
Slides per view
Slides to scroll
Gap
Vertical alignment
Arrows
Arrows position
Previous icon
Next icon
Pagination
Rewind
Mouse drag
Transition duration (ms)
Autoplay
Delay (ms)
Pause on hover
Pause button
Accessible name
Design
22 settings
Arrows
Button size
Icon size
Offset
Border radius
Icon color
Background
Border
Shadow
Border color
Pagination
Distance from slides
Alignment
Dot size
Active dot width
Space between dots
Dot color
Active dot color
Typography
Color
Bar height
Bar color
Track color
Pause button color
Behaviour
shared
On every element
Spacing & position
Background & border
Animations
Motion & effects
Scroll & mouse effects
Visibility
Conditions
Interactions
Attributes & CSS
Build it with AI
Just describe what you want
Your AI looks up the Loop Carousel settings over MCP and writes the element for you — real, editable and on brand.
Claude · connected to your site
You
Show the latest posts in a carousel using the Post card template, three per view.
Claude · using Uncoder
Done — it’s on your site and fully editable.
What the AI writes
loop-carousel.jsonJSON
{
"type": "loop-carousel",
"settings": {
"loop_template": "<Post card template id>",
"query": {
"source": "posts",
"post_type": "post",
"posts_per_page": 6,
"orderby": "date",
"order": "desc",
"terms": ["category:5", "category:6", "category:7"]
},
"slides_per_view": 3,
"slides_per_view_tablet": 2,
"slides_per_view_mobile": 1,
"gap": { "size": 16, "unit": "px" }
}
}More content widgets
Works well with
Breadcrumbs
Shows visitors where they are — Home › Blog › Post — and tells Google too, with structured data.
Code Highlight
Code in a tidy block with a file name, line numbers, highlighted lines and a copy button.
Loop Grid
Your posts, products or any content in a grid of cards you design yourself, with pagination or load more.
Posts
A ready-made grid or list of posts with images, dates and excerpts.
Steps
A “How it works” row of numbered steps joined by a line.
Table
Data and comparison tables with striped rows, a sticky header and a caption.