skill_design

Name: skill_design
Author: Noizefield

Design Community

Repo stars 263
Author updated Live
Author repo audio-plugin-coder

Fluxly profile Facts only: domain, agents, trust score, runtime, permissions and network

Domain: Design
Compatible agents: Claude Code
Cursor
Cline
Codex
Windsurf
Gemini CLI

+20
Trust score: 88 / 100 · community maintained
Author / version / license: @Noizefield · no license declared
Token usage: Moderate
Setup complexity: Guided setup
External API key: Not required
Operating systems: Windows
Runtime requirements: No special requirements
Permissions: Read-only
Write / modify
Shell exec
Network behavior: Local-only
Install commands: 26 variants

Profile is derived at build time from SKILL.md and install vectors. Subject to drift from author intent.

Heads up: 未限定 allowed-tools，默认拥有全部工具权限。

Output preview skill-design.preview

---
name: skill_design
description: Create the Visual Interface for audio plugins. Use when user mentions UI design, mockup, WebView…
category: design
runtime: no special runtime
---

# skill_design output preview

## PART A: Task fit
- Use case: Create the Visual Interface for audio plugins. Use when user mentions UI design, mockup, WebView interface, or requests 'design UI for [plugin]'. Check if design_library/manifest.json exists and count available designs. runs entirely locally. Works with Claude Code, Cursor, Cline and 23 more..
- Inputs: target material, constraints, expected output, and acceptance criteria.
- Evidence boundary: follow “🎨 PHASE 0: DESIGN LIBRARY CHECK / 📋 PHASE 1: REQUIREMENTS GATHERING / Tier 1 - Critical (always ask if missing):” and do not present inference as author intent.

## PART B: Execution result
- **01** The card summarizes the use case; runtime output centers on “Create the Visual Interface for audio plugins. Use when user mentions UI design, mockup, WebView interface, or requests 'design UI for [plugin]'. Check if design_library/manifest.json exists and count available designs. runs entirely locally. Works with Claude Code, Cursor, Cline and 23 more.”.
- **02** When the source has headings, the agent prioritizes “🎨 PHASE 0: DESIGN LIBRARY CHECK / 📋 PHASE 1: REQUIREMENTS GATHERING / Tier 1 - Critical (always ask if missing):” so the result follows the author’s structure.
- **03** Typical output includes task judgment, concrete steps, required commands or file edits, validation, and follow-up options.
- **04** Risk context follows the fingerprint: read files, write/modify files, run shell commands; mostly runs locally; usually needs no extra API key.

## Running Rules
- read files, write/modify files, run shell commands; mostly runs locally; usually needs no extra API key.
- Validate with a small sample before expanding scope.
- Return the result, validation criteria, and next iteration options.

SKILL.md SKILL.md

---
name: skill_design
description: Create the Visual Interface for audio plugins. Use when user mentions UI design, mockup, WebView…
category: design
source: Noizefield/audio-plugin-coder
---

# skill_design

## When to use
- Create the Visual Interface for audio plugins. Use when user mentions UI design, mockup, WebView interface, or request…
- Use it when the task has clear inputs, repeatable steps, and validation criteria.

## What to provide
- Target material, scope, expected result, and forbidden changes.
- Whether network, commands, file writes, or external services are allowed.

## Execution rules
- Organize steps around “🎨 PHASE 0: DESIGN LIBRARY CHECK / 📋 PHASE 1: REQUIREMENTS GATHERING / Tier 1 - Critical (always ask if missing):” and keep inference separate from source facts.
- read files, write/modify files, run shell commands; mostly runs locally; usually needs no extra API key.
- Validate with a small sample before expanding the task.

## Output requirements
- Return the deliverable, key evidence, validation method, and next action.
- Mark missing information as unknown; do not invent commands, platforms, or dependencies.

Evidence boundary and execution chain

The author source anchors workflow facts; repository files anchor sources and commands; Fluxly only adds fit, limitations, and quality judgment.

skill "skill_design" {
  input      -> user goal + target files + boundaries + acceptance criteria
  context    -> 🎨 PHASE 0: DESIGN LIBRARY CHECK / 📋 PHASE 1: REQUIREMENTS GATHERING / Tier 1 - Critical (always ask if missing):
  rules      -> SKILL.md triggers / order / output contract
  runtime    -> no special runtime | read files, write/modify files, run shell commands | mostly runs locally
  guardrails -> usually needs no extra API key + small-sample validation + diff/log review
  output     -> copyable result + checklist + next iteration
}

