bee-ds-design-guide

Guide Bee-DS design decisions for screen, section, and component structure.

Updated Apr 19, 2026

Search Tags:#accessibility #tokens #spacing #design-review #design-guide #bee-ds #screen-structure

Ready to run

npx skills add https://github.com/mayzhangmin/ucd-figma-skills-playground --skill bee-ds-design-guide

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: bee-ds-design-guide
Source: https://github.com/mayzhangmin/ucd-figma-skills-playground/tree/main/skills/bee-ds-design-guide
Command: npx skills add https://github.com/mayzhangmin/ucd-figma-skills-playground --skill bee-ds-design-guide

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Bee-DS decisions often require aligning on screen, section, and component structure after Bee families are known. This skill provides a framework to reason about canonical wrappers, spacing, and patterns so teams can proceed with consistent design choices.

Core Features & Use Cases

Guides design judgment to match Bee-DS language across screens and components.
Helps select appropriate Bee patterns, spacing, and wrapper structures before implementation.
Use when evaluating screen rhythm, wrappers, and component placement to maintain canonical Bee-DS.

Quick Start

Describe a canonical Bee-DS screen structure for the current task using standard wrappers, spacing, and tokens.

Frequently Asked Questions about bee-ds-design-guide

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

FAQPage Schema

How do I structure a screen using Bee-DS design patterns and spacing tokens?▼

To structure a screen using Bee-DS design patterns, apply canonical wrappers and semantic spacing tokens to maintain consistent Bee rhythms across sections. This framework guides component placement and validates visual hierarchy before implementation.

What is a canonical Bee-DS wrapper and when do I need it for screen design?▼

A canonical Bee-DS wrapper is a structural container used to maintain consistent spacing and pattern rhythms across screen sections. You need it when evaluating screen rhythm and validating component placement to ensure design language consistency.

How do I validate semantic token usage and accessibility in my design review?▼

Validate semantic token usage and accessibility by applying the Bee-DS decision guide to check state-based design and consistent pattern application. This ensures your screen structure meets canonical Bee requirements and accessibility standards during design review.

Can I use this Bee-DS guide for both section-level and component-level design decisions?▼

Yes, you can use this Bee-DS guide for both section-level and component-level design decisions. It provides a framework to reason about wrappers, spacing, and patterns so teams can proceed with consistent design choices across multiple structural levels.

What's the best way to choose spacing and maintain Bee rhythms across different screens?▼

The best way to choose spacing and maintain Bee rhythms is to apply standard wrappers and semantic tokens consistently across all screens. This approach aligns design judgment with the Bee-DS language and validates structural pattern application.