beam-ai-team/beam-design-system
skills/integrations/figma/beam-design-system/SKILL.md
Access Beam's cached design system tokens and components. Load when user mentions 'beam design system', 'beam colors', 'beam typography', 'design tokens', 'brand colors', 'beam fonts', or asks about Beam's design standards.
content-media
Updated Jul 8, 2026
$ install --global
skillsauthnpx skillsauth add beam-ai-team/beam-next-skills beam-design-systemInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jul 8, 2026, 3:49 AM138.2s1 file scanned
SKILL.md
- name:
- beam-design-system
- type:
- skill
- version:
- 1.0
- description:
- Access Beam's cached design system tokens and components. Load when user
- author:
- Mo Bekdache
- category:
- integrations
- platform:
- Figma
- updated:
- 2025-12-24
- visibility:
- team
Beam Design System
Purpose: Instant access to Beam's design tokens without API calls
Trigger: "beam colors", "beam typography", "design tokens", "brand guidelines"
Source: Figma Slides - Design System
Safety Contract
This skill is read-only by default. Before refreshing cached design-system snapshots, exporting assets, or writing token files, show the Figma file/source, destination files, token/component scope, and overwrite risk. Require explicit user approval in the current turn before writing files or calling Figma APIs. Reading cached local tokens in chat does not require approval.
Quick Access
The design system is cached locally in design-system.json. No API calls needed for lookups.
Available Data
| Category | Examples | |----------|----------| | Colors | Primary, secondary, semantic colors | | Typography | Font families, sizes, weights | | Effects | Shadows, blurs | | Components | Buttons, cards, inputs, etc. | | Grids | Layout grids, spacing |
Usage
Get Colors
User: "What are Beam's brand colors?"
AI: [Reads design-system.json → styles.colors]
Get Typography
User: "What fonts does Beam use?"
AI: [Reads design-system.json → styles.typography]
Get Components
User: "What components are in the design system?"
AI: [Reads design-system.json → components]
Files
| File | Purpose |
|------|---------|
| design-system.json | Full cached snapshot |
| design-tokens.md | Human-readable token reference |
| refresh.md | How to update the snapshot |
Refresh Snapshot
To pull latest from Figma:
python skills/figma/figma-master/scripts/snapshot_design_system.py \
--file-key NKGz63c6mGJSDadOzaU3oJ \
--output skills/figma/beam-design-system/design-system.json
Source File
- Name: Figma Slides - Design System
- Key:
NKGz63c6mGJSDadOzaU3oJ - URL: https://www.figma.com/design/NKGz63c6mGJSDadOzaU3oJ
Version: 1.0 Created: 2025-12-24 Last Snapshot: See design-system.json → meta.snapshot_date
Related Skills
beam-ai-team/use-case-proposal
tools
VerifiedTrustedCommunity
Build a Palantir-shape, PDF-native use-case proposal document for a sophisticated enterprise account: research-grounded use cases (each with description, challenge, impact, value), an operating-graph ontology page, a recommended PoC with a week-by-week plan, and a closing page that asks for one decision. Load when a client asks us to 'propose high-impact use cases', requests a use-case presentation/catalog for a function (finance, HR, ops), or when a technical evaluation team will review candidates to pick a PoC. NOT for single-account cold outreach (use prospect-brief), full process diagnostics (use operating-diagnostic), or priced proposals (use proposal-creation).
SKILL.mdUpdated Jul 8, 2026
beam-ai-team/beam-figma-to-html-slides
development
VerifiedTrustedCommunity
Convert Beam Figma slide designs into high-fidelity, editable HTML presentation decks. Use when Codex is asked to audit Figma slides, extract slide templates, rebuild Beam slides as HTML decks, decide whether Figma imagery should be exported or rebuilt in HTML/CSS, create Beam/Prism-compatible deck templates, or improve fidelity of existing Beam HTML slide rebuilds.
SKILL.mdUpdated Jul 8, 2026
beam-ai-team/beam-ai-slide-library
development
VerifiedTrustedCommunity
Use the Beam AI reusable slide library: individual HTML slide templates extracted from Beam Figma rebuilds, kept separate from deck themes and full deck templates. Load when the user asks for a slide library, specific Beam slide patterns, reusable Figma-inspired slides, Prism slide-library items, or slide-level HTML templates.
SKILL.mdUpdated Jul 8, 2026
beam-ai-team/beam-ai-deck-templates
development
VerifiedTrustedCommunity
Use Beam AI deck and report design packs, HTML templates, and curated examples to create sales decks, customer intro decks, RPO decks, and DIN A4 use-case proposal reports. Load when the user asks for Beam-branded presentation templates, Prism-compatible deck templates, Beam report templates, customer intro decks, commercial proposals, or reusable HTML deck/report examples.
SKILL.mdUpdated Jul 8, 2026