claude

ai-maestro-webdesign

Consolidated web-design plugin: design judgment (Claude Design principles), ASCII sketch/parse, diagrams, infographics, style extraction, and preview. amw-design-principles orchestrates every sub-skill; amw-dev-browser is the only browser-automation primitive for input workflows.

0 on GitHubby Emasoftv0.1.17MITupdated 2 months ago

Not in a marketplace yet, so it loads for one session with --plugin-dir.

Plugin ai-maestro-webdesign in Emasoft/ai-maestro-webdesign. Commands read from the repo's manifest — 1 month ago.

This plugin runs code on your machine — its hooks fire automatically on events like tool use. The exact commands are listed below; read them before installing.

What it installs

Skills (68)

  • amw-ascii-creator

    Produce ONE validated perfect-ASCII artifact from a brief — structured via bin/amw-ascii-render.py, freeform via validate-iterate loop. Triggers on "ASCII diagram of", "ASCII wireframe of", "perfect ASCII of", "build ASCII mockup". Does NOT trigger on generic design intent — routes to design-princip

  • amw-ascii-diagrams-reference

    Professional ASCII diagrams using `+--+ | -` for code comments, docs, ADRs — flowcharts, state machines, trees, data-structure layouts, network topologies, sequences, tables. Triggers on "ASCII flowchart", "state-machine diagram", "tree view", "packet layout", "network topology ASCII". Does NOT trig

  • amw-ascii-pixel-art

    Image-to-animated-ASCII-art generator — Pillow + rembg + numpy 7-step pipeline producing a self-contained HTML file with a 60fps canvas (sine-pulse, diagonal shine, random flicker, hover ripple). Triggers on "image to ASCII art", "animated ASCII portrait", "ASCII pixel-effect HTML", "convert photo t

  • amw-ascii-sketch

    Runs the ASCII plan-phase iteration loop. Triggers on "sketch this in ASCII", "give me layout variants", "propose 3 wireframes in ASCII", "iterate on the layout in ASCII", "ASCII mockup", "box-drawing wireframe". Does NOT self-trigger on broad "design", "UI", "landing page" — those route to design-p

  • amw-ascii-to-html

    Convert a validated ASCII wireframe into responsive, accessible, Tweaks-compatible HTML. Triggers on "convert this ASCII to HTML", "render this wireframe as HTML", "ascii-to-html", "turn my ASCII mockup into a webpage". Does NOT trigger on generic "design a landing page" — that routes to design-prin

  • amw-ascii-to-svg

    Deprecated. See the amw-diagram-convert skill for the IR-pivot conversion path. This file remains as a low-level primitive callable from /amw-ascii-to-svg only — it has no auto-trigger phrases. Use when the /amw-ascii-to-svg command is explicitly invoked. Trigger with /amw-ascii-to-svg.

  • amw-ascii-validator

    Render pixel-perfect ASCII diagrams from JSON and/or validate hand-authored ASCII wireframes for alignment bugs. Triggers on "validate this ASCII", "check ASCII alignment", "render as perfect ASCII", "ASCII from JSON", "fix ASCII box alignment". Does NOT trigger on generic design intent — routes to

  • amw-box-diagram

    Author clean Unicode rounded-corner box diagrams (╭╮╰╯│─) for pipelines, workflow charts, microservices topologies. Triggers on "box diagram of", "Unicode pipeline diagram", "fan-out/fan-in", "rounded-corner box diagram", "microservices topology". Does NOT trigger on broad design vocabulary — routes

  • amw-design-battle

    Head-to-head two-site design comparison. Audits two artifacts on the same 8-dimension rubric as amw-design-grade, then emits a battle card with per-dimension bars, per-dimension winner, and an overall verdict. Outputs battle.html / battle.md / battle.json. Activates on narrow comparison triggers — "

  • amw-design-drift-audit

    Audit a Tailwind config / CSS custom-properties file / tokens.json for design-token DRIFT — near-duplicate color clusters (CIEDE2000 ΔE<3), off-scale spacing/radius values, single-use magic numbers — and emit a harmonization recommendation report. Audit-only (never modifies the source). Triggers on

  • amw-design-extract

    Extract a design system (colors, fonts, spacing, shadows, tokens) from a live URL using the `designlang` CLI. Triggers on "extract design tokens", "copy the style of", "get colors and fonts from URL", "reverse-engineer design system", "generate tailwind config from site". Does NOT trigger on generic

  • amw-design-grade

    Quantitative A-F design audit of a single artifact (URL, local HTML, or extracted DESIGN.md). Scores 8 dimensions 0-10, each with an evidence excerpt and letter grade, then emits an HTML report-card plus an SVG grade badge. Activates on narrow audit triggers — "grade this design", "design report car

  • amw-design-md-audit

    Lint, validate, and audit a DESIGN.md for quality and consistency. Triggers on "lint/validate my DESIGN.md", "audit/five-pass-audit DESIGN.md", "score DESIGN.md quality", "DESIGN.md anti-patterns". Does NOT trigger on authoring or generic design. Use to gate a DESIGN.md before delivery or diagnose p

  • amw-design-md-author

    Author a DESIGN.md from a brief, interview, archetype, or 5-question flow. Triggers on "create/author/make a DESIGN.md", "DESIGN.md from brief", "brand archetype DESIGN.md", "DESIGN.md agent prompt guide", "DESIGN.md i18n/CJK". Does NOT trigger on extraction-from-source or generic design. Use to wri

  • amw-design-md-convert

    Convert, apply, and export a DESIGN.md and its companions. Triggers on "convert Variant 2 DESIGN.md to Variant 1", "emit DESIGN.md companions / tokens.css / tokens.json", "apply DESIGN.md tokens / enforce tokens", "DESIGN.md DTCG export", "cross-project DESIGN.md library". Use to transform a DESIGN.

  • amw-design-md-extract

    Extract a DESIGN.md from a live URL, Tailwind config, codebase scan, or Figma export. Triggers on "extract DESIGN.md from URL/Tailwind/codebase/Figma", "DESIGN.md fingerprint", "detect components for DESIGN.md". Does NOT trigger on generic "extract design tokens" (that routes to amw-design-extract).

  • amw-design-md-spec

    DESIGN.md format spec, templates, and authoring rules. Triggers on "DESIGN.md spec", "DESIGN.md template/skeleton", "DESIGN.md frontmatter", "DESIGN.md section order / authoring rules", "adopt DESIGN.md in CLAUDE.md". Variant 1 (official @google/design.md) + Variant 2 (community 9-section). Does NOT

  • amw-design-md

    Author, lint, extract, audit, and convert DESIGN.md design-system specifications. Triggers on "create DESIGN.md", "lint DESIGN.md", "extract DESIGN.md from URL/Tailwind/codebase", "audit DESIGN.md", "DESIGN.md companions". Does NOT trigger on generic "design system", "extract design tokens" — those

  • amw-design-principles

    Orchestrator for any web, UI, slide, prototype, or design task. Enforces three hard rules — (1) gather context, (2) produce ≥3 variants, (3) reject AI-slop — and routes to executors. Triggers on "design a page", "landing page", "mockup", "UI for", "prototype", "wireframe", "slide deck", "dashboard",

  • amw-design-remix

    Reskin an extracted design in a named graphic vocabulary (from the amw-design-system-presets catalogue) OR rotate OKLCH hue around a new brand primary while preserving chroma/lightness ramps. Activates on narrow remix triggers — "remix this in <style>", "reskin in brutalist", "rotate hue to <new pri

  • amw-design-system-presets

    Catalog of ~45 named graphic-style presets (Swiss, Brutalist, Glassmorphism, Material 3, Aurora, Cyberpunk, etc.), each shipped as a complete token block plus breaks-if invariants and a canonical render-test pointer. Activates on narrow style-name triggers — "use Brutalist style", "apply Glassmorphi

  • amw-dev-browser

    Browser automation and page-state capture via the `dev-browser` CLI. Triggers on "go to URL", "click on", "fill form", "take screenshot", "scrape", "automate the browser", "test the website", "inspect DOM", "mobile screenshot". Does NOT trigger on design vocabulary — those route to `design-principle

  • amw-diagram-architecture

    Convert a free-text system description into a layered architecture diagram (graph JSON, SVG, or PNG). Triggers on "draw my architecture", "architecture diagram for X", "layered diagram", "export architecture as SVG/PNG", "component diagram". Does NOT trigger on "design", "sketch the UI" — routes to

  • amw-diagram-compare

    Structural comparison of two diagrams — diff two flowcharts, compare v1/v2, find what changed, cross-format diagram diff. Triggers on "compare these diagrams", "diff two flowcharts", "what changed between v1 and v2", "structural diff of two diagrams". Source formats may differ (ASCII vs Mermaid is v

  • amw-diagram-convert

    Cross-format diagram conversion — convert a diagram from one format to another across the 5-format matrix (ASCII, HTML, SVG, Mermaid, PNG). Triggers on "convert this diagram to X", "turn my ASCII into SVG", "convert flowchart to mermaid", "export diagram as PNG". PNG-as-source is refused. Does NOT c

  • amw-diagram-editorial

    Editorial-quality HTML+SVG diagrams with brand-matched styling — 13 types (architecture, flowchart, sequence, state, ER, timeline, swimlane, quadrant, nested, tree, layer, Venn, pyramid/funnel). Triggers on "sequence diagram", "ER diagram", "blog-ready architecture diagram". NOT for generic design,

  • amw-diagram-formats

    Authoritative spec for ASCII / HTML / SVG / Mermaid formats, IR schema, conversion matrix, validation dispatcher, modify/diff pipelines. Triggers on "diagram IR schema", "format detection", "conversion matrix", "IR-level diff", "Mermaid format spec". Does NOT trigger on diagram creation — routes to

  • amw-diagram-svg
  • amw-diagram-webpage-sync
  • amw-evangelion-design
  • amw-excalidraw-illustrations
  • amw-generative-backgrounds
  • amw-html-diagram
  • amw-hypercomp
  • amw-hyperframes-bridge
  • amw-infographics
  • amw-liquid-glass
  • amw-material-3
  • amw-memory-recall
  • amw-memory-write
  • amw-mermaid-diagram
  • amw-mermaid-render
  • amw-mobile-design
  • amw-pretext-art
  • amw-pretext
  • amw-progressive-blur
  • amw-react-colorful
  • amw-react-promptify
  • amw-seo
  • amw-shadcn-ui
  • amw-skill-drift-audit
  • amw-stitch-mcp-integration
  • amw-svg-creator
  • amw-svg-diagram
  • amw-tailwind-4
  • amw-text-visual-arch
  • amw-text-visual-cheatsheets
  • amw-text-visual-retro
  • amw-text-visual-state
  • amw-text-visual-workflows
  • amw-tui-designer
  • amw-ui-sound-design
  • amw-ui-ux-reasoning
  • amw-ux-designer
  • amw-ux-evaluator
  • amw-ux-flows
  • amw-vecui
  • amw-webpage-to-diagram

Slash commands (29)

  • /ai-maestro-webdesign:amw-ascii-to-html

    Shortcut for users who have an approved ASCII wireframe and want to convert it to HTML directly — terminal step of the /amw-sketch plan-phase loop. Requires explicit Phase A approval before running. An agent in Main-agent mode may also invoke skills/amw-ascii-to-html/ directly via the orchestrator a

  • /ai-maestro-webdesign:amw-ascii-to-svg

    Shortcut for users who have a ready ASCII diagram and want a clean SVG output directly — parses Unicode box-drawing into a node/edge graph and renders via diagram-architecture. An agent in Main-agent mode may also invoke skills/amw-ascii-to-svg/ directly via the orchestrator, with access to parser a

  • /ai-maestro-webdesign:amw-compare-diagrams

    Shortcut for users who want a structural IR-level diff between two specific diagrams directly — formats may differ, produces a markdown diff report. An agent in Main-agent mode may also invoke skills/amw-diagram-compare/ directly via the orchestrator, using additional comparison techniques the skill

  • /ai-maestro-webdesign:amw-convert-any-diagram-format

    Shortcut for users who want to convert a specific diagram between formats directly — auto-detects source, targets ASCII/HTML/SVG/Mermaid/PNG. An agent in Main-agent mode may also invoke skills/amw-diagram-convert/ directly via the orchestrator, applying the full N×N conversion matrix and format-spec

  • /ai-maestro-webdesign:amw-create-diagram-from-webpage

    Shortcut for users who want to extract a structural diagram from a specific webpage or URL directly — emits ASCII (default), SVG, or Mermaid. An agent in Main-agent mode may also invoke skills/amw-webpage-to-diagram/ directly via the orchestrator, applying landmark detection and edge-extraction tech

  • /ai-maestro-webdesign:amw-create-excalidraw-like-diagram-png

    Shortcut for users who know they want a hand-drawn Excalidraw-style PNG via Gemini API and have their GEMINI_API_KEY ready. GATED — requires explicit per-call cost consent. An agent in Main-agent mode may also invoke skills/amw-excalidraw-illustrations/ directly via the orchestrator after Phase A ap

  • /ai-maestro-webdesign:amw-create-or-modify-ascii-diagram

    Shortcut for users who know they want a single ASCII diagram created or modified directly — dispatches to ascii-creator (Mode A/B) or the shared modify-flow, with mandatory bin/amw-validate-ascii.py gate. An agent in Main-agent mode may also invoke skills/amw-ascii-creator/ directly via the orchestr

  • /ai-maestro-webdesign:amw-create-or-modify-html-diagram

    Shortcut for users who know they want an HTML diagram (editorial or infographic) created or modified directly — dispatches to html-diagram skill or modify-flow with validation gate. An agent in Main-agent mode may also invoke skills/amw-html-diagram/ directly via the orchestrator after Phase A appro

  • /ai-maestro-webdesign:amw-create-or-modify-mermaid-diagram

    Shortcut for users who know they want a Mermaid source file created or modified directly — all 9 grammar types supported, with mandatory bin/amw-mermaid-lint.sh gate. An agent in Main-agent mode may also invoke skills/amw-mermaid-diagram/ directly via the orchestrator after Phase A approval, applyin

  • /ai-maestro-webdesign:amw-create-or-modify-svg-diagram

    Shortcut for users who know they want a standalone SVG diagram created or modified directly — freeform or layered-architecture, with svg-render.py render-verify gate. An agent in Main-agent mode may also invoke skills/amw-svg-diagram/ directly via the orchestrator after Phase A approval, applying su

  • /ai-maestro-webdesign:amw-create-webpage-from-diagram

    Shortcut for users who have an existing diagram (ASCII/SVG/Mermaid) and want to build a webpage from it directly — chains IR conversion + ascii-to-html. An agent in Main-agent mode may also invoke the diagram-webpage-sync pipeline via the orchestrator, applying responsive design and token-applicatio

  • /ai-maestro-webdesign:amw-design-md-audit

    Run the 5-pass audit on an existing DESIGN.md — structural integrity, codebase drift, WCAG accessibility, section completeness, cross-token consistency. Spawns amw-design-md-auditor-agent. Returns a severity-classified findings list (BLOCKER / MAJOR / MINOR / NIT) without modifying the file.

  • /ai-maestro-webdesign:amw-design-md-convert

    Convert a Variant 2 (community 9-section) DESIGN.md into the canonical Variant 1 (official @google/design.md YAML + 8 prose sections) format. Pure-Python — no remote calls, no API key. Runs bin/amw-design-md-convert-v2-to-v1.py. After conversion, the result is automatically lint-checked.

  • /ai-maestro-webdesign:amw-design-md-create

    Author a fresh Variant 1 DESIGN.md from a brief, codebase, URL, or 5-question interactive interview. Spawns amw-design-md-author-agent. The agent assembles YAML frontmatter (colors / typography / rounded / spacing / components) plus the 8 canonical prose sections, runs lint + WCAG contrast checks, a

  • /ai-maestro-webdesign:amw-design-md-diff

    Diff two DESIGN.md revisions and surface what tokens / sections changed. Wraps `npx @google/design.md diff` for the structured diff plus a fallback markdown-aware textual diff via bin/amw-design-md-diff.sh. Useful for change-tracking when a brand evolves a token set or when a Tailwind config update

  • /ai-maestro-webdesign:amw-design-md-emit-companions

    Emit companion files from an existing Variant 1 DESIGN.md — tokens.css (CSS custom properties), tokens.json (W3C Design Tokens), component-inventory.md (per-component variant table), and usage-prompt.md (a copy-paste-ready prompt for downstream agents). Pure-Python, no remote calls.

  • /ai-maestro-webdesign:amw-design-md-from-codebase

    Scan a project tree for Tailwind / shadcn / Chakra / vanilla-CSS / styled-components signals and emit a Variant 1 DESIGN.md whose frontmatter reflects the dominant style system. Pure-Python scanner (no remote calls). Spawns amw-design-md-extractor-agent (input_type=codebase).

  • /ai-maestro-webdesign:amw-design-md-from-tailwind

    Convert a Tailwind config + globals.css pair into a Variant 1 DESIGN.md. Pure-local Node port of tailwind-to-design-md (no remote calls). Resolves CSS-var references, walks theme.extend.colors / typography / spacing / borderRadius, and annotates color pairs with WCAG-AA contrast. Spawns amw-design-m

  • /ai-maestro-webdesign:amw-design-md-from-url

    Extract a Variant 1 DESIGN.md from a live URL by capturing the page through amw-dev-browser, reading computed styles + DOM landmarks, and emitting canonical YAML frontmatter + prose sections. Spawns amw-design-md-extractor-agent (input_type=url). Faithful transcription only — never invents tokens no

  • /ai-maestro-webdesign:amw-design-md-lint

    Validate a DESIGN.md against the official @google/design.md spec — frontmatter shape, section order, token-reference resolution, type rules. Runs bin/amw-design-md-lint.sh (which wraps `npx @google/design.md lint`) plus bin/amw-design-md-validate.py for offline pure-Python validation. Used as the ga

  • /ai-maestro-webdesign:amw-doctor

    Shortcut for users who want a quick dependency status report for the plugin runtime — prints a table of installed/missing tools. An agent in Main-agent mode may also run the same dependency checks inline as part of a broader Phase B pre-flight before spawning sub-agents.

  • /ai-maestro-webdesign:amw-eval

    Shortcut for users who want a systematic UX and SEO evaluation against a specific HTML file directly — scored report on Position, Visual Weight, Spacing, contrast, Core Web Vitals. An agent in Main-agent mode may also invoke skills/amw-ux-evaluator/ and skills/amw-seo/ directly via the orchestrator

  • /ai-maestro-webdesign:amw-extract-style

    Shortcut for users who want to extract design tokens from a specific live URL directly — chains dev-browser + design-extract to satisfy design-principles Rule 1 context-gathering. An agent in Main-agent mode may also invoke skills/amw-dev-browser/ and skills/amw-design-extract/ directly via the orch

  • /ai-maestro-webdesign:amw-init

    Shortcut for users who want to install the plugin runtime dependencies in one step — dev-browser, Playwright + Chromium, CairoSVG, Bun, ffmpeg. An agent in Main-agent mode may also verify and install individual dependencies inline as part of a Phase B pre-flight, checking only what a specific sub-ag

  • /ai-maestro-webdesign:amw-modify-diagram-of-webpage

    Shortcut for users who want to extract, edit, and re-emit a diagram from an existing webpage directly — full round-trip in two phases. An agent in Main-agent mode may also invoke the webpage-to-diagram + diagram-webpage-sync pipeline via the orchestrator after Phase A approval, applying additional s

  • /ai-maestro-webdesign:amw-modify-webpage-from-diagram

    Shortcut for users who have an edited diagram and want to re-emit a specific webpage from it directly — chains diagram → IR → ASCII → HTML with .bak backup. An agent in Main-agent mode may also invoke skills/amw-diagram-webpage-sync/ directly via the orchestrator, applying the full sync and diff tec

  • /ai-maestro-webdesign:amw-preview

    Shortcut for users who want to preview a specific local HTML file in dev-browser with a design-principles self-check directly. An agent in Main-agent mode may also invoke skills/amw-dev-browser/ directly via the orchestrator as part of Phase B scenario testing, capturing screenshots and running broa

  • /ai-maestro-webdesign:amw-sketch

    Shortcut for users who want to enter the Phase A ASCII iteration loop directly — proposes wireframe variants, iterates on layout and components until satisfied, then hands off to /amw-ascii-to-html. An agent in Main-agent mode uses skills/amw-ascii-sketch/ via the orchestrator automatically as the d

  • /ai-maestro-webdesign:amw-validate-any-diagram-format

    Shortcut for users who want to validate a specific diagram file against its format rules directly — auto-detects ASCII/HTML/SVG/Mermaid, reports PASS/FAIL with FIX hints. An agent in Main-agent mode may also invoke the format-specific validators (bin/amw-validate-ascii.py, bin/amw-validate-svg-diagr

Subagents (24)

  • ai-maestro-webdesign-main-agent

    The primary orchestrator agent for ai-maestro-webdesign plugin. Activated when a user (or an upstream orchestrator) asks for a webdesign outcome with only general requirements — landing pages, dashboards, mockups, design systems, infographics, videos, or any combination. Triggers on broad intent phr

  • amw-accessibility-auditor-agent

    WCAG 2.1 AA / ARIA / keyboard-nav / contrast / reduced-motion accessibility auditor for the ai-maestro-webdesign plugin. Dual-mode — Phase A (pre-build heuristic review of an IA plan or low-fi ASCII) and Phase B (post-render empirical audit via dev-browser on a real artifact). Emits PASS/FAIL per WC

  • amw-asset-generator-agent

    Produces reusable visual assets — SVG icons / logos / patterns / data-vis primitives / SVG animations, typographic techniques via pretext (text-on-path, calligrams, kinetic typography, virtualized tables), and hand-drawn Excalidraw concept illustrations (GATED on GEMINI_API_KEY + explicit user conse

  • amw-brand-researcher-agent

    Competitor analysis and brand-landscape researcher for the ai-maestro-webdesign plugin. Extracts design tokens from reference URLs via dev-browser + design-extract, builds competitor style profiles, identifies positioning whitespace. Spawned exclusively by ai-maestro-webdesign-main-agent — never by

  • amw-browser-tester-agent

    Runs dev-browser scenario tests on Phase B artifacts — no-console-errors, renders-above-fold, mobile-viewport-layout, interactive-spot-checks, accessibility-keyboard-nav. Emits PASS/FAIL/INCONCLUSIVE per scenario with mandatory screenshot evidence. dev-browser is the ONLY browser-automation primitiv

  • amw-component-library-architect-agent

    Tier-4 specialist that authors design tokens (color/typography/spacing scales + variant matrices) and produces design-system handoff exports in multiple formats (tokens.json, design-tokens.yaml, Figma Tokens / Tokens Studio schema, Style Dictionary config, Tailwind theme config, CSS custom propertie

  • amw-design-contract-validator-agent

    Tier-4 specialist that validates the Persistent Design Contract JSON document at session-checkpoint moments (end of Phase A discovery, before every Phase B fan-out, after any locked-decision update). Activates on narrow contract-validation-specific language only — "validate the design contract", "ch

  • amw-design-md-auditor-agent

    Tier-2 discovery specialist that performs a 5-pass audit of a DESIGN.md file — structural integrity, token drift against codebase, accessibility (WCAG contrast), section completeness, and cross-token consistency. Activates on narrow DESIGN.md-audit language only — "audit DESIGN.md", "review DESIGN.m

  • amw-design-md-author-agent

    Tier-3 production specialist that authors a DESIGN.md from a design brief, codebase scan, URL, or interactive 5-question interview. Activates on narrow DESIGN.md-creation language only — "create a DESIGN.md for X", "make a design system markdown", "generate a DESIGN.md from this brief", "author a DE

  • amw-design-md-extractor-agent

    Tier-3 production specialist that extracts a Variant 1 DESIGN.md from one of three concrete inputs — a live URL, a Tailwind config + globals.css pair, or a project codebase. Activates on narrow extraction phrases only — "extract DESIGN.md from <url>", "extract DESIGN.md from this Tailwind config", "

  • amw-design-resume-agent

    Tier-3 specialist that resumes an interrupted webdesign workflow by reading the persistent Design Contract JSON (`.amw-design-contract/contract.json`) plus the last in-progress phase marker, then re-establishes Phase A or Phase B state without re-asking the user any decision already recorded in the

  • amw-diagram-producer-agent

    Production agent that produces diagrams in any of 5 supported formats (ASCII, HTML, SVG, Mermaid, PNG — PNG is output-only, never input). Owns the format-selection decision based on audience + medium + content type. Activates in Phase B only — main-agent spawns it after the satisfaction-gate token i

  • amw-email-designer-agent

    Tier-4 specialist that designs transactional and marketing email templates using table-layout responsive HTML and MJML, with full email-client constraint awareness (Outlook/Gmail/Apple Mail rendering matrix), dark-mode variants, plain-text fallback, and CAN-SPAM/CASL compliance footers. Activates on

  • amw-form-designer-agent

    Tier-4 specialist that designs booking, contact, checkout, and multi-step forms with full validation UX, error states, and accessibility-of-forms. Activates on narrow form-specific language only — "design a contact form", "checkout form UX", "multi-step form", "form validation UX", "form error state

  • amw-infographic-builder-agent

    Production agent that produces dense editorial infographics as HTML + PNG + PDF using the infographics skill's 24-template library and 175-design-DNA set. Activates in Phase B only — main-agent spawns it after the satisfaction-gate token is emitted. Narrow triggers — "produce infographic", "build in

  • amw-legal-expert-agent

    Legal and compliance specialist for the ai-maestro-webdesign plugin. Answers legal / compliance questions during Phase A of the main-agent mode. Covers GDPR, ADA/WCAG, CCPA, content licensing, disclaimers, jurisdictional restrictions, and cookie consent requirements. Spawned exclusively by ai-maestr

  • amw-motion-designer-agent

    Tier-4 specialist that designs page transitions, scroll-driven animations, microinteraction sequences, loading states, and skeleton screens — all with mandatory prefers-reduced-motion compliance and 60fps budget enforcement. Activates on narrow motion-specific language only — "page transition", "scr

  • amw-multilanguage-copywriter-agent

    Multilingual copy producer for the ai-maestro-webdesign plugin. Produces web copy in any locale, handles pluralization, grammatical gender, cultural adaptation, and RTL considerations. Uses pretext typography references for optimal line-breaking. Spawned exclusively by ai-maestro-webdesign-main-agen

  • amw-seo-strategist-agent

    SEO keyword research and information-architecture strategist for the ai-maestro-webdesign plugin. Dual-mode — Phase A (keyword cluster, IA plan, hreflang strategy, structured-data plan) and Phase B (on-page SEO audit, JSON-LD injection, rendered-page crawl checks). Uses the SEO skill rubric and ux-f

  • amw-slop-verifier-agent

    Vision-based AI-slop verifier. Consumes a screenshot path + the project brief + optional HTML path. Audits rendered pixels against all 7 categories in ai-slop-avoid.md (gradient/color, typography, layout/hierarchy, decoration/icons, content/copy, motion/interaction, density). Emits a machine-parseab

  • amw-sound-designer-agent

    Tier-4 specialist that designs UI sound for click / hover / toggle / success / error / notification / whoosh / pop interactions via the amw-ui-sound-design skill. Activates on narrow audio-specific triggers — "design click sound", "build notification chime", "add error audio", "review my Web Audio c

  • amw-user-research-analyst-agent

    User research synthesizer for the ai-maestro-webdesign plugin. Converts user-provided context (interviews, surveys, analytics, support tickets, NPS verbatims, heatmaps) into structured personas and user-journey maps. Holds IA / content-hierarchy authority (no veto — main-agent may arbitrate against

  • amw-video-producer-agent

    Renders composed HTML timeline scenes to MP4 video via hyperframes-bridge and the on-demand external hyperframes dependency (cloned to the gitignored external/hyperframes/ path, driven via npx hyperframes — not a vendored submodule). Narrow triggers only — HTML-to-MP4 composition rendering, never ge

  • amw-wireframe-builder-agent

    Production agent that converts an approved, validator-PASS ASCII wireframe into production-ready HTML with brand tokens, shadcn/ui integration, Tailwind v4 styling, and responsive fit. Activates in Phase B only — main-agent spawns it after the satisfaction-gate token is emitted. Narrow triggers — "b

Hooks (1)

  • UserPromptSubmit

    printf '[ai-maestro-webdesign] amw-design-principles is the orchestrator for design/UI tasks. Apply its 3 hard rules — (1) gather context (existing UI kit / brand tokens / references) before designing

View source on GitHub

Similar plugins

Collection of example skills demonstrating various capabilities including skill creation, MCP building, visual design, algorithmic art, internal communications, web testing, artifact building, Slack GIFs, and theme styling

19 skills

anthropics/skills 193,780

Comprehensive PR review agents specializing in comments, tests, error handling, type design, code quality, and code simplification

1 command · 6 agents

anthropics/claude-code 155,476

Professional UI/UX design intelligence for AI coding assistants. Includes searchable databases of styles, colors, typography, charts, and UX guidelines for React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, JavaFX, and Three.js.

7 skills

nextlevelbuilder/ui-ux-pro-max-skill 148,759

Taste Skill

claudecodex

tasteskill 2.5.1: professional company websites at the figma.com and x.ai level, with one section per screen, real photographs, real product UI, effects kept for tech and gaming pages, and a real-browser checker and finish gate.

1 skill

Leonxlnx/taste-skill 114,391

Design fluency for frontend development. 1 skill with 24 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.

1 skill · 4 agents · hooks

pbakaus/impeccable 109,099

storybook

claudecodex

Build, preview, and test UI components with Storybook.

7 skills

storybookjs/storybook 91,552

Maintain ai-maestro-webdesign?

This page updates itself from your repo. Add the badge to your README, or get it Featured to pin it above the organic results with a followed link to your site.

claude & codex pluginslisted