Interpretation is structured for decision-making; original keeps the upstream SKILL.md unchanged.

Decide Fit First

Core job: Create the Visual Interface for audio plugins. Use when user mentions UI design, mockup, WebView interface, or requests 'design…
Best fit: Use it when the task has reusable inputs, steps, and validation criteria rather than a one-off answer.
Avoid forcing it: If the source lacks commands, platform support, or external-service evidence, keep those fields unknown instead of guessing.

Design Intent

Structure: The skill is organized around “🎨 PHASE 0: DESIGN LIBRARY CHECK”, “📋 PHASE 1: REQUIREMENTS GATHERING”, “Tier 1 - Critical (always ask if missing):”, “Tier 2 - Visual (ask if Tier 1 complete):”, showing how the author expects the agent to judge fit, collect context, and produce verifiable output.
Trigger evidence: Prioritize the author’s wording around when to use it, what context to collect, and what output shape to produce.
Evidence boundary: Author text states facts, repository files prove commands and paths, and Fluxly only adds fit, limits, and usage judgment.

How To Use It

Inputs: Provide target material, scope, expected result, forbidden changes, and validation method.
Invocation: Name skill_design directly; if the source includes slash commands, start with the command and then add task context.
Validation: Start small and check whether the result follows “🎨 PHASE 0: DESIGN LIBRARY CHECK / 📋 PHASE 1: REQUIREMENTS GATHERING / Tier 1 - Critical (always ask if missing):” before expanding.

Boundaries And Review

Dependencies: It usually needs no extra API key, so start with a small validation task.
Permissions: Declared permissions include read / write / shell-exec; ask the agent to state file, command, and rollback boundaries before acting.
Quality bar: A useful result names the deliverable, evidence, and next action. Generic prose means the task needs tighter context.

SKILL: GUI DESIGN

Goal: Create the Visual Interface for audio plugins. Output Location: plugins/[Name]/Design/ and Source/

🎨 PHASE 0: DESIGN LIBRARY CHECK

Check if design_library/manifest.json exists and count available designs.

Import state management:

# Import state management module
. "$PSScriptRoot\..\scripts\state-management.ps1"

Validate prerequisites:

# Check that planning phase is complete and framework is selected
if (-not (Test-PluginState -PluginPath "plugins\[Name]" -RequiredPhase "plan_complete" -RequiredFiles @(".ideas/architecture.md", ".ideas/plan.md"))) {
    Write-Error "Prerequisites not met. Complete planning phase first with framework selection."
    exit 1
}

# Get current state to check framework
$state = Get-PluginState -PluginPath "plugins\[Name]"
if ($state.ui_framework -eq "pending") {
    Write-Error "UI framework not selected. Complete planning phase first."
    exit 1
}

If designs exist, present menu:

Found {N} saved designs in library.

How would you like to start?
1. Use existing design - Apply saved visual style
2. Start from scratch - Create custom design
3. Browse library - View all designs first

Choose (1-3): _

Routing:

Option 1: Show designs with previews, let user pick, skip to Phase 2 with applied style
Option 2: Continue to Phase 1 (requirements gathering)
Option 3: List all designs with metadata, return to menu

If no designs: Skip to Phase 1.

🎨 PHASE 0: DESIGN LIBRARY CHECK

Check for existing designs first:

# Check if design library exists
$manifestPath = "design_library/manifest.json"
if (Test-Path $manifestPath) {
    $manifest = Get-Content $manifestPath | ConvertFrom-Json
    $designCount = $manifest.totalDesigns

    Write-Host "Found $designCount saved designs in library." -ForegroundColor Cyan
    Write-Host ""

    # Present menu
    Write-Host "How would you like to start?" -ForegroundColor Yellow
    Write-Host "1. Use existing design - Apply saved visual style"
    Write-Host "2. Start from scratch - Create custom design"
    Write-Host "3. Browse library - View all designs first"
    Write-Host ""
    $choice = Read-Host "Choose (1-3)"

    switch ($choice) {
        "1" {
            # Show available designs and let user pick
            Show-DesignLibrary -Manifest $manifest
            $selectedDesign = Read-Host "Enter design ID to use"
            # Apply selected design as v1
            Apply-DesignFromLibrary -DesignId $selectedDesign
            # Skip to Phase 2 with applied design
        }
        "2" {
            # Continue to Phase 1 (requirements gathering)
        }
        "3" {
            # List all designs with details
            Show-DesignLibrary -Manifest $manifest -Detailed
            # Return to menu
            # (Loop back to choice prompt)
        }
    }
} else {
    Write-Host "No design library found. Starting from scratch." -ForegroundColor Yellow
    # Continue to Phase 1
}

