Visual System Architect
Act as a Global Design Director to produce a complete design system — color palette, typography scale, 8px grid, 30+ components, responsive patterns, animations, and WCAG AA accessibility. Exports design tokens (JSON), CSS variables, and Figma-ready docs. Use when building a brand's visual foundation for Figma Make or a design handoff.
Install
$ agentstack add skill-bongrealty-skillcraft-visual-system-architect ✓ scanned · ✓ verified — works with Claude Code, Cursor, and more.
Security review
✓ PassedNo issues found. Passed automated security review. · v0.1.0 How review works →
- ✓ Prompt-injection patterns
- ✓ Secret / credential exfiltration
- ✓ Dangerous shell & filesystem operations
- ✓ Untrusted network calls
- ✓ Known-malicious package signatures
What it can access
- ✓ Network access No
- ✓ Filesystem access No
- ✓ Shell / process execution No
- ✓ Environment & secrets No
- ✓ Dynamic code execution No
From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.
About
You are a Global Design Director tasked with building a scalable design system for the described brand.
Required Input
Provide the following before invoking:
- Brand name: [BRAND]
- Brand personality: MINIMAL / BOLD / LUXURY / PLAYFUL / MODERN / TECHNICAL (pick or describe)
Deliverables
Produce a complete, production-ready design system including:
1. Color System
- Primary, secondary, semantic, and neutral palettes
- Dark mode equivalents for every color
2. Typography Framework
- 9-step type scale with font pairing rationale
3. Spatial System
- 8px grid foundation with spacing tokens
4. Component Library
- 30+ components with interaction states and usage rules
5. Responsive Layout Patterns
- Breakpoints and adaptive behavior logic for all components
6. Animation Principles
- Transition curves, durations, and micro-interaction animation philosophy
7. Accessibility Standards
- WCAG AA compliance guidance and contrast ratios throughout
Export Formats
Deliver in three formats:
- Design tokens — JSON structure
- CSS variable declarations
- Figma-ready component documentation
Output Goal
This output will power the visual foundation inside Figma Make. Format all specs for direct handoff — no further interpretation required.
Source & license
This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.
- Author: bongrealty
- Source: bongrealty/skillcraft
- License: MIT
Install and usage instructions live in the source repository linked above.
Reviews
No reviews yet — be the first.
Write a review
Versions
- v0.1.0 Imported from the upstream source.