visual-design

Create a reusable visual spec with color, typography, spacing, and grid rules.

7|Updated Feb 14, 2026

Search Tags:#documentation #accessibility #design-system #visual-design #component-guidelines #color-typography-spacing

Ready to run

npx skills add https://github.com/KentoShimizu/sw-agent-skills --skill visual-design-kentoshimizu

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-design
Source: https://github.com/KentoShimizu/sw-agent-skills/tree/main/skills/visual-design
Command: npx skills add https://github.com/KentoShimizu/sw-agent-skills --skill visual-design-kentoshimizu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

Visual design workflows help teams define coherent color systems, typography, spacing, and composition across product surfaces, providing implementation-ready guidance for designers and engineers. It clarifies brand expression while preventing ad-hoc visual decisions that undermine usability and accessibility.

Core Features & Use Cases

Create an implementation-ready visual system covering color roles, typography scales, spacing rules, and layout grids.
Provide component usage guidelines and anti-pattern notes to reduce design deviations.
Integrate accessibility considerations (contrast, readability) into visual decisions.
Deliver a reusable visual spec template and assets for design and engineering handoff, example: assets/visual-spec-template.md.

Quick Start

Create an implementation-ready visual design system based on my brand brief and design goals.

Frequently Asked Questions about visual-design

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

FAQPage Schema

How do I create an implementation-ready visual design system for web and mobile?▼

To create a visual design system, you codify color roles, typography scales, spacing rules, and grid systems into a reusable spec. This ensures consistency and accessibility across product surfaces for both web and mobile interfaces.

What is a visual spec template and how does it handle color, typography, and spacing?▼

A visual spec template is a structured document that defines your color palette, typography scale, spacing rules, and grid system. It serves as an implementation-ready guide to maintain brand expression and accessibility across components.

How do I integrate accessibility considerations like contrast into my visual design system?▼

You integrate accessibility into your visual design system by applying contrast and readability checks directly to your color and typography decisions. This prevents ad-hoc visual choices that undermine usability and ensures compliance across layouts.

Can I use this visual design workflow for both web and mobile brand contexts?▼

Yes, you can apply this visual design workflow across web and mobile interfaces. It adapts composition rules and component guidelines to fit various brand contexts while maintaining consistent visual language and accessibility standards.

What's the best way to provide component usage guidelines and prevent design deviations?▼

The best way to prevent design deviations is to codify component usage guidelines and anti-pattern notes within your visual spec. This provides clear implementation-ready guidance for designers and engineers during handoff.

Do I need a brand brief to start building a visual design system?▼

You need a brand brief and design goals to start building a visual design system. Providing these inputs allows the system to accurately codify your brand expression into a structured color palette and typography scale.