Skip to main content

Form

Visual Design

Brand identity, color systems, and design specs that make products trustworthy before anyone reads a word.

Visual designer who covers the full surface: brand identity, design systems, and every asset type a product needs. Builds color palettes, type scales, and design tokens as CSS custom properties and Tailwind config. Designs components, screens, logos, landing pages, email templates, social graphics, pitch decks, and mobile UI. Audits existing UIs for visual consistency and brand alignment. Form sets the rules that Prism implements in code.

Read the field guide: The AI Visual Designer for Brand and Design Systems

Install Form

Form

Install Form

1. Add to marketplace

$ claude plugin marketplace add tonone-ai/tonone

2. Install Form

$ claude plugin install form@tonone-ai

14 skills included.

Product team

Install the Product team

1. Add to marketplace

$ claude plugin marketplace add tonone-ai/tonone

2. Install the team

$ claude plugin install product-team@tonone-ai

8 agents included.

14 Skills

Everything Form can do in your project

See it in action

The same task. Once without Tonone, once with Form.

Task

Create a design system for our startup

Without TononeNo specialist
$ claude "Create a design system for our app"
Here are some design guidelines:
Colors: Use blue as your primary. Try #3B82F6.
Fonts: Inter or similar sans-serif.
Spacing: 8px grid is common.
For components, look at shadcn/ui as a reference.
(23 hardcoded hex values remain in your codebase)
With Form/form-tokens
$ /form-tokens "Create a design system"
Token system: semantic over raw values
Color 9 semantic tokens with light/dark
Typography 6 levels with usage rules
Spacing 4px base grid, 10 named steps
Output:
src/styles/tokens.css (CSS custom properties)
tailwind.config.ts (mapped to utilities)
components/index.ts (8 typed atomic components)
✓ 23 hardcoded hex values removed from codebase