studioinfj-art

studioinfj-art/stoners-design

Plugin Claude Code

Plugin marketplace listing 1 plugin: stoners-design.

studioinfj-art/stoners-design

Plugin Claude Code

52 design skills and a searchable design MCP for Claude Code.

studioinfj-art/stoners-design

MCP server Claude CodeCodexCursor

MCP server "stoners-design" as configured in studioinfj-art/stoners-design. Runs ${PLUGIN_ROOT}/mcp/server.mjs with node.

studioinfj-art/stoners-design

Instructions file Gemini CLI

Gemini CLI instructions for studioinfj-art/stoners-design: Use the skills in skills/ as a design toolkit. Select only the skills relevant to the user's request, preserve the user's constraints, and move from product intent to polished implementation. The stoners-design MCP server can list, search, and load the…

studioinfj-art/stoners-design

Skill Claude CodeCodex

Command-by-command After Effects editing via ae-cli. Best for surgical edits on existing human-made scenes (especially partial expression/property changes) and for debugging.

studioinfj-art/stoners-design

Skill Claude CodeCodex

Primary After Effects workflow using ae-cli apply-scene with declarative JSON (composition/layers/animations/expressions/parent/repeater/effect params). Use this by default for composition building.

studioinfj-art/stoners-design

Skill Claude CodeCodex

Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading)…

studioinfj-art/stoners-design

Skill Claude CodeCodex

Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional…

studioinfj-art/stoners-design

Skill Claude CodeCodex

Generate developer handoff specs from a design. Use when a design is ready for engineering and needs a spec sheet covering layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, and animation details.

studioinfj-art/stoners-design

Skill Claude CodeCodex

Motion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Two modes — build interactive components with purposeful motion, or audit existing animations to catch AI-slop motion patterns (audit emits a branded HTML report with looping demos). Use when creating, adding…

studioinfj-art/stoners-design

Skill Claude CodeCodex

Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.

studioinfj-art/stoners-design

Skill Claude CodeCodex

The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is design-taste-frontend (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.

studioinfj-art/stoners-design

Skill Claude CodeCodex

Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.

studioinfj-art/stoners-design

Skill Claude CodeCodex

This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

studioinfj-art/stoners-design

Skill Claude CodeCodex

Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code implementations. For…

studioinfj-art/stoners-design

Skill Claude CodeCodex

Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server…

studioinfj-art/stoners-design

Skill Claude CodeCodex

Turn a Figma file, prototype, flow, or selected nodes into an interactive, story-driven, visual-first product design case study that explains decisions through behavior, trade-offs, and evidence. Use when Codex is asked to create, rewrite, or sharpen portfolio case studies, redesign writeups, or business-facing design…

studioinfj-art/stoners-design

Skill Claude CodeCodex

Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a…

studioinfj-art/stoners-design

Skill Claude CodeCodex

Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.

studioinfj-art/stoners-design

Skill Claude CodeCodex

Product design strategy and critique skill for founder-level product thinking, data-driven UX, and early-stage product decisions. Use when Codex is asked to act as a product designer, founding designer, design partner, UX/product strategist, or to critique, design, improve, or explain product flows, apps, dashboards…

studioinfj-art/stoners-design

Skill Claude CodeCodex

Use this skill when the user wants to add animations to a React project using Framer Motion. Triggers on: "animate", "animation", "framer motion", "framer", "motion", "transition", "page transition", "scroll animation", "hover animation", "fade in", "slide in", "spring animation", "whileHover", "whileTap", "variants"…

studioinfj-art/stoners-design

Skill Claude CodeCodex

Create distinctive, production-grade frontend interfaces with high design quality. Use when building or refining web components, pages, or apps (HTML/CSS/JS/React) with bold aesthetics, purposeful layouts, motion, and accessibility. Avoid generic AI-looking output.

studioinfj-art/stoners-design

Skill Claude CodeCodex

Redesign, critique, or implement user-provided frames, screens, flows, prototypes, Figma nodes, screenshots, or frontend UI using current Google Design and Material Design 3 guidance. Use when the user asks for a Google-style, Material 3, Material You, M3 Expressive, Android-like, Google UX, interaction, ergonomic…

studioinfj-art/stoners-design

Skill Claude CodeCodex

Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.