genjutsu
The art of illusion.
Claude Code skills that make an interface move, give a product its look, and build a whole website.
Website
·
Examples
·
Documentation
·
Install
·
Discussions
genjutsu.athevon.dev, built with genjutsu: the lens on the 幻, then one cut each for cast (a demo drawn for the page), paint and bunshin.
Creative coding skills for Claude Code, claude.ai and Cowork. Web (React, Vue, Svelte, Astro, vanilla CSS, Three.js, Canvas), Android (Jetpack Compose, Compose Multiplatform) and Apple (SwiftUI, iOS and macOS). bunshin is web only for now. The Compose and SwiftUI modules ship. One SwiftUI case has been compiled and filmed, etale-ios: cast run six times on the same prompt, each built unchanged on the first try. On 4.1.3 the one run built the transition by hand and gave up the navigation stack and the swipe back. On the modules as fixed in 4.2.0, four runs of five used the system zoom transition and kept both, in 13 to 78 added lines, and one built it by hand again. Each of the four chose the system transition before it loaded any module, and the step that now reads the thesis against the modules was never seen correcting a hand-built thesis, so these runs do not prove that the fixes or the step caused it. No Android run has been recorded yet, and every other recorded example below is web.
genjutsu is developed and run on Claude Code with Claude models. The claude.ai bundle was last checked by hand on 2026-09-28, cast only (log); no Cowork run is logged; bunshin has only been run on Claude Code. Other agents can install it through npx skills, and nothing in the skills is tied to one agent or one model, but neither another agent nor another model has been tested.
Install
npx skills add https://genjutsu.athevon.dev -g
Then describe the task in Claude Code, or type /genjutsu. To follow releases: npx skills update -g. Keep the -g on both.
If an agent is installing this for you, give it that exact command, npx skills add https://genjutsu.athevon.dev -g. Use the URL, not the repository: npx skills add AThevon/genjutsu installs the skills without their modules.
Or as a Claude Code plugin, inside a session, which gives you /genjutsu:cast, /genjutsu:paint and /genjutsu:bunshin:
/plugin marketplace add AThevon/genjutsu
/plugin install genjutsu
Project scope, claude.ai, Cowork, other agents and what bunshin needs beside it: genjutsu.athevon.dev/docs/install.
Three scales
The requests in the middle column are examples of what you might type, not recorded runs.
|
You type, for example |
You get |
cast
one interface moves |
/genjutsu:cast make the pricing cards feel physical on hover |
An interaction thesis you approve, shown the way you pick (a rendered page with a replay button, a route in your project, or one sentence), then the code in the stack you already use, with a short audit of what it wrote. |
paint
a product’s whole look |
/genjutsu:paint build me a portfolio from scratch |
A brainstorm, a visual and an interaction thesis, a MASTER.md design system for your stack, the page, and a full audit. On a project that already has a design, it asks first whether to keep the brand, change part of it, or redesign. |
bunshin
a whole site, by a team of agents |
/genjutsu:bunshin redesign our architecture practice's whole site from the current one and our project PDFs |
It states its cost, then asks you twice: the tier, then the direction. An art director runs research, one builder per page, reviewers and fix rounds until a stop rule ends the loop. You get the site, DESIGN.md, AGENTS.md and a report of what was verified and what was not. |
Not sure which one? Ask for the result you want and the right skill is picked; cast and paint propose bunshin once, with its cost, when the brief is a whole site. The FAQ has the long answer.
Examples
Recorded runs on fictional clients and one real one, captured from the code each run left or, for the real client, from the live site. Each one gives the first line of the request, how it ran, what it cost, and a receipt with the full prompt, what the run checked, and what it left unverified or got wrong. Everything they link lives in genjutsu-examples at the tag readme-2026-11-13b: the code each run wrote, its receipt, its conversation and its media. Those with a Live demo link also run as a live demo, built from that code as it stands. A one-shot headless run is a single claude plugin eval session: the prompt answers the gates up front and nobody replies after that, so there is no conversation to publish. A conversation is a session in which an agent plays the client and answers the gates; its full transcript, the brief that agent was given and the first message it sent are linked. The bunshin example is the run bunshin was extracted from, made before v4.1.0 shipped: its cost is in subagent tokens, as genjutsu publishes it, and its request and its client’s material stay private. A run on a build that is not a release names the branch and commit it ran on instead of a version.
Nocturne: a planetarium’s late program, from dusk to the real 22:00 sky (plain CSS)
/genjutsu:paint build the landing page for Nocturne, the late program of a planetarium in Lisbon.
A new page from an empty React template and a star catalogue. After questions on the mood and the hero, and its two theses shown as a rendered page, the run drew the dome from data/stars.json: 403 stars and Saturn where they stand over Lisbon at 22:00 on 9 October 2026. Scrolling from dusk to night deepens the ground, fades the amber glow at the rim and brings the stars up brightest first. 1440x900 viewport, scaled to 1100x688.
The client accepted both theses at the first showing and asked once for the four problems of the first report to be fixed. The run never saw its page and handed every visual check over. Three defects it introduced are in the receipt: from 1100 px wide the star list runs over the dome (near the end of the clip), a picked star’s magnitude line covers its name, and on a phone the hero panel hides the bottom of the dome.
paint · conversation with an agent playing the client (Claude Code 2.1.289, one session resumed for each reply) · genjutsu fix/skill-arguments on 09c177b (4.1.1 candidate) · claude-opus-5-5 · first pass · $5.93 (plus $0.86 for the agent playing the client) · 8 exchanges · 73 turns · 0 human edits · 2026-10-04
Receipt · Transcript · Client brief · First message · Source · Live demo
Chef Ovatio: a private chef’s seven-page site in French and English (Astro)
Made with bunshin: a short request, in French, for a polished first draft of a private chef's site, built from his public Instagram profile.
A real client’s site, from his public Instagram profile and two answers: the stack, the lead offer, the languages and the contact in one round of questions, then the direction, L’Affiche de la Riviera. Seven pages in French and English. Scrolling the home, the noon-yellow sky turns to sunset orange as the plate-sun sets behind the cobalt horizon, before the two doors, Recevoir and Conseiller, and the first plates. Filmed from the live site, 1440x900 viewport, scaled to 1200x750.
This is the run bunshin was extracted from, made with genjutsu 4.0.0’s paint and Impeccable hours before bunshin shipped in 4.1.0; its cost is the figure genjutsu publishes for it. The second verdict still asked for fixes (five major points from the art director); the last round worked on them and no verdict read the site after it. The client’s contact details and legal notice are still blanks marked for him to fill. One human edit since, on its live site: the door titles crossed their photos in an ink that could not be read there, and now stand on them.
bunshin · bunshin run, before v4.1.0 (Claude Code 2.1.284, one main session driving subagents through eight workflows) · genjutsu 4.0.0 at a0f6e09 (paint, with Impeccable) · claude-opus-5-5 · about 10.5M subagent tokens over six to eight hours (main session not measured) · one review, three refine rounds, two verdicts · 2 human answers · 1 human edit · 2026-09-29
Receipt · Live demo · Source: the client’s private repository
/genjutsu:cast pin our pottery studio's four firing stages and scrub them with the scroll
The Atelier Grès page, its copy and its four stage blocks are the starting fixture. The run’s work is the pinned section, the firing curve it draws, and the stage texts handing over to each other as the scroll scrubs through. 1440x900 viewport, scaled to 1200x750.
Headless, so the run marked its own thesis UNVALIDATED. It could not build in its sandbox; the build here passed on the first try with no edit.
cast · one-shot headless run (claude plugin eval, Claude Code 2.1.289) · genjutsu 4.1.0 at 09c177b · claude-opus-5-5 · first pass · $1.53 · 23 turns · 0 human edits · 2026-10-04
Receipt · No transcript: a one-shot run has no conversation, the full prompt is in the receipt · Source · Case · Live demo
Étale: a slack-water app’s beta page, from one real day of NOAA predictions (plain CSS)
/genjutsu:paint build the landing page for Étale.
A new page from an empty React template and one day of NOAA tide and current predictions. The founder pushed back twice, on an evening alert the read-back underplayed and on a flood the slack card skipped, and the run changed both. Every figure on the page comes from data/tide.json, labelled with its date and station. 1440x900 viewport, scaled to 1200x750: the page loads, holds its first screen, then scrolls to the two charts.
A first conversation on the same brief ran just before this one and is not shown. Two defects the run introduced are in the receipt: the dashed slack markers cross the chart labels, and the current line draws once on load, below the fold, so a visitor who scrolls down finds it already drawn.
paint · conversation with an agent playing the client (Claude Code 2.1.289, one session resumed for each reply) · genjutsu fix/skill-arguments on 09c177b (4.1.1 candidate) · claude-opus-5-5 · selected from 2 runs · $3.55 (plus $1.08 for the agent playing the client) · 10 exchanges · 54 turns · 0 human edits · 2026-10-04
Receipt · Transcript · Client brief · First message · Source · Live demo
Folio: the “Mark as paid” action (Motion)
/genjutsu:cast the "Mark as paid" action in our invoice list is dead, make it feel like the money landed
The Folio page is the starting fixture; the motion is the run’s work. Two “Mark as paid” clicks: the amount leaves Outstanding and lands in Paid as both totals count, with a signed amount on each card. 1440x900 viewport, cropped; the pointer is drawn in by the recorder, it is not part of the build.
Headless, so the run marked its own thesis UNVALIDATED. It introduced one defect its own audit missed: on a shorter window, handing focus to the next unpaid invoice scrolls the page while the totals count (it does not show at 1440x900; the receipt describes when it does).
cast · one-shot headless run (claude plugin eval, Claude Code 2.1.289) · genjutsu 4.1.0 at 09c177b · claude-opus-5-5 · first pass · $1.88 · 45 turns · 0 human edits · 2026-10-04
Receipt · No transcript: a one-shot run has no conversation, the full prompt is in the receipt · Source · Case · Live demo
Étale for iOS: a slack row opens into its tide detail (SwiftUI)
/genjutsu:cast Étale's iOS day list should open into the tide detail as one surface, not a push
The first native example, and one of six runs of this prompt; the clip is run 2. Four of the six used the system zoom transition, as here; two hand-built an overlay instead. The starting app, its screens and its NOAA data were written by hand and held no animation: a row pushed the detail like any navigation stack. This run added 78 lines and removed none: the tapped row opens into its tide detail and shrinks back, the navigation bar, the back button and the swipe back stay, and the slack marker settles on the curve. Filmed on the iPhone 17 simulator, iOS 26.5, 402x874; XCUITest performs the taps and draws no pointer.
Headless, so each run marked its own thesis UNVALIDATED, and none could build in its session; each built here unchanged on the first try. All six runs are in the receipt. Run 1, on genjutsu 4.1.3 ($3.42), hand-built an overlay: it rewrote both screens, gave up the navigation bar and the swipe back, and its drag-to-close flickers. Three gaps in genjutsu’s modules were fixed after it; run 2, shown here, is the same prompt on those fixes. Run 3, on the 4.2.0 release branch with the same fixes ($2.46), hand-built a surface again, with the time landing on the wrong row. A step was then added (read the thesis against the loaded modules before any code); runs 4 to 6, with it, all used the system zoom ($1.30 to $1.36), but each had named the zoom before reading any module, so the step was never seen correcting a hand-built thesis. Used the system transition: 1 of 2 on the fixed modules without the step, 3 of 3 with it; too few runs to tell the step from chance. Run 2 is shown because no later run is clearly better and it is the one filmed under Reduce Motion, dark appearance and large type. Its own defect: a white box shows around the row for about 0.4 s after each return. Simulator only: no real device, no VoiceOver check.
cast · one-shot headless run (claude plugin eval, Claude Code 2.1.323) · genjutsu fix/native-shared-element on 3e0d6d3 (4.1.4 plus the two module-fix commits that shipped in 4.2.0) · claude-opus-5-5 · selected from 6 runs · $1.53 · 22 turns · 0 human edits · 2026-11-13
Receipt · No transcript: a one-shot run has no conversation, the full prompt is in the receipt · Source · Case
Recorded, not featured
These runs were recorded the same way and keep their receipts, but are not shown above, for the reason given on each line.
- Atelier Grès: the whole site redesigned:
paint, conversation with an agent playing the client, genjutsu fix/skill-arguments on 09c177b (4.1.1 candidate), 2026-10-04. Thin execution: the platform system font, kept after a web font could not be fetched in the sandbox, and a blurred glow standing in for the kiln. Receipt · Transcript · Client brief · First message · Source · Live demo
- Étale, first headless run:
paint, one-shot headless run, genjutsu 4.1.0 at 09c177b, 2026-10-04. Plain: correct and sourced, but nothing on the page goes past a tidy default; the conversation above replaced it. Receipt · Source · Case
- Nocturne, first headless run:
paint, one-shot headless run, genjutsu 4.1.0 at 09c177b, 2026-10-04. Plain: a correct sky chart on a flat blue page; the conversation above replaced it. Receipt · Source · Case
It shows you before it writes
cast and paint stop at a few gates (the interaction thesis, the visual identity, the design system) and ask once how you want to see the proposal: a rendered page with the easing curve plotted and a replay button, a throwaway preview route in your own project, or one sentence in the conversation. Whatever the form, it is a proposal: a preview route is deleted once you approve, and none of it becomes the implementation. While it works it narrates in short lines (“Casting parallax on hero scroll.”); its reports are plain: what changed, the files touched, the next step.
It names the slop, and measures itself
genjutsu keeps a catalogue of the defaults a model reaches for when nobody asked (the numbered eyebrow, three equal cards, an invented ESTD. 2018): the tells field guide. On web work larger than one hover or transition, a tell the run wrote is fixed before the final report (two passes at most, what remains is reported), unless the validated thesis names it. One command lists them in any project, each with its file:line and the question to answer:
python3 ~/.agents/skills/genjutsu/_jutsu/design-audit/scripts/audit.py . --group tells
The eval suite runs the same briefs with and without genjutsu:
| Brief |
Tells, without genjutsu |
Tells, with genjutsu |
Grader score, with minus without |
| Independent design studio landing |
2 |
0 |
+0.20 |
| Invoicing SaaS landing |
2 |
0 |
+0.10 |
Tells are the findings of audit.py --group tells on the page of the first run of each arm. Scores come from claude plugin eval --ablation with-without --runs 2 on genjutsu ef31234, over the suite in evals/. The graders are ours: read this as genjutsu measured against what it set out to do, not as an independent benchmark.
The table was measured on 2026-09-28, on commit ef31234 of the branch that became v4.0.0, and has not been rerun since. These numbers count tells and grader checks. They do not say which page looks better: the page built without genjutsu can look as designed as the one built with it. Today’s models rarely write some of the classic tells (an invented build status, an ESTD. 2018) on their own, so the gains are modest. The control case held: when a brief genuinely asks for two city clocks and the thesis names them, they stay on every run. Details in evals/README.md.
A paint run with nobody to answer used to come out empty. On our one minimal landing brief, scored blind on stills by a model in three reviewer roles, the pages of the release branch at an earlier commit came out 2.3 and 3.3 points out of 10 above the 4.1.3 pages and level with Anthropic’s frontend-design, with an example invoice whose values they invented; in a last round, whose judges were also told to weigh the brief’s “invent no figure” as its author would (so its scores do not compare with the earlier ones), the two pages run with the shipped rule on example values came first in both sets (8.0 and 7.83, against 6.5 and 6.83 without the rule), and neither shows a figure the brief does not give. The rules were tuned on that brief, with two runs per arm and no human judge; the labelled reading lines still do not open the final report, and a run costs about 1.9 USD against 0.66 with frontend-design and 0.46 with no plugin: runs and receipts.
Docs
Overview · Install · cast · paint · bunshin · Modules · Tells · Principles · FAQ · Changelog
Formerly creative-excellence (v2.x): the migration steps are in CHANGELOG.md, v3.0.0. Not Higgsfield Genjutsu, the video tool: genjutsu here is a set of skills for interface motion and design in coding agents.
Tell us how it came out
One minute, two answers: how did it come out? Output that came out wrong is as useful as output that came out well. A finished run ends its report with the same link, filled in with the skill, the version, the host and the model when the run knows them, and with nothing from your project.
With more to show, post the run in Show and tell: the request you typed, the genjutsu version, a capture or a link, and whether we may feature it, with your credit. Questions go to Q&A, ideas to Ideas, bugs with a repro to issues.
Contributing
The most valuable contribution is “this claim is wrong, here is the primary source”. Start with CONTRIBUTING.md (the evidence standard, the repository layout, how to run the checks), then PLATFORM-CONTRACT.md and skills/_jutsu/VERSIONS.md, where rows marked VERIFY-NEEDED are the open work. If you work in Compose, SwiftUI or motion-heavy web, owning one family’s quarterly re-derivation is the most useful thing anyone could do here.
Credits
- nextlevelbuilder/ui-ux-pro-max-skill (MIT): the
ui-ux-pro-max module vendors its design dataset and Python search engine. See UPSTREAM.md for the vendoring notes and divergences.
- Impeccable (pbakaus/impeccable, Apache 2.0): when it is installed, bunshin hands it the product interview, the drawn direction, the quality floor, the detector, image provenance, the finish review and the documenter. Not vendored: genjutsu calls the installed copy and records the verbs it relies on in
skills/_jutsu/VERSIONS.md.
- Leonxlnx/taste-skill: tells catalogue inspired by taste-skill (MIT, Leonxlnx). The idea of writing down the defaults a model reaches for comes from there. The catalogue is rewritten as detection, with no prescribed replacement, and
scripts/check-no-verbatim.sh checks that no passage was copied.
Everything else genjutsu learned from (29 sources)
Web foundation
Android / Compose
Apple / SwiftUI
UX and motion theory
Support
genjutsu is free and MIT. If it saved you a few rounds of generic output, you can sponsor its development on GitHub.
License
MIT
Built by Adrien Thevon, software engineer in Toulouse.
Also mine:
TokenEater, a native macOS monitor for Claude usage limits
·
worktigre, a git worktree manager
评论