Skip to content
UXClaim
Design Systems

Arcade Prototyper

Build interactive HTML prototypes using DevRev's production design system and Arcade components in Claude Code.

View source More in Design Systems

What it does

Arcade Prototyper is a Claude Code skill that generates production-ready interactive HTML prototypes using DevRev’s real design system. Describe what you want to build, and the agent produces a self-contained HTML file with no dependencies, build steps, or dev servers—open it directly in your browser.

How it works

The skill embeds four CSS layers (Chip fonts, theme tokens, typography, and components) into a single HTML file. Choose between two themes: Arcade (for Computer/Agent Studio) or DevRev App. Build with pre-styled components like buttons, inputs, cards, tables, dialogs, and sidebars using simple CSS class names.

Key features

  • Three templates: Chat interfaces, data lists, and detail panels—based on real Figma designs
  • Zero dependencies: No build process, no npm install, just HTML you can send to anyone
  • Two themes: Arcade (AI surfaces) and DevRev App (main product)
  • Figma integration: Pull designs directly from Figma Desktop and translate them into working prototypes
  • Component library: Buttons, inputs, cards, tables, avatars, toggles, menus, modals, and more—all pre-built

Who benefits

Designers and product managers exploring interactions before handoff to engineering. Anyone needing quick, shareable prototypes that feel like the real product.

Frequently asked questions

How do I install Arcade Prototyper?
Run `git clone https://github.com/asundiev-devrev/arcade-prototyper.git ~/.claude/skills/arcade-prototyper` to install globally, or `.claude/skills/arcade-prototyper` for a single project. Then invoke it in Claude Code with `/arcade-prototyper` or just describe what you want to prototype.
What design system does it use?
Arcade Prototyper uses DevRev's production design system: the Chip font family (Text, Display, and Mono), theme tokens (color, shadows, spacing), and a component library with buttons, inputs, cards, tables, dialogs, menus, avatars, and more.
Do I need to code to use Arcade Prototyper?
No. Just describe what you want in plain language: 'Build a chat interface' or 'Prototype a settings page with toggles.' Claude Code handles all the code—you get a finished HTML file on your Desktop.
What themes are available?
Two themes: Arcade (for Computer, Agent Studio, and AI surfaces) and DevRev App (for the main product). Choose based on where your prototype will live. If you don't specify, the agent will ask.
Can I use this for Figma designs?
Yes. Arcade Prototyper can pull designs from Figma Desktop via local connection (no API token needed), export screenshots for reference, and translate component structures into working prototypes using the Arcade component library.
How do I send the prototype to someone?
The prototype saves as a single HTML file on your Desktop. Email it, Slack it, or share the link—it opens in any browser with zero setup. No dependencies, no servers, no build steps.
What components are included?
Buttons (primary, secondary, destructive, smart), inputs, badges, cards, tabs, tables, menus, dialogs, alerts, avatars, toggles, checkboxes, sidebars, skeletons, and empty states. See SKILL.md for full HTML examples.
Can I customize colors and spacing?
Yes. The prototypes use theme tokens and a spacing system. Describe your changes in natural language ('Make the primary button purple', 'Add more padding'), and the agent will update the prototype for you.

Glossary

Arcade
DevRev's design theme for AI-powered surfaces like Computer and Agent Studio. Uses distinct colors, typography, and component styles optimized for conversational and agent-driven interfaces.
Theme tokens
Named CSS variables (like --text-color-primary or --bg-layer-01) that define colors, shadows, and spacing. Token values are raw HSL triplets that must be wrapped in hsl() to render as colors.
Chip fonts
DevRev's proprietary font family with three variants: Chip Text (body and labels), Chip Display (headings), and Chip Mono (code). Base64-encoded into prototypes to ensure consistent typography without external downloads.
Self-contained HTML
A single .html file with all CSS, fonts, and layout embedded inline. Requires no build process, dependencies, or server—opens directly in any browser and can be shared as a file or email attachment.

More in Design Systems

All →
Design Systems

Awesome Design Skill

Access 54+ brand design systems (Linear, Apple, Stripe, Vercel) for Claude Code UI development with complete design specifications.

zhouchang1988