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.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: tommylower
• Source: tommylower/cortex
• License: MIT

Install and usage instructions live in the source repository linked above.