jikime/jikime-adk/jikime-design-tools

Design Tools Integration Skill

Unified design tool integration for Pencil MCP and Figma MCP workflows.

Allowed Tools

Read, Write, Edit, Grep, Glob, Bash, WebFetch, WebSearch, mcp__context7__resolve-library-id, mcp__context7__query-docs, mcp__pencil__batch_design, mcp__pencil__batch_get, mcp__pencil__get_screenshot, mcp__pencil__snapshot_layout, mcp__pencil__get_editor_state, mcp__pencil__get_variables, mcp__pencil__set_variables, mcp__pencil__get_guidelines, mcp__pencil__get_style_guide, mcp__pencil__get_style_guide_tags, mcp__pencil__open_document, mcp__pencil__find_empty_space_on_canvas, mcp__pencil__search_all_unique_properties, mcp__pencil__replace_all_matching_properties

Default Design Style: shadcn/ui Nova

When no specific style requested, use shadcn/ui Nova preset:

bunx --bun shadcn@latest create --preset "https://ui.shadcn.com/init?base=radix&style=nova&baseColor=neutral&theme=neutral&iconLibrary=hugeicons&font=noto-sans&menuAccent=bold&menuColor=default&radius=small&template=next&rtl=false" --template next

Pencil MCP Tools Reference

Pencil MCP Workflow

Starting a Design Session

1. Check Editor State: get_editor_state() to understand current context
2. Open/Create Document: open_document("new") or path to existing .pen file
3. Get Design Guidelines: get_guidelines(topic: "tailwind") for relevant rules
4. Discover Styles: get_style_guide_tags() then get_style_guide(tags: [...]) for inspiration
5. Set Design Tokens: set_variables({...}) for colors, spacing, typography

Creating Designs

1. Generate with batch_design (max 25 operations per call):

• foo=I("parent", { ... }) — Insert new node
• baz=C("nodeid", "parent", { ... }) — Copy existing node
• foo2=R("nodeid1/nodeid2", {...}) — Replace node content
• U(foo+"/nodeid", {...}) — Update existing node
• D("dfFAeg2") — Delete node
• M("nodeid3", "parent", 2) — Move node to new parent
• G("baz", "ai", "...") — Generate image with AI

1. Visual Validation: get_screenshot() after each round of changes
2. Layout Analysis: snapshot_layout() to verify positioning
3. Iterate: batch_get(patterns) to inspect, then batch_design to refine

HARD RULES

• NEVER use Read or Grep tools to access .pen file contents (they are encrypted)
• ALWAYS use Pencil MCP tools for .pen file operations
• ALWAYS call get_editor_state() first before any design operations
• ALWAYS validate with get_screenshot() after design changes
• Maximum 25 operations per batch_design call

Reference Documents

For detailed guides, see:

• reference/pencil-renderer.md — Pencil MCP rendering guide with operation syntax
• reference/pencil-code.md — Design-to-code export patterns
• reference/comparison.md — Figma vs Pencil decision guide