AI-powered development
Design with AI. Build on Visor.
AI skills set up the project, turn your design into site code, build and check new parts, and prepare changes your team approves.
- Set up the project
- Write widgets and layouts
- Connect to content
- Review the code
- Write the tests
- Add an AI agent
From first idea to working site.
Start from a design made with AI
Design the site in any AI design tool, such as Claude, and export it as HTML, CSS, and JS. A Next.js project works too. Drop the files into the project's source folder, and the convert-html skill reads every one of them.
- HTML, CSS, SCSS, JS, or Next.js input
- One flat source folder
- Clean, unminified files convert faster and use fewer tokens
- No hand-translation of markup into React
AI turns your design into site code
The skill finds what the pages share, such as the header, navigation, and footer, and makes it a layout. Repeating sections, such as card grids and accordions, become widgets. Styles become a scoped theme, and page scripts become React. Activate the theme in Studio, and editors can start using the new parts.
- Shared page parts become layouts
- Repeating sections become widgets
- CSS becomes a scoped SCSS theme
- Asks before it creates a new widget
Describe a new part, and AI writes it
Ask for a widget, a layout, or a data endpoint in plain words, such as a hero banner with a title and an image. The skills write it to the template's conventions, including the form editors fill in Studio and the version Studio uses for drag-and-drop editing.
- Widgets with their Studio form fields
- Layouts with their placeholder zones
- Data endpoints that work with SSR, SSG, and ISR
- Found by the template, with no registry file to edit
Start a new project in one step
The template you download from Studio ships with its skills. The initiator skill connects your local repository to the remote, syncs the history, checks out an onboarding branch, installs dependencies, writes the environment file, and starts the dev server. Turn on Dev Mode, and Studio previews your local build with real content.
- Git remote and history synced
- A new onboarding branch
- Dependencies and environment file set up
- Dev Mode previews your local build in Studio
AI works within the limits you set.
Rules
AI follows the rules your developers follow
The skills carry the template's conventions, so code written by AI keeps to them. Every content query is limited to its site and asks only for the fields it needs. The access token stays on the server, and HTML from the CMS is sanitised before it renders.
- Queries limited to the current site
- Only the fields a page needs
- Access tokens kept on the server
- Strict TypeScript, with no untyped code
Check
AI reviews the work before your team does
The review-code skill checks a change in seven areas: correctness, TypeScript, security, Visor API use, architecture, performance, and how widgets connect to Studio. Other skills go deeper on security, speed, and tests, and keep commits and pull requests in one format.
- A seven-part code review
- Security checks against the OWASP Top 10
- Tests with Vitest and React Testing Library
- Commits, branches, and pull requests in one format
Change
Let AI prepare changes your team approves
DaaS connects outside tools, including AI tools, to the sites and content on Visor. AI can bring in a site that is already live, and prepare new sites, new pages, and edits to existing content. The connection is read-only by default, and anything AI prepares goes live only after a person reviews and approves it.
- Bring in new or already-live sites
- New pages and content edits prepared by AI
- Read-only by default
- A person approves every change
Chat
Add an AI assistant to your live site
Chocolate Factory connects an AI agent to your site's content through an MCP server on the Visor API. The agent reads with the site's read-only token, and a widget puts it on the page as a chat assistant or another smart widget. The chocolate-factory-sdk skill writes that widget for you.
- An MCP server on your Visor API
- Read-only site reader token
- Agents registered per frontend
- Chat widgets on the published site
AI works from your real content and rules.
DaaS (Data as a Service) is the backend behind every Visor site. It holds each site's content, settings, roles, and permissions, and serves them to your website through the Visor API.
Your AI tools connect to the same DaaS through an MCP server. They read the real content model and permissions instead of guessing at them. The connection is read-only by default, and anything AI prepares goes live only after a person approves it.
Your website and your AI tools read from one DaaS, so a redesign or a new site leaves the content where it is.
- Claude Code
- VS Code
- Kiro
- Antigravity
Content
- Sites
- Collections
- Fields
- Relations
- Files
- Visor API
Access
- Roles
- Permissions
- Filter rules
- Workflows
- Read-only tokens
Questions
Something else? Ask us directly.
The skills run in Claude Code, VS Code, Kiro, and Antigravity. Designs can come from any tool that exports HTML, such as Claude.
Works with the CMS.
CMS overviewSee AI-powered development on a real site.
Book a demo and we'll walk you through it.