ultimate-design-system-master

Create comprehensive brand identities, UI patterns, and implementation deliverables from structured briefs.

47|4|Updated Feb 21, 2026

Search Tags:#brand identity #figma #design systems #presentation design #design to code #accessibility audit #ui ux design

Ready to run

npx skills add https://github.com/fabricioctelles/skills --skill ultimate-design-system-master

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ultimate-design-system-master
Source: https://github.com/fabricioctelles/skills/tree/main/skills/ultimate-design-system-master
Command: npx skills add https://github.com/fabricioctelles/skills --skill ultimate-design-system-master

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a structured workflow for turning an initial brand or product briefing into comprehensive design, branding, accessibility, implementation, marketing, and presentation deliverables.

Core Features & Use Cases

Design System Architecture: Define foundations, tokens, responsive grids, components, patterns, accessibility requirements, and developer documentation.
Brand and Product Design: Create brand identities, UI/UX patterns, marketing assets, Figma specifications, design critiques, and design-to-code implementation plans.
Specialized Design Reviews: Synthesize design trends, audit interfaces against WCAG 2.2 AA, and produce executive presentation narratives.
Use Case: A startup can answer the 18-question briefing, select the Design System Architect and Design-to-Code Translator generators, and receive a consistent design system with production-ready implementation guidance.

Quick Start

Use the ultimate design system master skill to collect the complete briefing, then select one or more generators to create the requested design deliverable.

Frequently Asked Questions about ultimate-design-system-master

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

FAQPage Schema

How do I build a complete design system from a product brief?▼

To build a design system from a product brief, collect the required 18 briefing inputs and select a specialized generator. This process creates comprehensive design architecture, UI patterns, tokens, and developer documentation from your structured product requirements.

Can I generate Figma specifications and UI patterns for a brand identity?▼

Yes, you can generate Figma specifications and UI patterns for a brand identity. The workflow processes your structured brand brief to produce comprehensive UI/UX patterns, marketing assets, and detailed Figma specifications for consistent implementation.

What's the best way to audit UI accessibility against WCAG 2.2 AA standards?▼

The best way to audit UI accessibility against WCAG 2.2 AA standards is using a specialized design review generator. It synthesizes interface evaluations to identify compliance gaps and produces actionable accessibility requirements for your design system.

Does this workflow support design-to-code translation and frontend implementation?▼

Yes, this workflow supports design-to-code translation and frontend implementation. By selecting the Design-to-Code Translator generator after briefing, you receive production-ready implementation guidance and frontend translation deliverables from your design architecture.

How do I create executive presentation narratives for design system projects?▼

You create executive presentation narratives by selecting the specialized presentation generator after completing your design briefing. This synthesizes your design system architecture and trend research into a structured narrative for stakeholder delivery.