An expert framework for AI agents to plan, audit, build, and optimize accessible and responsive email templates across all modern and legacy inbox clients.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install emaildesignskill
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install emaildesignskill using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Email Design Skill?
The Email Design Skill is a high-performance workspace tool built specifically for developers, designers, and marketers who need AI assistance to tackle the notoriously brittle world of email layout development. Integrating easily with other Openclaw Skills, this workflow guides your AI agent through an inbox-first engineering methodology, ensuring that layout and formatting choices prioritize real-world client support over fragile styling assumptions.
Rather than relying on generic HTML outputs, this skill equips AI assistants to generate production-ready code templates (such as MJML or React Email components) and audit visual designs (like Figma mockups or screenshots). By implementing a rigorous testing and structural review workflow, the skill solves rendering mismatches on desktop and mobile clients before a single test email is ever sent.
Email Design Skill Use Cases
- Responsive QA Audits: Instantly diagnostic analyze why complex nested table columns are failing to collapse gracefully on mobile viewports.
- Dark Mode Optimization: Spotting and resolving text legibility issues, missing asset contrasts, and unexpected inversion behaviors on clients like Gmail and Outlook.
- Design-to-Email Translation: Converting Figma concepts, mockups, or wireframes into fully compliant cross-client HTML modules without breaking hierarchy constraints.
- Accessibility Compliance: Conducting rapid, rigorous reviews of semantic elements, alt text, link tap zones, and color contrast ratios.
- Modular Template Planning: Scaffolding modular, reusable template sections that match precise brand patterns without introducing stylesheet bleed or code bloat.
How Email Design Skill Works
- Artifact Recognition: The agent parses the target design input—which can range from raw HTML strings and React Email components to Figma assets or live ESP code.
- Hierarchy Assessment: Analyzes the essential message flow, checking elements like preview text/preheader hooks, messaging priority order, scannability, and primary Call-To-Action (CTA) positioning.
- Responsive Blueprinting: Inspects responsive structural constraints, validation of maximum container widths, column behavior on small viewports, and mobile-friendly tap areas.
- Client-Specific Risk Modeling: Runs code checks against a database of legacy client rendering bugs, targeting Outlook table structures, CSS-inlining issues, webfont fallback parameters, and Gmail's 102KB clipping limit.
- Accessibility Review: Evaluates screen-reader styling, image-to-text ratios, semantic headings, and keyboard readability paths.
- Actionable Implementation Output: Returns an expert, implementation-ready package containing specific audit reports, clean layout diffs, and developer-friendly integration checklists.
Email Design Skill Setup
Add this skill configuration to your AI agent environment. For teams organizing their automation libraries via Openclaw Skills, store the configuration within your project's local workspace schema.
# Create directory structures and import the skill file
mkdir -p .claw/skills
curl -o .claw/skills/emaildesignskill.md https://raw.githubusercontent.com/openclaw/skills/main/emaildesignskill.md
Configure your workspace agent settings to reference the newly imported skill file:
{
"skills": [
"./.claw/skills/emaildesignskill.md"
]
}
Email Design Skill Data Schema & Taxonomy
The Email Design Skill catalogs critical diagnostic layout structures using a standardized review taxonomy. This ensures repeatable, programmatic testing data formats across all integrated tools:
| Evaluation Area | Metric Target | Standards & Best Practices |
|---|---|---|
| Sizing & Constraints | max-width |
Capped strictly between 600px to 650px to prevent viewport overflow. |
| Module Layout | stacking-logic |
Uses nested HTML table elements or container-queries for fluid column collapsing. |
| Outlook Fallback | mso-conditional |
Employs conditional code tags to control desktop Outlook render sizes. |
| Dark Mode Targets | color-scheme-override |
Uses custom @media (prefers-color-scheme: dark) overrides where supported. |
| Accessibility Limits | contrast-minimums |
Verifies a contrast ratio of at least 4.5:1 for standard body copy. |
Deliverable Taxonomy
Files generated during execution by systems running Openclaw Skills are systematically output in these standard formats:
/audits/template_critique.md- High-level structural reviews pointing out client risks./specs/module_library.json- Design guidelines for component standardization./diffs/rendering_fixes.patch- Standard patches for HTML codebase integration.
Email Design Skill Advanced Features
- Fail-Safe Live System Protections: Implements absolute security isolation barriers that block AI agents from executing sensitive live system operations (like sending broadcast campaigns, modifying contact lists, altering DNS setups, or editing live automated funnels) without explicit, manual human confirmation.
- Automated Clipping Prevention: Evaluates raw HTML bundle sizes to guarantee total code weight remains safely below Gmail's strict 102KB clipping ceiling.
- Multi-Framework Syntax Mapping: Easily switches output structures between MJML layouts, React Email components, Tailwind Email implementations, and classic inline HTML tables.
- Legacy Client Graceful Degradation: Auto-injects semantic fallbacks for custom brand typography, ensuring beautiful system font alternatives on client software with restricted webfont support.
SKILL.md
Loading
Related Openclaw Skills
Email Workflow Skill
An expert email workflow mapping and lifecycle auditing skill designed for AI agents to safely plan, route, and optimize complex email automations.
Medical Science Skills
An enterprise-grade package of 15 specialized Openclaw Skills for clinical trial monitoring, medical writing, competitor intelligence, and pharmaceutical knowledge management.
Audio Producer Preproduction Planning
An advanced preproduction planning skill designed to organize scripts, manage multi-character roles, and calibrate audiobook recordings before hitting the studio.
nyxory
An agent-to-agent cloud service that allows AI models to seamlessly deploy and run applications, manage custom domains, inspect logs, and monitor status.
Claude Email Skill
An AI-powered copywriting and critique skill designed to guide agents through campaign brief generation, robust rewrite loops, and safety-first email auditing.
OpenClaw Email Skill
An AI agent skill designed to plan, review, migrate, and execute transparent email campaign operations with clear, inspectable audit trails.
Featured*
