skills.rest
itsjavi
itsjaviCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

create-design-guidelines

Generate DESIGN.md files documenting UI design guidelines from project context.

1|Updated May 11, 2026
Search Tags:#automation#branding#design system#UI design#design guide
One-click install
npx skills add https://github.com/itsjavi/skills --skill create-design-guidelines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-design-guidelines
Source: https://github.com/itsjavi/skills/tree/main/skills/create-design-guidelines
Command: npx skills add https://github.com/itsjavi/skills --skill create-design-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the creation of design guides for web and mobile UI projects, providing a standardized and consistent reference for designers, developers, and AI agents.

Core Features & Use Cases

  • Automated Documentation: Generates DESIGN.md files that encapsulate visual and interaction design guidelines.
  • Contextual Awareness: Utilizes project context to infer framework, styling, UI library, and brand colors.
  • Customizable Outputs: Offers a range of sections from typography to motion, with options for dark mode and internationalization.

Quick Start

Generate a design guide for your project with the create-design-guidelines skill.

Frequently Asked Questions about create-design-guidelines

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

FAQPage Schema
How do I generate a design system guide for my web or mobile UI project?▼

You generate a design system guide by analyzing your project context and applying predefined rules to produce a DESIGN.md file. This automated documentation encapsulates visual and interaction guidelines for web and mobile apps.

What is the best way to automate UI style guide documentation?▼

Automating UI style guide documentation involves using context-aware tools that infer your framework, styling, and UI library. This process generates a standardized design guide with sections for typography, motion, and dark mode.

Can I customize the generated design guide to include dark mode and internationalization?▼

Yes, you can customize the generated design guide. The process offers a range of sections from typography to motion, specifically including options for adding dark mode and internationalization guidelines.

Does the design guide generator work with my existing framework and brand colors?▼

The design guide generator works with your existing framework by utilizing project context to infer your framework, styling, UI library, and brand attributes to create a contextualized reference.

How do design guides help AI agents maintain UI consistency?▼

Design guides help AI agents maintain consistency by providing a standardized reference file. This automated documentation defines visual and interaction rules, ensuring AI-generated UI components match the established system.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
bifrost-proxybifrost-proxy
112

design-md

Validate Bifrost UI changes against DESIGN.md design tokens.

Community
Advanced
LutimiLutimi

ckm:ui-styling

Integrate shadcn/ui, Radix primitives, and Tailwind CSS into React interfaces.

Community
Advanced
mostafa-K-raihanmostafa-K-raihan

diagram-design

Generate self-contained HTML diagrams with inline SVG and CSS.

Community
Advanced