← 返回 Skills 市场
118
总下载
1
收藏
0
当前安装
1
版本数
在 OpenClaw 中安装
/install openclaw-skill-vibe-to-code-theme-gen
功能描述
Generates a color palette and CSS variables based on a descriptive atmosphere
安全使用建议
Before installing, consider the following:
- The code sends the user's 'vibe' text to https://openrouter.ai; SKILL.md does not disclose this. If you care about privacy or sensitive prompts, do not install until the author clarifies and documents the external call.
- Ask the author to explicitly declare any required credentials (e.g., OPENROUTER_API_KEY) and to add an Authorization header rather than relying on implicit platform credentials.
- Request that SKILL.md be updated to state clearly that user input is transmitted to an external LLM and to which endpoint.
- Recommend code hardening: validate/trust the model output safely (wrap JSON.parse in try/catch, validate expected keys and color formats, reject or sanitize unexpected values) to avoid runtime crashes or malformed outputs.
- If you prefer no network calls, ask for an offline fallback implementation (deterministic color generation from the vibe string) or remove the external fetch entirely.
- Do not install this skill on systems that may send sensitive or confidential text to third parties until the data flow and credential handling are clarified.
If the maintainer confirms that use of openrouter.ai is intentional, they should: (1) declare the API key env var in the skill metadata, (2) add Authorization to the request headers, (3) update SKILL.md to disclose the external call, and (4) add robust parsing and validation of the model response.
功能分析
Type: OpenClaw Skill
Name: openclaw-skill-vibe-to-code-theme-gen
Version: 1.0.0
The skill bundle is a legitimate tool for generating UI color themes based on text descriptions. The `handler.js` file implements the logic by sending the user's input to the OpenRouter API and formatting the JSON response into CSS, Tailwind, or VS Code configurations. While the code lacks an API key for the fetch request and performs basic JSON parsing of LLM output, these are functional oversights or environment-specific implementations rather than malicious behaviors.
能力评估
Purpose & Capability
The skill's stated purpose is to generate palettes/CSS. The handler.js implementation calls an external LLM endpoint (https://openrouter.ai/api/v1/chat/completions). The SKILL.md does not mention using a third-party LLM service or needing an API key. Either the network call is intended (and should be declared), or the code is misplaced; the lack of declared credentials or explanation is disproportionate to the stated purpose.
Instruction Scope
SKILL.md describes local generation/formats and gives no indication that user-provided 'vibe' text will be sent to a third-party API. The runtime code does exactly that. This is scope creep: the instructions do not disclose external transmission of user input to openrouter.ai.
Install Mechanism
This is an instruction-only skill with one small handler.js file and no install spec or remote downloads. There is no install-time execution of arbitrary code from external URLs.
Credentials
No environment variables or credentials are declared, yet the code calls an external LLM endpoint that typically requires authentication. The skill does not request or document an API key (e.g., OPENROUTER_API_KEY) or show how authentication is provided; this is an inconsistency and could lead to implicit credential usage or failing network requests.
Persistence & Privilege
The skill is not always-enabled and does not request elevated or persistent privileges. It does not modify other skills or system-wide settings.
如何使用
- 确保已安装 OpenClaw（本地或 Docker 部署）
- 在对话框中输入安装命令：
/install openclaw-skill-vibe-to-code-theme-gen - 安装完成后，直接呼叫该 Skill 的名称或使用
/openclaw-skill-vibe-to-code-theme-gen触发 - 根据 Skill 的参数说明提供必要输入，即可获得结构化输出
版本历史
v1.0.0
# VibeTheme
An OpenClaw skill that generates color palettes and theme code from a descriptive atmosphere string.
Give it a vibe like "cozy autumn evening" or "neon cyberpunk city" and get back ready-to-use theme code.
## Install
Clone into your OpenClaw skills directory:
## Usage
```
/vibe_theme generate_theme --vibe "<atmosphere>" [--format css|tailwind|vscode]
```
### Parameters
| Parameter | Required | Default | Description |
|-----------|----------|---------|-------------|
| `vibe` | Yes | — | A descriptive atmosphere (e.g. "cozy autumn evening", "neon cyberpunk city") |
| `format` | No | `css` | Output format: `css`, `tailwind`, or `vscode` |
## Output Formats
### CSS Variable Sheet (`--format css`)
A `:root` block of CSS custom properties you can paste into any stylesheet.
```css
:root {
--primary-color: #D4A373;
--secondary-color: #FAEDCD;
--accent-color: #E9EDC9;
--background-color: #FEFAE0;
--font-stack: Serif;
}
```
### Tailwind Config Snippet (`--format tailwind`)
A `colors` and `fontFamily` object for your `tailwind.config.js`.
```js
{
"colors": {
"primary": "#D4A373",
"secondary": "#FAEDCD",
"accent": "#E9EDC9",
"background": "#FEFAE0"
},
"fontFamily": {
"vibe": "Serif"
}
}
```
### VS Code Theme Draft (`--format vscode`)
A JSON structure for VS Code's `workbench.colorCustomizations` in `settings.json`.
```json
{
"workbench.colorCustomizations": {
"editor.background": "#FEFAE0",
"editor.foreground": "#D4A373",
"editorLineNumber.foreground": "#FAEDCD",
"editorCursor.foreground": "#E9EDC9",
"activityBar.background": "#FEFAE0",
"sideBar.background": "#FEFAE0",
"editor.fontFamily": "Serif"
}
}
```
## How It Works
1. The `vibe` string is sent to an LLM with a system prompt that instructs it to act as a professional UI designer.
2. The LLM returns a JSON object with `primaryColor`, `secondaryColor`, `accentColor`, `backgroundColor`, and `fontStack`.
3. The selected formatter transforms that JSON into the requested output format.
## Skill Metadata
| Field | Value |
|----------|-------|
| Name | VibeTheme |
| Slug | `openclaw-skill-vibe-to-code-theme-gen` |
| Version | `1.0.0` |
| Command | `generate_theme` |
## API
### `generateTheme(vibe, format?)`
Returns a formatted theme string.
- `vibe` **string** (required) — Descriptive atmosphere.
- `format` **string** (optional, default `'css'`) — One of `'css'`, `'tailwind'`, `'vscode'`.
### `toCSS(theme)`
Converts a theme object to a CSS `:root` block.
### `toTailwind(theme)`
Converts a theme object to a Tailwind config snippet.
### `toVSCode(theme)`
Converts a theme object to a VS Code `workbench.colorCustomizations` JSON.
元数据
常见问题
VibeTheme 是什么？
Generates a color palette and CSS variables based on a descriptive atmosphere. 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件，目前累计下载 118 次。
如何安装 VibeTheme？
在 OpenClaw 或 Claude Code 对话框中运行命令「/install openclaw-skill-vibe-to-code-theme-gen」即可一键安装，无需额外配置。
VibeTheme 是免费的吗？
是的，VibeTheme 完全免费，采用 MIT-0 许可证，可自由下载、安装和使用。
VibeTheme 支持哪些平台？
VibeTheme 跨平台运行，可在任意部署了 OpenClaw / Claude Code 的环境中使用（cross-platform）。
谁开发了 VibeTheme？
由 Peter Lum（@liverock）开发并维护，当前版本 v1.0.0。
推荐 Skills