Agent skill · design visual · thienanblog
design-system-generator
Coordinator-routed specialist for generating or substantially updating DESIGN_SYSTEM.md and its durable token, component, accessibility, motion, visual-QA, and asset rules. Use after project-development-mindset routes that primary deliverable here, or directly when explicitly invoked or installed standalone. Do not use for one-off UI implementation, visual polish, screenshot matching, or consuming an existing design system.
Why this skill is useful
Generates a comprehensive DESIGN_SYSTEM.md that includes specific UI/UX conventions and accessibility standards not commonly found in public documentation.
What it needs
About 4k tokens when loaded. Last updated 2026-08-05. 63 stars on the source repository.
What this skill does
Design System Generator Overview This skill generates a project-specific DESIGNSYSTEM.md that enforces consistent UI/UX across: SPAs (React/Vue/Svelte/Angular) Traditional server-rendered sites (Laravel, Rails, Django, WordPress, etc.) Hybrid systems (admin + marketing + docs) The design system must be component-based, portable, and practical for real implementation. Run this skill in the main conversation. Do not spawn subagents, agent teams, or delegated parallel workers unless the user explicitly approves the proposed count and scope after being told that doing so can increase usage. Ask again before expanding an approved scope. Interactive Workflow Required Questions Ask these questions before generating the document: Optional Questions (ask only if relevant) Figma link or brand guide? Multi-tenant theming? Mobile app alignment? Decision Policy Rule 1: Prefer existing stack If the project already uses a template or styling system, adapt to it. Rule 2: Choose one best-fit direction Do not provide 3-5 "options" unless the user requests comparison. Pick one approach and commit. Rule 3: Source of truth before invention Before generating or updating DESIGNSYSTEM.md, inspect existing UI source of truth: project instructions (AGENTS.md, CLAUDE.md, equivalent) existing design docs, screenshots, prototypes, brand notes, and component docs shared components, wrappers, layouts, forms, tables, modals, navigation, and state components theme config, Tailwind config, CSS variables, global CSS, tokens, custom classes, animations, and transitions Do not invent tokens, classes, wrappers, animation rules, or component architecture when a project-owned source already defines them. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills thienanblog/design-system-generator--bdf68e