[ PACK 01 / TRAINING DEPARTMENT ]
Design & Brand
Brand systems, UI, and visual content that ships.
[ EVERYTHING INSIDE ]
36 playbooks.
No filler, no mystery box.
36 PLAYBOOKS — 4 BLUEPRINTS · 8 FEATURES · 14 TASKS · 5 CHAINS · 5 FOUNDATIONS
BLUEPRINTS/ 4
- BLUEPRINT
Roll out a complete brand identity system in one engagement
Coordinates Lisa and Ridd through a full identity build: a logo family, a locked color and type system, a reusable art style, and a templated asset kit exported to print-ready collateral. Flow captures the voice sheet alongside, so the brand ships as one coherent system where every asset traces back to the same locked color, type, and style specs.
STAFF RIDD / LISA / FLOWgemskills:style-creatorgemskills:generate-imagegemskills:generate-svgbopen-tools:html-to-pdfREQUIRES INSTALLING: gemskills · bopen-tools - BLUEPRINT
Ship a marketing site backed by a documented, drift-proof design system
Ridd and Theo build a full marketing site on a single token-based shadcn system, Torque keeps Core Web Vitals clean, and every release passes through a visual-diff recap so the site and its design system never drift apart. Addresses the top 2026 AI-design failure mode where docs, tokens, and components each say something different.
STAFF RIDD / THEO / TORQUEshadcnfrontend-designweb-design-guidelinesvercel-react-best-practicesbopen-tools:frontend-performancebopen-tools:visual-reviewREQUIRES INSTALLING: shadcn* · frontend-design* · web-design-guidelines* · vercel-react-best-practices* · bopen-tools - BLUEPRINT
Produce an entire product-launch visual campaign from one brand lock
Caal frames the launch, then Ridd, Lisa, and Frames generate the landing imagery, pitch deck, social batch, and a demo GIF or video — all against one locked style so nothing looks like it came from a different tool. Turns a launch from a scramble of ad-hoc prompts into a governed, on-brand asset run.
STAFF CAAL / RIDD / LISA / FRAMESgemskills:deck-creatorgemskills:generate-imagegemskills:generate-videogemskills:section-dividersbopen-tools:cli-demo-gifREQUIRES INSTALLING: gemskills · bopen-tools - BLUEPRINT
Give a desktop app a native-feeling UI, icons, and sound
Ridd, Kris, and Frames build out a desktop app's interface with native macOS conventions — sidebar, traffic lights, light/dark — a full icon set at every required size, and a coordinated UI sound identity. The app stops feeling like a website in a window.
STAFF RIDD / KRIS / FRAMESmacos-designgemskills:generate-icongemskills:generate-svgvercel-react-best-practicesbopen-tools:ui-audio-themeREQUIRES INSTALLING: macos-design* · gemskills · vercel-react-best-practices* · bopen-tools
FEATURES/ 8
- FEATURE
Replace hardcoded values with a token system, proven by a visual diff
Ridd and Theo migrate an existing codebase off scattered hardcoded colors, spacing, and type onto a single shadcn token source of truth, then use a visual-diff recap to prove no screen regressed. Kills the drift between what the design says and what the code renders.
STAFF RIDD / THEOshadcnweb-design-guidelinesfrontend-designbopen-tools:visual-reviewREQUIRES INSTALLING: shadcn* · web-design-guidelines* · frontend-design* · bopen-tools - FEATURE
Make every screen, chart, and sound cue respect system theme
Ridd and Theo sweep an app so nothing hard-codes a color: every surface, data-viz palette, and interaction sound flips correctly between light and dark. The theme stops being a half-finished afterthought.
STAFF RIDD / THEOweb-design-guidelinesfrontend-designbopen-tools:ui-audio-themeREQUIRES INSTALLING: web-design-guidelines* · frontend-design* · bopen-tools - FEATURE
Add a 3D/WebGL hero that doesn't tank Core Web Vitals
Kris builds an animated 3D centerpiece with real shaders and Torque tunes it so the flashy hero ships without wrecking load performance on mobile. A showcase moment that survives a Lighthouse run.
STAFF KRIS / TORQUEbopen-tools:threejs-r3fbopen-tools:shadersbopen-tools:frontend-performanceREQUIRES INSTALLING: bopen-tools - FEATURE
Build a dashboard the AI composes from live data
Ridd and Theo wire a generative-UI surface so the product renders dashboards and forms from model output safely, giving each user a layout that adapts to the data they actually have in front of them.
STAFF RIDD / THEObopen-tools:generative-uibopen-tools:mcp-appsshadcnREQUIRES INSTALLING: bopen-tools · shadcn* - FEATURE
Give an app one cohesive, on-brand sound identity
Frames and Ridd map an app's clicks, notifications, navigation, and error states to one coordinated sound set tied to interaction constants, so the audio feels composed as a single identity — a rarely-done polish layer that makes a product feel expensive.
STAFF FRAMES / RIDDbopen-tools:ui-audio-themeREQUIRES INSTALLING: bopen-tools - FEATURE
Harden a component library to pass contrast and focus audits
Ridd audits an existing component set for contrast, focus states, and ARIA gaps and delivers fixes as a punch list plus patches, with a visual diff proving nothing changed visually for sighted users. Closes the accessibility gaps most AI-generated UI ships with.
STAFF RIDDaccessibility-a11yweb-design-guidelinesfrontend-designREQUIRES INSTALLING: accessibility-a11y* · web-design-guidelines* · frontend-design* - FEATURE
Add a metrics dashboard with correct chart types and accessible color
Ridd and Theo build an analytics surface that picks the right chart for each metric, encodes categories with an accessible palette, and stays readable in both themes. No more pie charts where a bar chart belonged.
STAFF RIDD / THEObopen-tools:chartingshadcnweb-design-guidelinesREQUIRES INSTALLING: bopen-tools · shadcn* · web-design-guidelines* - FEATURE
Let the product generate on-brand printable collateral on demand
Ridd wires an HTML-to-PDF pipeline into the product so it can emit print-ready, on-brand collateral — certificates, one-pagers, receipts, invoices — on demand, so generating a printable document becomes something the app does for itself at runtime.
STAFF RIDDbopen-tools:html-to-pdfgemskills:generate-svgREQUIRES INSTALLING: bopen-tools · gemskills
TASKS/ 14
- TASK
Get a shortlist of distinct, on-brief logo directions in one sitting
Lisa and Ridd generate a spread of stylistically distinct logo concepts from a creative brief, browsing the style library so each option explores a distinct visual direction you can react to and narrow down in the same sitting.
STAFF LISA / RIDDgemskills:generate-imagegemskills:generate-svggemskills:style-creatorgemskills:browsing-stylesREQUIRES INSTALLING: gemskills - TASKFREE SAMPLE
Export a full app-icon and favicon set at every platform size
Lisa generates and exports every icon size and format a product needs — iOS, Android, PWA, macOS, Windows, App Store, Play Store — already optimized, so nothing is left to hand-resize the night before submission. A single-session job that usually eats an afternoon of fiddling.
STAFF LISAgemskills:generate-icongemskills:optimize-imagesREQUIRES INSTALLING: gemskillsREAD THE FULL PLAYBOOK FREE → - TASK
Produce a week of on-brand, platform-sized social assets at once
Lisa batches a week's worth of social posts against a locked style and correct per-platform dimensions, so a full week of assets lands on-brand and correctly sized in one governed pass you can schedule out immediately.
STAFF LISAgemskills:generate-imagegemskills:section-dividersgemskills:optimize-imagesREQUIRES INSTALLING: gemskills - TASK
Build a presentation-ready investor or sales deck
Lisa runs the full deck pipeline — discovery, theme, copy, parallel slide generation, PDF stitch — to produce a narrative-structured, on-brand deck that is laid out and ready to present the moment it finishes.
STAFF LISAgemskills:deck-creatorREQUIRES INSTALLING: gemskills - TASK
Generate a cohesive SVG illustration set for a landing page
Lisa produces a matched set of scalable illustrations locked to the brand style, so a landing page gets custom art where every piece reads as one visual family down to the line weight and palette.
STAFF LISAgemskills:generate-svggemskills:edit-imageREQUIRES INSTALLING: gemskills - TASK
Generate a consistent avatar set for a team or agent roster
Lisa produces same-style avatars for every team member or agent persona in one pass — portraits, pixel variants, group lineups, or icon crops — so an about page or roster reads as one intentional set built from a single style reference.
STAFF LISAgemskills:avatar-portraitgemskills:pixel-avatargemskills:team-group-photoREQUIRES INSTALLING: gemskills - TASK
Compress and responsively size every image on a site
Torque and Lisa optimize every image on the site — compression, correct sizing, responsive delivery, modern formats — cutting page weight with no layout change and no touch to application logic.
STAFF TORQUE / LISAgemskills:optimize-imagesbopen-tools:frontend-performanceREQUIRES INSTALLING: gemskills · bopen-tools - TASK
Record a polished CLI or product-flow demo GIF
Torque produces a clean, embeddable demo GIF of a terminal session or product flow, ready to drop into a README or landing page. The kind of asset that makes a tool look real in three seconds.
STAFF TORQUEbopen-tools:cli-demo-gifREQUIRES INSTALLING: bopen-tools - TASK
Add visual rhythm to a long landing page without a redesign
Ridd and Lisa run a section-divider and pacing pass so a long page gets breathing room and visual rhythm, fixing the wall-of-sections feel without touching the underlying content or layout.
STAFF RIDD / LISAgemskills:section-dividersgemskills:browsing-stylesREQUIRES INSTALLING: gemskills - TASK
Turn low-res or messy screenshots into publish-ready hero images
Lisa upscales, cleans, and recomposes rough product screenshots into polished hero images, so the marketing site can show the real product without it looking like a phone photo of a monitor.
STAFF LISAgemskills:upscale-imagegemskills:segment-imagegemskills:edit-imageREQUIRES INSTALLING: gemskills - TASK
Produce a short narrated explainer video for a feature launch
Frames and Lisa generate a narrated feature video with a cloned or scripted voice track, ready for social or the homepage. A launch asset that used to require a video contractor.
STAFF FRAMES / LISAgemskills:generate-videobopen-tools:voice-cloneREQUIRES INSTALLING: gemskills · bopen-tools - TASK
Define a reusable art style so every future asset stays consistent
Lisa captures a custom, reusable style reference once, so every subsequent generation, from images to social graphics, stays visually consistent. The single most effective defense against AI-homogenized, off-brand output.
STAFF LISAgemskills:style-creatorgemskills:browsing-stylesREQUIRES INSTALLING: gemskills - TASK
Turn a visual mockup into shipped component code in one session
Ridd takes a Pencil.dev mockup and produces working shadcn component code from it, closing the design-to-code handoff without a manual re-build. The layout you drew is the layout that ships.
STAFF RIDDshadcnfrontend-designREQUIRES INSTALLING: shadcn* · frontend-design* - TASK
Design a print-ready business card or one-pager from brand assets
Ridd generates print-ready collateral straight from the brand system — business cards, postcards, one-pagers — via an HTML-to-CSS print pipeline, no separate design tool required. Good for business cards and one-pagers; not a prepress substitute for packaging.
STAFF RIDDbopen-tools:html-to-pdfgemskills:generate-svgREQUIRES INSTALLING: bopen-tools · gemskills
CHAINS/ 5
- CHAIN
Campaign landing page: research to copy to design to visuals
Caal researches positioning and writes the page, hands to Ridd for design, then to Lisa for on-brand imagery — three named handoffs that carry a launch page from AI-visibility research all the way to a shipped, fully imaged page you can keep editing.
STAFF CAAL / RIDD / LISAproduct-skills:ai-seo-optimizationweb-design-guidelinesgemskills:generate-imageREQUIRES INSTALLING: product-skills · web-design-guidelines* · gemskills - CHAIN
Brand system to reviewed, shipped site with full traceability
Flow documents the brand foundation, Ridd designs against a locked style, Theo ships it in shadcn, and every step is traceable from the voice-and-style docs down to the merged code. A new brand becomes a live site nobody has to reverse-engineer later.
STAFF FLOW / RIDD / THEOgemskills:style-creatorshadcnbopen-tools:visual-reviewREQUIRES INSTALLING: gemskills · shadcn* · bopen-tools - CHAIN
Flagship page: 3D hero, then sound identity, then UI polish
Kris builds a 3D centerpiece, Frames layers a coordinated sound identity, and Ridd does the final UI polish pass — a sequenced handoff where each stage builds on the last to produce a premium flagship page.
STAFF KRIS / FRAMES / RIDDbopen-tools:threejs-r3fbopen-tools:ui-audio-themefrontend-designREQUIRES INSTALLING: bopen-tools · frontend-design* - CHAINFREE SAMPLE
One narrative, three deliverables: deck, narrated video, social cutdowns
Lisa builds a themed deck, Frames turns it into a narrated video, and Lisa cuts it down into social clips — one story reused across three formats without re-briefing anyone. The clearest demonstration of chained asset production paying for itself.
STAFF LISA / FRAMESgemskills:deck-creatorgemskills:generate-videobopen-tools:voice-cloneREQUIRES INSTALLING: gemskills · bopen-toolsREAD THE FULL PLAYBOOK FREE → - CHAIN
Persona definition to art direction to consistent avatar batch
Flow defines the personas, Ridd sets art direction as a locked style, and Lisa generates every avatar from that one style, so new team or agent personas get consistent avatars traceable to a single documented reference.
STAFF FLOW / RIDD / LISAgemskills:style-creatorgemskills:pixel-avatargemskills:generate-iconREQUIRES INSTALLING: gemskills
FOUNDATIONS/ 5
- FOUNDATION
Brand voice sheet that trains every agent before a word ships
A fill-in-the-blank voice document Flow authors so every staff member knows how the brand writes and sounds before producing any copy or asset. The de-AI-slop layer that keeps generated text on-brand from the first draft.
STAFF FLOWbopen-tools:humanizeREQUIRES INSTALLING: bopen-tools - FOUNDATIONFREE SAMPLE
Visual identity spec that makes on-brand unambiguous
Ridd and Lisa lock logo usage, color tokens, type scale, imagery rules, and a reusable style reference into one document, so on-brand becomes a written spec any agent can generate against and any reviewer can check a new design against.
STAFF RIDD / LISAgemskills:style-creatorREQUIRES INSTALLING: gemskillsREAD THE FULL PLAYBOOK FREE → - FOUNDATION
Asset pipeline manifest so generated assets need no cleanup
Lisa documents export sizes, naming conventions, optimization settings, and storage paths, so every generated asset lands correctly named and sized with no manual tidying. The plumbing that makes batch generation actually usable.
STAFF LISAgemskills:optimize-imagesREQUIRES INSTALLING: gemskills - FOUNDATION
Design system token manifest as the single source of truth
Ridd and Theo capture one authoritative shadcn token set so code and design can never drift apart — the top-cited 2026 AI-design failure mode. Every build and review playbook starts from this manifest as the one source both the UI and the CSS resolve against.
STAFF RIDD / THEOshadcnweb-design-guidelinesREQUIRES INSTALLING: shadcn* · web-design-guidelines* - FOUNDATION
Native app design profile documenting platform conventions to follow
Ridd documents exactly which native macOS conventions a specific desktop app should honor, so the UI build starts from a concrete checklist of sidebar behavior, window controls, menu structure, and keyboard norms to follow.
STAFF RIDDmacos-designREQUIRES INSTALLING: macos-design*
* THIRD-PARTY PLUGIN FROM AN EXTERNAL MARKETPLACE — INVOKED HONESTLY AS AN INSTALL, NOT SOLD AS OURS. HOVER ANY PLUGIN NAME FOR ITS INSTALL COMMAND.
Train the design & brand desk.
$149 ONCE. YOURS FOREVER, UPDATES INCLUDED. 3 SAMPLES FREE.