All directories
SkillDesignEngineering

Visionary for Claude Code

Motion-first UI plugin with 200+ design styles, 8-step anti-slop selection, Playwright + axe critique loop, and cross-session taste learning.

Open on GitHubBrowse more skills
01

Overview

Visionary for Claude Code (GIT-Webb-App-Studio-AB) is a Claude Code plugin focused on distinctive, motion-first UI across 15 frameworks. It uses an 8-step style selection algorithm with weighted randomness so two users rarely get the same generic AI look, then runs a Playwright + axe-core critique loop and learns from accept/reject over sessions. Commands cover generation (`/visionary`), variants, style lock + DTCG tokens (`/apply`), photo/audio mood seeds, cinematic director styles, and designer subagents. Strong complement to TypeUI (named styles) when you want algorithmic variety plus automated visual QA.

SaaSAgencyE-commerceOther

Work with LimeDock

Using this skill? LimeDock can wire it into a durable automation you own.

Skills show what's possible. LimeDock builds and runs the owned marketing, sales, and ops automations around them.

We sell owned automations for SaaS teams — live workflows that plug into Slack, CRM, and your internal platform — not just a skill list.

Book a workflow call
02

Link

https://github.com/GIT-Webb-App-Studio-AB/Visionary-for-Claude-Code
03

Installation guide

claude plugin marketplace add GIT-Webb-App-Studio-AB/Visionary-for-Claude-Code
claude plugin install visionary-claude

Then describe a UI task or use `/visionary`, `/variants`, `/apply`, etc.

04

How to use it

1. Install the marketplace plugin. 2. Run `/visionary` with a UI brief (or natural-language design ask). 3. Compare `/variants` when you need options; `/apply <style-id>` to lock tokens across screens. 4. Use `/annotate` or the critique loop with Playwright for visual/a11y fixes. 5. Manage taste memory with `/visionary-taste` so future sessions converge on your preferences.

05

Example prompts

  • “ /visionary Design a fintech hero with motion-first hierarchy and WCAG AA.”
  • “Generate 3 distinct variants for our pricing page, then apply the winner.”
  • “Use visionary-from-photo on this moodboard URL, then redesign onboarding.”
  • “Run a design critique loop on localhost:3000 and fix sparse layout issues.”
06

Use cases and examples

  • Anti-slop landing page generation
  • Multi-variant design exploration
  • Lock DTCG tokens across a multi-page app
  • Photo/audio-seeded mood-driven UI
  • Automated Playwright + axe design critique
07

Prerequisites

  • Claude Code with plugin support
  • Playwright available for the critique loop
  • Project UI stack among supported frameworks
  • Willingness to review algorithmic style picks
08

Tips

  • Use `/apply` early so multi-page work stays coherent.
  • Export/import taste profiles when switching machines.
  • Pair with AccessLint or web-design-guidelines for deeper a11y.
  • Weighted random is a feature—reroll if the first style misses.
09

Sources