技能 design-to-production

📦

design-to-production

Name: design-to-production
Author: ArieGoldkin

内容修订 r2 高风险 📁 文件系统访问⚙️ 外部命令

将 HTML 设计转换为 React 组件

将打磨完善的 HTML 原型转换为一致的 React 组件既慢又容易出错。此技能会指导针对玻璃拟态界面的提取、组件映射、脚手架搭建、实现和验证。

支持: Claude Codex Code(CC)

⚠️ 38 差

安装前请停下并请求确认。

请审查安装计划，并在更改文件前获得用户明确同意。

使用我的智能体安装

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

智能体请求

Review the Skillstore skill "design-to-production" from https://skillstore.io/skills/ariegoldkin-design-to-production.md and its manifest at https://skillstore.io/api/skills/ariegoldkin-design-to-production/manifest. Verify the artifact. Stop and obtain explicit user consent before installing or changing files.

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

Agent 可读资源

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

Markdown 详情 GET /skills/ariegoldkin-design-to-production.md 已签名 manifest GET /api/skills/ariegoldkin-design-to-production/manifest 已签名 lockfile GET /api/skills/ariegoldkin-design-to-production/lockfile

测试它

正在使用“design-to-production”。设计师提供了一个完成的玻璃拟态提示面板原型。

预期结果:

结构摘要，包含检测到的按钮、类和布局模式。
推荐的组件名称、模块放置位置和模板类型。
包含验证步骤的实现清单。

正在使用“design-to-production”。团队需要将功能网格转换为可复用的 React 区块。

预期结果:

从原型元素到共享 UI 组件的映射。
针对移动端和桌面端网格的响应式布局指导。
涵盖文件大小、导入和类有效性的质量报告。

正在使用“design-to-production”。生成的组件未通过样式验证步骤。

预期结果:

清晰列出失败的检查项和警告。
针对无效玻璃拟态类的建议替换项。
组件准备好进入审查前的后续操作。

安全审计

高风险

v9 • 2026/7/23 打开版本化报告

All 121 static matches are false positives from documentation syntax, expected hidden install paths, quoted shell substitutions, or fixed directory anchors. Semantic review found an arbitrary file-creation risk in the scaffolder and unrestricted local input paths in two scripts. No prompt injection, network activity, credential access, or exfiltration intent was found.

已扫描文件

2,857

分析行数

复核项

已忽略误报

已确认安全问题 (2)

高

scripts/scaffold-component.sh:25-42 scripts/scaffold-component.sh:61-98

Unvalidated Scaffold Paths Permit Arbitrary File Creation

Component and module arguments are inserted into output paths without allowlist validation. Traversal values can create TypeScript files outside the intended components directory.

The component name flows directly into OUTPUT_FILE, and no format or canonical containment check occurs before the redirect writes the file.

中

scripts/extract-structure.sh:25-41 scripts/validate.sh:25-47

Input Paths Are Not Restricted to Project Directories

The extraction and validation scripts accept paths without canonical containment checks. They can inspect readable files outside expected prototype and source directories.

Both scripts use caller-controlled paths in file tests and parsing commands without resolving and checking an approved root.

风险因素

📁 文件系统访问 (20)

⚙️ 外部命令 (50)

审计者: codex 查看审计历史 →

分享与引用此报告

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

打开版本化报告

复制报告链接

https://skillstore.io/skills/ariegoldkin-design-to-production/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/ariegoldkin-design-to-production/security.svg)](https://skillstore.io/skills/ariegoldkin-design-to-production?utm_source=security_passport_badge)

HTML 徽章

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

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/ariegoldkin-design-to-production.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 引用

ArieGoldkin. (2026). design-to-production security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/ariegoldkin-design-to-production/audits/9

BibTeX 引用

