AI SummaryThis skill provides the official Vibecode brand design system. Follow these guidelines when creating or styling UI components. Vibecode is a modern, tech-forward brand emphasizing clarity, accessibility, and innovation. Focus on creating intuitive digital experiences while maintaining visual consist
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "vibecode-brand-design" skill in my project. Please run this command in my terminal: # Install skill into your project (2 files) mkdir -p .claude/skills/vibecode-brand-design-rbrown101010-landingpageoptions && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/vibecode-brand-design-rbrown101010-landingpageoptions/SKILL.md "https://raw.githubusercontent.com/majiayu000/claude-skill-registry/main/skills/design/vibecode-brand-design-rbrown101010-landingpageoptions/SKILL.md" && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/vibecode-brand-design-rbrown101010-landingpageoptions/metadata.json "https://raw.githubusercontent.com/majiayu000/claude-skill-registry/main/skills/design/vibecode-brand-design-rbrown101010-landingpageoptions/metadata.json" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
Description
Vibecode brand design system with colors, typography, spacing, and component guidelines. Use when designing UI, styling components, or ensuring brand consistency in the Vibecode app.
Vibecode Brand Design Guide
This skill provides the official Vibecode brand design system. Follow these guidelines when creating or styling UI components.
Core Design Philosophy
Vibecode is a modern, tech-forward brand emphasizing clarity, accessibility, and innovation. Focus on creating intuitive digital experiences while maintaining visual consistency.
Background Colors
• Primary Background: Clean whites (#FFFFFF) and light neutrals (#F8FAFC, #F1F5F9) • Secondary Background: Soft grays for depth and hierarchy (#E2E8F0, #CBD5E1)
Text Colors
• Primary Text: Dark charcoal for readability (#1E293B, #0F172A) • Secondary Text: Medium grays for supporting information (#64748B, #94A3B8)
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster