AI Driven Design with Histoire and Nuxt Layers
summary
Walks through using Cursor to generate Vue components and Creates tooltip component via Cursor that produces a Histoire story and a Nuxt Content doc automatically; components are produced with no manual coding except minor tweaks, and the tooltip renders (placements mostly correct but not perfect). Uses REA UI as the unstyled base, relies on Histoire for stories and Nuxt Content for docs, attempts Nuxt Layers for reuse but that part doesn’t fully work yet, and automated testing wasn’t implemented.
AI-written summary · about
chapters (10)
- 0:00AI-driven design experiment
- 2:09Setting up component library
- 3:53Creating components with AI
- 8:09Prompting tooltip component
- 12:00AI validates tooltip
- 14:28Reviewing tooltip component
- 16:24AI component challenges
- 17:07Nuxt layers for reuse
- 17:50AI workflow resources
- 18:34Q&A
related talks
31mAdaptive UIs with Vue and AI: What If Your UI Could Build Itself?
10mAI Helped Me Learn: Vue Through the Lens of a React Developer
49mThe Importance & Usage of AI in Vue.js
36mHow to Create 'Vuetiful' Data-Driven User Interfaces
45mAn AI-Enabled Framework? Using LLMs to Put People First
34mComponent Documentation Made Easy
35mVue-doo Magic: AI Development Tricks
29mGuiding Agentic AI with Vue and Pinia