Design in the Browser Extension Pack

Design in the Browser Extension Pack is a collection of best-of-breed extensions that transforms Visual Studio Code into an integrated design environment. Aimed at designers, but useful for devs as well.

Extensions Included

By installing Design in the Browser Extension Pack, the following extensions are installed:

Built-in Design Systems

• 📦 Bootstrap
  • Quickly create pages using Bootstrap 5.
• 📦 Bulma
  • Modern, CSS framework based on FlexBox
• 📦 GOV.UK
  • Build UK Government digital services quickly
• 📦 Material Design
  • Modern responsive front-end frameworks based on Material Design (Material 2, Materialize)
• 📦 Ionic UI Components
  • Ionic UI components for desktop, mobile, and native apps
• 📦 Office UI Fabric
  • Simple components that focus on appearance and styling while showing the visual language of Microsoft Office
• 📦 Semantic UI
  • Create beautiful, responsive layouts using human-friendly HTML
• 📦 Shopify Polaris
  • Build pages and components quickly with the Shopify Polaris design system
• 📦 UIKit
  • Develop fast and powerful web interfaces

Rapid Prototyping

• 📦 Fabulous
  • Visual editing of CSS
• 📦 FlexBox Cheatsheet
  • An interactive playground and display of how to use CSS FlexBox to lay out elements on a page
• 📦 Icon Fonts
  • Quickly insert icons from Font Awesome, Ionicons, Glyphicons, Octicons, and Material Design
• 📦 Tachyons CSS Snippets
  • Tachyons CSS utility library support. Built for designing. Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible.
• 📦 Tailwind CSS IntelliSense
  • Tailwind autocomplete, syntax highlighting, and linting
• 📦 Tailwind Docs
  • Easily access the Tailwind prototyping documentation from within VSCode

Live Design Previews

• 📦 Live Preview
  • Updates your prototype in your web browser automatically as you design
  • Great for large or two monitor setups
• 📦 View in Browser
  • Select which installed browser to view your page in
  • Great for viewing prototypes in multiple browsers at once
• 📦 Preview
  • Previews HTML, Markdown, Mermaid, and CSS style rules within VSCode
• 📦 Image Preview
  • Show image previews in the gutter and on hover

Drag & Drop Prototyping

• 📦 Draw.io Integration
  • Drag & Drop prototyping within VSCode
  • Includes stencils for Bootstrap, Material Design, iOS, and Android
  • Embeds an offline version of Draw.io within VSCode
• 📦 Excalidraw
  • Quickly draw low-fidelity UI prototypes
  • Includes libraries for design systems
• 📦 tldDraw
  • Quickly create drawings, diagrams, or visual documentation

Quick Content Creation

• 📦 Faker
  • Quickly generate realistic, fake data for names, addresses, lorem ipsum, and much more
• 📦 Placeholder images
  • Quickly generate and insert placeholder images into your designs
  • Great for wireframing or lo-fi prototypes
• 📦 Image Resizing & Conversion
  • Quickly resize images
  • Convert images to Webp, Avif, JPEG, or PNG formats

Collaboration

• 📦 Live Share
  • Collaboratively design in real-time, including integrated audio and chat
• 📦 Live Share Whiteboard
  • A real-time collaborative whiteboard for Live Share sessions

UX Design Artifact Generation

• 📦 TextUSM
  • Generate User Story Maps, Personas, Mind & Empathy Maps, and Site Maps
• 📦 Mermaid Editor
  • Create diagrams right in VSCode

Design Iterations

• 📦 Git History
  • Easily view design revisions and history

Accuracy & Quality

• 📦 HTML Hint
  • Checks the markup of your prototype as you create it
• 📦 Link Checker
  • Reports on any broken links as you design
• 📦 Code Spell Checker
  • Makes sure you don’t have stupid spelling mistakes in your prototypes
• 📦 Indent Rainbow
  • Makes your markup easier to read and follow

Questions & Issues

Each extension mentioned above is a separate open-source project and has its own repository with issue tracking. Select the appropriate extension link above to navigate to that project site.

Want to See Your Extension Added?

Open an Issue or Pull Request and I’ll take a look.

License

MIT

Bringing designers and developers together!