skill_design

Translate user requirements into versioned plugin GUI specifications and style guides.

3|Updated Feb 18, 2026

Search Tags:#interaction #ui-design #visual-design #webview #plugin-ui #design-library #gui-mockups

Ready to run

npx skills add https://github.com/joshband/LocusQ --skill skill-design-joshband

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: skill_design
Source: https://github.com/joshband/LocusQ/tree/main/.codex/skills/design
Command: npx skills add https://github.com/joshband/LocusQ --skill skill-design-joshband

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automate and guide the creation of plugin GUIs by converting design ideas into concrete, shareable GUI specifications.

Core Features & Use Cases

Structured design phases from concept to handoff, including v1, v2, and v3 iterations.
Artifacts generation: vN-ui-spec.md, vN-style-guide.md, and vN-test.html for WebView previews.
Design library integration and design-to-development handoff notes.

Quick Start

Provide a baseline visual brief for the plugin UI.

Frequently Asked Questions about skill_design

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

FAQPage Schema

How do I generate a UI specification for a plugin interface from requirements?▼

To generate a UI specification for a plugin interface, provide a baseline visual brief. The system translates user requirements into concrete design artifacts like vN-ui-spec.md files, style guides, and WebView test previews. This structured process ensures production-ready UI specifications through iterative v1, v2, and v3 cycles.

What is the best way to create WebView mockups for plugin UI development?▼

The best way to create WebView mockups for plugin UI development is using guided workflows that output vN-test.html files. This approach translates design ideas into shareable GUI specifications, allowing you to preview and test visual design components directly within a WebView environment.

Can I use this workflow to iterate through multiple design versions before handoff?▼

Yes, you can iterate through multiple design versions before handoff. The workflow supports structured design phases from concept to handoff, explicitly generating versioned artifacts like v1, v2, and v3 UI specifications, style guides, and test previews to refine the plugin GUI.

Do I need a design library to produce GUI specifications and style guides?▼

You do not need an existing design library to produce GUI specifications, but the workflow supports design library integration. By translating your visual brief into concrete artifacts, it creates a vN-style-guide.md and includes design-to-development handoff notes to streamline the build process.

How does translating a visual brief into a GUI specification improve the design cycle?▼

Translating a visual brief into a GUI specification improves the design cycle by automating the creation of concrete, shareable artifacts. It structures the process into iterative phases, ensuring that visual design and interaction requirements are documented in style guides and testable HTML previews.