‹ 首页

design-system-generator

@pmkshar · 收录于 1 周前 · 上游提交 1 周前

Create design systems with tokens, components, and documentation. Use when building design systems, creating component libraries, or establishing design tokens.

场景设计系统搭建组件库创建设计令牌定义

适合你，如果你需要从零构建或维护一个统一的设计系统

/ 下载安装
https://github.com/pmkshar/marqaiskills/tree/main/design-system-generator ↗
/ 通过 npx 安装 校验哈希
npx oh-my-skill add pmkshar/marqaiskills/design-system-generator
/ 通过 bash 安装
curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- pmkshar/marqaiskills/design-system-generator
/ 已经装过?验证本机副本,不用重装
npx oh-my-skill verify pmkshar/marqaiskills/design-system-generator
安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。
0GitHub stars
~321最小装载
~2.1K含声明引用
~2.1K文本包总量
索引托管

怎么用

商店整理自技能原文 · 版本 d5999f8 · 表述以原文为准
它做什么

安装后，Claude 能根据你的品牌色和需求，自动生成设计系统的完整文件，包括颜色、字体、间距等设计令牌，以及按钮、输入框等基础组件和配套文档。

什么时候触发

当你要求创建设计系统、组件库或建立设计令牌时触发。

装好后可以这样说
Claude 会创建颜色、字体等令牌和基础组件。
Claude 会参考模板实现 Card 组件。
技能原文 SKILL.md作者撰写 · MIT · d5999f8

Design System Generator

Generate a token-driven design system: tokens, base components, build config, and documentation.

Contents
  • references/design-tokens.md — color, typography, spacing, shadow, and radius token files plus CSS variable setup.
  • references/components.md — Button, Input, Card implementations and the component barrel index.
  • references/config-and-utilities.md — Tailwind config and the cn class-merge helper.
Workflow
  1. Define design tokens. Create tokens/ with colors, typography, spacing, and effects (shadows, radii) per references/design-tokens.md. Replace the reference values with the project brand palette.
  2. Add CSS variables. Set up :root and .dark custom properties in globals.css using the variable block in references/design-tokens.md.
  3. Wire the build. Add the cn helper and extend the Tailwind theme from the token files following references/config-and-utilities.md.
  4. Build base components. Implement Button, Input, and Card from references/components.md, then extend the set as the product requires.
  5. Export a barrel. Re-export every shipped component from components/ui/index.ts (see references/components.md).
  6. Document usage and variants. For each component, note its variants, sizes, props, and accessibility behavior so consumers apply it consistently.
按 MIT 许可原样转载,未经改动 · 在 GitHub 查看 →

评论

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。
…