Stats
Actions
Tags
From 626labs
Use this skill to generate well-branded interfaces and assets for 626 Labs — production code, throwaway prototypes, mocks, slides, social cards, longform reading surfaces, anything visual. Trigger on requests mentioning 626 Labs branding, 626Labs design, brand tokens, hub/admin/widget UI work, hero or OG card design, Field Notes / editorial layouts, or "design system." Provides brand tokens, type stack, UI kit, and the editorial layer for theses + Field Notes.
How this skill is triggered — by the user, by Claude, or both
Slash command
/626labs:designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Read the `README.md` file within this skill, and explore the other available files:
README.mdassets/626Labs-logo.pngassets/dashboard-reference.pngcolors_and_type.csseditorial.csspreview/badges.htmlpreview/buttons.htmlpreview/cards.htmlpreview/colors-brand.htmlpreview/colors-neutrals.htmlpreview/colors-semantic.htmlpreview/dashboard-kit.jpgpreview/inputs.htmlpreview/logo.htmlpreview/motifs.htmlpreview/radii.htmlpreview/shadows.htmlpreview/spacing.htmlpreview/type-body.htmlpreview/type-display.htmlRead the README.md file within this skill, and explore the other available files:
colors_and_type.css — foundational tokens (colors, type, spacing, motion, shadows/glows)editorial.css — editorial layer for longform reading (theses, Field Notes). Extends colors_and_type with light surface, serif body (Source Serif 4), restrained accent use. Use when designing reading surfaces, not UI.assets/ — logo + reference imagerypreview/ — small spec cards for each token groupui_kits/dashboard/ — The Lab Dashboard (Agent OS) recreation — React + CSSIf creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.
If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts or production code, depending on the need.
Brand essentials to internalize:
#091023–#192e44) base. Neon cyan #17d4fa + magenta #f22f89 signature duo — always pair them.#2ee6c9 used in The Lab Dashboard for primary CTAs and active nav.Editorial mode (when designing reading surfaces — theses, blog posts, Field Notes, longform articles):
editorial.css. Light paper field (--ed-paper: #F7F5F0), navy ink (--ed-ink), Source Serif 4 body.Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub estevanhernandez-stack-ed/626labs-plugin --plugin 626labs