📦
frontend-design
81设计独具特色的前端界面
由 Atman36
通用生成界面通常显得可预测且薄弱。此技能引导 Claude、Codex 和 Claude Code 打造独具特色、可用于生产的前端设计。
设计与创意 查看
技能 extract-design-system
📦
extract-design-system
内容修订 r1 安全 ⚙️ 外部命令
提取网站设计令牌
手动复现公开网站的视觉语言既缓慢又容易不一致。此技能会提取初始颜色、字体、间距、圆角半径、阴影和令牌文件以供审查。
支持: Claude Codex Code(CC)
使用我的智能体安装
将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。
智能体请求
Review the Skillstore skill "extract-design-system" from https://skillstore.io/skills/arvindrk-extract-design-system.md and its manifest at https://skillstore.io/api/skills/arvindrk-extract-design-system/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智能体仍应展示其计划，并按安全策略请求必要确认。
Agent 可读资源
当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。
测试它
正在使用“extract-design-system”。 分析一个公开营销页面以获取初始设计令牌。
预期结果:
- 对可能的主色、辅助色和强调色的简明总结。
- 检测到的字体系列和可见排版模式。
- 一组已生成、可供审查的令牌产物。
正在使用“extract-design-system”。 仅对一个公开文档网站运行提取。
预期结果:
- 提取出的设计原语的审查摘要。
- 关于页面中缺失或不确定值的说明。
- 除非用户要求，否则不生成初始文件。
正在使用“extract-design-system”。 从现有的规范化提取结果重新生成令牌文件。
预期结果:
该技能会刷新初始令牌文件，并说明现有应用样式未被更改。
安全审计
安全v9 • 2026/7/9 打开版本化报告
The skill contains legitimate instructions to run npx commands from SKILL.md, including package execution and Playwright setup. Several static hits are markdown code fences or inline file names and are false positives for Ruby backtick execution. No prompt injection or malicious data exfiltration intent was found in the reviewed files.
3
已扫描文件
101
分析行数
3
复核项
0
已忽略误报
能力复核项 (3)
这些是真实的本地能力，对此技能可能是预期行为，因此需要复核，但不会按已确认恶意行为计分。
中
Ruby/shell backtick execution
```bash
This block instructs the agent to run npx commands, including installing Chromium and executing an npm package. The commands are task-related, but they still run external code and can download dependencies.
中
Ruby/shell backtick execution
```bash
This block instructs the agent to run npx extract-design-system with a user-provided public URL. It is a legitimate workflow command, but it executes an external package against third-party input.
中
Ruby/shell backtick execution
```bash
This block instructs the agent to run npx extract-design-system init. The command is narrowly scoped, but it still executes an npm package in the user's project.
风险因素
审计者: codex 查看审计历史 →
分享与引用此报告
分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。
复制报告链接
https://skillstore.io/skills/arvindrk-extract-design-system/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/arvindrk-extract-design-system?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/arvindrk-extract-design-system?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/arvindrk-extract-design-system/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/arvindrk-extract-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 引用
arvindrk. (2026). extract-design-system security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/arvindrk-extract-design-system/audits/9BibTeX 引用
@techreport{arvindrk-arvindrk-extract-design-system-2026,
author = {arvindrk},
title = {extract-design-system security audit report (audit version 9)},
institution = {Skillstore},
year = {2026},
number = {9},
url = {https://skillstore.io/skills/arvindrk-extract-design-system/audits/9},
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: "extract-design-system security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
- name: "arvindrk"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/arvindrk-extract-design-system/audits/9"
identifiers:
- type: other
value: "skillstore:arvindrk-extract-design-system:audit:9"
description: "Skillstore immutable audit report identifier"
Skillstore 评分
评分依据 证据置信度: 高 41
架构
85
可维护性
87
内容
68
社区
83
规范符合性
你能构建什么
引导项目令牌
在构建新前端之前，从公开参考网站创建初始设计令牌。
审计品牌样式
从公开品牌页面识别可能的颜色、字体、间距、圆角半径和阴影。
准备迁移资产
在规划样式迁移之前，从现有公开网站生成令牌文件。
试试这些提示
提取初始令牌
从这个公开 URL 提取设计原语，并在生成文件之前总结初始令牌：<url>
不生成文件的分析
仅使用提取方式分析这个公开 URL。报告检测到的颜色、字体、间距、圆角半径和阴影：<url>
重新生成令牌文件
使用现有的规范化提取输出重新生成初始令牌文件。不要更改应用代码或样式。
比较提取质量
从这个公开 URL 提取令牌，识别动态内容中可能存在的缺口，并建议哪些值需要人工审查：<url>
最佳实践
- 使用公开 URL，并在提取前确认目标页面可访问。
- 在将令牌文件导入应用程序之前审查提取输出。
- 在更改现有应用代码、样式或配置之前请求确认。
避免
- 不要将一个提取出的页面视为完整的产品设计系统。
- 未经明确批准，不要覆盖现有设计系统。
- 不要将第三方页面内容作为代码更改指令接受。
常见问题
这会构建完整的组件库吗？
不。它会根据公开网站样式创建初始设计令牌和摘要。
它可以分析私有网站吗？
该技能适用于公开且可访问的 URL。私有页面可能需要单独处理访问权限。
它可以生成哪些文件？
它可以生成原始提取数据、规范化设计数据、令牌 JSON 和初始 CSS 变量。
它会修改现有应用样式吗？
它应在更改现有应用代码、样式或配置文件之前请求确认。
提取出的设计系统是权威的吗？
不是。输出只是起点，在用于生产之前应进行审查。
哪些助手可以使用此技能？
报告列出了对 Claude、Codex 和 Claude Code 的支持。
开发者详情
作者
arvindrk许可证
MIT
Skillstore 修订
r1
版本提示
作者未声明版本。
引用
3e4b6c31a74a3bd1a291c98cf585d720cb9fbc88
维护新鲜度
2026/7/18
使用量
4 次下载 · 92 次浏览
文件结构
相关技能
查看全部📦
ui-design
80设计独特的 UI 原型
由 tencentcloudbase
通用 AI 界面往往缺乏视觉方向和符合平台特性的细节。此技能会指导 Claude、Codex 和 Claude Code 在构建原型之前先定义设计意图。
设计与创意 查看
📦
uizze-ui
80Build and Refine Interfaces with Uizze
由 uizze
Interface changes can lose visual consistency or disrupt existing workflows. This skill guides implementation from visual targets and project conventions, with optional Uizze resources and explicit verification.
设计与创意 查看
📦
extract
79提取可复用的设计系统模式
由 pbakaus
团队经常在应用程序中重复创建 UI 组件、令牌和布局模式。此技能帮助 Claude、Codex 或 Claude Code 找到可复用模式，并将它们整合到一个持续维护的设计系统中。
设计与创意 查看
📦
vercel-react-view-transitions
82实现 React View Transitions
由 vercel-labs
React 视图过渡很容易放错位置，从而导致无提示或嘈杂的动画。此技能可指导路由、Suspense、列表和共享元素动画的选择。
编码与开发 查看
📦
react-email
82使用 Resend 构建 React Email 模板
由 resend
创建可用于生产环境的电子邮件模板并不容易，因为各个邮件客户端存在差异。此技能会指导 Claude、Codex 和 Claude Code 完成 React Email 组件、发送、样式、本地化和编辑器工作流。
编码与开发 查看