Skills design-to-code

📦

design-to-code

Name: design-to-code
Author: MigoXLab

Content revision r1 Medium Risk ⚙️ External commands📁 Filesystem access🌐 Network access

Convert Figma Designs to React

Design handoff often loses layout details and component structure. This skill guides Figma to React conversion with repeatable prompts and helper scripts.

Supports: Claude Codex Code(CC)

⚠️ 50 Poor

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request

Review the Skillstore skill "design-to-code" from https://skillstore.io/skills/migoxlab-design-to-code.md and its manifest at https://skillstore.io/api/skills/migoxlab-design-to-code/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Your Agent should still show its plan and request any confirmation required by the security policy.

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/migoxlab-design-to-code.md Signed manifest GET /api/skills/migoxlab-design-to-code/manifest Signed lockfile GET /api/skills/migoxlab-design-to-code/lockfile

Test it

Using "design-to-code". A landing page frame with hero content, feature sections, and a footer.

Expected outcome:

A structured React implementation plan with generated components, assets, and integration guidance.

Using "design-to-code". A dashboard design with repeated cards, charts, and navigation.

Expected outcome:

Component groups identified from the design.
Props extracted for repeated UI patterns.
Ordered generation tasks for leaf and parent components.

Using "design-to-code". A mobile app screen with icons, imagery, and repeated list items.

Expected outcome:

Generated component tasks that preserve text content, image references, and layout hierarchy.

Security Audit

Medium Risk

v4 • 7/5/2026 Open versioned report

Most static findings are false positives from markdown fences, JavaScript template literals, and expected local workflow files. The remaining risks are limited to unvalidated local path inputs, generated code writes, and Figma token handling through an external helper.

Files scanned

671

Lines analyzed

Review items

False positives ignored

Confirmed security concerns (2)

Medium

SKILL.md:58-60 scripts/coderio-skill.mjs:110-116

Sensitive Figma Token Passed To External Helper

The workflow asks users to provide a Figma token, then passes it into an imported coderio helper. The visible code does not show token handling inside that dependency.

The token flow is explicit in the documentation and script. There is no proof of exfiltration, but the token leaves local code boundaries through an external helper.

Medium

scripts/coderio-skill.mjs:282-287

Generated Protocol Paths Drive Project Writes

The save-code command reads component paths from protocol data and writes generated code into the project. The visible code does not validate the resolved output path.

The write path depends on protocol data generated earlier in the workflow. The helper may normalize paths, but this file does not show an explicit containment check.

Capability review items (2)

These are real local capabilities that may be expected for this skill, so they require review but are not counted as confirmed malicious behavior.

Medium

scripts/coderio-skill.mjs:192

Node.js fs operations

const propsJson = fs.readFileSync(propsJsonPath, 'utf-8');

The props file path is built from a CLI component name without visible validation. A crafted name could read an unintended local props file through path traversal.

Medium

scripts/coderio-skill.mjs:192

Synchronous file operations

const propsJson = fs.readFileSync(propsJsonPath, 'utf-8');

The props file path is built from a CLI component name without visible validation. A crafted name could read an unintended local props file through path traversal.

Risk Factors

⚙️ External commands (46)

📁 Filesystem access (37)

🌐 Network access (1)

SKILL.md:60

Audited by: codex View Audit History →

Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report

Copy report link

https://skillstore.io/skills/migoxlab-design-to-code/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

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

HTML badge

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

Embed card

<iframe src="https://skillstore.io/embed/skills/migoxlab-design-to-code.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

Academic citations (APA · BibTeX · CFF)

APA citation

MigoXLab. (2026). design-to-code security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/migoxlab-design-to-code/audits/4

BibTeX citation

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

Skillstore Score

Why this score Evidence Confidence: High

Architecture

Maintainability

Content

Community

Spec Compliance

What You Can Build

Build From A Figma Frame

Convert a selected Figma frame into a React project with generated components and assets.

Prepare Design Handoff

Turn visual structure, repeated components, and props into implementation-ready tasks.

Accelerate Prototype Implementation

Create a working Vite and Tailwind CSS interface from an approved visual design.

