[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7CYV151WHDCK1NF0XCWHYMC":3,"skill-same:01M7CYV151WHDCK1NF0XCWHYMC":74},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":21,"frontMatter":22,"refName":48,"commitSha":49,"skillDirectory":50,"forksCount":13,"repositoryHtmlUrl":51,"repositoryHomepageUrl":52,"ownerHtmlUrl":53,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":54,"install":55,"resources":67},"01M7CYV151WHDCK1NF0XCWHYMC","email-marketing",null,"A brand product-launch email — masthead with wordmark, hero image block,\nheadline lockup with skewed-italic accent, body copy, primary CTA, and a\nspecifications grid. Pure HTML email layout (centered single column, table\nfallback). Use when the brief asks for an \"email\", \"newsletter blast\",\n\"MJML\", \"product launch email\", or \"email template\".","qelvora1\u002Fopen-design","qelvora1","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F294549645?v=4","01M7CYQMFVAA6E5YHKCNNCBXJS","01M7CYQMGFRBPABV2BSD9VB71Z",0,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fqelvora1\u002Fopen-design\u002Fblob\u002Fmain\u002Fdesign-templates\u002Femail-marketing\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: email-marketing\ndescription: |\n  A brand product-launch email — masthead with wordmark, hero image block,\n  headline lockup with skewed-italic accent, body copy, primary CTA, and a\n  specifications grid. Pure HTML email layout (centered single column, table\n  fallback). Use when the brief asks for an \"email\", \"newsletter blast\",\n  \"MJML\", \"product launch email\", or \"email template\".\ntriggers:\n  - \"email\"\n  - \"email template\"\n  - \"newsletter\"\n  - \"email blast\"\n  - \"product launch email\"\n  - \"mjml\"\n  - \"邮件营销\"\n  - \"邮件模板\"\nod:\n  mode: prototype\n  platform: desktop\n  scenario: marketing\n  preview:\n    type: html\n    entry: index.html\n  design_system:\n    requires: true\n    sections: [color, typography, layout, components]\n  example_prompt: \"Design a launch email for a sporty running shoe brand — masthead, hero, big headline lockup, specs grid, CTA.\"\n---\n\n# Email Marketing Skill\n\nProduce a single HTML email — centered, single column, no chrome around the\nemail body. Treat it like a marketing artifact: one big idea, one CTA.\n\n## Workflow\n\n1. **Read the active DESIGN.md** (injected above). Email leans on the display\n   font more than any other surface — pick the loudest type token in the DS\n   for the headline lockup.\n2. **Pick the brand + product** from the brief. Generate a real wordmark, a\n   real product name, and one real benefit sentence — no placeholders.\n3. **Layout**, in order, all centered inside a 600–680px column on a tinted\n   page background (so the email body looks like an email, not the page):\n   - **Masthead** — wordmark on the left + 3 short nav links (SHOP, JOURNAL,\n     MEMBERS) on the right. Thin underline.\n   - **Hero block** — a 16:9 product image placeholder. Use a DS-tinted\n     gradient or a stylized SVG silhouette of the product (shoe, bottle,\n     headphones, whatever the brief implies). Add a tiny brand stamp on the\n     top-left and a colorway tag on the bottom-left.\n   - **Eyebrow** — small caps, accent color, separated by `·` characters\n     (e.g. \"NEW · MAX-CUSHION TRAINER · EMBER FLARE\").\n   - **Headline lockup** — 2–3 line headline using the display font, all caps,\n     extra-tight tracking. Apply a slight skew (`transform: skew(-6deg)`) on\n     one accent word to give it a sporty parallelogram feel.\n   - **Body** — 2–3 sentence paragraph, left-aligned, body font.\n   - **Primary CTA** — solid pill or block button. One only.\n   - **Specs grid** — 2×2 grid of (big number + unit + label) callouts using\n     the display font for the numbers.\n   - **Footer** — wordmark, address line, unsubscribe + view-in-browser links.\n4. **Write** a single HTML document:\n   - `\u003C!doctype html>` through `\u003C\u002Fhtml>`, CSS inline.\n   - Center the column with `margin: 0 auto`. Set `body { background: \u003Ctint> }`\n     so the email-on-page metaphor reads.\n   - No external images — use inline SVG or DS-tinted gradient blocks for the\n     product photo.\n   - `data-od-id` on the masthead, hero, headline, CTA, specs.\n5. **Self-check**:\n   - Email reads top to bottom in 8–10 seconds.\n   - One CTA. Accent appears at most twice (eyebrow + CTA, or headline word).\n   - Looks legible on a 480px window (column reflows, type drops one step).\n\n## Output contract\n\nEmit between `\u003Cartifact>` tags:\n\n```\n\u003Cartifact identifier=\"email-slug\" type=\"text\u002Fhtml\" title=\"Email — Subject Line\">\n\u003C!doctype html>\n\u003Chtml>...\u003C\u002Fhtml>\n\u003C\u002Fartifact>\n```\n\nOne sentence before the artifact, nothing after.\n","# Email Marketing Skill\n\nProduce a single HTML email — centered, single column, no chrome around the\nemail body. Treat it like a marketing artifact: one big idea, one CTA.\n\n## Workflow\n\n1. **Read the active DESIGN.md** (injected above). Email leans on the display\n   font more than any other surface — pick the loudest type token in the DS\n   for the headline lockup.\n2. **Pick the brand + product** from the brief. Generate a real wordmark, a\n   real product name, and one real benefit sentence — no placeholders.\n3. **Layout**, in order, all centered inside a 600–680px column on a tinted\n   page background (so the email body looks like an email, not the page):\n   - **Masthead** — wordmark on the left + 3 short nav links (SHOP, JOURNAL,\n     MEMBERS) on the right. Thin underline.\n   - **Hero block** — a 16:9 product image placeholder. Use a DS-tinted\n     gradient or a stylized SVG silhouette of the product (shoe, bottle,\n     headphones, whatever the brief implies). Add a tiny brand stamp on the\n     top-left and a colorway tag on the bottom-left.\n   - **Eyebrow** — small caps, accent color, separated by `·` characters\n     (e.g. \"NEW · MAX-CUSHION TRAINER · EMBER FLARE\").\n   - **Headline lockup** — 2–3 line headline using the display font, all caps,\n     extra-tight tracking. Apply a slight skew (`transform: skew(-6deg)`) on\n     one accent word to give it a sporty parallelogram feel.\n   - **Body** — 2–3 sentence paragraph, left-aligned, body font.\n   - **Primary CTA** — solid pill or block button. One only.\n   - **Specs grid** — 2×2 grid of (big number + unit + label) callouts using\n     the display font for the numbers.\n   - **Footer** — wordmark, address line, unsubscribe + view-in-browser links.\n4. **Write** a single HTML document:\n   - `\u003C!doctype html>` through `\u003C\u002Fhtml>`, CSS inline.\n   - Center the column with `margin: 0 auto`. Set `body { background: \u003Ctint> }`\n     so the email-on-page metaphor reads.\n   - No external images — use inline SVG or DS-tinted gradient blocks for the\n     product photo.\n   - `data-od-id` on the masthead, hero, headline, CTA, specs.\n5. **Self-check**:\n   - Email reads top to bottom in 8–10 seconds.\n   - One CTA. Accent appears at most twice (eyebrow + CTA, or headline word).\n   - Looks legible on a 480px window (column reflows, type drops one step).\n\n## Output contract\n\nEmit between `\u003Cartifact>` tags:\n\n```\n\u003Cartifact identifier=\"email-slug\" type=\"text\u002Fhtml\" title=\"Email — Subject Line\">\n\u003C!doctype html>\n\u003Chtml>...\u003C\u002Fhtml>\n\u003C\u002Fartifact>\n```\n\nOne sentence before the artifact, nothing after.\n",{"od":23,"name":5,"triggers":38,"description":47},{"mode":24,"preview":25,"platform":28,"scenario":29,"design_system":30,"example_prompt":37},"prototype",{"type":26,"entry":27},"html","index.html","desktop","marketing",{"requires":31,"sections":32},true,[33,34,35,36],"color","typography","layout","components","Design a launch email for a sporty running shoe brand — masthead, hero, big headline lockup, specs grid, CTA.",[39,40,41,42,43,44,45,46],"email","email template","newsletter","email blast","product launch email","mjml","邮件营销","邮件模板","A brand product-launch email — masthead with wordmark, hero image block,\nheadline lockup with skewed-italic accent, body copy, primary CTA, and a\nspecifications grid. Pure HTML email layout (centered single column, table\nfallback). Use when the brief asks for an \"email\", \"newsletter blast\",\n\"MJML\", \"product launch email\", or \"email template\".\n","main","29240bc3ff7b5db56f8a41965213220446fcb96d","design-templates\u002Femail-marketing","https:\u002F\u002Fgithub.com\u002Fqelvora1\u002Fopen-design","https:\u002F\u002Fopen-design.ai","https:\u002F\u002Fgithub.com\u002Fqelvora1","2026-10-01 22:47:24",{"source":8,"skillName":5,"commands":56,"prompt":66,"zipAvailable":31},[57,60,63],{"tool":58,"command":59},"npx","npx skills add qelvora1\u002Fopen-design --skill email-marketing",{"tool":61,"command":62},"bunx","bunx skills add qelvora1\u002Fopen-design --skill email-marketing",{"tool":64,"command":65},"pnpm","pnpm dlx skills add qelvora1\u002Fopen-design --skill email-marketing","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fqelvora1\u002Fopen-design\u002Fblob\u002Fmain\u002Fdesign-templates\u002Femail-marketing\u002FSKILL.md",[68],{"path":69,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":72,"sourceHtmlUrl":73},"example.html","REFERENCE","参考文档",9879,"https:\u002F\u002Fgithub.com\u002Fqelvora1\u002Fopen-design\u002Fblob\u002Fmain\u002Fdesign-templates\u002Femail-marketing\u002Fexample.html",[75,82,89,96,103,112],{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":81,"publishedAt":18},"01M7D3A2Y3ZTSPJJSCEHTWDN2P","Beta Skill","Instruction-only fixture skill.","https:\u002F\u002Fgithub.com\u002Fqelvora1\u002Fopen-design\u002Fblob\u002Fmain\u002Ftools\u002Frelease\u002Ftests\u002Ffixtures\u002Fcatalog\u002Fskills\u002Fbeta\u002FSKILL.md",[],[],{"skillNo":83,"name":84,"nameZh":6,"description":85,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":86,"categories":87,"keywords":88,"publishedAt":18},"01M7D3A1MHKESXV45VYXKPCDRN","Alpha Skill","First fixture skill with a runnable demo.","https:\u002F\u002Fgithub.com\u002Fqelvora1\u002Fopen-design\u002Fblob\u002Fmain\u002Ftools\u002Frelease\u002Ftests\u002Ffixtures\u002Fcatalog\u002Fskills\u002Falpha\u002FSKILL.md",[],[],{"skillNo":90,"name":91,"nameZh":6,"description":92,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":93,"categories":94,"keywords":95,"publishedAt":18},"01M7D3A0HSH085FTGATVBG43YG","Deck One","A small deck template fixture.","https:\u002F\u002Fgithub.com\u002Fqelvora1\u002Fopen-design\u002Fblob\u002Fmain\u002Ftools\u002Frelease\u002Ftests\u002Ffixtures\u002Fcatalog\u002Fdesign-templates\u002Fdeck-one\u002FSKILL.md",[],[],{"skillNo":97,"name":98,"nameZh":6,"description":99,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":100,"categories":101,"keywords":102,"publishedAt":18},"01M7D39Y0372ZQ6GTWFAJ7DEVJ","youtube-clipper","YouTube clip generation and editing with automated workflows — pull source video, slice highlights, add captions, and export.","https:\u002F\u002Fgithub.com\u002Fqelvora1\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube-clipper\u002FSKILL.md",[],[],{"skillNo":104,"name":105,"nameZh":6,"description":106,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":107,"licenseFileUrl":108,"sourceHtmlUrl":109,"categories":110,"keywords":111,"publishedAt":18},"01M7D39SMB0RHRGGQY24YVD8N5","writing-guidelines","Review docs\u002Fprose for Writing Guidelines compliance. Use when asked to \"review my docs\", \"check writing style\", \"audit prose\", \"review docs voice and tone\", or \"check this page against the writing handbook\".","MIT","https:\u002F\u002Fgithub.com\u002Fqelvora1\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fwriting-guidelines\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fqelvora1\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fwriting-guidelines\u002FSKILL.md",[],[],{"skillNo":113,"name":114,"nameZh":6,"description":115,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":116,"categories":117,"keywords":118,"publishedAt":18},"01M7D39NNKF0JDA1J6ZJJQVVCV","wpds","WordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites.","https:\u002F\u002Fgithub.com\u002Fqelvora1\u002Fopen-design\u002Fblob\u002Fmain\u002Fskills\u002Fwpds\u002FSKILL.md",[],[]]