@techreport{ariegoldkin-ariegoldkin-design-to-production-2026,
  author = {ArieGoldkin},
  title = {design-to-production security audit report (audit version 9)},
  institution = {Skillstore},
  year = {2026},
  number = {9},
  url = {https://skillstore.io/skills/ariegoldkin-design-to-production/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: "design-to-production security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
  - name: "ArieGoldkin"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/ariegoldkin-design-to-production/audits/9"
identifiers:
  - type: other
    value: "skillstore:ariegoldkin-design-to-production:audit:9"
    description: "Skillstore immutable audit report identifier"

Skillstore 评分

评分依据证据置信度: 中

架构

可维护性

内容

社区

规范符合性

你能构建什么

转换已定稿的原型

将完成的 HTML 玻璃拟态 mockup 转换为带类型的 React 组件，并提供结构和验证指导。

标准化设计系统输出

将重复出现的原型模式映射到共享 shadcn/ui 组件和已批准的玻璃拟态类。

验证组件质量

检查生成组件的文件大小、接口命名、any 类型、类使用和导入模式。

试试这些提示

转换一个原型

使用 design-to-production skill 将 .superdesign/design_iterations/glassmorphism_hints_panel_1.html 转换为 React 组件。在搭建脚手架前询问我的模块放置位置。

先映射组件

分析此 HTML 原型，并在写入文件前总结组件名称、目标模块、shadcn/ui 映射、玻璃拟态类和推荐模板。

搭建脚手架并验证

在 practice module 中为已批准的组件搭建脚手架，保留有效的玻璃拟态类，填写模板 TODO，并在之后运行验证脚本。

转换复杂区块

将 hero section 原型转换为 layout-section component。识别可复用的子组件，确认响应式网格行为，并报告验证结果。

最佳实践

使用已定稿的 HTML 原型，并在搭建脚手架前确认目标模块。
审查提取出的类，并在实现前替换无效的玻璃拟态实用类。
在填写 TODO 后、提交组件前运行验证。

避免

不要在未经审查的不可信文件路径或名称上运行脚本。
不要将此技能用于非 React 项目或无关的视觉风格。
不要将生成的 TODO 视为完整的业务逻辑。

常见问题

此技能会自动编写生产代码吗？

它会搭建 React 组件和 TODO 结构。开发者仍需实现业务逻辑并审查输出。

它需要什么输入？

它需要一个已定稿的 HTML 原型路径和一个现有目标模块。

它支持哪种 UI 技术栈？

它面向 React、TypeScript、shadcn/ui 和 DevPrep AI 玻璃拟态类。

Codex 可以使用此技能吗？

可以。元数据列出了 Claude、Codex 和 Claude Code 作为受支持工具。

它会验证安全吗？

不能。它只验证样式和组件质量。运行本地命令前请审查脚本输入。

我可以自定义模板吗？

可以。此技能包含交互式卡片、展示卡片和布局区块的模板文件。

开发者详情

作者

ArieGoldkin

许可证

MIT

Skillstore 修订

版本提示

作者未声明版本。

仓库

https://github.com/ArieGoldkin/devPrepAi/tree/main/.claude/skills/design-to-production

引用

89edfdc710d0846129dcee6a929477b04f08052c

维护新鲜度

2026/7/25

使用量

71 次下载 · 273 次浏览

文件结构

📁 examples/

📄 README.md

📁 references/

📄 common-patterns.md

📄 glassmorphism-mapping.md

📄 shadcn-component-guide.md

📁 scripts/

📄 extract-structure.sh

📄 scaffold-component.sh

📄 validate.sh

📄 SKILL.md

📁 templates/

📄 display-card.tsx.template

📄 interactive-card.tsx.template

📄 layout-section.tsx.template

使用 starknet.js 构建 Starknet 应用

由 internet-court

Starknet 集成需要精确处理提供程序、账户、交易和费用。此技能为 Claude、Codex 和 Claude Code 提供实用的 starknet.js v9 模式。

编码与开发查看

design-to-production

使用我的智能体安装

Agent 可读资源

测试它

安全审计

已确认安全问题 (2)

风险因素

复制报告链接

Markdown 徽章

HTML 徽章

嵌入卡片

APA 引用

BibTeX 引用

CITATION.cff

Skillstore 评分

你能构建什么

转换已定稿的原型

标准化设计系统输出

验证组件质量

试试这些提示

最佳实践

避免

常见问题

开发者详情

ArieGoldkin 的更多技能

architecture-decision-record

api-design-framework

brainstorming

code-review-playbook

database-schema-designer

quality-reviewer

相关技能

react-dev

senior-frontend

react-nextjs-development

playwright-testing

nestjs-code-audit

starknet-js