ardot-ui-design

Generates UI design guidelines for web pages, mobile apps, dashboards, and design systems on the Ardot canvas.

68|25|Updated Jul 24, 2026
One-click install
npx skills add https://github.com/rojim666/SztuCode --skill ardot-ui-design-rojim666
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ardot-ui-design
Source: https://github.com/rojim666/SztuCode/tree/main/py-runtime/src/sztu_code/core/prompts/workbuddy/skills/ardot-ui-design
Command: npx skills add https://github.com/rojim666/SztuCode --skill ardot-ui-design-rojim666

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Designing UI deliverables on the Ardot canvas requires domain-specific rules for each deliverable type; this Skill supplies the correct guideline set so pages, apps, dashboards, and design systems follow proven structural and visual conventions. ## Core Features & Use Cases - Domain Guideline Routing: Selects the right reference guideline by priority — mobile app, landing page, table, or generic web app/design system — based on the deliverable type. - Landing Page Structure: Provides a proven SaaS landing page section pool (hero, features, social proof, pricing, FAQ, CTA) with mandatory user section selection and brief/requirements checks before designing. - Mobile App Composition: Enforces status bar, single-wrapper content stack, and pill-style tab bar rules with safe-area and touch-target constraints. - Use Case: Ask the agent to design a SaaS landing page; it first confirms which sections to include, runs a brief and requirements check, then builds the page on the Ardot canvas following conversion-focused content and visual guidelines. ## Quick Start Ask the agent to design a landing page or mobile app screen on the Ardot canvas and answer its section-selection and brief questions.

Frequently Asked Questions about ardot-ui-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a landing page with the Ardot canvas?▼

Invoke a landing page design task and the skill loads the landing page guideline, which mandates a multi-select section question first, then a brief and requirements check. Only after the user confirms sections and requirements does the design work begin on the canvas.

What UI deliverable types does this design skill cover?▼

It covers web pages, web apps, dashboards, landing pages, marketing sites, mobile app screens for iOS, Android, and mini-programs, forms, tables, components, and design systems with design tokens. It does not handle slides, posters, design-to-code, or PowerPoint files.

How does the skill choose which design guideline to apply?▼

It uses a first-match priority table: mobile app tasks load the mobile guideline, website and landing tasks load the landing page guideline, table tasks load the table guideline, and everything else defaults to the web app guideline. Design system tasks use the web app guideline at library scope.

Does this skill work for PowerPoint or slide design?▼

No. The skill explicitly excludes slides, posters, design-to-code tasks, and PowerPoint .pptx files, which are handled by separate Ardot skills such as the pptx skill. It only targets UI and interface deliverables on the Ardot canvas.

Why does the landing page flow ask questions before designing?▼

The guidelines mandate two hard stops: a multi-select section selection and a brief and requirements check covering product, audience, goals, and brand. This prevents over-long generic pages and ensures the design matches actual conversion goals.