A set of Genesys Snippets for Visual Studio Code.
Genesys is a prototyping toolkit for use with VSCode. It enables designers and UI developers to quickly create low to high-fidelity prototypes, or even production-ready UI. Genesys provides support for most major design systems (Bootstrap, Material Design, Foundation, Ionic, Tailwind, Tachyons, et. al.) and you can add any others. Additional features include multi-lingual support, automated walk-throughs, on-screen comments, A/B testing, conditional logic, animation, and more--all through markup.
Page Templates
Create new pages based on common design systems. Create a new HTML document and type !! to see the available page templates.
Libraries
| Trigger | Description |
|---|---|
| gns-add-genesys-lite | Add the basic Genesys prototyping tools to the page |
| gns-add-genesys-full | Add all of the Genesys prototyping tools to the page |
| gns-add-analytics | Add the analytics library to the page |
| gns-add-animation | Add the Animate & AniJS libraries |
| gns-add-atlas | Add the Atlassian Design System |
| gns-add-basscss | Add the Basscss CSS Low-Level Toolkit |
| gns-add-bulma | Add the Bulma CSS Framework |
| gns-add-diagram-library | Add the Flowchart & Diagramming Library (Mermaid) |
| gns-add-fluent | Add the Microsoft Fluent UI Web Component library |
| gns-add-font-awesome | Add the Font Awesome icon library |
| gns-add-mdbootstrap | Add the Material Design Bootstrap library |
| gns-add-mdesignsystem | Add the M-Design System Web Component library |
| gns-add-metro | Add the Microsoft-based Metro UI library |
| gns-add-modulz | Add the Modulz CSS library |
| gns-add-paper | Add the Paper CSS library |
| gns-add-patternfly | Add the Red Hat PatterFly library |
| gns-add-pure | Add the Pure.css library |
| gns-add-page-testing | Add automated page testing using Gremlins |
| gns-add-persistence | Add the Persistence library (Mavo) |
| gns-add-roles | Add the User Roles (PolyPage) library |
| gns-add-shoelace | Add the Shoelace Web Component library |
| gns-add-tachyons | Add the Tachyons CSS Toolkit |
| gns-add-tailwind | Add the Tailwind CSS framework |
| gns-add-turret | Add the Turret CSS Framework |
| gns-add-uilang | Add the UILang library |
| gns-add-walkthru | Add Intro.js library |
Site Maps
| Trigger | Description |
|---|---|
| gns-sitemap-add-page | Connect a new page block to your sitemap page |
Flowcharting & Diagramming
| Trigger | Description |
|---|---|
| gns-insert-diagram | Insert a flowchart or diagram |
Design Placeholders
| Trigger | Description |
|---|---|
| gns-placeholder-block | Generic Block placeholder |
| gns-placeholder-image | Image placeholder |
Common UI Elements
| Trigger | Description |
|---|---|
| gns-button | Button |
| gns-header | Heading Level (1-6) |
| gns-link | Hyperlink |
| gns-icon | Icon (Font Awesome) |
Including Master Page Components
| Trigger | Description |
|---|---|
| gns-include | Include a partial, reusable page component |
Virtual Pages
| Trigger | Description |
|---|---|
| gns-virtual-page | Add a new Virtual Page |
Annotations & Comments
| Trigger | Description |
|---|---|
| gns-add-note-library | Add the Annotation library |
| gns-add-note | Annotation |
Blur, Redact, Hide Data
| Trigger | Description |
|---|---|
| gns-blur | Blur fake/realistic data and user input |
| gns-redact | Redact fake/realistic data and user input |
| gns-invisible-ink | Hide fake/realistic data and user input |
A/B Testing
| Trigger | Description |
|---|---|
| gns-add-ab-testing | Add the A/B testing library to the page |
| gns-add-ab-testing-config | Add the A/B/ testing library configuration settings |
| gns-insert-ab-test-scenarios | Insert A/B test scenario sections |
Measuring Perceived Usability
| Trigger | Description |
|---|---|
| gns-feedback-seq | Add the Single Ease Question (SEQ) to your page |
| gns-feedback-sus | Add the System Usability Scale (SUS) to your page |
| gns-feedback-tlx | Add the Task Load Index (TLX) to your page |
Add any of the following CSS class names to your prototype page's BODY element. Note that the Genesys Toolbar provides real-time interactive access to these functions as you view your prototypes.
| BODY Class | What It Does |
|---|---|
| gns-grid | Display the page with visible outlines of all page layout grids |
| gns-inspect | Display the Genesys Page Inspector |
| gns-lofi | Display the page in Low-Fidelity mode |
| gns-notes | Display the page with all (any) page notes/annotations visible |
| gns-redact | Display the page with all fake/realistic data redacted |
| gns-test | Display the page with automated interactive tests running |
| gns-walkthru | Display the page with the automated Walthru feature activated (if present) |
| gns-toolbar-hide | Hide the Genesys Toolbar |
| gns-footer-hide | Hide the Genesys Page Footer |
Add any of the following CSS class names to any page element.
| BODY Class | What It Does |
|---|---|
| gns-text-left | Left align text |
| gns-text-center | Center text |
| gns-text-right | Right align text |
| gns-float-left | Push the element to the left as far as possible |
| gns-float-right | Push the element to the right as far as possible |
For first time builders, make sure you have Node.js installed, then run:
npm install -g vsce
To build the extension:
- If you have made changes, update the
package.jsonfile version number appropriately, using Semantic Versioning rules. - Run
vsce package