Skip to content
cccskills
FreePublished on GitHub

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.

The English summary is being prepared. Showing the original description.

Works withFigma
See how to install

Files included (1)

  • SKILL.md1.7 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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:

  1. Design tokens — JSON structure
  2. CSS variable declarations
  3. 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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Act as a Senior Accessibility Engineer to audit a page, component, or design against WCAG 2.2 AA. Produces a triaged finding list (critical/serious/moderate), focus-order map, contrast report, ARIA decision tree, and a screen-reader test plan. Use when shipping new UI, hardening an existing flow, or preparing for VPAT/accessibility conformance.

The English summary is being prepared. Showing the original description.

rajitsaha/100xprism10Updated Oct 14, 2026

When the user wants to plan, design, or implement an A/B test or experiment — "split test," "variant copy," "multivariate test," "hypothesis," "statistical significance," "how long should I run this test," or comparing two versions. For tracking implementation, see analytics-tracking. For page-level conversion optimization, see page-cro.

The English summary is being prepared. Showing the original description.

rajitsaha/100xprism10Updated Oct 14, 2026

When the user wants to generate, iterate, or scale ad creative — headlines, descriptions, primary text, full variations — for any paid platform; 'ad copy variations,' 'RSA headlines,' 'bulk ad copy,' 'creative testing,' 'write me some ads.' For campaign strategy and targeting, see paid-ads. For landing page copy, see copywriting.

The English summary is being prepared. Showing the original description.

rajitsaha/100xprism10Updated Oct 14, 2026

ai-seo

Free

When the user wants content cited by LLMs or surfaced in AI-generated answers — 'AI SEO,' 'AEO,' 'GEO,' 'LLMO,' 'answer engine optimization,' 'AI Overviews,' 'optimize for ChatGPT/Perplexity/Claude,' 'AI citations,' 'zero-click search.' For traditional technical/on-page audits, see seo-audit. For structured data, see schema-markup.

The English summary is being prepared. Showing the original description.

rajitsaha/100xprism10Updated Oct 14, 2026

When the user wants to set up, improve, or audit analytics tracking and measurement — "GA4," "conversion tracking," "event tracking," "UTM parameters," "tag manager," "GTM," "tracking plan," "attribution," "Mixpanel," "Segment," "are my events firing," or how to measure marketing results. For A/B test measurement, see ab-test-setup.

The English summary is being prepared. Showing the original description.

rajitsaha/100xprism10Updated Oct 14, 2026

Architectural decision advisor for cloud, data, and SaaS distributed systems. Use when the user asks "should we use X or Y", weighs a tradeoff, or needs a decision matrix, scaling analysis, cost-at-scale review, data-tier design, multi-tenancy model, or API/resilience guidance. For full technical blueprints, use enterprise-design.

The English summary is being prepared. Showing the original description.

rajitsaha/100xprism10Updated Oct 14, 2026

See all skills by rajitsaha

Report a problem with this skill