jshmllr

name

design-exploration-swarm-figma

description

Orchestrate a multi-agent design exploration swarm that analyzes a codebase's UI, expands it into diverse design concepts, and renders structured exploration rounds into a Figma file using the project's connected design system library. Generates multiple UI directions (affordance, layout, interaction, copy) and refines top concepts for decision-making. Use when the user wants to explore how a product UI could evolve in Figma specifically — not just recreate it. Triggered by phrases like "explore design directions in Figma", "generate UI concepts in Figma", "design exploration swarm in Figma", "rethink this UI in Figma", or "show multiple design options in Figma". Prefer this over the Paper variant when the user names Figma, provides a figma.com URL, or wants to use an existing Figma component library.

Design Exploration Swarm — Figma

You are a design exploration swarm orchestrator.

Mission: Analyze a codebase's UI, then generate and render a

jshmllr

name

design-exploration-swarm-paper

description

Orchestrate a multi-agent design exploration swarm that analyzes a codebase's UI, expands it into diverse design concepts, and renders structured exploration rounds into a Paper.design file using HTML-first artboards. Generates multiple UI directions (affordance, layout, interaction, copy) and refines top concepts for decision-making. Use when the user wants to explore how a product UI could evolve in Paper specifically — not just recreate it. Triggered by phrases like "explore design directions in Paper", "generate UI concepts in Paper", "design exploration swarm in Paper", "rethink this UI in Paper", or "show multiple design options in Paper". Prefer this over the Figma variant when the user names Paper, when there is no existing component library to lean on, or when a lightweight HTML-based exploration is preferable to Figma's Plugin API workflow.

Design Exploration Swarm — Paper

You are a design exploration swarm orchestrator targeting Pape

jshmllr

name	design-swarm
description	Orchestrate a multi-agent swarm that analyzes a codebase for UI elements, then draws them in Paper.design using the Prowl design system. Use when the user wants to render codebase UI into a Paper canvas — tables, forms, dashboards, pages, or any visual element group. Triggered by phrases like "draw the UI in Paper", "render components in Paper", "design swarm", or "recreate the app in Paper".

Design Swarm — Codebase → Paper.design Orchestrator

You are a swarm orchestrator. Your mission: analyze a codebase to find a category of UI elements, then coordinate parallel agents to draw them in Paper.design matching the Prowl Storybook design system.

Arguments

jshmllr

# Gradient Border Technique for Tailwind CSS

A technique for creating refined gradient borders using box shadows instead of CSS borders. This approach allows borders to blend naturally with existing shadows for a modern, polished appearance.

## How It Works
Rather than using a `border`, layered box shadows with negative spread values create the border effect. This enables the border to merge cleanly with element shadows and produces a subtle gradient-like feel.

## Key Principles
1. **Box-sizing**: All elements use `border-box` (set globally).

jshmllr

/* Hardcover book cover effect for card views in Obsidian Bases */

.bases-view {
  --bases-cards-background: transparent;
  --bases-cards-cover-background: transparent;
  --bases-cards-shadow: none;
  --bases-cards-shadow-hover: none;
}
.bases-cards-group {
  gap: 24px;

jshmllr

---

description: AI Animation + Feedback UX. Standardize how our app visualizes agent thinking, progress, transitions, uncertainty, errors, and feedback loops. Ensure users remain in control, see what the AI is doing, and can steer, stop, or improve it. globs:

• "app/**/*"
• "src/**/*"
• "packages/**/*"
• "components/**/*"

jshmllr

{
  "name": "My workflow 7",
  "nodes": [
    {
      "parameters": {
        "model": "anthropic/claude-3.7-sonnet",
        "options": {}
      },
      "type": "@n8n/n8n-nodes-langchain.lmChatOpenRouter",
      "typeVersion": 1,

jshmllr

(() => {
  // Find the chat log container
  const chatLog = document.querySelector('div[role="log"][aria-label="Chat messages"]');
  if (!chatLog) {
    console.warn('Chat container not found.');
    return;
  }

  // Remove existing timeline if any
  const existingTimeline = document.getElementById('chat-timeline-sidebar');

jshmllr

Product Design and Market Strategy Lexicon

Originally published on jshmllr.com

Overview

Product designers, entrepreneurs, and strategic thinkers can use this language to:

• Articulate complex design challenges more precisely
• Shift perspective from feature-driven to experience-driven design
• Create shared understanding across multidisciplinary teams

jshmllr

# [Project Name]: Crafting a Transformative Solution

![Cover Image](./path-to-cover-image.jpg)

## The Challenge

Imagine a world where [insert a compelling, thought-provoking hook that captures the reader's attention and sets the stage for the case study].

This was the reality faced by our client, [Client Name], who came to us seeking a solution that would [insert clear problem statement].