← Back to Skills Marketplace
245
Downloads
0
Stars
1
Active Installs
1
Versions
Install in OpenClaw
/install ui-prototype-generator
Description
从参考图片或描述生成交互式原型。默认输出 HTML 格式，仅在用户明确要求时使用 Figma。支持 (1) 用于网页预览和测试的 HTML 原型，(2) 通过 API 生成 Figma 设计文件用于设计交接和协作，(3) 基于组件架构的可复用 UI 元素，(4) 响应式布局和交互状态，(5) 基于反馈的快速迭代。
Usage Guidance
This skill appears to do what it says: generate HTML prototypes by default and call the Figma API only when asked. Before installing or using it, review these points: (1) Never paste your Figma Personal Access Token into a chat with the agent unless you explicitly trust that channel — prefer creating the auth-profiles.json file in the path the skill documents (or set the env var) so the agent reads the token from disk rather than you typing it into conversation. (2) Inspect scripts/scripts/figma_generator.py and scripts/html_generator.py (they are included) to confirm API calls go only to api.figma.com and that there is no hidden logging/exfiltration. (3) Limit the Figma token scope to the minimum needed, and rotate/revoke it after testing. (4) When running any included script locally, run it in a sandbox or with least privileges; avoid running unknown scripts as root. (5) The SKILL.md is somewhat vague about how tokens are 'securely saved' — if you plan to use Figma output, set up auth-profiles.json yourself in the documented location rather than pasting credentials into the assistant. If you want higher assurance, ask the maintainer for a security walkthrough or review the full python scripts before enabling Figma integrations.
Capability Analysis
Type: OpenClaw Skill
Name: ui-prototype-generator
Version: 1.0.0
The ui-prototype-generator skill bundle is a legitimate tool for generating HTML and Figma prototypes. The core logic in scripts/html_generator.py and scripts/figma_generator.py follows the stated purpose, using standard templates and API interactions. While figma_generator.py accesses sensitive Figma API tokens from auth-profiles.json, this behavior is documented and necessary for the tool's functionality, with no evidence of exfiltration to unauthorized endpoints or malicious prompt injection in SKILL.md.
Capability Assessment
Purpose & Capability
The skill name/description align with included assets: HTML generator, Figma generator, component references, and a bundled Figma plugin. Requiring a Figma token only for Figma output is appropriate and supported by an auth-profiles.template.json file.
Instruction Scope
SKILL.md stays mostly within scope (generate HTML by default; call Figma API only on explicit request). However, the doc instructs the agent to 'prompt the user for a Figma token' and to 'save' it to auth-profiles.json; that flow is ambiguous and could lead to users pasting secrets into the chat (exposing tokens to the model/authed logs). The exact mechanism for securely writing auth-profiles.json is not specified, and some runtime behaviors (how the agent prompts, where it saves files) are left to implementation, granting the agent discretion that could leak secrets if mishandled.
Install Mechanism
No external install spec or remote downloads are present; the skill is instruction-first and ships local scripts and a Figma plugin. No risky download URLs or extract/install steps were observed.
Credentials
The skill does not declare required env vars in metadata, yet the docs show using a FIGMA_ACCESS_TOKEN (via auth-profiles.json or an env var in examples). Requesting a Figma personal access token only when using Figma is proportionate; nevertheless, the skill asks users to provide/store that token without a clear secure workflow in the SKILL.md, and the example showing `export FIGMA_ACCESS_TOKEN=$(cat auth-profiles.json | jq -r '.profiles.figma.access_token')` suggests reading a local file — acceptable — but the doc also suggests the user may supply the token to the agent directly (risk of exposure).
Persistence & Privilege
always:false and no statements about modifying other skills or system-wide settings. The skill stores credentials in a local auth-profiles.json template and includes no 'always' or elevated privileges.
How to Use
- Make sure OpenClaw is installed (local or Docker)
- Run the install command in chat:
/install ui-prototype-generator - After installation, invoke the skill by name or use
/ui-prototype-generator - Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.0.0
Initial release
Metadata
Frequently Asked Questions
What is UI Prototype Generator?
从参考图片或描述生成交互式原型。默认输出 HTML 格式，仅在用户明确要求时使用 Figma。支持 (1) 用于网页预览和测试的 HTML 原型，(2) 通过 API 生成 Figma 设计文件用于设计交接和协作，(3) 基于组件架构的可复用 UI 元素，(4) 响应式布局和交互状态，(5) 基于反馈的快速迭代。 It is an AI Agent Skill for Claude Code / OpenClaw, with 245 downloads so far.
How do I install UI Prototype Generator?
Run "/install ui-prototype-generator" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.
Is UI Prototype Generator free?
Yes, UI Prototype Generator is completely free, licensed under MIT-0. You can download, install and use it at no cost.
Which platforms does UI Prototype Generator support?
UI Prototype Generator is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).
Who created UI Prototype Generator?
It is built and maintained by yingle (@zhappy); the current version is v1.0.0.
More Skills