skills.rest
ArnavPuri
ArnavPuriCOMMUNITY
Explore all skills by this author →
Website𝕏@arnavpuriGitHub

design-context

Establish and manage design context with brand identity, color palettes, and typography.

3|1|Updated Mar 16, 2026
Search Tags:#typography#design system#style guide#brand identity#color theory#context setup
One-click install
npx skills add https://github.com/ArnavPuri/designskills --skill design-context-arnavpuri
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-context
Source: https://github.com/ArnavPuri/designskills/tree/main/skills/design-context
Command: npx skills add https://github.com/ArnavPuri/designskills --skill design-context-arnavpuri

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures all AI-generated designs are cohesive and on-brand by establishing and saving brand identity, color systems, typography, and design preferences.

Core Features & Use Cases

  • Brand Identity Setup: Define brand name, tagline, mission, and industry.
  • Color System Definition: Specify primary, secondary, accent, and neutral colors with hex codes.
  • Typography Configuration: Set heading, body, and mono fonts, base size, scale ratio, and weights.
  • Style Archetype Selection: Choose from Minimal, Bold, Playful, Corporate, Luxurious, Retro, Brutalist, or Organic styles.
  • Audience & Tone Definition: Specify primary audience, aesthetic preferences, and communication tone.
  • Brand Mark & Platform Preferences: Define logo usage, icon style, and platform priorities (Web, Mobile, Social, Print).
  • Context Persistence: Saves gathered context to .agents/design-context.md for reuse.

Quick Start

Set up the design context by defining the brand name as "Innovatech Solutions", primary color as "#4A90E2", and heading font as "Roboto".

Frequently Asked Questions about design-context

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

FAQPage Schema
How do I set up a brand identity and design system for AI-generated content?▼

To set up a brand identity and design system, you define brand name, color palettes, typography, and style archetypes. This configuration is then saved as persistent context to guide subsequent design tasks and ensure visual consistency.

Can I automatically detect existing design tokens from Tailwind CSS or CSS variables?▼

Yes, you can automatically detect existing design tokens from Tailwind CSS and CSS variables. The skill extracts these foundational styles and incorporates them into your persistent design system configuration without requiring manual color or font entry.

What's the best way to maintain visual consistency across multiple platforms like Web and Mobile?▼

Maintaining visual consistency across Web and Mobile requires establishing a persistent design context. By defining platform priorities, color systems, and typography once, subsequent design outputs automatically adhere to these unified brand guidelines.

How do I configure typography settings like font scale ratio and weights for a style guide?▼

Configuring typography for a style guide involves specifying heading, body, and mono fonts, alongside base size, scale ratio, and weights. These settings are gathered conversationally and stored to ensure consistent text rendering.

Do I need to manually enter all my brand colors and style preferences to build a design context?▼

No, you do not need to manually enter all brand colors and style preferences. The skill conversationally gathers missing information while automatically detecting existing tokens, streamlining the creation of your design system configuration.

What style archetypes can I choose from when establishing a design system?▼

When establishing a design system, you can choose from style archetypes including Minimal, Bold, Playful, Corporate, Luxurious, Retro, Brutalist, or Organic. This selection defines the overarching visual direction of your brand identity.

Related Skills

Explore More Design & Creative Skills→
therealityreporttherealityreport

design-docs

Extract design tokens from articles and generate brand-aligned pages.

Community
Intermediate
dmedina-devdmedina-dev
1

ckm:brand

Synchronize brand guidelines, design tokens, and marketing assets across projects.

Community
Advanced
ihlamuryihlamury
73

framer-ui-skills

Enforce Framer design constraints for dark mode interfaces with Inter font and 4px grid.

Community
Intermediate
docaohieu2808docaohieu2808

design

Orchestrate design tasks across brand identity, design tokens, and UI styling.

Community
Advanced