tezpi-design
Use this skill to generate well-branded interfaces and assets for the TezPi Design System, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, three-tier design tokens, accessibility rules, and UI kit components for prototyping.
Resources
10Install
npx skillscat add tezpi/build-design-system Install via the SkillsCat registry.
Read the README.md file within this skill, and explore the other available files.
If 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.
Quick start
- Link
styles.css(it@imports every token + font file). All design decisions are CSS custom properties. - Never hard-code a hex or pixel — always use a token (
var(--brand),var(--space-4),var(--text-h2),var(--shadow-md)). - Tokens are three-tier: primitive (
--primary-500) → semantic (--brand,--text-heading) → component (--button-primary-bg). Build with semantic/component tokens. - Dark mode: set
data-theme="dark"on<html>.
Foundations (see README for full detail)
- Color: Cobalt brand (
--brand= primary-600), cool neutrals, status = danger/warning/success. WCAG 4.5:1 text, 3:1 UI. - Type: Geist + Geist Mono, 16px base, Perfect-Fourth (1.333) fluid
clamp()headings, line-height 1.5. - Spacing: 4/8 scale, 12-col grid, breakpoints sm 640 → 2xl 1536. Flex/Grid with
gaponly. - Elevation: layered 3–6-layer shadows,
--shadow-sm→--shadow-2xl. - Ergonomics: 24px min target, 44px comfortable, 8px min gap between small icons.
- Voice: warm, plain-spoken, sentence case, "you"/"we", no emoji.
- Icons: Lucide-style outline SVG, 1.75 stroke,
currentColor.
Components
Button, Input, Card, Badge, Switch, Alert. Each has a .prompt.md with usage + variants. Compose UI kits from these; do not re-implement them.