octopus-ui-ux-design

Create UI/UX design systems with style guides, design tokens, and component specifications.

Updated Jun 16, 2026
One-click install
npx skills add https://github.com/burgebj/claudeoctopus --skill octopus-ui-ux-design-burgebj
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: octopus-ui-ux-design
Source: https://github.com/burgebj/claudeoctopus/tree/main/.claude/skills/skill-ui-ux-design
Command: npx skills add https://github.com/burgebj/claudeoctopus --skill octopus-ui-ux-design-burgebj

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams avoid inconsistent interface decisions by providing a structured workflow for creating UI/UX systems, visual directions, and implementation-ready design specifications.

Core Features & Use Cases

  • Design System Creation: Produces style guides, color palettes, typography choices, design tokens, and component specifications for new interfaces.
  • UX Research Workflow: Uses design intelligence searches and structured critique to validate visual decisions before implementation.
  • Use Case: A product team building a SaaS dashboard can use this Skill to define layouts, reusable components, accessibility requirements, and frontend handoff documentation.

Quick Start

Use the UI/UX design skill to create a complete design system for my new application 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 design system for a new application interface?

Creating a design system for a new application interface involves defining structured style guides, color palettes, typography, and component specifications. This skill automates that workflow to produce implementation-ready design tokens and frontend handoff documentation.

What is the best way to structure UI components for a SaaS dashboard?

Structuring UI components for a SaaS dashboard requires defining reusable elements, layouts, and accessibility requirements. This skill generates structured component specifications and visual style guides to ensure consistent interface decisions across your product.

How does UX research validation work for visual design decisions?

UX research validation for visual design decisions works by executing design intelligence searches and structured critiques. This process validates your typography and color choices before implementation, preventing inconsistent interface decisions.

Can I generate accessibility requirements and design tokens for mobile apps?

Yes, you can generate accessibility requirements and design tokens for mobile apps. This skill applies to product design scenarios including mobile interfaces, producing structured outputs covering accessibility, typography, and components.

Do I need existing design research to build a UI style guide?

You do not need existing design research to build a UI style guide. This skill executes design research workflows and provider validation internally to define visual directions and implementation specifications from scratch.

Why use a structured workflow for UI/UX design instead of ad-hoc decisions?

Using a structured workflow for UI/UX design avoids inconsistent interface decisions by providing a clear process for creating visual directions. It ensures your design system includes validated accessibility, typography, and layout specifications.