skills.rest
pmkshar
pmksharCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

marq-design-system-architect

Generate complete design systems from briefs or existing sites.

Updated Aug 23, 2026
Search Tags:#typography#branding#UI/UX#design system#design automation
One-click install
npx skills add https://github.com/pmkshar/marqaiskills --skill marq-design-system-architect
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: marq-design-system-architect
Source: https://github.com/pmkshar/marqaiskills/tree/main/marq-design-system-architect
Command: npx skills add https://github.com/pmkshar/marqaiskills --skill marq-design-system-architect

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill overcomes the challenge of inconsistent UIs or brand dissonance, offering a professional way to generate design systems from scratch or based on existing briefs or sites.

Core Features & Use Cases

  • Design System Generation: Build complete, brand-aligned design systems.
  • Color & Typography Tokens: Manages color palettes, typefaces, and scales.
  • Space & Layout Configuration: Establishes consistent whitespace, grid systems, and breakpoints.
  • Component Specification: Details UI components with tokens, variants, states, and accessibility notes.
  • Usage Documentation: Provides clear guidelines for implementing the design system.
  • Use Case: If you're launching a new product and need a bespoke design system that perfectly captures your brand essence.

Quick Start

Generate a design system from the 'brand-brief.docx' using Marq AI Design System Architect.

Frequently Asked Questions about marq-design-system-architect

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

FAQPage Schema
How do I create a custom design system from a brand brief?▼

You can generate a complete design system from a brand brief by defining color palettes, typography scales, spacing, layout grids, and component specifications. This process outputs comprehensive implementation guidelines for UI consistency.

Can I generate design tokens for color and typography from an existing site?▼

Yes, you can extract and generate color palettes, typography scales, and spacing tokens from existing sites. The system analyzes the source to establish consistent whitespace, grid systems, and component specifications for your design system.

What is included in a generated UI design system?▼

A generated UI design system includes color palettes, typography scales, spacing configurations, layout grids, and detailed component specifications with variants and states. It also provides usage documentation and accessibility notes for implementation.

Does this design automation tool work for launching new products?▼

Yes, this design automation tool works for launching new products by generating bespoke, brand-aligned design systems from scratch. It captures your brand essence to establish consistent UI components, layout breakpoints, and comprehensive design tokens.

How do I document UI component variants and states for accessibility?▼

You document UI component variants and states for accessibility by generating detailed component specifications that include design tokens, variants, states, and accessibility notes. This outputs clear usage guidelines for developers and brand managers implementing the system.

Related Skills

Explore More Design & Creative Skills→
FunnelEnvyFunnelEnvy
1

landing-page-generator

Generate B2B landing pages from positioning context via a four-phase pipeline.

Official
Advanced
BeerspitnightBeerspitnight
1

frontend-designer

Converts UI/UX design inputs into structured frontend specifications for React, Vue, or HTML/CSS.

Community
Advanced
AgLyx3AgLyx3

ui-design-system

Generate design tokens from a brand color and export them in JSON, CSS, and SCSS.

Community
Advanced
nguyenthienthanhnguyenthienthanh
24

design-expert

Provides expert guidance on UI/UX design, design systems, and responsive layouts.

Community
Basic