Want to create interactive content? It’s easy in Genially!

Get started free

Vibe coding

Lori Mullooly

Created on March 4, 2026

Start designing with a free template

Discover more than 1500 professional designs like these:

Newspaper Presentation

Audio tutorial

Pechakucha Presentation

Desktop Workspace

Decades Presentation

Psychology Presentation

Medical Dna Presentation

Explore all templates

Transcript

Vibe coding

Using AI to Jazz up your libguides

START

Erin Tolman

Instructional Design Librarian United States Military Academy (West Point)

Coding experience:

Agenda

  • What is vibe coding?
  • Why vibe coding for the USMA Library website?
  • Before-and-afters
  • The vibe coding process
  • Vibe coding live (sort of)
  • Add your vibe code to LibGuides
  • Tips and lessons learned
  • Questions

The views expressed in this presentation are those of the author and do not reflect the official position or policy of the United States Military Academy, Department of Defense, Department of the Army, or the U.S. Government.

What is vibe coding?Partnering with an AI tool to create computer code using natural language prompting

  • We ONLY have LibGuides for our whole site, not just for research guides.
  • LibGuides makes creating research guides fast and easy for librarians.
  • Default templates often look dated and lack visual polish.
  • HTML and CSS code can bridge that gap.
  • USMA Library does not have a dedicated web developer.
  • Our library AI team (me and my two coworkers) were looking for ways to use AI in our regular work.

Why vibe coding?

Standard Box

Gallery box

  • Hover effect
  • Borders
  • Box within a box
  • Easy spacing

Vibe-coded text box

  • Use of horizontal space to prevent scrolling

Vibe-codEd rich text box

Standard rich text Box

  • Accordion
  • Icons

Vibe-codEd rich text box

Standard rich text Box

Standard Box

  • Search function
  • Colors and icons
  • Box within a box
  • Hover effect

Vibe-codEd rich text box

General Vibe Coding

Choose an AI tool (ChatGPT, Gemini, Claude, Copilot)

Have a conversation with the tool using prompts to get your code

Paste code to your LibGuide to test it for errors, then look for changes and return to step 2

Document and reuse your best snippets

vibe coding live! (sort of)

Original Archives and Special Collections Tutorial List

Prompt

Result

Paste code into LibGuide box

Prompt

Result

Paste code into LibGuide box

Prompt

Result

Paste code into LibGuide box

Prompt

Result

Paste code into LibGuide box

Prompt

Result

Paste code into LibGuide box

Prompt

Result

Paste code into LibGuide box

Add Vibe Code to LibGuides

Go to a LibGuide (work in a sandbox)

Use a new box standard box each time

Create a rich text box

Vibe code!

Click on source and paste your code

Start on a LibGuides page

Note: Consider working in a sandbox! However, this process will work on any LibGuide page.

Click on the Add Box link at the bottom of the LibGuide, this could be very far down the page depending on the LibGuide

This screen will pop up after you click Add Box

Choose Standard for Box type

If you are working on a published page, consider choosing Draft Mode until your box is complete.

Click Save

There is now a new standard box on your page

Your new box

Click on the Add/Reorder drop down menu and choose Rich Text/HTML

There is now a new rich text box on your page

Once you click Source, the rest of the choices will be grayed out

In your rich text box, click on Source

Paste the html code from your AI tool here

Click Save & Close

Code Examples

Code may be a few dozen or thousands of lines long. Copy and paste the whole thing into the rich text box.

Tips and lessons learned

  • Check with IT, your LibGuides admin, etc.
  • Practice in a sandbox.
  • Always keep your previous code!
  • Start a new box rather than adding another rich text section to the same box.
  • It may take a long chat to get the result you want!
  • As your chat gets longer, the AI tool may run slow or start producing poor output. Try to break down the steps of your project so chats don't get too long.

Tools to try

* There is a difference between free and paid accounts! Check with your organizaiton to see if they already subscribe to an AI tool.

  • ChatGPT: strong general coding help, quick HTML/CSS/JS snippets, walkthroughs.
  • Claude: careful reasoning and clean code edits; great at following constraints.
  • Gemini: large context for long files, mixed text+image inputs.
  • Copilot: Integrated with Microsoft products such as Excel, Word, and PowerPoint.

* Tools change rapidly! Even if you tried something before and didn't have a good experience, it's worth trying again!

Caution

  • Practice caution using Generative AI for any subject in which you are not already an expert, this includes coding.
  • With no programming experience, you only know if your code works, not if it's good.
  • Start with small tasks with low stakes!

questions

Give it a try - code ready

Create an expandable call out

Create a flip card

Get code

Create a set of buttons

Get code

Get code

Try a prompt

Try any of these prompts with a list of links

  • Turn a long list of links into an easy accordion
    • I have a long list of links that’s hard to scan. Please turn it into a simple accordion with sections I can open and close. Keep it basic and easy to paste into a LibGuide. Make the text left‑aligned and readable. Return one paste‑ready snippet. I’ll paste my list next.
  • Make friendly “cards” instead of a plain list
    • Please turn this list of links and short descriptions into a clean set of cards in 2–3 columns. Each card should show a title, 1–2 bullets, and a “View” button. Keep it simple, readable, and ready to paste into a LibGuide. One snippet, please. I’ll paste my items next.
  • Add quick filters by category at the top
    • Please organize these links into a simple layout with category buttons at the top (like “Research Tools,” “Services,” “Help”). When I click a category, show those links and hide the others. Keep it very simple and paste‑ready for a LibGuide. I’ll paste my list with the categories next.

