Experiment by Dominik Angerer. Not an official Storyblok product and not supported. Things will change.
Describe a Storyblok custom field type in plain language and an AI coding agent turns it into a working, tested field plugin: React + @storyblok/field-plugin, linted, tested, built and, if you ask, deployed to your Storyblok account.
The core is a written contract, generator/GUIDE.md: how the field plugin API works, how to shape the stored value, how the UI should look in the editor and when the job is done.
Repository: https://github.com/DominikAngerer/storyblok-field-wizard
I wrote up how this came together on d12r.io:
- From midnight idea to four live field types: how one written guide and a few parallel agents turned single sentences into deployed field types.
- Writing a prompt contract: every rule in
GUIDE.mdand the bug it prevents. - I don't run one AI chat. I run a small team.: the coordinator and sub-agent setup used to build all of this.
Each example field below also has its own article with a drop-in prompt to build it yourself.
Open generator/PROMPT.md (raw), copy everything below the line into Claude Code, Cursor, Codex or any agent that can run commands, and replace the description at the bottom with yours. It scaffolds with the official field-plugin CLI in an empty folder, no clone needed.
The plugin storyblok-field is a small self-contained package with the skill, the guide, the template, the scripts and one reference field. Load it one of three ways:
# One session, from the release zip
claude --plugin-url https://github.com/DominikAngerer/storyblok-field-wizard/releases/latest/download/storyblok-field.zip
# One session, from a local folder or zip (a clone works too: claude --plugin-dir .)
claude --plugin-dir ./storyblok-field
# Every session: put the unzipped folder in your skills directory (needs a recent Claude Code)
mv storyblok-field ~/.claude/skills/storyblok-fieldThen, in your project, describe the field or call the skill:
/storyblok-field:storyblok-field A star rating from 1 to 5 with an optional half-star option
The field is created in <your project>/plugins/<name>. Nothing updates on its own: for a new version, load the new zip or replace the folder.
Clone this repo, open it in your agent and ask for a field. AGENTS.md has the workflow for Codex and other agents, and .cursor/rules/storyblok-field.mdc points Cursor at the same guide.
Create .env in the project root (it is gitignored):
STORYBLOK_PERSONAL_ACCESS_TOKEN=your-personal-access-tokenThen:
node generator/scripts/deploy.mjs <folder> [--name <prefixed-name>]<folder> is the plugin folder under plugins/. The script builds it and runs the field-plugin CLI deploy without prompts (--scope my-plugins by default; also organization or partner-portal).
Field type names are global across Storyblok, so a generic name like code-editor is probably taken. Deploy under a prefixed name, for example --name acme-code-editor. Deploy carries option keys only; set option values per field in the component schema.
| Field | What it does | Article |
|---|---|---|
brand-color-picker |
Pick from a brand palette or enter a custom hex, with a live WCAG contrast check. The reference implementation. | Read |
dummyjson-product-picker |
Search DummyJSON products, optionally limited to one category; stores the id plus a small snapshot. | Read |
dummyjson-author-picker |
Multi-select authors with avatars, reorderable, with a max-count option. | Read |
dummyjson-recipe-picker |
Fullscreen recipe browser with search and filters, compact card inline. | Read |
code-editor |
Code block field with CodeMirror 6: syntax highlighting, line numbers, indentation, highlighted lines and a fullscreen view. | Read |
Each folder has a PLUGIN.md with the value shape and options. To try one: npm ci && npm run dev inside the folder. Each article starts with a drop-in prompt you can paste into your own coding agent to build that field from scratch.
node scripts/build-plugin.mjs
# -> dist/storyblok-field/ load with --plugin-dir, or copy to ~/.claude/skills/
# -> dist/storyblok-field.zip load with --plugin-dir, or attach to a release for --plugin-urlNo dependencies. Edit the sources, never dist/.
Node 22+ and npm. A Storyblok account and personal access token for deploying.
MIT © 2026 Dominik Angerer