design-systems
Scannednpx machina-cli add skill Roberdan/MyConvergio/design-systems --openclawDesign Systems Skill
Workflow from jony-creative-director: Design System Architect + Figma Expert
Inputs
| Parameter | Required | Description |
|---|---|---|
| Brand/product name | Yes | Target brand or product |
| Personality | Yes | MINIMALIST / BOLD / PLAYFUL / PROFESSIONAL / LUXURY |
| Primary emotion | Yes | TRUST / EXCITEMENT / CALM / URGENCY |
| Target audience | Yes | Demographics + psychographics |
Phase 1: Foundations
Color System
| Deliverable | Specification |
|---|---|
| Primary palette | 6 colors: hex, RGB, HSL, WCAG contrast ratings |
| Semantic colors | success, warning, error, info with hex values |
| Dark mode | Equivalents for all colors, contrast ratios verified |
| Usage rules | When/where each color applies, forbidden combinations |
Typography
| Level | Specify |
|---|---|
| Display, Headline, Title | Size, weight, line height, letter spacing per breakpoint |
| Body, Callout, Subheadline | Desktop (1440px), tablet (768px), mobile (375px) |
| Footnote, Caption | Font pairing strategy, minimum legibility sizes |
Primary font family with 9 weights. Type scale with exact values.
Layout Grid
12-column responsive: desktop 1440px / tablet 768px / mobile 375px. Specify gutters, margins, breakpoints, safe areas (notched devices).
Spacing System
8px base unit scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. Usage guideline per step.
Phase 2: Components (30+ with variants)
| Category | Components |
|---|---|
| Navigation | Header, Tab bar, Sidebar, Breadcrumbs |
| Input | Buttons (6 variants), Text fields, Dropdowns, Toggles, Checkboxes, Radios, Sliders |
| Feedback | Alerts, Toasts, Modals, Progress indicators, Skeleton screens |
| Data display | Cards, Tables, Lists, Stats, Charts |
| Media | Image containers, Video players, Avatars |
Per Component Spec
| Aspect | Detail |
|---|---|
| Anatomy | Parts breakdown with names |
| States | default, hover, active, disabled, loading, error |
| Usage | When to use, when NOT to use |
| Accessibility | ARIA labels, keyboard nav, focus states |
| Code-ready | padding, margins, border-radius, shadows (exact values) |
Phase 3: Patterns
- Page templates: Landing, Dashboard, Settings, Profile, Checkout
- User flows: Onboarding, Auth, Search, Filtering, Empty states
- Feedback: Success, Error, Loading, Empty state patterns
Phase 4: Design Tokens
Complete JSON structure for developer handoff: color (primitive + semantic), typography, spacing, shadow/elevation, border-radius tokens.
Phase 5: Figma Specifications
Auto-Layout (per component)
| Property | Values to specify |
|---|---|
| Direction | vertical / horizontal |
| Padding | top, right, bottom, left |
| Item spacing | exact px value |
| Distribution | packed / space-between |
| Alignment | start / center / end / stretch |
| Resizing | hug contents / fill container / fixed |
Component Architecture
- Master component structure with variant properties (boolean, instance swap, text)
- Variant matrix example:
Type × State × Size(e.g., Button: Primary/Secondary × Default/Hover/Disabled × S/M/L) - Component properties: text, boolean, instance swap, variant
Prototype & Handoff
| Aspect | Specification |
|---|---|
| Interactions | Map flows, triggers (click/hover/drag), animations |
| Timing | Easing curves, duration, delays |
| Export | 1x/2x/3x/SVG/PDF settings, asset naming conventions |
| CSS | Properties for key elements, inspect organization |
| Accessibility | Focus order, ARIA labels, contrast annotations |
Phase 6: Documentation
- 3 core design principles with examples
- 10 Do's and Don'ts with visual descriptions
- Developer implementation guide
Outputs
| Deliverable | Format |
|---|---|
| Foundations spec | Markdown with exact values |
| Component library | Per-component spec sheets |
| Design tokens | JSON token file |
| Figma guide | Auto-layout + component architecture |
| Documentation | Principles + guidelines |
Related
/brand-identity (brand strategy) | /ui-design (screen application) | /design-quality (a11y validation)
Source
git clone https://github.com/Roberdan/MyConvergio/blob/master/.claude/skills/design-systems/SKILL.mdView on GitHub Overview
Creates a complete design system aligned with Apple HIG, plus Figma auto-layout specifications for scalable UI. It covers foundations, a 30+-component catalog, tokens for dev handoff, and end-to-end Figma specs to streamline design-to-dev workflows.
How This Skill Works
Start by capturing brand inputs (name, personality, primary emotion, audience). Then progress through five phases: Foundations (color, typography, layout grid, spacing), Components (30+ with states and accessibility), Patterns, Design Tokens (JSON handoff), and Figma Specifications with component auto-layout. The process yields a reusable system that scales across products with consistent visuals and accessible design.
When to Use It
- Building a new brand design system from scratch for a product or portfolio
- Aligning UI across platforms while adhering to Apple HIG conventions
- Delivering handoff-ready tokens and Figma auto-layout specs for developers
- Redesigning an existing product with accessibility and WCAG targets in mind
- Creating scalable UI for a multi-product SaaS or marketplace portfolio
Quick Start
- Step 1: Gather inputs — Brand/product name, Personality, Primary emotion, Target audience
- Step 2: Define foundations — establish color system, typography, 12-column grid, and spacing
- Step 3: Create tokens and Figma specs — build components, add states, and enable auto-layout for dev handoff
Best Practices
- Begin with a precise brand brief: name, personality, primary emotion, and target audience
- Lock color system early: primary + semantic colors, dark-mode equivalents, and WCAG contrasts
- Define typography with explicit scales, weights, and breakpoint-specific rules
- Document per-component anatomy, states, usage rules, and accessibility requirements
- Publish complete design tokens as JSON and align them with Figma auto-layout specs for dev handoff
Example Use Cases
- Fintech onboarding dashboard for a minimalist brand
- Luxury lifestyle app with a restrained color palette and bold typography
- E-commerce checkout flow optimized for accessibility and clarity
- Travel planning dashboard utilizing a 12-column grid and responsive spacing
- SaaS analytics platform featuring reusable component patterns and tokens
