{ "schemaVersion": "1.0", "item": { "slug": "pencil-renderer", "name": "Pencil Renderer", "source": "tencent", "type": "skill", "category": "开发工具", "sourceUrl": "https://clawhub.ai/Jcwen/pencil-renderer", "canonicalUrl": "https://clawhub.ai/Jcwen/pencil-renderer", "targetPlatform": "OpenClaw" }, "install": { "downloadMode": "redirect", "downloadUrl": "/downloads/pencil-renderer", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=pencil-renderer", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "installMethod": "Manual import", "extraction": "Extract archive", "prerequisites": [ "OpenClaw" ], "packageFormat": "ZIP package", "includedAssets": [ "SKILL.md", "references/batch-design-patterns.md", "references/dna-to-pencil.md" ], "primaryDoc": "SKILL.md", "quickSetup": [ "Download the package from Yavira.", "Extract the archive and review SKILL.md first.", "Import or place the package into your OpenClaw setup." ], "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "Download the package from Yavira.", "Extract it into a folder your agent can access.", "Paste one of the prompts below and point your agent at the extracted folder." ], "prompts": [ { "label": "New install", "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete." }, { "label": "Upgrade existing", "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run." } ] }, "sourceHealth": { "source": "tencent", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-04-30T16:55:25.780Z", "expiresAt": "2026-05-07T16:55:25.780Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network", "contentDisposition": "attachment; filename=\"network-1.0.0.zip\"", "redirectLocation": null, "bodySnippet": null }, "scope": "source", "summary": "Source download looks usable.", "detail": "Yavira can redirect you to the upstream package for this source.", "primaryActionLabel": "Download for OpenClaw", "primaryActionHref": "/downloads/pencil-renderer" }, "validation": { "installChecklist": [ "Use the Yavira download entry.", "Review SKILL.md after the package is downloaded.", "Confirm the extracted package contains the expected setup assets." ], "postInstallChecks": [ "Confirm the extracted package includes the expected docs or setup files.", "Validate the skill or prompts are available in your target agent workspace.", "Capture any manual follow-up steps the agent could not complete." ] }, "downloadPageUrl": "https://openagent3.xyz/downloads/pencil-renderer", "agentPageUrl": "https://openagent3.xyz/skills/pencil-renderer/agent", "manifestUrl": "https://openagent3.xyz/skills/pencil-renderer/agent.json", "briefUrl": "https://openagent3.xyz/skills/pencil-renderer/agent.md" }, "agentAssist": { "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.", "steps": [ "Download the package from Yavira.", "Extract it into a folder your agent can access.", "Paste one of the prompts below and point your agent at the extracted folder." ], "prompts": [ { "label": "New install", "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete." }, { "label": "Upgrade existing", "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run." } ] }, "documentation": { "source": "clawhub", "primaryDoc": "SKILL.md", "sections": [ { "title": "Pencil Renderer", "body": "Translate aesthetic DNA codes into Pencil .pen frames via MCP." }, { "title": "Interface", "body": "Input:\n\nDNA code: [layout, color, typography, motion, density, background]\nComponent type: hero | card | form | nav | footer | section | button | input\nOptional: Name, dimensions, parent frame ID\n\nOutput:\n\nFrame ID in .pen file\nScreenshot of rendered frame" }, { "title": "1. Ensure Document Ready", "body": "// Check if editor open\nmcp__pencil__get_editor_state({ include_schema: false })\n\n// If no editor, open or create\nmcp__pencil__open_document({ filePathOrTemplate: \"new\" })" }, { "title": "2. Get Style Foundation", "body": "// Get available style guide tags\nmcp__pencil__get_style_guide_tags()\n\n// Get style guide matching DNA mood\n// Map DNA to relevant tags:\n// - dark color → [\"dark-mode\", \"moody\"]\n// - light color → [\"light\", \"clean\"]\n// - spacious density → [\"airy\", \"whitespace\"]\n// etc.\nmcp__pencil__get_style_guide({ tags: [mapped_tags] })" }, { "title": "3. Translate DNA to Pencil Properties", "body": "Reference: references/dna-to-pencil.md\n\nDNA axis → Pencil property mapping is deterministic.\nExample: centered layout → alignItems: \"center\", symmetric padding" }, { "title": "4. Execute Design Operations", "body": "Reference: references/batch-design-patterns.md\n\nmcp__pencil__batch_design({\n filePath: \".pen\",\n operations: `\n frame=I(document, {type: \"frame\", name: \"Hero-Brutalist\", ...properties})\n heading=I(frame, {type: \"text\", content: \"Headline\", ...typography})\n // ... additional operations\n `\n})" }, { "title": "5. Capture Result", "body": "// Screenshot for visual verification\nmcp__pencil__get_screenshot({ nodeId: \"frameId\" })" }, { "title": "6. Return", "body": "Frame ID: [id]\nDNA: [layout, color, typography, motion, density, background]\n\nPlus screenshot image." }, { "title": "Component Templates", "body": "TypeStructureheroContainer + headline + subhead + CTA buttonscardContainer + image area + content + actionsformContainer + labels + inputs + submitnavContainer + logo + links + actionsfooterContainer + columns + links + legalsectionContainer + heading + content gridbuttonFrame + text + icon slotinputFrame + label + field + validation" }, { "title": "DNA Translation Quick Reference", "body": "DNA AxisKey Pencil PropertiesLayout: centeredalignItems: \"center\", equal paddingLayout: asymmetricOffset positions, varied gapsLayout: bentoGrid with varied spansColor: darkDark fill, light foregroundColor: gradientfill: {type: \"linear\", stops: [...]}Typography: display-heavyLarge heading sizes, high contrastTypography: minimalRestrained scale, single familyDensity: spaciousgap: 24-48, generous paddingDensity: compactgap: 8-16, tight paddingBackground: solidSingle fill colorBackground: texturedG() for patterns/images" }, { "title": "Constraints", "body": "Single concern: Render DNA → frame. No interview, no iteration.\nPencil MCP required: Fails fast if unavailable\nDeterministic mapping: Same DNA always produces same structure\nComposable: Called by orchestrators, not users directly" }, { "title": "References", "body": "references/dna-to-pencil.md — Complete axis mapping\nreferences/batch-design-patterns.md — Common operation sequences\naesthetic-system/references/dna-codes.md — DNA axis definitions" }, { "title": "Integration", "body": "Called by:\n\ndesign-exploration orchestrator (when Pencil backend available)\n\nComposes:\n\naesthetic-system (for DNA interpretation)" } ], "body": "Pencil Renderer\n\nTranslate aesthetic DNA codes into Pencil .pen frames via MCP.\n\nInterface\n\nInput:\n\nDNA code: [layout, color, typography, motion, density, background]\nComponent type: hero | card | form | nav | footer | section | button | input\nOptional: Name, dimensions, parent frame ID\n\nOutput:\n\nFrame ID in .pen file\nScreenshot of rendered frame\nWorkflow\n1. Ensure Document Ready\n// Check if editor open\nmcp__pencil__get_editor_state({ include_schema: false })\n\n// If no editor, open or create\nmcp__pencil__open_document({ filePathOrTemplate: \"new\" })\n\n2. Get Style Foundation\n// Get available style guide tags\nmcp__pencil__get_style_guide_tags()\n\n// Get style guide matching DNA mood\n// Map DNA to relevant tags:\n// - dark color → [\"dark-mode\", \"moody\"]\n// - light color → [\"light\", \"clean\"]\n// - spacious density → [\"airy\", \"whitespace\"]\n// etc.\nmcp__pencil__get_style_guide({ tags: [mapped_tags] })\n\n3. Translate DNA to Pencil Properties\n\nReference: references/dna-to-pencil.md\n\nDNA axis → Pencil property mapping is deterministic. Example: centered layout → alignItems: \"center\", symmetric padding\n\n4. Execute Design Operations\n\nReference: references/batch-design-patterns.md\n\nmcp__pencil__batch_design({\n filePath: \".pen\",\n operations: `\n frame=I(document, {type: \"frame\", name: \"Hero-Brutalist\", ...properties})\n heading=I(frame, {type: \"text\", content: \"Headline\", ...typography})\n // ... additional operations\n `\n})\n\n5. Capture Result\n// Screenshot for visual verification\nmcp__pencil__get_screenshot({ nodeId: \"frameId\" })\n\n6. Return\nFrame ID: [id]\nDNA: [layout, color, typography, motion, density, background]\n\n\nPlus screenshot image.\n\nComponent Templates\nType\tStructure\nhero\tContainer + headline + subhead + CTA buttons\ncard\tContainer + image area + content + actions\nform\tContainer + labels + inputs + submit\nnav\tContainer + logo + links + actions\nfooter\tContainer + columns + links + legal\nsection\tContainer + heading + content grid\nbutton\tFrame + text + icon slot\ninput\tFrame + label + field + validation\nDNA Translation Quick Reference\nDNA Axis\tKey Pencil Properties\nLayout: centered\talignItems: \"center\", equal padding\nLayout: asymmetric\tOffset positions, varied gaps\nLayout: bento\tGrid with varied spans\nColor: dark\tDark fill, light foreground\nColor: gradient\tfill: {type: \"linear\", stops: [...]}\nTypography: display-heavy\tLarge heading sizes, high contrast\nTypography: minimal\tRestrained scale, single family\nDensity: spacious\tgap: 24-48, generous padding\nDensity: compact\tgap: 8-16, tight padding\nBackground: solid\tSingle fill color\nBackground: textured\tG() for patterns/images\nConstraints\nSingle concern: Render DNA → frame. No interview, no iteration.\nPencil MCP required: Fails fast if unavailable\nDeterministic mapping: Same DNA always produces same structure\nComposable: Called by orchestrators, not users directly\nReferences\nreferences/dna-to-pencil.md — Complete axis mapping\nreferences/batch-design-patterns.md — Common operation sequences\naesthetic-system/references/dna-codes.md — DNA axis definitions\nIntegration\n\nCalled by:\n\ndesign-exploration orchestrator (when Pencil backend available)\n\nComposes:\n\naesthetic-system (for DNA interpretation)" }, "trust": { "sourceLabel": "tencent", "provenanceUrl": "https://clawhub.ai/Jcwen/pencil-renderer", "publisherUrl": "https://clawhub.ai/Jcwen/pencil-renderer", "owner": "Jcwen", "version": "0.1.2", "license": null, "verificationStatus": "Indexed source record" }, "links": { "detailUrl": "https://openagent3.xyz/skills/pencil-renderer", "downloadUrl": "https://openagent3.xyz/downloads/pencil-renderer", "agentUrl": "https://openagent3.xyz/skills/pencil-renderer/agent", "manifestUrl": "https://openagent3.xyz/skills/pencil-renderer/agent.json", "briefUrl": "https://openagent3.xyz/skills/pencil-renderer/agent.md" } }