skills.rest
mhdxbilal
mhdxbilalCOMMUNITY
Explore all skills by this author →
GitHub

octopus-ui-ux-design

Generate style guides, color palettes, typography, and component specs for new interfaces.

1|Updated Jun 12, 2026
Search Tags:#typography#ui#components#ux#design-system#style-guide#color-palette
One-click install
npx skills add https://github.com/mhdxbilal/Ai --skill octopus-ui-ux-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: octopus-ui-ux-design
Source: https://github.com/mhdxbilal/Ai/tree/main/.claude/skills/skill-ui-ux-design
Command: npx skills add https://github.com/mhdxbilal/Ai --skill octopus-ui-ux-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured workflow to design cohesive UI/UX systems, generating style guides, color palettes, typography, and component specs for new interfaces.

Core Features & Use Cases

  • Style guides, color palettes, typography pairings, and component specifications to accelerate UI design.
  • Use Case: teams shipping dashboards, marketing sites, or mobile apps can reuse a single design system across products.

Quick Start

Provide a complete UI/UX design system including a style guide, color palette, typography pairing, and component specs for a new interface.

Frequently Asked Questions about octopus-ui-ux-design

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

FAQPage Schema
How do I create a UI design system for a new web or mobile interface?▼

To create a UI design system, generate style guides, color palettes, typography pairings, and component specs to establish a repeatable workflow from discovery through delivery for new interfaces.

What is included in a comprehensive UX style guide for dashboards and apps?▼

A comprehensive UX style guide includes color palettes, typography pairings, component specifications, layout guidance, and accessibility considerations to ensure cohesive UI/UX across products.

Can I use this design system workflow for both marketing sites and mobile apps?▼

Yes, this workflow applies to product teams building dashboards, marketing sites, and mobile apps, enabling you to reuse a single design system across different interface types.

How do I generate typography pairings and color palettes that are accessible?▼

Generate accessible typography pairings and color palettes by applying the workflow's built-in accessibility considerations and design research to produce compliant component specs.

What's the best way to maintain cohesive UI components across multiple products?▼

Maintain cohesive UI components by producing design tokens and reusable component specifications, enabling teams to apply a single style guide consistently across multiple product interfaces.

Do I need existing design research to start building component specs?▼

No, the workflow satisfies design research requirements during discovery, allowing you to start producing component specs and design tokens immediately for new interface delivery.

Related Skills

Explore More Design & Creative Skills→
claudcherejiclaudchereji

ux-researcher

Conduct usability testing and translate findings into actionable product improvements.

Community
Advanced
phoenicisfphoenicisf

figma-implement-design

Translate Figma designs into production-ready UI code.

Community
Advanced
Logos-LiberLogos-Liber
17

wireframing-prototyping

Create wireframes, user flows, sitemaps, and interactive prototypes for digital products.

Official
Intermediate
appautomatonappautomaton
53

brand-system

Generate markdown design briefs, identity.js configs, and preview PDFs for visual identity systems.

Official
Advanced