# openclaw-genpark-visual-designer Adopt this skill: https://proskills.md/skills/service/alphaparkinc-openclaw-genpark-visual-designer Page: https://proskills.md/skills/service/alphaparkinc-openclaw-genpark-visual-designer This document is the public skill bundle for that page. It contains SKILL.md and every helper file the catalog carries. No login is required. ## File: SKILL.md size: 1890 sha: 307fa5fb8e838ad8cce032ebd8bddefdf226feac upstream: https://github.com/alphaparkinc/openclaw-genpark-visual-designer/blob/HEAD/SKILL.md ````text --- name: openclaw-genpark-visual-designer description: OpenClaw GenPark Visual Designer - Golden ratio typography hierarchy scaling, WCAG 2.1 color contrast ratio auditing, and triadic color harmony generation with zero dependencies. category: Service version: 1.0.0 license: MIT tools: - calculate_golden_ratio_typography_scale - evaluate_wcag_color_contrast_ratio - generate_triadic_color_palette --- # Openclaw Genpark Visual Designer ## Overview & Agent Behavioral Directives You are an autonomous agent specialized in **Openclaw Genpark Visual Designer**. Your primary directive is to execute: OpenClaw GenPark Visual Designer - Golden ratio typography hierarchy scaling, WCAG 2.1 color contrast ratio auditing, and triadic color harmony generation with zero dependencies. Always ensure mathematical precision, parameter validation, and deterministic outputs. ## When to Activate This Skill - Activate when an agent workflow or user instruction requires: - `calculate_golden_ratio_typography_scale` - `evaluate_wcag_color_contrast_ratio` - `generate_triadic_color_palette` - Activate when operating in zero-dependency environments requiring pure Python standard library execution. ## How to Execute ### Option 1: Direct Python Execution (Zero-Dependency) ```python from client import * # Client operates purely on standard Python library: # Initialized and ready for direct function invocation. ``` ### Option 2: FastMCP Tool Calling Tools registered in `mcp_server.py`: - `calculate_golden_ratio_typography_scale` - `evaluate_wcag_color_contrast_ratio` - `generate_triadic_color_palette` ## Core Mathematical & Algorithmic Guardrails - **Zero-Dependency Policy**: 100% Python standard library only (`math`, `heapq`, `hashlib`, `urllib`, `collections`, `itertools`, `typing`). - **Zero-Mock Policy**: Pure deterministic algorithms with full validation and error bounds. ```` ## File: README.md size: 2065 sha: 65d1c90d96bde35f8cbf5481fe2ff3fa2e0e357a upstream: https://github.com/alphaparkinc/openclaw-genpark-visual-designer/blob/HEAD/README.md ````text # openclaw-genpark-visual-designer [![OpenClaw](https://img.shields.io/badge/OpenClaw-Ecosystem-blue.svg)](https://github.com/alphaparkinc/openclaw-genpark-visual-designer) [![Zero Dependency](https://img.shields.io/badge/Dependencies-Standard_Library_Only-success.svg)](https://www.python.org/) [![MCP Ready](https://img.shields.io/badge/MCP-Model_Context_Protocol-orange.svg)](https://modelcontextprotocol.io/) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![Production Grade](https://img.shields.io/badge/Status-Production_Ready-brightgreen.svg)](https://github.com/Alpha-Park/openclaw-genpark-visual-designer) Production-grade agentic skill designed for the OpenClaw and GenPark swarms. Built strictly using the Python standard library with zero external runtime dependencies. ## Architecture & Flow ```mermaid flowchart TD A[Agent Planner / Host] -->|Tool Invocation| B(MCP Server Entrypoint) B --> C[OpenClawGenParkVisualDesigner] C --> D[Deterministic Mathematical Algorithms] D --> E[Validated JSON Response] E -->|Structured Payload| A ``` ## Features - **Standard Library Only**: 100% Python standard library with no wheels, C-extensions, or pip requirements. - **Model Context Protocol (MCP)**: Native FastMCP JSON-RPC interface for seamless tool-calling in Claude, Cursor, and OpenClaw. - **Algorithmic Rigor**: Rigorous closed-form mathematical equations and quantitative deterministic metrics. - **Multi-Tenant Mirrored**: Dual-deployed across `@alphaparkinc` and `@Alpha-Park`. ## Installation & Usage ```bash git clone https://github.com/Alpha-Park/openclaw-genpark-visual-designer.git cd openclaw-genpark-visual-designer python example_usage.py ``` ## MCP Configuration Add to your `claude_desktop_config.json`: ```json { "mcpServers": { "openclaw-genpark-visual-designer": { "command": "python", "args": ["-m", "openclaw-genpark-visual-designer.mcp_server"] } } } ``` ## License MIT License. See [LICENSE](LICENSE) for details. ```` ## File: .gitignore size: 64 sha: ed8ae579cca3201f66148b37156e8f84a58a6680 upstream: https://github.com/alphaparkinc/openclaw-genpark-visual-designer/blob/HEAD/.gitignore ```text __pycache__/\n*.py[cod]\n.env\n.venv/\nvenv/\n*.log\n.DS_Store\n ``` ## File: client.py size: 5509 sha: 0cc1d12f09b2d171a9ff5b3118446ccd7cc964b1 upstream: https://github.com/alphaparkinc/openclaw-genpark-visual-designer/blob/HEAD/client.py ```text # -*- coding: utf-8 -*- """ OpenClaw GenPark Visual Designer Client Pure Python Standard Library (Zero External Dependencies) Implements Golden Ratio (phi = 1.618) typography scale hierarchy, WCAG 2.1 relative luminance color contrast ratio auditing, and triadic color harmony generation. """ import math from typing import Dict, Any, List, Optional, Tuple class OpenClawGenParkVisualDesigner: """ Algorithmic UI design system, typography scale, and color harmony engine. """ def __init__(self): self.phi = (1.0 + math.sqrt(5.0)) / 2.0 # 1.6180339887... def calculate_golden_ratio_typography_scale( self, base_font_size_px: float = 16.0, scale_ratio: Optional[float] = None ) -> Dict[str, Any]: """ Calculates modular typography scale based on Golden Ratio phi or custom geometric ratio: Font_Size = Base * (Ratio ^ Step) """ r = scale_ratio if scale_ratio is not None else self.phi scale = { "display": round(base_font_size_px * (r ** 3), 1), "h1": round(base_font_size_px * (r ** 2), 1), "h2": round(base_font_size_px * (r ** 1.5), 1), "h3": round(base_font_size_px * r, 1), "body": round(base_font_size_px, 1), "small": round(base_font_size_px / r, 1), "caption": round(base_font_size_px / (r ** 1.5), 1) } line_heights = { k: round(v * 1.35, 1) if v > 24 else round(v * 1.5, 1) for k, v in scale.items() } return { "base_font_size_px": base_font_size_px, "scale_ratio": round(r, 4), "typography_hierarchy_px": scale, "line_heights_px": line_heights } def _hex_to_rgb(self, hex_str: str) -> Tuple[int, int, int]: clean = hex_str.lstrip("#") if len(clean) == 3: clean = "".join([c * 2 for c in clean]) val = int(clean, 16) return ((val >> 16) & 255, (val >> 8) & 255, val & 255) def _relative_luminance(self, r: int, g: int, b: int) -> float: """ Calculates sRGB relative luminance according to WCAG 2.1 specs: C_srgb = C / 255.0 C_lin = C_srgb / 12.92 if C_srgb <= 0.03928 else ((C_srgb + 0.055) / 1.055) ^ 2.4 L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin """ def to_lin(c): c_s = c / 255.0 return c_s / 12.92 if c_s <= 0.03928 else ((c_s + 0.055) / 1.055) ** 2.4 return 0.2126 * to_lin(r) + 0.7152 * to_lin(g) + 0.0722 * to_lin(b) def evaluate_wcag_color_contrast_ratio( self, foreground_hex: str, background_hex: str ) -> Dict[str, Any]: """ Calculates WCAG 2.1 color contrast ratio: Contrast = (L1 + 0.05) / (L2 + 0.05) where L1 > L2 Evaluates AA (4.5:1), AAA (7.0:1), and Large Text (3.0:1). """ r1, g1, b1 = self._hex_to_rgb(foreground_hex) r2, g2, b2 = self._hex_to_rgb(background_hex) lum1 = self._relative_luminance(r1, g1, b1) lum2 = self._relative_luminance(r2, g2, b2) lighter = max(lum1, lum2) darker = min(lum1, lum2) contrast = (lighter + 0.05) / (darker + 0.05) contrast = round(contrast, 2) pass_aa_normal = contrast >= 4.5 pass_aa_large = contrast >= 3.0 pass_aaa_normal = contrast >= 7.0 pass_aaa_large = contrast >= 4.5 return { "foreground_hex": foreground_hex, "background_hex": background_hex, "contrast_ratio": contrast, "wcag_aa_normal": pass_aa_normal, "wcag_aa_large": pass_aa_large, "wcag_aaa_normal": pass_aaa_normal, "wcag_aaa_large": pass_aaa_large, "compliance_rating": "AAA_EXCELLENT" if pass_aaa_normal else ("AA_COMPLIANT" if pass_aa_normal else "FAIL_INSUFFICIENT_CONTRAST") } def generate_triadic_color_palette( self, seed_hue_degrees: float = 210.0, saturation: float = 0.8, lightness: float = 0.5 ) -> Dict[str, Any]: """ Generates 3 harmonized triadic color hues on the color wheel: H1 = seed, H2 = (seed + 120) % 360, H3 = (seed + 240) % 360 Converts HSL to Hex. """ def hsl_to_hex(h, s, l): c = (1.0 - abs(2.0 * l - 1.0)) * s x = c * (1.0 - abs((h / 60.0) % 2.0 - 1.0)) m = l - c / 2.0 if 0 <= h < 60: r1, g1, b1 = c, x, 0 elif 60 <= h < 120: r1, g1, b1 = x, c, 0 elif 120 <= h < 180: r1, g1, b1 = 0, c, x elif 180 <= h < 240: r1, g1, b1 = 0, x, c elif 240 <= h < 300: r1, g1, b1 = x, 0, c else: r1, g1, b1 = c, 0, x r = round((r1 + m) * 255) g = round((g1 + m) * 255) b = round((b1 + m) * 255) return f"#{r:02x}{g:02x}{b:02x}" h1 = seed_hue_degrees % 360.0 h2 = (seed_hue_degrees + 120.0) % 360.0 h3 = (seed_hue_degrees + 240.0) % 360.0 return { "primary_hex": hsl_to_hex(h1, saturation, lightness), "secondary_hex": hsl_to_hex(h2, saturation, lightness), "accent_hex": hsl_to_hex(h3, saturation, lightness), "triadic_hues_deg": [round(h1, 1), round(h2, 1), round(h3, 1)] } ``` ## File: example_usage.py size: 1011 sha: d386549367b7842b534c4cc54dfcad6bb29627d4 upstream: https://github.com/alphaparkinc/openclaw-genpark-visual-designer/blob/HEAD/example_usage.py ```text # -*- coding: utf-8 -*- from client import OpenClawGenParkVisualDesigner designer = OpenClawGenParkVisualDesigner() # 1. Golden Ratio Typography typo = designer.calculate_golden_ratio_typography_scale(base_font_size_px=16.0) print(f"Golden Ratio Typography: Base={typo['base_font_size_px']}px (Ratio={typo['scale_ratio']})") for tag, sz in typo['typography_hierarchy_px'].items(): print(f" {tag.upper()}: {sz}px (Line Height: {typo['line_heights_px'][tag]}px)") # 2. WCAG Contrast Check contrast = designer.evaluate_wcag_color_contrast_ratio("#1e293b", "#ffffff") print() print(f"WCAG Contrast: Ratio={contrast['contrast_ratio']}:1 ({contrast['compliance_rating']}, AA={contrast['wcag_aa_normal']}, AAA={contrast['wcag_aaa_normal']})") # 3. Triadic Harmony Palette triad = designer.generate_triadic_color_palette(seed_hue_degrees=215.0, saturation=0.85, lightness=0.48) print() print(f"Triadic Palette: Primary={triad['primary_hex']}, Secondary={triad['secondary_hex']}, Accent={triad['accent_hex']}") ``` ## File: LICENSE size: 1071 sha: bafb53b2fc9253ffcac08bb8f6e8a474ddf0a5d2 upstream: https://github.com/alphaparkinc/openclaw-genpark-visual-designer/blob/HEAD/LICENSE ```text MIT License Copyright (c) 2026 AlphaPark Inc. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ``` ## File: mcp_server.py size: 1913 sha: e77547576c5b5807970fd61fbb416fe7db669d67 upstream: https://github.com/alphaparkinc/openclaw-genpark-visual-designer/blob/HEAD/mcp_server.py ```text # -*- coding: utf-8 -*- """ OpenClaw GenPark Visual Designer MCP Server FastMCP standard interface for golden ratio typography, WCAG contrast auditing, and triadic palette generation. """ import json from typing import Dict, Any, Optional from client import OpenClawGenParkVisualDesigner try: from mcp.server.fastmcp import FastMCP mcp = FastMCP("openclaw-genpark-visual-designer") except ImportError: class MockFastMCP: def __init__(self, name): self.name = name def tool(self): def decorator(f): return f return decorator mcp = MockFastMCP("openclaw-genpark-visual-designer") designer = OpenClawGenParkVisualDesigner() @mcp.tool() def calculate_golden_ratio_typography_scale( base_font_size_px: float = 16.0, scale_ratio: Optional[float] = None ) -> str: """ Calculates modular typography scale based on Golden Ratio phi. """ res = designer.calculate_golden_ratio_typography_scale(base_font_size_px, scale_ratio) return json.dumps(res, indent=2) @mcp.tool() def evaluate_wcag_color_contrast_ratio( foreground_hex: str, background_hex: str ) -> str: """ Calculates WCAG 2.1 color contrast ratio and evaluates AA/AAA compliance. """ res = designer.evaluate_wcag_color_contrast_ratio(foreground_hex, background_hex) return json.dumps(res, indent=2) @mcp.tool() def generate_triadic_color_palette( seed_hue_degrees: float = 210.0, saturation: float = 0.8, lightness: float = 0.5 ) -> str: """ Generates 3 harmonized triadic color hues on the color wheel. """ res = designer.generate_triadic_color_palette(seed_hue_degrees, saturation, lightness) return json.dumps(res, indent=2) def main(): print("Testing Visual Designer:") print(evaluate_wcag_color_contrast_ratio("#000000", "#ffffff")) if __name__ == "__main__": main() ``` ## File: requirements.txt size: 76 sha: 0528add65f81b98e5d4083b7522a6a0ba35bc019 upstream: https://github.com/alphaparkinc/openclaw-genpark-visual-designer/blob/HEAD/requirements.txt ```text # Zero external dependencies required -- Python 3.9+ standard library only\n ``` ## File: skill.json size: 413 sha: bd10dce26c014d8c81fcf2ae287713eaa89b97bf upstream: https://github.com/alphaparkinc/openclaw-genpark-visual-designer/blob/HEAD/skill.json ```text { "name": "openclaw-genpark-visual-designer", "version": "1.0.0", "description": "OpenClaw GenPark Visual Designer - Golden ratio typography hierarchy scaling, WCAG 2.1 color contrast ratio auditing, and triadic color harmony generation with zero dependencies.", "tools": [ "calculate_golden_ratio_typography_scale", "evaluate_wcag_color_contrast_ratio", "generate_triadic_color_palette" ] } ```