What does this Claude Code Skill do?

This skill equips Claude with the complete Planted brand and design system. It provides detailed rules for creating on-brand UI components, visual layouts, and marketing copy that reflect Planted's unique 'challenger brand' voice.

When should I use this skill?

Use this skill anytime you're creating user-facing content for Planted. This includes designing new UI components, writing headlines, building web pages, or needing a specific color hex code or spacing value from the design system.

How does this skill improve my workflow?

It centralizes all brand and design knowledge, eliminating the need to hunt for guidelines. Claude can instantly generate code, copy, and design suggestions that are perfectly on-brand, dramatically speeding up development and ensuring consistency.

What specific capabilities does it provide?

The skill provides a complete visual design system (colors, typography, spacing), ready-to-use UI component patterns for buttons and cards, specific copywriting rules with a dual-mode tone, a list of forbidden corporate phrases, and built-in accessibility requirements.

Planted Brand & Design

Name: Planted Brand & Design
Author: cgjen-box

bycgjen-box

0•

设计工具

Creates UI components, marketing copy, and visual layouts that embody the Planted challenger brand voice and detailed design system.

This skill codifies the complete brand identity for Planted, a company with a challenger brand voice inspired by Oatly. It provides comprehensive guidelines for both visual design and copywriting to ensure a consistent and distinctive user experience. The skill details a full design system, including a specific color palette, typography rules, spacing system, and component patterns. It also defines a unique brand voice that oscillates between scientific facts and playful humor, offering clear do's and don'ts for writing headlines, CTAs, and body copy. Use this skill when building new UI components, writing any customer-facing text, or making any design decisions for the Planted website to maintain brand integrity.

主要功能

01Provides a detailed visual design system with a specific color palette, typography scales, and 8-point spacing grid.

02Defines a 'challenger brand' philosophy focused on a human, inconsistent, and entertaining voice.

03Includes ready-to-use patterns for core UI elements like buttons and cards, with defined states and behaviors.

04Outlines specific copywriting rules, a dual-mode tone (Scientific vs. Playful), and a list of forbidden corporate phrases.

05Integrates accessibility requirements for color contrast, touch targets, and motion.

060 GitHub stars

使用场景

01Onboarding new designers and developers to the Planted brand standards.

02Writing marketing copy for emails, social media, or advertisements.

03Developing a new feature or page for the Planted website.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add cgjen-box/planted-website design-brand

For use in Claude.ai and ChatGPT

Download Skill