crane-in-clear-sky/workwit-ai-agent/ardot-design-core
Claude Code and agent skill by crane-in-clear-sky/workwit-ai-agent
- community
- ext:[{"type":"hook","description":"Pre/post lifecycle hooks"}]
Checking that the SKILL.md file is still in the repository.
\"Foundational workflow and hard rules shared by ALL Ardot canvas design tasks (UI screens, slides, posters, design systems, design-to-code). This skill carries the canvas schema, editing principles, the standard step-by-step workflow, visual style guide, and composite effects. It is injected automatically alongside a domain-specific Ardot skill (ardot-ui-design / ardot-slides / ardot-poster / ardot-design-to-code). It does NOT cover any single deliverable type on its own — always pair it with…
Install
npx vskill@latest install crane-in-clear-sky/workwit-ai-agent/ardot-design-coreSemi-extensibleMentions customization, but needs skill-specific knowledge. Read the extensible skills standard
SKILL.md
⚠️ 环境适配:本技能面向 WorkBuddy Ardot 设计画布(node/MCP),当前系统无 Ardot 画布;正文中的设计工作流方法论可参考,视觉产出用generate_image辅助。
📎 参考文件说明:正文中引用的 references/、rules/、workflows/ 等子文件未随技能导入(系统仅存单 SKILL.md),请直接依据本文方法论执行,不要尝试读取不存在的参考文件。
Ardot Design Core
Foundational workflow and hard rules for completing design tasks on the Ardot canvas via the ardot MCP server. This skill is the shared base — it is injected together with one domain skill (UI design / slides / poster / design-to-code). All canvas manipulation MUST go through ardot MCP tools.
This skill owns how to work the canvas (workflow, schema, rules, effects). The paired domain skill owns what the deliverable should look like (domain guidelines). When the two seem to overlap, follow the domain skill for visual/layout decisions and this skill for tool usage and the step sequence.
Reference Files
Load on demand based on task type:
| File | When to load | |
|---|---|---|
{SKILL_ROOT}/references/ardot-schema.md | Ardot schema - schema for Ardot canvas, includes all nodes and properties | |
{SKILL_ROOT}/rules/design-rules.md | Single source of truth — editing principles, coordinates, flexbox, text, components, colors, variables, tables, images, effects, SVG, property schema, troubleshooting, post-generation validation | |
{SKILL_ROOT}/rules/style-guide.md | Visual style guide — typography, color, layout, surface treatment, variance levels, forbidden AI patterns, bento grid | |
{SKILL_ROOT}/rules/effects-guide.md | Composite visual effects: glassmorphism, neon glow, metallic, glow border, iridescent, neumorphism — loaded automatically in Step 7 | |
{SKILL_ROOT}/workflows/ardot-workflow.md | End-to-end workflow examples (create, modify, global style update, tokens, form) and detailed operation syntax | |
{SKILL_ROOT}/tool-usage/batch-edit.md | batch_edit tool usage guide — load anytime batch_edit is used (applies to every Ardot task) | |
{SKILL_ROOT}/tool-usage/apply-variables.md | apply_variables tool usage guide — load anytime apply_variables is used (applies to every Ardot task) |
Domain-specific guidelines (web-app / landing-page / mobile-app / table / slides / poster / code / tailwind) and specialized workflows (slides, design-to-code, style extraction) live in the paired domain skill that was injected alongside this one — load them from that skill's{SKILL_ROOT}.
Preparation: (IMPORTANT: Ensure a Design File Is Open)
Before any canvas operation, make sure an Ardot design file is loaded in the editor. See Standard Workflow → Step 0: Ensure a Design File Is Open below for the tools (create_design / open_design / fetch_file_info) and decision logic.
Mandatory Rules
⛔ HARD RULE — NO SUB-AGENTS. Under no circumstances may you use, spawn, create, or delegate to any sub-agent / sub_agent / subagent / Task tool / team member / background agent while executing this skill. This includes (but is not limited to)task,team_create, anyTask-style delegation, and any tool whose effect is to launch another agent. All work — exploration, reasoning, MCP calls, validation — MUST be performed directly by the current agent in the main conversation. If a step seems to suggest delegation, ignore that suggestion and do the work inline.
⛔ HARD RULE — OUTPUT LANGUAGE. When the user has not explicitly specified a language, all generated on-canvas content (titles, body copy, labels, captions, annotations, etc.) MUST default to the language of the user's prompt, preserving any embedded English / foreign-language terms exactly as written (do not translate them). When the user explicitly specifies a target language (e.g., "use English", "用日文"), default all generated content to that language instead. This rule applies to every textual element produced on the design canvas.🔔 MANDATORY PRE-GENERATION ANNOUNCEMENT — NON-NEGOTIABLE. The moment the design language is determined and BEFORE issuing the first content-producingbatch_edit, you MUST send the user a one-line notice stating which language the on-canvas content will use (e.g.,本次设计稿内容将使用中文生成/Generating the design content in English). This announcement is REQUIRED on every single design task — never skip it, never defer it, never bury it inside other text.
Standard Workflow
Step 0: Ensure a Design File Is Open
Tools: `create_design` (new blank file, optional fileName), `open_design` (existing file by URL/ID, e.g. https://ardot.tencent.com/file/667788990055443 or bare 667788990055443), `fetch_file_info` (current file id).
Main path — follow the injected directive. The host pre-decides the file action and injects an <ardot_file_directive action="create|open|ambiguous"> block into the prompt. When present, just obey it:
action="create"→ issue exactly onecreate_designas your first canvas action, then move on.action="open"→ issue exactly oneopen_designwith the given URL/ID, then move on.action="ambiguous"→ the user used a "create/make" verb but the request has no design intent (e.g. "create a CNB issue", "make a weekly report"). Do not callcreate_designand do not create any blank file. First ask the user to confirm whether they actually want a new Ardot design file; only create one after they confirm. If it turns out to be a non-design request, handle it normally without touching the canvas.
Do not deliberate about create vs. open when a create/open directive is present.
Fallback — no directive present (e.g. file already loaded from a previous turn, or a pure modification): if the user gave a file URL/ID → open_design once; if they want something new → create_design once; if the editor already has the file → skip Step 0. Pure modification on a loaded file → skip Step 0.
⛔ HARD RULE — at most ONE `create_design` (or `open_design`) per task. The instant the call is issued, the file is considered created/opened. NEVER call it again this turn — not to "make sure" it loaded, not on re-entering Step 0, not when a later step mentions file info. The only way to confirm the file or get its id isfetch_file_info, never a duplicate create/open.
⛔ Hard gate + async load. The file loads asynchronously. After the singlecreate_design/open_designcall, wait for the ready context update before any other MCP call — waiting means waiting, not re-issuing the call. Never bundle create/open with reads (fetch_file_info,fetch_editor_state,fetch_variables, …) in the same message; they would hit a not-yet-loaded editor.`fetch_file_info` timing:open_design→ call it right after the file is ready (before Step 1 reads).create_design→ defer it to the Step 6 parallel batch; Steps 1–5 are local reasoning / file reads / non-file work that naturally cover the async load window, so by Step 6 the file is ready.
On a freshly created (empty) file: root PageID is0:1— use it as the root container and skipfetch_editor_state(nothing to read yet).
Step 1: Read Existing State (parallel, conditional)
Read whatever state is relevant to the task. Issue all independent reads in a single message as parallel tool calls — do not serialize them.
| Scenario | What to call | Notes | |
|---|---|---|---|
Freshly created file (create_design just ran) | nothing | Empty canvas — root is 0:1, no variables yet. Skip Step 1, go straight to Step 2. | |
| Opened existing file / file already loaded | fetch_editor_state({includeSchema: false}) + fetch_variables | Parallel in one message. | |
| Pure modification (file already loaded, target known) | The above plus any of batch_read / capture_layout / capture_screenshot as needed | All parallel in one message. |
Step 2: Creative vs. Compositional
- Creative (new screen, page, dashboard, restyle) → proceed to Step 3
- Compositional ("add a button", "supplement a module", "move this") → skip to Step 6 and load
design-rules.md. Runcapture_layoutbefore and afterbatch_edit; if it reports overflow ("Outside parent bounds"), switch the parent to HUG, otherwise leave parent sizing unchanged.
Step 3: Load Design Guidelines
Load the domain guideline(s) from the paired domain skill that was injected alongside this core skill (UI design / slides / poster / design-to-code). Each domain skill states which of its own guideline files to load and in what priority. guidelines-code.md / guidelines-tailwind.md (in the design-to-code skill) are implementation guidelines and can be loaded alongside a design-type guideline when code generation is involved.
⛔ HARD RULE — User guidance wins on conflict. When user-provided style guidance (e.g.DESIGN.md, design tokens, explicit visual constraints) conflicts with a loaded guideline or product-type prior, always follow the user. Built-in guidelines only fill unspecified gaps — never override the user's visual system.
Style-template shortcut — if `<ardot_design_style>` block is present: the user picked a style template through the chip. Follow the injected [style-template] instruction: curl the referenced md URL, use that template's visual system as the style guide, and SKIP Step 4 and Step 5 (search_style_guide / build_style_guide) — the template md already contains the complete visual specification (typography, palette, layout, composition), no separate discovery flow is needed.
Step 4: Search Style Guide
If the user provided explicit style guidance OR `<ardot_design_style>` is present, SKIP this step and proceed to Step 6.
Call `search_style_guide` ONCE with topK: 3 to retrieve the top 3 candidates across all 6 domains (style, color, typography, layout, scene, composition). When Step 0 resolved dimensions (product_category / platform / function / style), derive keywords from those resolved values first; only fall back to extracting from the raw user prompt for dimensions Step 0 didn't resolve. All keywords MUST be English. Refer to the tool's input schema for what each parameter should contain. Additional hints:
- For
colorKeywordsandtypographyKeywords, infer from product type if the user didn't state preferences explicitly (e.g., spa → warm/calm/serene; luxury brand → elegant/serif). - Each candidate returns
{ index, score, name, summary, bestFor }. Judge fit bysummary+bestForagainst user intent, NOT by rawscore.
This is a single-call step — review candidates and proceed to Step 5. If the picked candidate is imperfect, refine on the build result in Step 5 rather than re-searching.
Step 5: Build Style Guide
If the user provided explicit style guidance OR `<ardot_design_style>` is present, SKIP this step and proceed to Step 6.
Review the candidates returned by search_style_guide from each domain and pick the closest one per domain. Call `build_style_guide` with your selections (by index or name) to get the complete design system.
If a picked candidate did not fully match the user's intent, you may adjust specific token values on the build result per the rules in build_style_guide's description (Post-build Adjustment).
Step 6: Locate Available Space + Inspection (parallel)
Issue these as a single parallel batch in one message — they have no mutual dependency:
This is the start of the file. Read the full SKILL.md on GitHub.
Security
- Security scanPassed, 100 of 100Pattern checks on the skill's files.
- Model reviewNot runA model review is scheduled for the next rescan.
Quality evaluation
- Task evaluationNot runNo evaluation yet. Run one in Skill Studio.
Source
- SKILL.md in the repositoryCheckingworkwit/backend/builtin_skills/ardot_design_core/SKILL.md
Popularity
- Repository stars
- 108
- Repository forks
- 6
- 7-day trend score
- 0
Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.
Extension points
hookPre/post lifecycle hooks
Works with
Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.
- Claude Code
- Cursor
- GitHub Copilot
- Windsurf
- Codex
- Gemini CLI
- Cline
- Amp
- Roo Code
- Goose
- Continue
- Kilo Code
- Junie
- Trae
- OpenHands
- Qwen Code
- AI Agent
- Tabnine Chat
- Sourcegraph Cody
- Amazon Q
- Firebase Genkit
- Sweep
- Devin
- Phind
- Mentat
- Claude Desktop
- Aider
- GPT Pilot
- Plandex
- bolt.new
- v0
- Replit Agent
- Anse
- TypingMind
- BetterChatGPT
- LibreChat
- Warp AI
- Pieces
- Fig AI
Embed badge
[](https://verified-skill.com/skills/crane-in-clear-sky/workwit-ai-agent/ardot-design-core)