Design Library Integration:

If user chooses existing design: Apply it as the starting point, still allow iteration
If user chooses from scratch: Continue to Phase 1
Browse option: Show metadata without committing to use

📋 PHASE 1: REQUIREMENTS GATHERING

Do NOT write code yet. Gather requirements through focused questions.
Exception: For Visage only, a preview scaffold may be generated after Phase 2 if the user approves.

Tier 1 - Critical (always ask if missing):

Style Direction: Cyberpunk? Analog hardware? Minimal modern? Skeuomorphic?
Primary Layout: Big central knob? Horizontal strip? Vertical rack? Multi-section?
Control Count: How many knobs/sliders/buttons? (affects spacing)
Window Size: Compact (400x300)? Standard (600x400)? Large (800x600)?

Tier 2 - Visual (ask if Tier 1 complete):

Color Palette: Primary accent color? Dark/light theme?
Control Style: Rotary knobs? Linear sliders? Toggles? Mix?
Metering: VU meters? LED indicators? Waveform display?

Tier 3 - Polish (ask last):

Branding: Logo placement? Plugin name display?
Special Features: Preset browser? Analyzer? Custom graphics?

Helper Functions for Design Library:

function Show-DesignLibrary {
    param($Manifest, [switch]$Detailed)

    Write-Host "Available Designs:" -ForegroundColor Cyan
    Write-Host ("=" * 50) -ForegroundColor Cyan

    foreach ($design in $Manifest.designs) {
        Write-Host "$($design.id)" -ForegroundColor Green
        Write-Host "  Name: $($design.name)"
        Write-Host "  Style: $($design.vibe)"
        Write-Host "  Best for: $($design.bestFor -join ', ')"

        if ($Detailed) {
            Write-Host "  Colors: $($design.colors.primary) (primary), $($design.colors.accent) (accent)"
            Write-Host "  Supports: $($design.supports.webview ? 'WebView' : ''), $($design.supports.visage ? 'Visage' : '')"
            Write-Host "  Usage: $($design.usageCount) times"
            Write-Host ""
        }
    }
}

function Apply-DesignFromLibrary {
    param($DesignId)

    $manifest = Get-Content "design_library/manifest.json" | ConvertFrom-Json
    $design = $manifest.designs | Where-Object { $_.id -eq $DesignId }

    if ($design) {
        Write-Host "Applying design: $($design.name)" -ForegroundColor Green

        # Copy design files as v1 starting point
        $designPath = "design_library/$($design.path)"

        # Copy preview.html as v1-test.html (WebView only)
        $state = Get-PluginState -PluginPath "plugins/[$PluginName]"
        if ($state.ui_framework -eq "webview") {
            Copy-Item "$designPath/preview.html" "plugins/[$PluginName]/Design/v1-test.html"
        }

        # Generate v1-ui-spec.md based on design metadata
        $specContent = @"
# UI Specification v1 (Based on $($design.name))

## Design Source
- **Library Design:** $($design.name)
- **ID:** $($design.id)
- **Style:** $($design.vibe)

## Layout
[Layout details from design]

## Colors
- Primary: $($design.colors.primary)
- Accent: $($design.colors.accent)
- Background: $($design.colors.background)

## Controls
[Control specifications based on design]
"@

        $specContent | Out-File "plugins/[$PluginName]/Design/v1-ui-spec.md"

        # Generate v1-style-guide.md
        $styleContent = @"
# Style Guide v1 (Based on $($design.name))

## Color Palette
- **Primary:** $($design.colors.primary)
- **Accent:** $($design.colors.accent)
- **Background:** $($design.colors.background)

## Typography
[Typography details]

## Visual Style
- **Theme:** $($design.vibe)
- **Best for:** $($design.bestFor -join ', ')
"@

        $styleContent | Out-File "plugins/[$PluginName]/Design/v1-style-guide.md"

        Write-Host "Design applied as v1. You can now iterate on this foundation." -ForegroundColor Green
    } else {
        Write-Error "Design '$DesignId' not found in library."
    }
}

