技能 ui-design-system
📦

ui-design-system

内容修订 r1 安全 ⚙️ 外部命令

生成 UI 设计系统

当颜色、间距和排版由手动定义时，团队往往会失去一致性。此技能可帮助 Claude、Codex 和 Claude Code 生成清晰的设计令牌和交接指导。

支持: Claude Codex Code(CC)
📊 75 合格

使用我的智能体安装

将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。

智能体请求
Review the Skillstore skill "ui-design-system" from https://skillstore.io/skills/alirezarezvani-ui-design-system.md and its manifest at https://skillstore.io/api/skills/alirezarezvani-ui-design-system/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智能体仍应展示其计划，并按安全策略请求必要确认。

Agent 可读资源

当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。

Markdown 详情 GET /skills/alirezarezvani-ui-design-system.md 已签名 manifest GET /api/skills/alirezarezvani-ui-design-system/manifest 已签名 lockfile GET /api/skills/alirezarezvani-ui-design-system/lockfile

测试它

正在使用“ui-design-system”。 为 #0066CC 生成一套现代令牌系统。

预期结果:

  • 已为该品牌色生成完整的令牌集。
  • 结果包含主色、辅助色、中性色、语义色和彩色表面组。
  • 还包括排版、间距、尺寸、边框、阴影、动画、断点和 z-index 值。

正在使用“ui-design-system”。 为前端交接准备令牌。

预期结果:

  • 交接内容包含针对 CSS 或 SCSS 项目的导出指导。
  • 开发者会获得用于布局、字体、颜色、层级、动效和响应式行为的命名令牌组。
  • 设计师会获得一份可与现有品牌规则对照的摘要。

正在使用“ui-design-system”。 帮助记录组件标准。

预期结果:

  • 此技能可以为共享 UI 模式概述组件架构。
  • 它可以将令牌选择与组件状态、间距和响应式行为关联起来。
  • 它可以包含关于对比度、焦点状态和交互目标的无障碍提醒。

安全审计

安全
v7 • 2026/7/9 打开版本化报告

All six static findings are false positives based on the reviewed context. The flagged terms are design-system wording, color values, and markdown command formatting rather than command-and-control behavior, reconnaissance, or shell execution.

3
已扫描文件
851
分析行数
0
复核项
0
已忽略误报

风险因素

⚙️ 外部命令 (1)
SKILL.md:22
最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。
审计者: claude 查看审计历史 →
分享与引用此报告

分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。

打开版本化报告
安全评估

复制报告链接

https://skillstore.io/skills/alirezarezvani-ui-design-system/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/alirezarezvani-ui-design-system/security.svg)](https://skillstore.io/skills/alirezarezvani-ui-design-system?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/alirezarezvani-ui-design-system?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/alirezarezvani-ui-design-system/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/alirezarezvani-ui-design-system.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
学术引用 (APA · BibTeX · CFF)

APA 引用

alirezarezvani. (2026). ui-design-system security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/alirezarezvani-ui-design-system/audits/7

BibTeX 引用

@techreport{alirezarezvani-alirezarezvani-ui-design-system-2026, author = {alirezarezvani}, title = {ui-design-system security audit report (audit version 7)}, institution = {Skillstore}, year = {2026}, number = {7}, url = {https://skillstore.io/skills/alirezarezvani-ui-design-system/audits/7}, note = {Author version unspecified} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "ui-design-system security audit report (audit version 7)" version: "unspecified" type: report authors: - name: "alirezarezvani" date-released: "2026-07-09" url: "https://skillstore.io/skills/alirezarezvani-ui-design-system/audits/7" identifiers: - type: other value: "skillstore:alirezarezvani-ui-design-system:audit:7" description: "Skillstore immutable audit report identifier"

比较变体

3 个可安装变体

每位作者的技能都保持为独立的可安装项。推荐变体按 Skillstore 证据排序。

为什么此变体排名第一

Skillstore 评分最高
AbdulSamad94 推荐

abdulsamad94-ui-design-system

Skillstore 评分 76
证据置信度 高
Skillstore 使用量 18
已更新

2026-09-09

davila7

davila7-ui-design-system

Skillstore 评分 75
证据置信度 高
Skillstore 使用量 19
已更新

2026-09-09

alirezarezvani 当前

alirezarezvani-ui-design-system

Skillstore 评分 75
证据置信度 高
Skillstore 使用量 15
已更新

2026-09-09

Skillstore 评分

评分依据 证据置信度: 高
45
架构
85
可维护性
87
内容
70
社区
83
规范符合性

你能构建什么

启动新的设计系统

从品牌色生成第一套包含颜色、间距、排版、阴影和断点的令牌集。

准备开发者交接

以适合 Web 的格式导出令牌，并说明组件应如何使用共享值。

标准化产品 UI

为需要在多个产品领域共享设计决策的团队创建一致的比例系统。

试试这些提示

创建基础令牌 
使用 ui-design-system 技能，为品牌色 #0066CC 生成一套现代设计令牌集。展示令牌类别的简短摘要。
导出 Web 令牌 
使用趣味风格为品牌色 #3B82F6 生成设计令牌。将其导出用于 CSS 项目，并说明每个令牌组应在何处使用。
规划组件使用方式 
使用生成的令牌，为按钮、卡片、表单和导航创建组件指导简报。为每个组件组包含无障碍说明。
审查设计系统 
根据 ui-design-system 指导审查我当前的令牌策略。找出颜色、间距、排版、断点和开发者交接中的不一致之处。

最佳实践

  • 先从摘要导出开始，让设计师在实现前审查令牌覆盖范围。
  • 每个产品领域使用一种风格预设，以避免混杂的视觉规则。
  • 发布前，根据无障碍要求验证生成的颜色和组件状态。

避免

  • 不要在未经设计评审的情况下，将生成的令牌视为最终品牌审批结果。
  • 不要将生成的间距比例与无关的手动间距值混用。
  • 在为生产用途导出令牌时，不要跳过开发者交接说明。

常见问题

此技能会生成什么？
它会为颜色、排版、间距、尺寸、边框、阴影、动效、断点和 z-index 值生成设计令牌。
支持哪些导出格式？
随附的生成器支持 JSON、CSS 和 SCSS 输出格式。
它能创建完整的品牌系统吗？
它可以创建一个强有力的起点，但品牌策略和视觉审批仍需要人工设计评审。
它有助于无障碍吗？
它包含无障碍指导，但团队仍应在真实界面中测试对比度、焦点状态和屏幕行为。
谁应该使用此技能？
它适用于需要共享令牌指导的 UI 设计师、前端开发者和设计系统负责人。
它需要外部服务吗？
不需要。列出的能力是一个本地 Python 令牌生成器以及配套的设计系统说明。

开发者详情

许可证

MIT

Skillstore 修订

r1

版本提示

作者未声明版本。

仓库

https://github.com/alirezarezvani/claude-skills/tree/main/product-team/ui-design-system

引用

7db9b9f06e0ab79c575b58bc48c4d8dc9849f424

维护新鲜度

2026/7/20

使用量

11 次下载 · 208 次浏览

文件结构

📁 scripts/

📄 design_token_generator.py

📄 marketplace_content.json

📄 SKILL.md

alirezarezvani 的更多技能

查看全部

相关技能

查看全部