Use Case
The gap between design and code is one of the biggest sources of friction in product development. The Noya skill closes this gap by letting your AI agent read Noya design files and generate production-ready code β React components, CSS, design tokens β that matches the design exactly. No more manual translation from Figma to code.
Install the Noya skill and open your design file
Ask: 'Read my Noya design file and export the design tokens as CSS variables'
The skill reads the file and outputs a complete CSS custom properties stylesheet
Go further: 'Generate React components for each screen in this Noya file'
Review the output and ask for adjustments: 'Add TypeScript types to these components'
Copy these prompts and use them with your AI agent after installing Noya Agent
Export the design tokens from my Noya file as CSS variables
Generate React components from my Noya design file
What components are defined in my Noya project?
Select your agent
Option 1: Install via CLI (recommended)
Recommended (no pre-install needed)
npx clawhub@latest --dir ~/.claude/skills install noya-agentOr via clawhub CLI (if already installed)
clawhub --dir ~/.claude/skills install noya-agentβ οΈ Requires Node.js 18+. No Node? Use Option 2 below to download the ZIP instead. Install Node.js β
Option 2: Manual install (no Node required)
Download the ZIP, extract it, and place the folder at the path below. Restart your agent to activate.
Install path
~/.claude/skills/noya-agent/π‘Extract and place the folder at the path above, then restart your agent.