skills.rest
kinncj
kinncjCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

visual-identity

Generate palette, typography, and tokens JSON for design-tokens workflows.

23|7|Updated Feb 14, 2026
Search Tags:#typography#branding#tokens#design-tokens#palette#visual-identity
One-click install
npx skills add https://github.com/kinncj/MAPLE --skill visual-identity-kinncj
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-identity
Source: https://github.com/kinncj/MAPLE/tree/main/template/.opencode/skills/visual-identity
Command: npx skills add https://github.com/kinncj/MAPLE --skill visual-identity-kinncj

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create a cohesive visual identity from a brief or set of brand keywords.

Core Features & Use Cases

  • Generate a palette, typography pairing, a spacing scale, and a radius scale, all serialized to JSON for the design-tokens workflow.
  • Produce JSON artifacts (palette.json, typography.json, tokens.json) that feed the design-tokens skill and require human approval before propagation to UI.
  • Support optional customization via a primary_color override and existing_tokens merge.

Quick Start

Provide a brief and keywords to generate the palette, typography, and token JSON artifacts for design-tokens.

Frequently Asked Questions about visual-identity

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate design tokens from brand keywords?▼

Generate design tokens from brand keywords by providing a brief and optional primary color to produce palette.json, typography.json, and tokens.json artifacts serialized for the design-tokens workflow. Outputs are saved to docs/design/identity for human approval before deployment.

What is a visual identity generation workflow with JSON tokens?▼

A visual identity generation workflow creates a cohesive palette, typography pairing, spacing scale, and radius scale serialized to JSON artifacts. These outputs feed the design-tokens workflow and require human approval before propagation to the UI.

Can I merge existing tokens when generating a new brand palette?▼

You can merge existing tokens by passing the existing_tokens input parameter alongside your brief and keywords. The generated palette, typography, and token JSON artifacts will integrate with your provided tokens during the serialization process.

Does generated palette JSON pass WCAG contrast checks?▼

Generated palette JSON combinations must pass WCAG contrast checks before outputs are finalized. The visual identity generation process ensures palette color combinations meet accessibility standards within the resulting palette.json artifact.

How do I customize the primary color in a typography and palette JSON output?▼

Customize the primary color in typography and palette JSON outputs by providing an optional primary_color override in your input parameters. This overrides the default generated primary color while maintaining the cohesive visual identity across all JSON artifacts.

Related Skills

Explore More Design & Creative Skills→
zlovexforeverzlovexforever

brand-guidelines

Apply Anthropic brand colors and Poppins/Lora typography to artifacts.

Community
Basic
joi-fairsharejoi-fairshare
1

design-refine

Dispatch Impeccable refinement commands to align UI with design tokens.

Community
Advanced
chicongstchicongst
2

ui-design

Automates UI design execution by applying tokens, palettes, typography and spacing across frameworks.

Community
Intermediate
mkatoguimkatogui
3

brand-identity-generator

Generate brand identity systems with CSS-ready tokens and brand guidelines.

Community
Advanced