Design System Settings
AI Agent Instructions
Use this Classifier via the SuperClassify API from server code, not browser playground automation. Turn a design brief into supported token choices. Supply brand constraints, audience, content density and accessibility requirements; map the returned choices to an existing token registry in code. Generate a preview, review it, then apply approved tokens. Do not fabricate exact colors, dimensions or a full design system from categorical labels. Class: superclassify/design-system-settings@1.0.0 Fetch setup as text: https://superclassify.com/skills/superclassify/SKILL.md Contract (JSON): https://superclassify.com/v1/resolve?ref=superclassify%2Fdesign-system-settings%401.0.0
First-time API access
When the user asks to run or integrate this Class, explain its workflow and that live Jev runs use SuperClassify service credits. Public card descriptions can be read without an account. Reuse an existing account, credit balance and API key when available. Otherwise, guide the user through the official setup links below. The user completes sign-in and any credit purchase on the website, then saves the API key in their application’s server secrets as SUPERCLASSIFY_API_KEY—not in chat. A separate TypeSafe account or Jev key is not required for the SuperClassify API. Reading a link does not authorize a purchase or paid run.
Maps a visual brief to predefined design tokens rather than generating application code.
superclassify/design-system-settings@1.0.0
Input
Send one raw text string.
Outputs
- icons (choice): minimal, outline, solid
- motion (choice): expressive, none, subtle
- borders (choice): borderless, strong, subtle
- corners (choice): rounded, soft, square
- density (choice): balanced, compact, spacious
- palette (choice): cool, mixed, neutral, warm
- type_style (choice): editorial, neutral_sans, technical
Examples
Dense technical console
Brief: compact technical operations console, square corners, neutral colors, monospaced accents, outline icons, strong separators. User requires reduced motion.
Author expectation: {"icons":"outline","motion":"none","borders":"strong","corners":"square","density":"compact","palette":"neutral","type_style":"technical"}
Warm editorial space
Brief: spacious editorial reading app, softened corners, warm earth palette, approved serif headings, minimal icons, subtle borders and restrained transitions.
Author expectation: {"icons":"minimal","motion":"subtle","borders":"subtle","corners":"soft","density":"spacious","palette":"warm","type_style":"editorial"}
Reduced motion takes precedence
Brief: a playful cool-colored rounded interface with expressive animations. Constraint: the user has enabled reduced motion.
Author expectation: {"motion":"none","corners":"rounded","palette":"cool"}