skills.rest
bongrealty
bongrealtyCOMMUNITY
Explore all skills by this author →
GitHub

visual-system-architect

Generate design systems with design tokens, CSS variables, and Figma-ready documentation.

2|1|Updated Mar 13, 2026
Search Tags:#accessibility#design system#design tokens#UI components#Figma#visual foundation
One-click install
npx skills add https://github.com/bongrealty/skillcraft --skill visual-system-architect
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-system-architect
Source: https://github.com/bongrealty/skillcraft/tree/main/visual-system-architect
Command: npx skills add https://github.com/bongrealty/skillcraft --skill visual-system-architect

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the challenge of establishing a consistent and scalable visual foundation for digital products, ensuring brand coherence and efficient design handoffs.

Core Features & Use Cases

  • Comprehensive Design System Creation: Generates color palettes, typography scales, spacing systems, and a library of 30+ UI components.
  • Cross-Format Deliverables: Exports design tokens in JSON, CSS variables, and Figma-ready documentation.
  • Use Case: When launching a new SaaS product, use this Skill to define its entire visual identity from scratch, ensuring all future design and development efforts align with the established system.

Quick Start

Act as a Global Design Director to produce a complete design system for a brand named "Innovatech" with a MODERN personality.

Frequently Asked Questions about visual-system-architect

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

FAQPage Schema
How do I generate a complete design system from scratch for a new SaaS product?▼

You build a complete design system by specifying a brand name and personality, which generates color palettes, typography scales, spacing, UI components, and accessibility standards for direct handoff.

What are design tokens and how do I export them as JSON and CSS variables?▼

Design tokens are standardized variables representing visual attributes. This Skill exports them as JSON, CSS variables, and Figma-ready documentation to ensure brand coherence across development.

Can I use this to create Figma-ready documentation for UI components?▼

Yes, you can create Figma-ready documentation. The system outputs comprehensive specifications for 30+ UI components, responsive patterns, and animations directly formatted for Figma handoff.

Does the generated design system include accessibility standards and responsive patterns?▼

Yes, the generated system includes accessibility standards and responsive patterns. It produces a comprehensive visual foundation ensuring scalable brand coherence across various digital product contexts.

What is the best way to establish a consistent visual foundation for digital products?▼

The best way to establish a visual foundation is generating a production-ready design system. This creates cross-format deliverables encompassing color, typography, spatial systems, and animations for efficient handoffs.

Do I need existing brand guidelines to build a design system using this approach?▼

No, you do not need existing brand guidelines. You can define a brand's visual identity from scratch by specifying a name and personality to generate the entire production-ready system.

Related Skills

Explore More Design & Creative Skills→
CrazySwamiCrazySwami
5

brand-guide

Generate HTML or Markdown brand guides documenting colors, typography, and responsive specs.

Community
Intermediate
algusaemalgusaem

tailwind-design-system

Build Tailwind CSS design systems with semantic tokens and CVA-based components.

Community
Intermediate
phoenicisfphoenicisf

figma-implement-design

Translate Figma designs into production-ready UI code.

Community
Advanced
gyalamanch001agyalamanch001a

tailwind-design-system

Build scalable Tailwind CSS v4 design systems with semantic tokens and CVA variants.

Community
Advanced