Try These Prompts

Convert One Frame

Use design-to-code to convert my Figma frame into React and TypeScript. Follow the workflow and tell me which files need review.

Extract Component Props

Use the generated thumbnail and protocol to extract props for each repeated component. Keep labels, image paths, and order exact.

Generate Ordered Components

Generate the React components in task order. Save each result through the helper workflow and keep parent imports consistent.

Review And Integrate Output

Review the generated components for visual fidelity, unsafe paths, and missing assets. Then integrate the root component into the app.

Best Practices

Use a scoped Figma token and remove it from shell history after use.
Review every generated file before committing or running the application.
Keep generated artifacts in the documented process and scripts directories.

Avoid

Do not paste unrelated secrets into prompts or generated workflow files.
Do not skip visual review after generating components.
Do not run helper commands from an unexpected working directory.

Frequently Asked Questions

What does this skill generate?

It guides generation of React and TypeScript components from Figma design data and thumbnails.

Does it need a Figma token?

Yes. The fetch step requires a Figma personal access token with access to the target file.

Can it work without network access?

No. The Figma fetch step and dependency installation require network access.

Does it automatically create perfect code?

No. It creates a guided workflow, but users must review generated code and visual fidelity.

Which tools does it support?

The report lists support for Claude, Codex, and Claude Code workflows.

Where are intermediate files stored?

The helper uses local process and scripts directories for thumbnails, protocols, prompts, and task files.

Developer Details

Author

MigoXLab

License

MIT

Skillstore revision

Version notice

The author did not declare a version.

Repository

https://github.com/MigoXLab/coderio/tree/main/skills/design-to-code/

Ref

6425ec35f4ac137735cff58cd7877843bba23e3b

Maintenance freshness

7/21/2026

Usage

6 downloads · 217 views

File structure

📁 scripts/

📄 coderio-skill.mjs

📄 package.json

📄 LICENSE.txt

📄 SKILL.md

View all

📦

react-dev

Build Type-Safe React Components

by softaworks

React TypeScript work often needs precise event, hook, and route types. This skill provides focused patterns for typed components, React 19 APIs, and routing.

Coding & Development View

📦

senior-frontend

Build Frontend Apps Faster

by davila7

Frontend work often needs consistent React patterns, performance checks, and project scaffolding. This skill gives Claude and compatible agents practical guidance and local helper scripts for modern web application development.

Coding & Development View

📦

react-nextjs-development

Build Modern React and Next.js Apps

by sickn33

React and Next.js projects often need consistent setup choices across routing, components, styling, data, forms, tests, and deployment. This skill gives Claude, Codex, and Claude Code a phase-based workflow for planning and building modern frontend applications.

Coding & Development View

📦

playwright-testing

Build Reliable Playwright Tests

by C0ntr0lledCha0s

Playwright test suites can become flaky, slow, and difficult to maintain. This skill provides practical patterns for locators, fixtures, page objects, debugging, mocking, and configuration.

Coding & Development View

📦

starknet-js

Build Starknet Apps with starknet.js

by internet-court

Starknet integrations require precise provider, account, transaction, and fee handling across several APIs. This skill provides focused starknet.js v9.x patterns for reliable TypeScript applications.

Coding & Development View

📦

vue-best-practices

Improve Vue 3 Code Quality

by vuejs-ai

Vue projects often collect reactivity, component, and performance mistakes over time. This skill gives targeted Vue 3 guidance for safer patterns and clearer code.

Coding & Development View

design-to-code

Install with my Agent

Agent-readable resources

Test it

Security Audit

Confirmed security concerns (2)

Risk Factors

Copy report link

Markdown badge

HTML badge

Embed card

APA citation

BibTeX citation

CITATION.cff

Skillstore Score

What You Can Build

Build From A Figma Frame

Prepare Design Handoff

Accelerate Prototype Implementation

Try These Prompts

Best Practices

Avoid

Frequently Asked Questions

Developer Details

Related Skills

react-dev

senior-frontend

react-nextjs-development

playwright-testing

starknet-js

vue-best-practices