# Design Tools

> Inventory of Cortex design tools and what each one can do. Use when the user asks what design tools are available, what can we do visually, what design tooling exists in Cortex, which tool to use for UI polish, or how Paper, Figma, Shader Lab, Funky Shadow, DialKit, Interface Kit, Agentation, Rams, Wiretext, Pretext, and responsive preview fit together.

- **Type:** Skill
- **Install:** `agentstack add skill-tommylower-cortex-design-tools`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [tommylower](https://agentstack.voostack.com/s/tommylower)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [tommylower](https://github.com/tommylower)
- **Source:** https://github.com/tommylower/cortex/tree/main/design/tools/design-tools

## Install

```sh
agentstack add skill-tommylower-cortex-design-tools
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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](https://github.com/tommylower)
- **Source:** [tommylower/cortex](https://github.com/tommylower/cortex)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-tommylower-cortex-design-tools
- Seller: https://agentstack.voostack.com/s/tommylower
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.