AI Acknowledgement

The author used BoodleBox to create code snippets, come up with prompts, and edit this presentation.

Copy and paste the code and add it to a rich text box in the source area

<style type="text/css">.mini-links{font-size:16px;text-align:left;max-width:100%} .mini-links ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:6px 0} .mini-links a{display:inline-block;padding:8px 12px;border:1px solid #cfd6e0;border-radius:999px; background:#fff;color:#243447;text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.06);transition:.15s} .mini-links a:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.12);border-color:#2a6fdb} .mini-links a:focus-visible{outline:3px solid #2a6fdb;outline-offset:2px} </style> <div aria-label="Quick links" class="mini-links"><strong>🚀 Quick Links:</strong> <ul> <li><a href="https://www.loc.gov/" target="_blank">Library of Congress</a></li> <li><a href="https://www.worldcat.org/" target="_blank">WorldCat</a></li> <li><a href="https://scholar.google.com/" target="_blank">Google Scholar</a></li> </ul> </div>

Copy and paste the code and add it to a rich text box in the source area

<style type="text/css">.mini-callout{font-size:16px;text-align:left;max-width:100%} .mini-callout details{border:1px solid #ddd;border-left:6px solid #2a6fdb;border-radius:8px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.06);margin:8px 0} .mini-callout summary{list-style:none;padding:12px 40px 12px 14px;cursor:pointer;position:relative;font-weight:600;color:#243447} .mini-callout summary::-webkit-details-marker{display:none} .mini-callout summary:after{content:"＋";position:absolute;right:12px;top:50%;transform:translateY(-50%);transition:.2s;color:#2a6fdb;font-weight:700} .mini-callout details[open] summary:after{content:"－"} .mini-callout .body{padding:0 14px 12px 14px;color:#333;line-height:1.5} .mini-callout a{color:#2a6fdb;text-decoration:none} .mini-callout a:hover{text-decoration:underline} </style> <div aria-label="Expandable callout" class="mini-callout"> <details><summary>🎈 Did you know? Click to reveal</summary> <div class="body">The world&rsquo;s oldest continually operating library is the al-Qarawiyyin Library in Fez, Morocco&mdash;founded in 859 CE. <p><a href="https://en.wikipedia.org/wiki/Al-Qarawiyyin_Library" onclick="event.stopPropagation();" target="_blank">Read more &rarr;</a></p> </div> </details> </div>

Copy and paste the code and add it to a rich text box in the source area

<style> .fun-flip { font-size:16px; text-align:left; max-width:100%; } .fun-flip details { perspective:1000px; border:none; background:transparent; width:280px; } .fun-flip summary { list-style:none; cursor:pointer; outline:none; } .fun-flip summary::-webkit-details-marker { display:none; } /* Card container */ .fun-flip .card { position:relative; height:220px; transform-style:preserve-3d; transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .3s; border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.08); background:linear-gradient(135deg,#f7f9fc,#ffffff); border:1px solid #e6e9ef; } .fun-flip details:hover .card, .fun-flip details:focus-within .card { box-shadow:0 10px 26px rgba(0,0,0,.12); } /* Faces */ .fun-flip .face { position:absolute; inset:0; padding:18px; border-radius:14px; backface-visibility:hidden; display:flex; flex-direction:column; justify-content:center; gap:10px; } .fun-flip .icon { font-size:32px; } .fun-flip .title { font-size:18px; font-weight:700; color:#283445; } .fun-flip .hint { font-size:14px; color:#5b6b7a; } .fun-flip .back { transform:rotateY(180deg); background:#ffffff; border:1px dashed #cdd6e1; } .fun-flip .back p { margin:0; color:#333; line-height:1.5; } .fun-flip a.btn { align-self:flex-start; margin-top:8px; background:#2a6fdb; color:#fff !important; text-decoration:none; padding:8px 12px; border-radius:8px; font-weight:600; border:1px solid #1e58b0; } .fun-flip a.btn:hover { background:#1e58b0; } /* Flip state */ .fun-flip details[open] .card { transform:rotateY(180deg); } /* Focus ring */ .fun-flip summary:focus-visible { outline:3px solid #2a6fdb; border-radius:10px; } </style> <div class="fun-flip" aria-label="Flip card: fun fact about libraries"> <details> <summary> <div class="card"> <div class="face front"> <div class="icon">🎉</div> <div class="title">Tap to Reveal</div> <div class="hint">A fun fact about libraries</div> </div> <div class="face back"> <p>Melvil Dewey proposed a library flag in 1939 using—of course—decimal symbolism.</p> <a class="btn" href="https://www.loc.gov/" target="_blank" onclick="event.stopPropagation();">Explore LOC →</a> </div> </div> </summary> </details> </div>

UMBC Fall 1998