vf-design

Route ambiguous design requests into structured workflows with stack-adapted specifications.

9|Updated May 24, 2026
One-click install
npx skills add https://github.com/picmakpro/vibeflow-os --skill vf-design
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vf-design
Source: https://github.com/picmakpro/vibeflow-os/tree/main/plugin/design-orchestrator/skills/vf-design
Command: npx skills add https://github.com/picmakpro/vibeflow-os --skill vf-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns ambiguous design and UI/UX requests into a structured workflow, ensuring the project receives the right design direction, critique, refinement, or implementation handoff for its technology stack.

Core Features & Use Cases

  • Intent Detection: Identifies whether the request concerns visual direction, UI improvement, critique, inspiration, or targeted craft such as spacing, typography, color, motion, copy, or responsive behavior.
  • Workflow Routing: Delegates to the appropriate VibeFlow design workflow, including DA-INIT, DESIGN-WORKFLOW, QUICK FIX, PLAN MODE, or FULL DESIGN.
  • Multi-Stack Guidance: Detects the project stack and produces design specifications and tokens adapted to web, mobile, or desktop applications without imposing a framework.
  • Use Case: Ask it to modernize an existing dashboard, audit a mobile screen's responsive behavior, or define a complete visual identity for a new product.

Quick Start

Ask the vf-design skill to audit this screen and recommend the appropriate UI improvements for the project's current technology stack.

Frequently Asked Questions about vf-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I route ambiguous UI/UX requests into a structured design workflow?

Ambiguous UI/UX requests are routed into structured design workflows by detecting the project stack and delegating to canonical design agents, producing stack-adapted specifications without imposing framework-specific code.

What is the best way to audit a mobile screen's responsive design behavior?

Auditing a mobile screen's responsive design behavior is handled by routing the request to a targeted design workflow that detects the project stack and generates stack-adapted specifications and design tokens for refinement.

Can I get design critique and visual direction for a web project without framework-specific code?

Design critique and visual direction for web projects are supported by producing stack-adapted specifications and tokens that guide interface redesign without imposing any framework-specific code implementation.

How do I modernize an existing dashboard's interface design across different technology stacks?

Modernizing an existing dashboard's interface design across different technology stacks is achieved by detecting the project stack and generating adapted visual direction, design specifications, and tokens tailored to web, mobile, or desktop environments.

Does this design workflow approach work for defining a complete visual identity for a new product?

Defining a complete visual identity for a new product works by applying intent detection to route the request into a full design workflow, generating structured visual direction and specifications adapted to the detected project stack.

When should I use a targeted design refinement workflow instead of a full design workflow?

Targeted design refinement workflows apply when the request concerns specific craft elements like spacing, typography, color, motion, copy, or responsive issues, whereas full design workflows handle broader visual direction and interface redesign needs.