Rules:

Ask max 4 questions at once using AskUserQuestion tool
Check creative brief first (if exists) - extract known requirements
Calculate recommended window size before asking (based on control count)
Present decision gate after each batch: Finalize / Ask more / Add context

🎨 PHASE 2: MOCKUP GENERATION

Create design specification files (all frameworks):

plugins/[Name]/Design/v1-ui-spec.md - Structured design plan:

   # UI Specification v1
   
   ## Layout
   - Window: [width]x[height]px
   - Sections: [list sections]
   - Grid: [describe layout structure]
   
   ## Controls
   | Parameter | Type | Position | Range | Default |
   |-----------|------|----------|-------|---------|
   | ...       | ...  | ...      | ...   | ...     |
   
   ## Color Palette
   - Background: #______
   - Primary: #______
   - Accent: #______
   - Text: #______
   
   ## Style Notes
   [Key visual decisions, inspirations, constraints]

plugins/[Name]/Design/v1-style-guide.md - Visual reference:
- Hex codes for all colors
- Font choices and sizes
- Spacing/padding rules
- Control visual styles
- Example UI state descriptions
Framework-specific preview artifacts:

If `ui_framework == webview`

Generate plugins/[Name]/Design/v1-test.html - WORKING HTML PREVIEW:

CRITICAL: For WebView framework, this HTML MUST be production-ready with proper JUCE integration.

Required structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Name] Plugin</title>
  <script type="module" src="js/index.js"></script>
  <style>
    /* Complete CSS based on style guide */
    :root {
      --primary: [color from style guide];
      --accent: [color from style guide];
      --background: [color from style guide];
    }
    
    body {
      background: var(--background);
      color: var(--primary);
      font-family: [font from style guide];
      margin: 0;
      padding: [padding from style guide];
      width: [width]px;
      height: [height]px;
      overflow: hidden;
    }
    
    /* All UI component styles */
  </style>
</head>
<body>
  <!-- Complete HTML structure matching UI spec -->
  <div id="plugin-ui">
    <!-- Controls with proper IDs matching parameter IDs -->
    <div class="control" id="[PARAMETER_ID]-control">
      <div class="knob" id="[PARAMETER_ID]-knob"></div>
      <div class="label">[Parameter Name]</div>
      <div class="value" id="[PARAMETER_ID]-value">[Default Value]</div>
    </div>
    <!-- Repeat for all controls -->
  </div>
</body>
</html>

JavaScript placeholder (for preview only):

// This is a placeholder for preview - actual implementation goes in Source/ui/public/js/index.js
document.addEventListener("DOMContentLoaded", () => {
    console.log("Preview mode - UI structure loaded");
    // Preview-only code here
});

For WebView plugins: The HTML in v1-test.html should be identical to what will be in Source/ui/public/index.html (minus the preview JavaScript).

CRITICAL WebView Requirements:

HTML must use <script type="module"> for JavaScript imports
All element IDs must match parameter IDs from parameter-spec.md
CSS must be complete and production-ready (embedded in <style> tag)
HTML structure must match the approved design exactly
No external dependencies (all assets embedded or served via resource provider)

If `ui_framework == visage`

Do NOT generate HTML. Instead, offer a Visage preview scaffold (default Yes):

Ask:

Generate a Visage preview scaffold now? (Y/n)

Default: Yes (generate unless user explicitly says no).

If yes, generate:

plugins/[Name]/Source/VisageControls.h using templates/visage/VisageControls.h.template
plugins/[Name]/Source/PluginEditor.h and PluginEditor.cpp using templates/visage/

These files are preview-only and will be refined during /impl.

Present decision menu:

🎨 Design specification v1 created
Files:
   - plugins/[Name]/Design/v1-ui-spec.md
   - plugins/[Name]/Design/v1-style-guide.md
   - WebView: plugins/[Name]/Design/v1-test.html (preview in browser)
   - Visage: Source/VisageControls.h + PluginEditor.* (preview via preview-design.ps1)

