Design tools

Design Tools

Use this skill to answer tool-discovery questions. It is an index, not a replacement for the specific tool skills. Load the named skill before installing or applying a tool.

Canvas & Design Work

• Paper (paper) — active design canvas at paper.design when Paper tooling is available; use for visual layout work, artboards, and design iteration.
• Figma MCP (figma-mcp) — read Figma frames, variables, component structure, and generate code from Figma context.
• Wiretext (wiretext) — quick ASCII wireframes with editable browser links before committing to code or Figma.

Visual Effects

• Shader Lab (shader-lab) — WebGPU shader compositions for hero visuals, warped text, image layers, liquid backgrounds, and post-processing.
• Funky Shadow (funky-shadow) — dithered, Oklab gradient shadows rendered with canvas behind cards, tiles, icons, or visual accents.
• Gradients (gradients) — CSS gradient construction, color-space choices, glow recipes, masks, and gradient performance rules.
• Loading States (loading-states) — skeletons, progress states, and crafted dot-matrix micro-loaders.
• Fluid Functionalism (fluid-functionalism) — shadcn-compatible animated controls, proximity hover, AI/chat surfaces, and spring-driven component installs.

Motion & Interaction

• Framer Motion (framer-motion) — React/Next.js motion patterns: reveals, hover/tap states, layout animations, and page transitions.
• View Transitions (view-transitions) — native browser/React shared-element and route transitions.
• Interface Craft (interface-craft) — storyboard animation, design critique, and DialKit-oriented tuning patterns.
• CSS Interaction Tips (css-interaction-tips) — small interaction fixes: hover flicker, button press, tap targets, tooltip timing, popover origins.
• Interface Sound (interface-sound) — tasteful UI sound feedback and procedural web audio.

Live Tuning & Feedback

• DialKit (dialkit) — dev-only floating controls for tuning animation, spacing, color, blur, and shadow values in React.
• Interface Kit (interface-kit) — dev-only browser overlay for editing visual styles directly.
• Agentation (agentation) — dev-only visual annotation toolbar for design feedback.
• Agentation Self-Driving (agentation-self-driving) — autonomous browser annotation workflow when Agentation is installed.
• Rams (rams) — external design-review command for accessibility, visual consistency, and UI polish when explicitly requested.

Layout & Verification

• Responsive Craft (responsive-craft) — responsive build/audit workflow and multi-breakpoint preview.
• Pretext (pretext) — deterministic text measurement for labels, headings, virtualized rows, masonry, and layout-shift prevention.
• Preflight (preflight) — final design audit for accessibility, visual consistency, responsive issues, and AI-pattern tells.

Choosing Quickly

Need	Start with
Sketch page structure	wiretext or paper
Extract from Figma	figma-mcp
Work in Paper canvas	paper
Build a shader hero	shader-lab
Add textured card shadows	funky-shadow
Add a crafted loader	loading-states
Add native shared-element transitions	view-transitions
Add UI sound feedback	interface-sound
Add Fluid Functionalism components	fluid-functionalism
Tune live visual values	dialkit
Edit visual styles in browser	interface-kit
Collect design feedback	agentation
Run external Rams review	rams
Fix mobile/responsive layout	responsive-craft
Verify text fit	pretext
Ship-check a UI	preflight

Rule

Tools are opt-in unless their specific skill says otherwise. For dev-only overlays, follow ../dev-overlays.md: install as dev dependencies and mount only behind a development gate.