Workshop
Ways to build with them.
Components are objects to build with. The workshop is how: complete pages made only from real Vitrine components, and the skills we use to check our own work, written for the AI tools you build with.
Recipes
A live page, the components it uses, and a brief to build your own.
R01
The Portfolio
A personal site that leads with the work and ends with a way to reach you.
Masthead Nav · Draw Link · Highlighter Row · Meander Timeline · Sign-off Footer
Open the recipeR02
The Glass Portfolio
A portfolio under glass: the work first, the proof in numbers, and one way to begin.
Glass Tiles · Glow Pointer · Highlight Sweep · Hover Reel · Glass Card · Tidefill · Highlight Cursor · Ledger Cylinder · Intent Label
Open the recipeR03
The Showcase
A second portfolio, for visual work: a living backdrop, a signature, and projects catalogued like objects.
Silk Field · Flourish Name · Tidefill · Specimen Card · Lenticular Card · Halo Frame · Caustic Pool
Open the recipeR04
The Studio
A company site for a small studio or agency: what you do, what you've done, who says so.
Curtain Footer · Highlighter Row · Approach Card · Voices Carousel · Focus FAQ · Halftone CTA
Open the recipeR05
The Launch
A product page for a SaaS launch: atmosphere, live proof, honest pricing, answers.
Bayer Horizon · Metric Morph · Usage Ruler · Search FAQ · Inline CTA · Index Footer
Open the recipeR06
The Console
An operations dashboard: live numbers, ninety days of uptime, deployments and the day's activity.
Workspace Sidebar · Metric Morph · Uptime Ribbon · Focus Table · Activity Stream
Open the recipeR07
The AI Workspace
An AI application: conversations, a model choice, visible reasoning, cited answers and a composer.
Conversation Sidebar · Model Picker · Thinking Trace · Cited Answer · Message Actions · Prompt Composer
Open the recipeR08
The AI Company
A company website for an AI product: a calm hero, the product working on screen, proof, a clear price and one confident ask.
Silk Field · Agent Run · Glow Pointer · Feature Trio · Metric Morph · Usage Ruler · Focus FAQ · Focus Pull · Index Footer
Open the recipe
Skills
Each has its own page with the full text. For Claude Code, Cursor and ChatGPT.
Design
Decide what it should be, and say it in words, colours and motion.
- S01
/art-director
Vitrine — Art Director
Gives a site a distinctive design where every component has one idea of its own, drawn from the product's world and kept useful.
- S02
/interface-critic
Vitrine — Design Critic
Judges a design or component against a clear quality bar and gives a keep, refine or cut verdict.
- S03
/template-tells
Vitrine — Template Tells
Finds what makes a site look generated or templated, in the copy, the visuals and the code, and writes the specific replacement for each.
- S04
/interface-copy
Vitrine — Interface Copy
Writes buttons, errors, empty states and headlines that are specific and consistent, and demo content that reads as real.
- S05
/motion-director
Vitrine — Motion Critic
Makes every animation explain something, with a shared vocabulary and a real reduced-motion version; a script records what a page animates.
- S06
/theme-system
Vitrine — Theme System
Builds colour, type and space tokens as roles, with designed light and dark themes and a script that checks every contrast pair.
- S11
/copy-quality
Vitrine — Copy Quality
Audits and rewrites copy that reads as generic, inflated or machine-written — buzzwords, empty claims, symmetric sentences, vague CTAs — and keeps the personality that belongs to the product.
- S12
/landing-page-art-director
Vitrine — Landing Page Art Director
Plans a landing page section by section — one hero idea, a proof sequence, one call to action — and picks the Vitrine components for each slot with a reason.
- S13
/portfolio-art-director
Vitrine — Portfolio Art Director
Turns a person's real work into a portfolio with a point of view: what to lead with, how to show each project, and which few components carry the personality.
- S14
/content-structure-auditor
Vitrine — Content Structure Auditor
Maps what a page says against what its visitor came to find out, then fixes the order, headings, labels and length so the page reads in the right sequence.
Build
Make components other people can trust.
- S07
/component-author
Vitrine — Component Author
The house rules for writing a self-contained React component another developer can copy and trust.
- S15
/component-architect
Vitrine — Component Architect
Designs a component's API before its looks: what's fixed, what's configurable, which variants exist, and how its prompt, preview and code stay in agreement.
Check
Measure it on real devices before anyone else does.
- S08
/responsive-audit
Vitrine — Responsive Auditor
Measures a site at phone, tablet and desktop widths with Playwright, makes a contact sheet, fixes, re-runs.
- S09
/accessibility-pass
Vitrine — Accessibility Auditor
A hands-on keyboard, focus, naming, announcement, motion and contrast check, verified in a real browser.
- S10
/performance-pass
Vitrine — Performance Auditor
Measures load and responsiveness as a throttled phone, finds the biggest cause, fixes it and measures again.
Grow
Make it findable, understandable and worth choosing — by people and by search engines.
- S16
/seo-auditor
Vitrine — SEO Auditor
Audits on-page SEO page by page — titles, descriptions, headings, semantic HTML, internal links, alt text and search intent — and writes the exact fix for each.
- S17
/technical-seo-audit
Vitrine — Technical SEO Audit
Checks that search engines can crawl, understand and correctly index a site: robots, sitemap, canonicals, metadata, structured data, social cards, redirects and duplicates — with Next.js specifics.
- S18
/search-optimization
Vitrine — Search Optimization
Improves a site's own search box: relevance, synonyms, typo tolerance, ranking and empty states, proven with a table of real queries and their expected results.
- S19
/conversion-ux-review
Vitrine — Conversion UX Review
Walks the path from first screen to the action that matters, finds where people hesitate or get lost, and fixes friction without dark patterns.
Every component also carries its own build prompt on its page. The workshop is for what comes after: putting several of them together, and checking the result.