skills.rest
fabioc-aloha
fabioc-alohaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

graphic-design

Provide structured design principles, typography, color, and SVG guidelines.

Updated Jan 31, 2026
Search Tags:#typography#design#layout#SVG#visual-design#color-theory#graphic-design
One-click install
npx skills add https://github.com/fabioc-aloha/Alex_Sandbox --skill graphic-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: graphic-design
Source: https://github.com/fabioc-aloha/Alex_Sandbox/tree/main/.github/skills/graphic-design
Command: npx skills add https://github.com/fabioc-aloha/Alex_Sandbox --skill graphic-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Graphic Design Skill provides structured visual-design guidelines, patterns, and templates to streamline design work and maintain consistency across projects.

Core Features & Use Cases

  • Design Principles: Visual hierarchy, balance, alignment, and typography best practices to guide layout decisions.
  • Layout & Composition: Grid systems, proportion rules, and spacing strategies for scalable UI and print layouts.
  • SVG & Graphics: Practical guidance for creating scalable vector graphics and icon systems.
  • Use Case: When starting a new branding project, apply these patterns to generate a cohesive design system and deliver assets quickly.

Quick Start

Design a web app interface by applying a 12-column grid, a 16px body text scale with 1.5x line height, and a 2-3 color palette that respects contrast guidelines.

Frequently Asked Questions about graphic-design

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

FAQPage Schema
What are the core visual design principles for building a UI layout?▼

Core visual design principles for a UI layout include visual hierarchy, balance, and alignment. Applying a structured grid system with consistent spacing strategies ensures scalable and cohesive composition across interface designs.

How do I create a typography scale for web design?▼

To create a typography scale for web design, apply structured best practices like using a 16px body text scale with 1.5x line height. This ensures readable and proportional text across layouts.

What is the best way to choose a color palette that meets contrast guidelines?▼

The best way to choose a color palette that meets contrast guidelines is limiting your selection to a 2-3 color palette. This approach respects color theory and contrast rules while maintaining visual consistency.

How do I create scalable SVG icon systems for branding projects?▼

To create scalable SVG icon systems for branding projects, follow practical SVG guidelines that provide patterns for scalable vector graphics. This ensures consistent iconography across marketing collateral and UI layouts.

Can I use these graphic design patterns for both print layouts and UI design?▼

Yes, you can use these graphic design patterns for both print layouts and UI design. The guidelines cover grid systems, proportion rules, and spacing strategies that apply to scalable layouts across multiple visual mediums.

Related Skills

Explore More Design & Creative Skills→
MilUX-LtdMilUX-Ltd

design-system-setup

Generates a complete design system with tokens, styles, and templates from a JSON file of brand preferences.

Official
Advanced
pengelbrechtpengelbrecht
6

SVG Logo Designer

Generate scalable SVG logo concepts from descriptive briefs with layout variations.

Community
Intermediate
ChildoftheVibeChildoftheVibe

minimalist-ui

Generate CSS tokens and layout rules for minimalist bento-grid UI systems.

Community
Advanced
bdbchbdbch
2

design-compliance

Audit web design compliance against contrast, spacing, typography, and hit target standards.

Community
Advanced