claude-design

Name: claude-design
Availability: InStock
Author: yusei

Standardizes Claude-style UI design guidance for the Viber-Editor interface.

3|2|Updated Apr 11, 2026

Search Tags:#typography #design #branding #ui #claude #tokens

Ready to run

npx skills add https://github.com/yusei531642/vibe-editor --skill claude-design

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: claude-design
Source: https://github.com/yusei531642/vibe-editor/tree/main/.claude/skills/claude-design
Command: npx skills add https://github.com/yusei531642/vibe-editor --skill claude-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Vibe-Editor の UI を Claude.ai + Claude Code 公式風に統一するためのデザインガイド。色・タイポグラフィ・余白・記号・アニメーション・トーンなどの基準を提供し、UI刷新や新規コンポーネント作成時の判断を支える。

Core Features & Use Cases

Claude 公式風のカラー・タイポグラフィ・スペーシング・アニメーション・記号パターンを定義し、Token やテーマ、UI コンポーネントのデザインを一貫させるための設計指針。UI の一貫性を確保し、エージェント発話の装飾や新テーマ追加を安全に行えるようガイドする。

Quick Start

Read this guide and apply the color, typography, spacing, and animation tokens to your UI components to achieve Claude-style visuals.

Frequently Asked Questions about claude-design

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

FAQPage Schema

How do I standardize UI design tokens for a consistent visual theme?▼

Standardizing UI design tokens involves defining color, typography, spacing, and animation rules in a tokens.css file to unify visuals across components and themes, ensuring consistent styling during UI refreshes and new component creation.

What typography and spacing rules should I apply for Claude-style UI components?▼

Claude-style UI components require specific typography and spacing rules applied to tokens.css and component styles to maintain visual consistency, ensuring text hierarchy and layout spacing align with the official Claude.ai interface guidelines.

Can I use these design tokens to theme and decorate agent messages in my editor?▼

Yes, these design tokens can be applied to theming and agent message decoration, providing standardized color, symbols, and animation guidelines that unify the visual presentation of agent outputs across the editor UI.

Does this UI guide cover animation and symbol patterns for new component design?▼

This UI guide covers animation guidelines and symbol patterns as part of its core design tokens, ensuring that new component design and UI refreshes reflect consistent motion and iconography standards across the interface.

What is the best way to unify visuals across multiple UI components and themes?▼

The best way to unify visuals is by applying standardized color tokens, typography rules, and spacing guidelines to a central tokens.css file, ensuring all component styles and themes reflect a cohesive design language.

Are there limitations when adding new themes using these Claude-style design guidelines?▼

When adding new themes using these design guidelines, you must strictly adhere to the specified color tokens and animation rules to maintain visual consistency, as deviating from the defined tokens can break the unified Claude-style aesthetic.