design
InKCre项目的设计令牌与样式代码生成系统
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：design。 它的用途是：InKCre项目的设计令牌与样式代码生成系统 详细介绍见：https://321skill.com/skills/design/ 请根据该页面的说明完成安装。
使用示例
“请根据最新的Figma设计稿，更新项目的颜色和间距令牌。”，它会引导你使用Figma插件导出令牌并运行构建脚本，自动生成最新的SCSS变量文件供开发使用。或者说：“我想了解当前设计系统中定义了哪些边框圆角值。”，它可以指引你查看`tokens/tokens.md`文档或解析后的样式代码文件。
介绍
InKCre Design 是一个用于管理和同步设计系统令牌（Design Tokens）的Skill。它解决了设计（Figma）与开发（代码）之间样式不一致和手动同步低效的问题。
通过配置，设计师可以在Figma中使用特定插件推送设计令牌，Skill会自动将这些令牌转换为统一的JSON源文件。随后，通过运行构建脚本，利用Style Dictionary工具，将源令牌文件转换为适用于不同技术栈（如SCSS）的样式代码，实现设计到代码的自动化交付。
这个Skill非常适合需要维护统一品牌视觉和设计规范的团队中的UI设计师、前端开发以及全栈开发人员使用，能显著提升设计和开发协作的效率与一致性。
使用时请注意，源令牌文件（tokens/inkcre.tokens.json）应保持只读，由设计侧单向驱动更新。同时，使用前需确保已正确配置Github NPM Registry的访问令牌（NODE_AUTH_TOKEN），否则可能无法正常安装依赖或发布包。
核心特点
核心区别在于它深度集成了Figma设计工具与代码构建流程，通过指定的插件和构建脚本，实现了从设计稿到多平台样式代码的自动化、单向同步，确保了设计系统作为“单一事实来源”的权威性。
注意事项
不适合仅需临时、手动管理少量样式，或项目技术栈与Style Dictionary不兼容的场景。
常见问题
如何从Figma更新设计令牌？
设计师需在Figma中安装并使用`lukasoppermann/design-token-transformer`插件，将令牌推送到仓库的`tokens/inkcre.tokens.json`文件。
构建后生成了哪些文件？
运行构建脚本后，会为`packages/web-design`等包生成对应的SCSS变量文件，如`_ref.scss`、`_sys.scss`和`_comp.scss`。