Skip to content
cccskills
FreePublished on GitHub

ui-design-system

Use when creating or maintaining UI design systems, design tokens, component documentation, responsive calculations, quality checks, or design-dev handoff materials.

The English summary is being prepared. Showing the original description.

majiayu000/spellbook
See how to install

Files included (2)

  • SKILL.md1.3 KB
  • scripts/design_token_generator.py5.3 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

UI Design System Toolkit

Professional toolkit for creating and maintaining scalable design systems.

Core Capabilities

  • Design token generation (colors, typography, spacing)
  • Component system architecture
  • Responsive design calculations
  • Accessibility compliance
  • Developer handoff documentation

Key Scripts

design_token_generator.py

Generates complete design system tokens from brand colors.

Usage: python scripts/design_token_generator.py [brand_color] [style] [format]

  • Styles: modern, classic, playful
  • Formats: json, css, scss

Features:

  • Complete color palette generation
  • Modular typography scale
  • 8pt spacing grid system
  • Shadow and animation tokens
  • Responsive breakpoints
  • Multiple export formats

Verification

Before reporting completion, validate generated tokens or handoff artifacts against the requested brand color, output format, accessibility constraints, and the target implementation surface. For script usage, run the command with representative input and inspect the emitted JSON/CSS/SCSS for valid syntax and preserved brand values.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

agentsmd-optimize

Free

Audit and organize AI coding-agent instructions, including AGENTS.md, CLAUDE.md, skills, and agent definitions. Use when the user asks to diagnose conflicting instructions, excessive approval pauses, broad skill triggers, duplicate guidance, or broken instruction references, or to clean up that instruction set. Ordinary code review, Markdown editing, or application debugging alone does not trigger this workflow. Inspection stays read-only; apply changes when authorized.

The English summary is being prepared. Showing the original description.

majiayu000/spellbook288Updated Oct 20, 2026

agentsmd-scaffold

Free

Generate or update repository-specific AGENTS.md instruction files from real repo evidence. Use when asked to create, design, scaffold, split, or improve root or scoped AGENTS.md files for Codex/Claude/agent workflows, especially when a repo needs directory-specific rules, validation commands, generated-file boundaries, or a short agent onboarding router.

The English summary is being prepared. Showing the original description.

majiayu000/spellbook288Updated Oct 20, 2026

api-design

Free

REST/GraphQL/gRPC API design best practices. Use when designing APIs, defining contracts, handling versioning. Covers OpenAPI 3.2, GraphQL Federation, gRPC streaming.

The English summary is being prepared. Showing the original description.

majiayu000/spellbook288Updated Oct 20, 2026

app-ui-design

Free

Mobile app UI design expert for iOS and Android. Use when designing app interfaces, creating design systems, ensuring accessibility, or following platform guidelines. Covers Material Design 3, Human Interface Guidelines, color theory, typography, and 2025 trends.

The English summary is being prepared. Showing the original description.

majiayu000/spellbook288Updated Oct 20, 2026

app-user-story-qa

Free

End-to-end app feature inventory and user-story testing workflow with a canonical tracker. Use when the user asks to audit every feature, derive expected behavior from code, test user journeys, or explicitly fix and retest documented UX or logistical defects.

The English summary is being prepared. Showing the original description.

majiayu000/spellbook288Updated Oct 20, 2026

architecture-foundation

Free

Design architecture foundations before implementation. Use when asked to design or refactor architecture, choose Rust/Go crate, package, module, runtime, workflow, or service boundaries, compare mature project architecture, prevent stacked one-off PRs, audit migration debt in existing repos, or produce a spec before coding.

The English summary is being prepared. Showing the original description.

majiayu000/spellbook288Updated Oct 20, 2026

See all skills by majiayu000

Report a problem with this skill