design-system
Iress设计系统的React组件库与开发工具集
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：design-system。 它的用途是：Iress设计系统的React组件库与开发工具集 完整的 Skill 内容见：https://321skill.com/skills/design-system/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我需要创建一个符合Iress设计规范的按钮组件，并展示不同状态。”，它会引导你使用 `@iress-oss/ids-components` 包中的Button组件，并参考Storybook中的代码示例和设计令牌（如颜色、间距）来确保实现与设计系统完全一致。或者，当你遇到组件Bug时，可以启用仓库内置的GitHub Copilot Bug-Fixing Agent来协助分析和修复。
介绍
Iress Design System (IDS) 是一个用于构建企业级Web应用界面的React组件库和开发工具集。它旨在解决团队在开发复杂金融或企业应用时，UI组件风格不一、开发效率低下以及设计一致性难以维护的问题。
通过提供一套完整的React组件、设计令牌（Design Tokens）以及配套的Storybook插件，开发者可以直接使用符合Iress设计规范的UI元素，并通过Storybook进行组件的可视化开发、测试和文档查阅。工具集还包含了用于集成Okta认证、代码沙箱演示等功能的专用插件。
该工具集主要适合基于React技术栈的前端团队，特别是那些需要遵循严格设计规范、追求开发效率与UI一致性的中大型项目团队，例如金融科技、企业SaaS等领域的开发者。
与市面上通用的UI组件库（如Ant Design, Material-UI）相比，IDS是Iress公司为其产品线量身定制的设计系统，具有高度的品牌一致性和业务针对性。其独特之处在于它不仅仅是一个组件库，更是一个包含设计令牌、开发工具和AI辅助开发能力的完整生态，并且深度集成了GitHub Copilot智能体来辅助开发任务。
核心特点
核心区别在于它是一个为特定企业（Iress）深度定制的完整设计系统生态，不仅提供React组件，还包含设计令牌、一系列增强Storybook开发的专用插件，并原生集成了用于自动化修复Bug的GitHub Copilot智能体，提供了从设计到开发、测试的闭环工具链支持。
注意事项
这是一个为Iress内部产品定制的设计系统，外部团队直接使用可能面临品牌风格不匹配和定制化成本较高的问题。
常见问题
Iress Design System 和 Ant Design 有什么区别？
IDS是Iress公司自研的定制化设计系统，深度绑定其品牌与产品需求，并包含配套开发工具和AI辅助能力；Ant Design是通用的开源UI库。
如何开始使用IDS组件？
请访问其在线Storybook文档站查看组件使用说明和示例，并通过npm安装对应的React组件包。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/design-system/raw/index.md 读取 design-system 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/design-system/raw/index.md（查看排版版本）