visual-language-system

Define source-backed visual identity rules covering logo, colour, typography, iconography, photography, and layout.

2|Updated Jun 19, 2025
One-click install
npx skills add https://github.com/Prat05devs/dapper-city-threads --skill visual-language-system-prat05devs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-language-system
Source: https://github.com/Prat05devs/dapper-city-threads/tree/main/.agent/skills/visual-language-system
Command: npx skills add https://github.com/Prat05devs/dapper-city-threads --skill visual-language-system-prat05devs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Brand and design work often starts with decoration instead of strategy, producing visual systems that are generic, inconsistent, or disconnected from the project's actual context. This Skill translates a source-backed design brief into a complete, traceable visual language so every colour, font, and layout decision has a documented rationale. ## Core Features & Use Cases - Source-Backed Direction: Derives visual principles from a canonical design.md, marking every major decision as confirmed, inferred, or missing so assumptions stay visible. - Full Visual System Definition: Covers design language, logo rules, colour palette, typography roles, iconography, photography, layouts, illustration, and material direction with explicit misuse rules. - Visual Quality Gate: Ends with a checklist verifying traceability, hierarchy, readability, and project specificity before the system is applied. - Use Case: Before building a website, poster series, or social media kit for a new brand, run this Skill against the project's design.md to produce a complete visual rulebook that designers and AI tools can follow consistently. ## Quick Start Use the visual-language-system skill to define the complete visual identity for my project based on the attached design.md file.

Frequently Asked Questions about visual-language-system

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

FAQPage Schema
How do I create brand visual guidelines from a design brief?▼

Start with a canonical design.md containing project motive, audience, and personality, then derive 4-6 visual principles in the form 'desired quality, not wrong quality'. Define each principle's implications for layout, colour, typography, and imagery before specifying logo, palette, and type rules.

What should a visual language system document include?▼

A complete visual language system covers design language, logo usage and misuse rules, colour palette with roles and accessibility notes, typography by role, iconography style, photography direction, layout grids, illustration style, and material direction. Each decision should be marked as confirmed, inferred, or missing.

Can I define a visual identity without an existing design.md file?▼

No. If design.md is missing, stale, or contradicted by newer context, the workflow directs you back to create or update it first. Visual decisions must be traceable to source-backed strategy rather than invented from decoration preferences.

How do I choose brand colours and fonts that are not generic?▼

Derive choices from the project's motive, audience, category, and cultural references documented in the brief. Colours must carry meaning, hierarchy, or function, and unprovided fonts should be proposed as candidates explicitly marked as inferred rather than presented as final.

When should illustration or material direction be skipped in brand guidelines?▼

Define illustration only when it serves a clear purpose, and material or texture only when it supports meaning or usability. Trend-driven materials without justification from the design brief should be avoided entirely.