تشغيل أي مهارة في Manus بنقرة واحدة

ابدأ الآن

jikime-design-tools

النجوم٥

التفرعات١

آخر تحديث٢٤ فبراير ٢٠٢٦ في ٠٣:٢٥

Design tool integration specialist covering Pencil MCP, Figma MCP, and design-to-code export

التثبيت

التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.

تشغيل في Manus

المصدر

jikime

jikime/jikime-adk

فتح مستودع GitHub عرض مستودعات المنشئ

تنزيل

تشغيل في Manus

المهن ذات الصلةSOC

استنادا إلى تصنيف SOC المهني

مطوّرو الويبمهن الحاسوب والرياضيات·SOC 15-1254

مستكشف الملفات

4 ملفات

SKILL.md

readonly

name	jikime-design-tools
description	Design tool integration specialist covering Pencil MCP, Figma MCP, and design-to-code export
version	1.0.0
progressive_disclosure	{"enabled":true,"level1_tokens":"~100","level2_tokens":"~5000"}
triggers	{"keywords":["figma","pencil","design to code","design export","pen frame","react from design","tailwind from design","design context","ui implementation","design fetching","figma mcp","pencil mcp","component from design","layout from design","batch_design","get_screenshot","style guide","design tokens"],"agents":["designer-ui","team-designer"],"phases":["run"]}

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

Property	Value
Style	nova (Modern, clean design language)
Base Color	neutral (Notion-style grayscale palette)
Icon Library	hugeicons
Font	noto-sans
Radius	small (Subtle rounded corners)
Menu Accent	bold

Pencil MCP Tools Reference

Tool	Purpose
`batch_design`	Create, modify, and manipulate design elements in batches (max 25 ops)
`batch_get`	Read design components and hierarchy by patterns or node IDs
`get_screenshot`	Render design previews as images
`snapshot_layout`	Analyze computed layout structure
`get_editor_state`	Get current editor context and active file
`get_variables`	Read design tokens and theme variables
`set_variables`	Update design tokens and theme variables
`get_guidelines`	Get design guidelines (code, table, tailwind, landing-page)
`get_style_guide`	Get style guide by name or tags
`get_style_guide_tags`	List all available style guide tags
`open_document`	Open existing .pen file or create new one
`find_empty_space_on_canvas`	Find available space for new elements
`search_all_unique_properties`	Search unique property values across node tree
`replace_all_matching_properties`	Bulk replace matching properties

Pencil MCP Workflow

Starting a Design Session

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

Creating Designs

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
Visual Validation: get_screenshot() after each round of changes
Layout Analysis: snapshot_layout() to verify positioning
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

المزيد من هذا المستودع

نفس المستودع

jikime-migration-smart-rebuild

jikime/jikime-adk

AI-powered legacy site rebuilding workflow. Captures screenshots, analyzes source code, and generates modern frontend/backend code. Claude Code reads screenshots and writes actual code. Use when rebuilding legacy PHP, WordPress, or similar sites to Next.js, React, or other modern frameworks.

2026-04-045

revfactory-harness

jikime/jikime-adk

하네스를 구성합니다. 전문 에이전트를 정의하며, 해당 에이전트가 사용할 스킬을 생성하는 메타 스킬. (1) '하네스 구성해줘', '하네스 구축해줘' 요청 시, (2) '하네스 설계', '하네스 엔지니어링' 요청 시, (3) 새로운 도메인/프로젝트에 대한 하네스 기반 자동화 체계를 구축할 때, (4) 하네스 구성을 재구성하거나 확장할 때 사용.

2026-04-025

jikime-team-leader

jikime/jikime-adk

Leader agent role guide for jikime team orchestration. Covers task distribution, plan approval, worker monitoring, and team shutdown. Use when spawned as the leader role in a jikime team.

2026-03-205

jikime-team-reviewer

jikime/jikime-adk

Reviewer agent role guide for jikime team orchestration. Covers plan review, quality assessment, acceptance criteria validation, and feedback delivery via team inbox. Use when spawned as the reviewer role in a jikime team.

2026-03-205

jikime-team

jikime/jikime-adk

Use this skill when the user asks to "jikime team을 사용해줘", "팀 만들어줘", "에이전트 생성해줘", "멀티 에이전트로 작업해줘", "병렬로 에이전트 실행해줘", "여러 에이전트 조율해줘", "작업을 여러 에이전트에게 분배해줘", "team status 확인해줘", "task 만들어줘", "inbox 확인해줘", or mentions "jikime team", "multi-agent coordination", "spawn agents", "team tasks", "agent inbox", "task board", "team leader", "team worker". Also trigger when the scope of work is large enough to benefit from splitting into parallel subtasks — for example "전체 코드베이스 리팩토링", "여러 기능 동시에 구현", "대규모 분석", "full-stack app 만들어줘". Provides comprehensive guidance for using the jikime team CLI to orchestrate multi-agent teams with task management, messaging, and monitoring.

2026-03-205

jikime-team-swarm

jikime/jikime-adk

Claude Code skill for operating as part of a jikime multi-agent team (swarm). Provides command reference, coordination protocols, and role-specific workflows for leader, worker, and reviewer agents. Triggers when the task involves multi-agent coordination, spawning workers, assigning tasks, monitoring team progress, or when the scope exceeds what a single agent can efficiently handle (e.g., "build a full-stack app", "implement multiple features in parallel", "refactor the entire codebase"). Also triggers on keywords: "create a team", "spawn agents", "assign tasks", "team status", "board attach", "agent inbox", "multi-agent", "swarm", "jikime team".

2026-03-205

name	jikime-design-tools
description	Design tool integration specialist covering Pencil MCP, Figma MCP, and design-to-code export
version	1.0.0
progressive_disclosure	{"enabled":true,"level1_tokens":"~100","level2_tokens":"~5000"}
triggers	{"keywords":["figma","pencil","design to code","design export","pen frame","react from design","tailwind from design","design context","ui implementation","design fetching","figma mcp","pencil mcp","component from design","layout from design","batch_design","get_screenshot","style guide","design tokens"],"agents":["designer-ui","team-designer"],"phases":["run"]}

Design Tools Integration Skill

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

Allowed Tools

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

Property	Value
Style	nova (Modern, clean design language)
Base Color	neutral (Notion-style grayscale palette)
Icon Library	hugeicons
Font	noto-sans
Radius	small (Subtle rounded corners)
Menu Accent	bold

Pencil MCP Tools Reference

Tool	Purpose
`batch_design`	Create, modify, and manipulate design elements in batches (max 25 ops)
`batch_get`	Read design components and hierarchy by patterns or node IDs
`get_screenshot`	Render design previews as images
`snapshot_layout`	Analyze computed layout structure
`get_editor_state`	Get current editor context and active file
`get_variables`	Read design tokens and theme variables
`set_variables`	Update design tokens and theme variables
`get_guidelines`	Get design guidelines (code, table, tailwind, landing-page)
`get_style_guide`	Get style guide by name or tags
`get_style_guide_tags`	List all available style guide tags
`open_document`	Open existing .pen file or create new one
`find_empty_space_on_canvas`	Find available space for new elements
`search_all_unique_properties`	Search unique property values across node tree
`replace_all_matching_properties`	Bulk replace matching properties

Pencil MCP Workflow

Starting a Design Session

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

Creating Designs

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
Visual Validation: get_screenshot() after each round of changes
Layout Analysis: snapshot_layout() to verify positioning
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