[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7D7TPCAVC5R74XTJMJC4MX2":3,"skill-same:01M7D7TPCAVC5R74XTJMJC4MX2":80},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":48,"commitSha":49,"skillDirectory":50,"forksCount":51,"repositoryHtmlUrl":52,"repositoryHomepageUrl":53,"ownerHtmlUrl":54,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":55,"install":56,"resources":69},"01M7D7TPCAVC5R74XTJMJC4MX2","wireframe-annotated",null,"An annotated \u002F redline lo-fi wireframe — a desktop landing\u002Fmarketing page\ndrawn as flat greyboxes inside a browser chrome frame, overlaid with numbered\nannotation pins (①②③④⑤) in a single accent color, paired with a right-hand\nSPEC PANEL that lists each numbered pin with a short engineering \u002F UX note.\nThis is the \"wireframe + redline spec\" style — clean, flat, low-fidelity, NOT\nhand-drawn. Use when the brief asks for \"annotated wireframe\", \"redline\nwireframe\", \"wireframe with spec\", \"lo-fi landing wireframe\", \"low fidelity\",\n\"线框图\", \"标注线框\", or \"redline\".","feimacode\u002Fopen-design-agent-kit","feimacode","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F264390570?v=4","01M7D3HQSP5EP4Z4JECTSQ7EBD","Feima Code","01M7D3HQT72Q4EVQJP89MR9WP1",1129,"MIT","https:\u002F\u002Fgithub.com\u002Ffeimacode\u002Fopen-design-agent-kit\u002Fblob\u002Fmain\u002Fpackages\u002Fcontent\u002Fassets\u002Fopen-design\u002Fexamples\u002Fwireframe-annotated\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: wireframe-annotated\ndescription: |\n  An annotated \u002F redline lo-fi wireframe — a desktop landing\u002Fmarketing page\n  drawn as flat greyboxes inside a browser chrome frame, overlaid with numbered\n  annotation pins (①②③④⑤) in a single accent color, paired with a right-hand\n  SPEC PANEL that lists each numbered pin with a short engineering \u002F UX note.\n  This is the \"wireframe + redline spec\" style — clean, flat, low-fidelity, NOT\n  hand-drawn. Use when the brief asks for \"annotated wireframe\", \"redline\n  wireframe\", \"wireframe with spec\", \"lo-fi landing wireframe\", \"low fidelity\",\n  \"线框图\", \"标注线框\", or \"redline\".\ntriggers:\n  - \"annotated wireframe\"\n  - \"redline\"\n  - \"wireframe spec\"\n  - \"lo-fi landing\"\n  - \"wireframe\"\n  - \"low fidelity\"\n  - \"标注线框图\"\n  - \"redline 标注\"\nod:\n  mode: prototype\n  platform: desktop\n  scenario: design\n  fidelity: wireframe\n  preview:\n    type: html\n    entry: index.html\n  design_system:\n    requires: false\n    sections: [color, typography, layout, components]\n  example_prompt: \"Draw an annotated redline wireframe for a desktop landing page — greybox nav, hero, logo strip, 3-up feature grid and footer, numbered pins ①–⑤ and a right-hand spec panel with one engineering note per pin.\"\n---\n\n# Wireframe Annotated Skill\n\nProduce a single flat, low-fidelity landing-page wireframe with a redline spec.\nThe whole point is \"structure + handoff notes, not pixels\" — greyboxes carry\nthe layout, numbered pins call out regions, and a right-hand spec panel turns\neach pin into a short engineering \u002F UX note. Keep it clean and flat; never\nhand-drawn or scribbly.\n\n## Workflow\n\n1. **Skip finished UI.** This skill explicitly wants a low-fidelity greybox\n   look. Honor type tokens only loosely (one clean sans like Inter \u002F system-ui\n   for labels, one mono like IBM Plex Mono for the spec notes and pin numbers).\n   Use medium-grey fills with defined darker borders so the page reads as a\n   thumbnail — avoid near-white-on-white, which renders blank.\n\n2. **Set the two-column shell.** LEFT is the wireframe canvas: a browser-chrome\n   framed greybox page. RIGHT is a narrow \"ANNOTATIONS \u002F SPEC\" panel. Pick ONE\n   accent color (coral or blue) and use it ONLY for the numbered pins and the\n   matching spec numbers — everything else stays greyscale.\n\n3. **Lay out the canvas**, top to bottom, each block a greybox with a numbered\n   pin absolutely positioned on it:\n   - **Top nav** — logo greybox + nav lorem-bars + a primary button block. Pin ①.\n   - **Hero** — big headline lorem bars + subhead + two CTA button blocks on the\n     left; a large image placeholder (rect with a diagonal X) on the right. Pin ②.\n   - **Logo strip** — a row of 5 small greybox partner logos. Pin ③.\n   - **Feature grid** — 3 cards, each an icon square + title bar + 2 text bars. Pin ④.\n   - **Footer** — columns of lorem link-bars. Pin ⑤.\n\n4. **Mirror every pin in the spec panel.** Each spec row = the circled number in\n   the accent color + a short mono\u002Fsans note, e.g. \"① Sticky nav, 64px, condenses\n   on scroll\", \"② Hero H1 48\u002F56, CTA pair primary+ghost\", \"③ 5 partner logos,\n   greyscale\", \"④ 3-up at ≥960px → 1-up mobile\", \"⑤ 4-col footer, legal row\".\n   Mark the panel and each row with `data-od-id`.\n\n5. **Self-check**:\n   - Every numbered pin on the canvas has exactly one matching spec row.\n   - The accent color appears ONLY on pins + spec numbers; the rest is greyscale.\n   - The page should read clearly at thumbnail size; if blocks vanish into the\n     background, darken the fills\u002Fborders.\n   - It must NOT look pixel-perfect or hand-drawn — flat greyboxes only.\n\n## Output contract\n\nEmit between `\u003Cartifact>` tags:\n\n```\n\u003Cartifact identifier=\"wireframe-slug\" type=\"text\u002Fhtml\" title=\"Annotated Wireframe — Title\">\n\u003C!doctype html>\n\u003Chtml>...\u003C\u002Fhtml>\n\u003C\u002Fartifact>\n```\n\nOne sentence before the artifact, nothing after.\n","# Wireframe Annotated Skill\n\nProduce a single flat, low-fidelity landing-page wireframe with a redline spec.\nThe whole point is \"structure + handoff notes, not pixels\" — greyboxes carry\nthe layout, numbered pins call out regions, and a right-hand spec panel turns\neach pin into a short engineering \u002F UX note. Keep it clean and flat; never\nhand-drawn or scribbly.\n\n## Workflow\n\n1. **Skip finished UI.** This skill explicitly wants a low-fidelity greybox\n   look. Honor type tokens only loosely (one clean sans like Inter \u002F system-ui\n   for labels, one mono like IBM Plex Mono for the spec notes and pin numbers).\n   Use medium-grey fills with defined darker borders so the page reads as a\n   thumbnail — avoid near-white-on-white, which renders blank.\n\n2. **Set the two-column shell.** LEFT is the wireframe canvas: a browser-chrome\n   framed greybox page. RIGHT is a narrow \"ANNOTATIONS \u002F SPEC\" panel. Pick ONE\n   accent color (coral or blue) and use it ONLY for the numbered pins and the\n   matching spec numbers — everything else stays greyscale.\n\n3. **Lay out the canvas**, top to bottom, each block a greybox with a numbered\n   pin absolutely positioned on it:\n   - **Top nav** — logo greybox + nav lorem-bars + a primary button block. Pin ①.\n   - **Hero** — big headline lorem bars + subhead + two CTA button blocks on the\n     left; a large image placeholder (rect with a diagonal X) on the right. Pin ②.\n   - **Logo strip** — a row of 5 small greybox partner logos. Pin ③.\n   - **Feature grid** — 3 cards, each an icon square + title bar + 2 text bars. Pin ④.\n   - **Footer** — columns of lorem link-bars. Pin ⑤.\n\n4. **Mirror every pin in the spec panel.** Each spec row = the circled number in\n   the accent color + a short mono\u002Fsans note, e.g. \"① Sticky nav, 64px, condenses\n   on scroll\", \"② Hero H1 48\u002F56, CTA pair primary+ghost\", \"③ 5 partner logos,\n   greyscale\", \"④ 3-up at ≥960px → 1-up mobile\", \"⑤ 4-col footer, legal row\".\n   Mark the panel and each row with `data-od-id`.\n\n5. **Self-check**:\n   - Every numbered pin on the canvas has exactly one matching spec row.\n   - The accent color appears ONLY on pins + spec numbers; the rest is greyscale.\n   - The page should read clearly at thumbnail size; if blocks vanish into the\n     background, darken the fills\u002Fborders.\n   - It must NOT look pixel-perfect or hand-drawn — flat greyboxes only.\n\n## Output contract\n\nEmit between `\u003Cartifact>` tags:\n\n```\n\u003Cartifact identifier=\"wireframe-slug\" type=\"text\u002Fhtml\" title=\"Annotated Wireframe — Title\">\n\u003C!doctype html>\n\u003Chtml>...\u003C\u002Fhtml>\n\u003C\u002Fartifact>\n```\n\nOne sentence before the artifact, nothing after.\n",{"od":24,"name":5,"triggers":39,"description":47},{"mode":25,"preview":26,"fidelity":29,"platform":30,"scenario":31,"design_system":32,"example_prompt":38},"prototype",{"type":27,"entry":28},"html","index.html","wireframe","desktop","design",{"requires":20,"sections":33},[34,35,36,37],"color","typography","layout","components","Draw an annotated redline wireframe for a desktop landing page — greybox nav, hero, logo strip, 3-up feature grid and footer, numbered pins ①–⑤ and a right-hand spec panel with one engineering note per pin.",[40,41,42,43,29,44,45,46],"annotated wireframe","redline","wireframe spec","lo-fi landing","low fidelity","标注线框图","redline 标注","An annotated \u002F redline lo-fi wireframe — a desktop landing\u002Fmarketing page\ndrawn as flat greyboxes inside a browser chrome frame, overlaid with numbered\nannotation pins (①②③④⑤) in a single accent color, paired with a right-hand\nSPEC PANEL that lists each numbered pin with a short engineering \u002F UX note.\nThis is the \"wireframe + redline spec\" style — clean, flat, low-fidelity, NOT\nhand-drawn. Use when the brief asks for \"annotated wireframe\", \"redline\nwireframe\", \"wireframe with spec\", \"lo-fi landing wireframe\", \"low fidelity\",\n\"线框图\", \"标注线框\", or \"redline\".\n","main","e38061066b92c298798dbddc1decbae8c026464f","packages\u002Fcontent\u002Fassets\u002Fopen-design\u002Fexamples\u002Fwireframe-annotated",104,"https:\u002F\u002Fgithub.com\u002Ffeimacode\u002Fopen-design-agent-kit","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=feima.open-design-agent-kit","https:\u002F\u002Fgithub.com\u002Ffeimacode","2026-11-14 17:32:48",{"source":8,"skillName":5,"commands":57,"prompt":67,"zipAvailable":68},[58,61,64],{"tool":59,"command":60},"npx","npx skills add feimacode\u002Fopen-design-agent-kit --skill wireframe-annotated",{"tool":62,"command":63},"bunx","bunx skills add feimacode\u002Fopen-design-agent-kit --skill wireframe-annotated",{"tool":65,"command":66},"pnpm","pnpm dlx skills add feimacode\u002Fopen-design-agent-kit --skill wireframe-annotated","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Ffeimacode\u002Fopen-design-agent-kit\u002Fblob\u002Fmain\u002Fpackages\u002Fcontent\u002Fassets\u002Fopen-design\u002Fexamples\u002Fwireframe-annotated\u002FSKILL.md",true,[70,76],{"path":71,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":74,"sourceHtmlUrl":75},"example.html","REFERENCE","参考文档",13140,"https:\u002F\u002Fgithub.com\u002Ffeimacode\u002Fopen-design-agent-kit\u002Fblob\u002Fmain\u002Fpackages\u002Fcontent\u002Fassets\u002Fopen-design\u002Fexamples\u002Fwireframe-annotated\u002Fexample.html",{"path":77,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":78,"sourceHtmlUrl":79},"open-design.json",10925,"https:\u002F\u002Fgithub.com\u002Ffeimacode\u002Fopen-design-agent-kit\u002Fblob\u002Fmain\u002Fpackages\u002Fcontent\u002Fassets\u002Fopen-design\u002Fexamples\u002Fwireframe-annotated\u002Fopen-design.json",[81,88,95,102,109,116],{"skillNo":82,"name":83,"nameZh":6,"description":84,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":85,"categories":86,"keywords":87,"publishedAt":19},"01M7DDR9C4RR6E8F46YBJ8MW64","youtube-clipper","YouTube clip generation and editing with automated workflows — pull source video, slice highlights, add captions, and export.","https:\u002F\u002Fgithub.com\u002Ffeimacode\u002Fopen-design-agent-kit\u002Fblob\u002Fmain\u002Fpackages\u002Fvscode\u002Fassets\u002Fopen-design\u002Fskills\u002Fyoutube-clipper\u002FSKILL.md",[],[],{"skillNo":89,"name":90,"nameZh":6,"description":91,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":94,"publishedAt":19},"01M7DDR57XHXAFBGKX3SYTGSJB","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\".","https:\u002F\u002Fgithub.com\u002Ffeimacode\u002Fopen-design-agent-kit\u002Fblob\u002Fmain\u002Fpackages\u002Fvscode\u002Fassets\u002Fopen-design\u002Fskills\u002Fwriting-guidelines\u002FSKILL.md",[],[],{"skillNo":96,"name":97,"nameZh":6,"description":98,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":99,"categories":100,"keywords":101,"publishedAt":19},"01M7DDR2RM4F3FM5642JZBGJSF","wpds","WordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites.","https:\u002F\u002Fgithub.com\u002Ffeimacode\u002Fopen-design-agent-kit\u002Fblob\u002Fmain\u002Fpackages\u002Fvscode\u002Fassets\u002Fopen-design\u002Fskills\u002Fwpds\u002FSKILL.md",[],[],{"skillNo":103,"name":104,"nameZh":6,"description":105,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":108,"publishedAt":19},"01M7DDQX3G9QDCBV5GGZGQ1NZN","weread-year-in-review-video-template","WeRead-inspired HyperFrames video template for vertical annual reading reports,\npersonal reading dashboards, book-note recaps, and shareable year-in-review\nstories. Use when users want a 9:16 HTML-to-MP4 reading report with warm paper\ntexture, editorial Chinese typography, book-page metaphors, data highlights,\nand deterministic motion.","https:\u002F\u002Fgithub.com\u002Ffeimacode\u002Fopen-design-agent-kit\u002Fblob\u002Fmain\u002Fpackages\u002Fvscode\u002Fassets\u002Fopen-design\u002Fskills\u002Fweread-year-in-review-video-template\u002FSKILL.md",[],[],{"skillNo":110,"name":111,"nameZh":6,"description":112,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":113,"categories":114,"keywords":115,"publishedAt":19},"01M7DDQRGJEHQST6TXDH6ZAV5G","web-design-guidelines","Review UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.","https:\u002F\u002Fgithub.com\u002Ffeimacode\u002Fopen-design-agent-kit\u002Fblob\u002Fmain\u002Fpackages\u002Fvscode\u002Fassets\u002Fopen-design\u002Fskills\u002Fweb-design-guidelines\u002FSKILL.md",[],[],{"skillNo":117,"name":118,"nameZh":6,"description":119,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":120,"categories":121,"keywords":122,"publishedAt":19},"01M7DDQKADVPZW1Z1HTVKXY542","web-clone","网站复刻 \u002F 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互\u002FWebGL\u002FCanvas\u002FThree.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，覆盖静态站 \u002F React-Vue-Next 内容站 \u002F WebGL-Canvas 重前端站三大分支，并强制核对任何 AI 二手分析里的可执行代码。","https:\u002F\u002Fgithub.com\u002Ffeimacode\u002Fopen-design-agent-kit\u002Fblob\u002Fmain\u002Fpackages\u002Fvscode\u002Fassets\u002Fopen-design\u002Fskills\u002Fweb-clone\u002FSKILL.md",[],[]]