ClawHub

Frontend Vibe Suite

Frontend Vibe Suite

Install

openclaw plugins install clawhub:frontend-vibe-suite

Frontend Vibe Suite

frontend-vibe-suite adds a multimodal design loop to frontend development:

  1. clarify the visual direction with a style interview
  2. render prompts for Wan2.7
  3. generate concept frames or a short UI video
  4. translate the video back into frontend language with Qwen Omni
  5. route the stack to the right component family or Web Components system
  6. generate a strict build handoff for downstream coding

Included

Skills

  • frontend-vibe-suite
  • frontend-style-interview
  • frontend-library-router
  • video-to-ui-brief
  • frontend-build-handoff

Scripts

  • scripts/choose_library.py
  • scripts/select_prompt_template.py
  • scripts/render_prompt_pack.py
  • scripts/run_visual_loop.py
  • scripts/video_to_ui_brief.py
  • scripts/build_handoff.py

Example files

  • examples/frontend-style-brief.example.json
  • examples/frontend-style-brief.vue.example.json
  • examples/frontend-style-brief.web-components.example.json
  • examples/library-route.react.example.json
  • examples/library-route.vue.example.json
  • examples/library-route.web-components.example.json
  • examples/scenario-profile.react.example.json
  • examples/scenario-profile.vue.example.json
  • examples/scenario-profile.web-components.example.json
  • examples/frontend-prompt-pack.example.json
  • examples/video-ui-brief.example.json
  • examples/build-handoff.example.json
  • examples/build-handoff.example.md

Library Routing

This plugin keeps the stack choice explicit instead of defaulting everything to one UI kit.

  • React headless: React Aria, Radix UI, Headless UI
  • React source-first: shadcn/ui
  • React suites: MUI, Ant Design, Chakra UI, Mantine, PrimeReact
  • Vue suites: PrimeVue, Quasar, Element Plus, Naive UI, Vuetify
  • Angular: PrimeNG, Ionic
  • Svelte primitives: Bits UI, Melt UI
  • cross-framework behavior: Zag.js, Ark UI
  • portable Web Components: Lit, Shoelace, Stencil, FAST, Fluent UI Web Components, Spectrum Web Components, Carbon Web Components, Vaadin, Material Web
  • Tailwind-only layer: DaisyUI

See docs/component-library-routing.md for the full matrix and routing rules.

Expected Workflow

1. Build the style brief

Run the interview workflow until product, surface, mood, density, anti-goals, target stack, and implementation constraints are specific enough to drive image and video generation. If the stack is still broad, resolve it with frontend-library-router before rendering prompts.

2. Resolve the scenario and library route

python3 plugins/frontend-vibe-suite/scripts/select_prompt_template.py \
  --brief path/to/frontend-style-brief.json \
  --output path/to/scenario-profile.json

python3 plugins/frontend-vibe-suite/scripts/choose_library.py \
  --brief path/to/frontend-style-brief.json \
  --output path/to/library-route.json

3. Render the prompt pack

python3 plugins/frontend-vibe-suite/scripts/render_prompt_pack.py \
  --brief path/to/frontend-style-brief.json \
  --output path/to/frontend-prompt-pack.json

The machine-readable catalogs behind this flow live at data/component-libraries.json and data/prompt-scenarios.json.

4. Run the visual loop

Use the plugin-local Wan wrappers through the visual-loop wrapper:

python3 plugins/frontend-vibe-suite/scripts/run_visual_loop.py \
  --prompt-pack path/to/frontend-prompt-pack.json \
  --manifest-output path/to/visual-run.json \
  --image-output path/to/concept/frame.png \
  --video-output path/to/concept/showcase.mp4

Default mode is t2v. In i2v, the wrapped Wan skill currently expects public URLs such as --first-frame-url.

5. Translate the video

python3 plugins/frontend-vibe-suite/scripts/video_to_ui_brief.py \
  --video-url https://example.com/design-preview.mp4 \
  --prompt-pack path/to/frontend-prompt-pack.json \
  --output path/to/video-ui-brief.json

6. Generate the coding handoff

python3 plugins/frontend-vibe-suite/scripts/build_handoff.py \
  --style-brief path/to/frontend-style-brief.json \
  --translated-brief path/to/video-ui-brief.json \
  --prompt-pack path/to/frontend-prompt-pack.json \
  --output-json path/to/build-handoff.json \
  --output-md path/to/build-handoff.md

Continue implementation with frontend-skill, ui-ux-pro-max, and visual-verdict.

Configuration

Required:

  • DASHSCOPE_API_KEY

Optional:

  • DASHSCOPE_BASE_URL
  • QWEN_OMNI_MODEL

Template:

  • .env.example

Security and Runtime

This plugin is intentionally explicit about runtime behavior.

  • required env vars: DASHSCOPE_API_KEY
  • optional env vars: DASHSCOPE_BASE_URL, QWEN_OMNI_MODEL
  • Python dependencies: standard library only
  • direct network egress: DashScope OpenAI-compatible API from video_to_ui_brief.py
  • direct DashScope image/video calls from plugin-local Wan wrappers
  • no cross-skill .env reads
  • no home-directory Wan script invocation

See:

Scope in 0.0.4

  • style brief generation
  • scenario-aware prompt generation across at least 20 UI situations
  • machine-readable scenario selection
  • machine-readable component-library selection
  • prompt-pack generation
  • wrapper for existing Wan skills
  • Qwen Omni translation over the DashScope OpenAI-compatible API
  • implementation handoff generation
  • explicit runtime contract and release preflight

Not included yet:

  • local media upload hosting
  • direct code patch generation from the translated brief
  • Figma or design tool sync