crane-in-clear-sky/workwit-ai-agent/ardot-design-to-code

⚠️ 环境适配：本技能面向 Ardot 设计转代码，当前系统无 Ardot 画布；方法论可参考，实际产出用沙箱 run_temp_code 生成前端代码。

📎 参考文件说明：正文中引用的 references/、rules/、workflows/ 等子文件未随技能导入（系统仅存单 SKILL.md），请直接依据本文方法论执行，不要尝试读取不存在的参考文件。

Ardot Design-to-Code & Style Extraction

Domain workflows for design → frontend code conversion and website → style-guide extraction on the Ardot canvas.

The general workflow and hard rules live in `ardot-design-core`, which is injected alongside this skill. Follow ardot-design-core for the step sequence, schema, editing rules, effects, and screenshot verification. This skill carries the specialized conversion/extraction workflows and implementation guidelines.

Specialized Workflows (follow strictly — do NOT improvise the procedure)

• Design → frontend code → {SKILL_ROOT}/workflows/design-to-code-workflow.md — design → HTML/CSS/JS, generate Application, to code, slide transitions, responsive scaling.
• Website → style guide extraction → {SKILL_ROOT}/workflows/extract-style-guide-from-web.md — pull a design guide / tokens from an existing website.

Implementation Guidelines (load alongside a design-type guideline when generating code)

• {SKILL_ROOT}/references/guidelines-code.md — design-to-code implementation rules.
• {SKILL_ROOT}/references/guidelines-tailwind.md — Tailwind v4 implementation (load alongside guidelines-code.md).

Files referenced by these workflows that live in the core skill are read from the ardot-design-core skill root — its absolute path is provided in the same prompt that injected this skill. This includes design-rules.md etc. and the shared tool-usage guides (tool-usage/batch-edit.md, tool-usage/apply-variables.md), which now live in ardot-design-core because batch_edit / apply_variables are used by every Ardot task.