design-system-skill
一套框架无关的设计系统思维框架与实现模式。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：design-system-skill。 它的用途是：一套框架无关的设计系统思维框架与实现模式。 完整的 Skill 内容见：https://321skill.com/skills/design-system-skill-oerlellijk/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“根据 design-system-skill 的哲学，为这个产品卡片组件设计一个流体排版方案，使用 Major Third 比例，并遵循其间距配对规则。” 它会先询问内容层次和关键信息，然后使用 clamp() 公式计算流体字体大小，并应用如 `padding-block: var(--size-md)` 和 `padding-inline: var(--size-lg)` 这样的逻辑属性和间距配对。
介绍
这个 Skill 解决的核心问题是：开发者在构建响应式界面时，常陷入特定框架或工具的细节，缺乏一套通用的、基于数学原理的设计系统思维。它提供了一套从思考到实现的完整方法论，帮助开发者先思考内容层次与布局逻辑，再动手编写代码。
使用方式非常灵活：你可以将核心的 SKILL.md 文件内容提供给 AI 助手（如 Claude、Cursor），作为其生成代码时的设计指导；也可以直接参考仓库中的 SCSS 函数、Tailwind 主题配置等示例代码，将其集成到你的项目中。它不依赖任何特定框架，无论是 React、Vue 还是原生开发都能适用。
它特别适合那些希望建立或遵循一套严谨、可扩展的设计系统的前端开发者、UI 设计师和全栈开发者。对于厌倦了在不同项目中复制粘贴 CSS、希望提升代码一致性和可维护性的团队来说，这是一个极佳的工具。
使用建议是：不要将其视为一个即插即用的代码库，而应首先理解其背后的设计哲学（如“先思考后编码”、“流体并非必须”等原则）。建议从“设计系统架构师”交互代理或“快速开始”部分入手，逐步将理念应用到实际组件开发中。
核心特点
与大多数提供具体组件代码的 UI 库不同，这是一个专注于“设计思维”的框架，教授如何用数学方法（如 CSS clamp 公式、类型比例）生成自适应的流体排版与间距系统。它强制推行一系列“硬性规则”（如逻辑属性、图标容器比例），确保跨项目的一致性。
注意事项
不适合追求快速套用现成 UI 组件、无需深入定制设计系统的项目或初学者。
常见问题
这个 Skill 能直接生成可运行的组件代码吗？
不能直接生成完整组件，但它为 AI 提供了生成符合设计系统规范的代码所需的核心原则、数学公式和模式，指导 AI 产出更优质、一致的代码。
它支持 Tailwind CSS 吗？
完全支持，仓库中提供了 Tailwind v4 的 @theme 配置示例，可以将流体类型和间距尺度无缝集成到 Tailwind 项目中。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/design-system-skill-oerlellijk/raw/index.md 读取 design-system-skill 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/design-system-skill-oerlellijk/raw/index.md（查看排版版本）