⚠️ STOP HERE - Do NOT create Source/ files yet!
What would you like to do?
1. Iterate - Refine layout or style (creates v2)
2  Implement - Generate production code in Source/
3. Save as template - Add to design library
4. Preview - WebView: open v1-test.html in browser; Visage: run preview-design.ps1
Choose (1-4): _

Routing:

Option 1: Collect feedback, create v2 specs and v2-test.html, return to this menu
Option 2: Mark design as approved and complete Design phase, suggest starting Implementation phase
Option 3: Save to design_library/, return to menu
Option 4: Open v1-test.html or run Visage preview, return to menu

After design approval (Option 2):

# Mark design phase complete
Complete-Phase -PluginPath "plugins\[Name]" -Phase "design" -Updates @{
  "validation.design_complete" = $true
}

Write-Host "Design phase complete! Ready for implementation."
Write-Host "Run /impl [Name] to start building the plugin."

✅ PHASE 4: COMPLETION

Commit files to git
Update plugins/[Name]/.ideas/todo.md - Check off GUI tasks
Update PLUGINS.md - Mark design stage complete

Present instructions:

GUI files generated and committed!

Next steps:
- Preview Visage: powershell -ExecutionPolicy Bypass -File .\scripts\preview-design.ps1 -PluginName [Name]
- Preview WebView: Open plugins/[Name]/Design/index.html in browser
- Build: Follow standard build process

Files created:
[list generated files]

STOP HERE. Let user test before proceeding.

🔄 VERSIONING SYSTEM

Each iteration creates new version: v1, v2, v3...
All files prefixed with version: v2-ui-spec.md, v2-PluginEditor.h
Keep all versions for comparison
Latest version used for build unless specified

📚 INTEGRATION

Invoked by:

Natural language: "Design UI for [Name]", "Create GUI mockup"
After creative brief in plugin workflow
During plugin redesign

Creates:

Design specs: plugins/[Name]/Design/v[N]-*.md
Source code: Source/PluginEditor.{h,cpp}
Optional: Source/VisageControls.h, v[N]-ui.html

Updates:

PLUGINS.md - Design status
plugins/[Name]/.ideas/todo.md - Task completion

⚠️ CRITICAL RULES

Never write code before gathering requirements - Always complete Phase 1 first
Respect the decision gates - Wait for user approval at each menu
One phase at a time - Don't skip ahead
Version everything - Never overwrite previous iterations
Check design library first - Reuse before creating
Commit after each phase - Preserve progress

Install command

One-click installPick a runner, click Copy, paste into your terminal, press enter

npx skills add Noizefield/audio-plugin-coder/.agent/skills/skill_design -y

Open general install guide

View skill source

Works with

Claude Code
Cursor
Cline
Codex
Windsurf
Gemini
OpenCode
Roo Code
AAide
+Augment
GitHub Copilot
OpenClaw
KKiro
Junie
WWarp
Goose
Trae
Kilo Code
OpenHands
Amp
Zencoder
CContinue
AIAider
CodeBuddy
CodeGeeX
Replit Agent

Security audit

88 / 100

Community

未声明 license/许可。
未声明 version。
未限定 allowed-tools，默认拥有全部工具权限。

Metadata

Source: github
Noizefield/audio-plugin-coder
中文

More by @Noizefield

A skill_debug 88

Category & tags

Category Design

Decide Fit First

Design Intent

How To Use It

Boundaries And Review

SKILL: GUI DESIGN

🎨 PHASE 0: DESIGN LIBRARY CHECK

🎨 PHASE 0: DESIGN LIBRARY CHECK

📋 PHASE 1: REQUIREMENTS GATHERING

Tier 1 - Critical (always ask if missing):

Tier 2 - Visual (ask if Tier 1 complete):

Tier 3 - Polish (ask last):

🎨 PHASE 2: MOCKUP GENERATION

If ui_framework == webview

If ui_framework == visage

✅ PHASE 4: COMPLETION

🔄 VERSIONING SYSTEM

📚 INTEGRATION

⚠️ CRITICAL RULES

Discussion

If `ui_framework == webview`

If `ui_framework == visage`