tomjiu Ardot UI Design
Domain guidelines for UI / interface deliverables on the Ardot canvas: web pages, web apps, dashboards, landing pages, mobile app screens, tables, forms, components, and design systems.
The general workflow and hard rules live in
ardot-design-core, which is injected alongside this skill. This skill only adds the domain-specific guidelines for UI work. Followardot-design-corefor the step sequence (Step 0 file-open → Step 8 validate), schema, editing rules, effects, and screenshot verification.
Domain Guidelines (load in Step 3)
Load one or more guideline based on the deliverable, first match wins:
| Priority | Trigger | File |
|---|---|---|
| 1 | any mobile app design task — mobile, app, iOS, Android, app UI, 移动端, 手机 App, 移动应用, 小程序 | {SKILL_ROOT}/references/guidelines-mobile-app.md |
| 2 | any website task — landing, marketing, SaaS, product site, official site, homepage, 网站, 官网, 落地页, 营销 | {SKILL_ROOT}/references/guidelines-landing-page.md |
| 3 | table, dashboard with tables, 表格 | {SKILL_ROOT}/references/guidelines-table.md |
| 4 | (web app / design system / generic UI, default) | {SKILL_ROOT}/references/guidelines-web-app.md |
- Design system / component library / design tokens tasks use the default
guidelines-web-app.mdas the base, applying the same component/typography/color discipline at library scope (build a token set, component states, spacing scale). - Image-to-UI (reproducing a UI from a reference image): follow the same guidelines, but treat the supplied image as the layout/visual source of truth and reproduce its structure faithfully before restyling.
When code generation is also involved, load guidelines-code.md / guidelines-tailwind.md from the ardot-design-to-code skill alongside the chosen guideline above.