claude-ui-design-system
为React Native和Next.js项目提供完整UI/UX设计系统，支持新建与重构。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：claude-ui-design-system。 它的用途是：为React Native和Next.js项目提供完整UI/UX设计系统，支持新建与重构。 完整的 Skill 内容见：https://321skill.com/skills/claude-ui-design-system/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“为我的Next.js电商项目设置设计系统基础，采用玻璃美学预设。”，它会自动创建设计令牌、搭建文件夹结构、生成基础组件并应用对应的玻璃质感样式。或者说：“重构这个旧的React Native登录页面，提升其可访问性和视觉层次。”，它会分析现有代码，应用现代设计模式，并确保符合WCAG标准。
介绍
这个Skill旨在解决前端开发中UI设计系统搭建、维护和迁移的复杂性问题。它提供了一套完整的工具链，帮助开发者从零开始建立设计系统，或对现有项目的UI进行现代化重构。
使用方式非常灵活，你可以通过Claude Code插件市场、全局安装或项目内安装三种方式快速集成。安装后，通过自然语言指令即可调用不同的子技能，例如设置设计系统基础、应用设计预设或重构现有组件。
它非常适合前端开发、全栈开发和UI设计师，尤其是那些需要快速统一项目UI风格、提升代码可维护性或希望将老旧UI迁移到现代设计规范的角色。无论是启动新项目还是优化现有产品，都能从中受益。
建议在使用前明确项目的设计风格偏好（可从6种预设中选择），并准备好项目代码上下文，以便Skill能更精准地分析和操作。对于大型项目，建议先从核心组件开始试点重构。
核心特点
它不仅提供预设的设计风格（如玻璃美学、粗野主义），更提供了一套从设计令牌生成、组件库搭建到文档自动化的完整工作流，并能智能处理从旧设计系统到新系统的迁移。
注意事项
主要专注于React Native和Next.js技术栈，对于其他前端框架或原生开发支持有限。
常见问题
如何为现有项目更换设计风格？
使用`design-preset-system`技能，指令如“将我的应用从简约现代转换为粗野主义预设”，Claude会分析并映射令牌，更新组件样式。
这个Skill能生成设计稿或Figma文件吗？
不能，它主要生成代码层面的设计系统（如Tokens、组件、文档），不直接输出视觉设计稿。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/claude-ui-design-system/raw/index.md 读取 claude-ui-design-system 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/claude-ui-design-system/raw/index.md（查看排版版本）