skills.rest
guideops
guideopsCOMMUNITY
Explore all skills by this author →
GitHub

square

Generate design systems with predefined style tokens from a configuration file.

Updated Jun 23, 2026
Search Tags:#typography#design system#style guide#color palette#spacing scale
One-click install
npx skills add https://github.com/guideops/agentic-shared --skill square
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: square
Source: https://github.com/guideops/agentic-shared/tree/main/skills/awesome-design-skills/styles/square
Command: npx skills add https://github.com/guideops/agentic-shared --skill square

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps design-system guideline authors produce elegant, minimalistic design systems for their projects, reducing the time spent on manual formatting and style specification.

Core Features & Use Cases

  • Automated Style Specification: Generates design systems with predefined styles, color palettes, typography, and spacing based on tokens.
  • Customization Options: Allows for fine-tuning of design tokens to align with specific project needs.
  • Use Case: Use this Skill to build a comprehensive design system for a new mobile app, quickly setting up the foundational styles and typography.

Quick Start

Run the skill to generate a full design system for your project using the 'design-system-template.yml' as the configuration file.

Frequently Asked Questions about square

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a design system with predefined style tokens for a new project?▼

To generate a design system, run the skill using a configuration file like 'design-system-template.yml' to automatically produce color palettes, typography, and spacing tokens for your software project.

What is the best way to create a minimal style guide for a mobile app?▼

Creating a minimal style guide involves defining core design tokens for typography and spacing; this skill automates that process by generating sophisticated, minimalistic design guidelines based on your configuration.

Can I customize the color palette and spacing scale in my generated design system?▼

Yes, you can customize the color palette and spacing scale by fine-tuning the design tokens in your configuration file to align the generated visual language with your specific project needs.

Do I need a configuration file to set up typography and color tokens?▼

Yes, you need a configuration file defining the desired design system parameters; the skill requires this input to generate the predefined styles, typography, and spacing tokens for your project.

When should I use an automated design system generator instead of manual formatting?▼

Use an automated design system generator when you need to reduce time spent on manual formatting and style specification, allowing you to quickly establish a consistent visual language for software projects.

Related Skills

Explore More Design & Creative Skills→
NebulaMaoNebulaMao
13

speckit-constitution

Create or update project constitutions with placeholder token replacement in constitution.md.

Community
Advanced
markus41markus41
18

css-generation

Generate CSS variables, Tailwind configurations, and styled-components themes from design tokens.

Community
Intermediate
AshesOfTheUndeadAshesOfTheUndead

paper

Standardize UI design with token-based spacing, color palettes, and font scales.

Community
Intermediate
sotono-046sotono-046
1

design-principles

Define design direction, color, typography, and spacing tokens for dashboards.

Community
Basic