[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7DDF6CMNFYNVSYFE36GXGPF":3,"skill-same:01M7DDF6CMNFYNVSYFE36GXGPF":85},{"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":58,"commitSha":59,"skillDirectory":60,"forksCount":61,"repositoryHtmlUrl":62,"repositoryHomepageUrl":63,"ownerHtmlUrl":64,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":65,"install":66,"resources":78},"01M7DDF6CMNFYNVSYFE36GXGPF","portfolio-site",null,"A designer's portfolio website from their work library: a home page that passes a hiring manager's first look on a phone, one case study per project built around decisions and outcomes, and an about page, published as one site.","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\u002Fvscode\u002Fassets\u002Fopen-design\u002Fskills\u002Fportfolio-site\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: portfolio-site\nzh_name: \"作品集网站\"\nen_name: \"Portfolio Site\"\nemoji: \"🗂️\"\ndescription: \"A designer's portfolio website from their work library: a home page that passes a hiring manager's first look on a phone, one case study per project built around decisions and outcomes, and an about page, published as one site.\"\nen_description: \"A designer's portfolio website from their work library: a home page that passes a hiring manager's first look on a phone, one case study per project built around decisions and outcomes, and an about page, published as one site.\"\ncategory: web\nscenario: personal\ntags: [\"portfolio\", \"case study\", \"design portfolio\", \"ux portfolio\", \"product designer\", \"job application\", \"作品集\", \"案例\"]\ntriggers:\n  - \"portfolio site\"\n  - \"portfolio website\"\n  - \"design portfolio\"\n  - \"ux portfolio\"\n  - \"case study page\"\n  - \"case studies\"\nod:\n  mode: prototype\n  craft:\n    requires:\n      - typography\n      - accessibility-baseline\n      - anti-ai-slop\n      - ux-writing\n  surface: web\n  platform: desktop\n  scenario: personal\n  preview:\n    type: html\n    entry: index.html\n  design_system:\n    requires: true\n  example_prompt: \"My product design portfolio from my work library: the checkout redesign, the bank onboarding and the design system, for senior product designer roles.\"\n---\n\n\u003C!-- Kit skill (openspec add-portfolio-site-and-deck). -->\n# Portfolio Site\n\nA website for one designer, built from their work library (`get_open_design_library`): a home page, one case study per chosen project and an about\u002Fcontact page, linked as one collection and published as one site with home as its `index.html`.\n\n## Before the first page\n\n1. **Read the library.** Call `get_open_design_library`. If there is none, or the projects lack facts, use the open-design-portfolio skill first: save the projects, import the work, confirm alt text. Never write a case study from facts the library doesn't hold.\n2. **Ask once, at most three questions, together**, unless the conversation already answers them: the discipline (product, UX, visual, brand, motion…), who it's for (hiring managers for a role, clients, a school), and which projects to show (three to five; suggest the library's first ones). Accept \"you pick\".\n3. **Style.** The library's style (its design system) is used unless the designer names another. If there is no style and the designer has a site, a Figma file, a Canva design or screenshots of their own work, offer to extract their own design system from it (`extract_open_design_design_system`) before building, so the portfolio looks like them and not like a template.\n4. **Plan the site.** One `collectionId` (e.g. `portfolio-site`; not `portfolio`, which is the library's own folder) and a `flow` with `kind: \"site\"`:\n   - screens: `index` (Home), one per case study with the project slug as its id, `about` (About and contact);\n   - links: home → each case study (\"Read the case study\"), each case study → the next one and back home, every page → `about`;\n   - `nav`: Work → `index`, About → `about` (add a résumé link in the nav only if the library has one).\n5. **Build each page** with its own `prepare_open_design_brief` call: the same `collectionId`, `flow` and `portfolio: { projects: [\u003Call chosen slugs>] }`, the page's id as `screenRole`. The brief lists each project's facts and the pictures you may use, with their markup. Register each page with the same `collectionId`, `screenRole`, `flow` and `portfolio`.\n6. **Check** each page with `check_open_design_artifact`, then the collection with `collectionId`. Fix every error and the portfolio warnings (first screen, summary, length, alt text, weight, live links).\n7. **Publish** with `publish_open_design_artifact` from any page: the site opens on home.\n\n## Home page (`index`)\n\n- The first screen, on a 390 × 844 phone and on a desktop, shows the designer's name, their role, a contact link (`mailto:` or one marked `data-od-contact`) and the top of the first project card. Nothing else has to fit; the check measures these four.\n- One card per case study, in the library's order, each marked `data-od-project-card`: one picture, the title, the designer's role and one outcome line. The whole card links to the case study.\n- No skills bars, no logo walls of tools, no \"Hi, I'm\" hero filling the screen.\n\n## Case study (one per project)\n\nPut `data-od-case-study=\"\u003Cproject slug>\"` on `\u003Cbody>`. The body text (outside navigation and footer) runs 500 to 1,800 words; the check counts it. Sections, in this order, with headings in the designer's voice:\n\n1. **Summary**, marked `data-od-summary`: role, team, dates, platforms and the main outcome (mark it `data-od-outcome`). A reviewer should get the project in ten seconds.\n2. **Problem**: what was wrong and for whom, from the library.\n3. **Constraints**: what limited the work.\n4. **Decisions**: give these the most room. For each, the choice, the options rejected and why, and the trade-off, with the pictures that show it. A rejected option shown beside the chosen one is the strongest thing on the page.\n5. **Outcome**: each outcome exactly as the brief writes it (a measured number as given, an estimate with \"about\", a qualitative one without a number). Never round, combine or invent.\n6. **How I worked** (only when the brief lists records): the explorations, comparisons, edits, review rounds and before\u002Fafter pages the kit has for the project, and the designer's own note. When the brief says there are none, leave the block out.\n7. **Next steps or what I'd do differently**, only if the library or the designer says.\n8. Links: the live product (`data-od-live`), prototypes, write-ups; then the next case study and a way home.\n\nThe outline is an order, not a layout: build the layout from the design system and the work itself, so two designers' sites don't look alike. Vary the picture rhythm (a full-width hero shot, a pair comparing chosen and rejected, a strip of phone screens) instead of repeating one block.\n\n## Pictures\n\n- Use only the pictures the brief lists, with the markup it gives: `src`, `srcset` with the 800\u002F1400\u002F2800 variants, `sizes`, `width` and `height`, the library's alt text and `data-od-asset`. The brief has already left out internal pictures and applied redaction.\n- `loading=\"lazy\"` on every picture below the first screen; the first card's picture loads eagerly.\n- Alt text marked as a draft in the brief must be confirmed by the designer before publishing; the check reports drafts.\n- A page and what it loads stays under 3 MB.\n\n## About page (`about`)\n\nThe designer's own bio from the library, where they are, how to reach them (the same contact link), and their links. No invented testimonials, client logos or years of experience.\n\n## A version for one job or client\n\nWith a target (`portfolio: { target }`), the brief gives its projects in order, its ceiling and its cover note. Build it as its own collection (the target slug as `collectionId`), open the home page with the cover note, mark each project's block `data-od-project=\"\u003Cslug>\"`, and for an unlisted target put `\u003Cmeta name=\"robots\" content=\"noindex\">` in every page's head and don't link it from the public site. A client target can add a \"For you\" section (`data-od-for-you`) linking the redesign concept of their site and its before\u002Fafter page.\n\n## Rules\n\n- Only library facts. When a fact the outline needs is missing, ask, or leave that part out.\n- An `unlisted` project stays off any public list or search page the designer adds later; say so if they ask to share the site widely.\n- Tokens only: every colour, size, radius and shadow comes from the design system's `:root` variables.\n- Real links: every page links to the others with `href=\"\u003Cid>.html\"` and `data-od-goto=\"\u003Cid>\"`, and uses the shared navigation the brief gives.\n","\u003C!-- Kit skill (openspec add-portfolio-site-and-deck). -->\n# Portfolio Site\n\nA website for one designer, built from their work library (`get_open_design_library`): a home page, one case study per chosen project and an about\u002Fcontact page, linked as one collection and published as one site with home as its `index.html`.\n\n## Before the first page\n\n1. **Read the library.** Call `get_open_design_library`. If there is none, or the projects lack facts, use the open-design-portfolio skill first: save the projects, import the work, confirm alt text. Never write a case study from facts the library doesn't hold.\n2. **Ask once, at most three questions, together**, unless the conversation already answers them: the discipline (product, UX, visual, brand, motion…), who it's for (hiring managers for a role, clients, a school), and which projects to show (three to five; suggest the library's first ones). Accept \"you pick\".\n3. **Style.** The library's style (its design system) is used unless the designer names another. If there is no style and the designer has a site, a Figma file, a Canva design or screenshots of their own work, offer to extract their own design system from it (`extract_open_design_design_system`) before building, so the portfolio looks like them and not like a template.\n4. **Plan the site.** One `collectionId` (e.g. `portfolio-site`; not `portfolio`, which is the library's own folder) and a `flow` with `kind: \"site\"`:\n   - screens: `index` (Home), one per case study with the project slug as its id, `about` (About and contact);\n   - links: home → each case study (\"Read the case study\"), each case study → the next one and back home, every page → `about`;\n   - `nav`: Work → `index`, About → `about` (add a résumé link in the nav only if the library has one).\n5. **Build each page** with its own `prepare_open_design_brief` call: the same `collectionId`, `flow` and `portfolio: { projects: [\u003Call chosen slugs>] }`, the page's id as `screenRole`. The brief lists each project's facts and the pictures you may use, with their markup. Register each page with the same `collectionId`, `screenRole`, `flow` and `portfolio`.\n6. **Check** each page with `check_open_design_artifact`, then the collection with `collectionId`. Fix every error and the portfolio warnings (first screen, summary, length, alt text, weight, live links).\n7. **Publish** with `publish_open_design_artifact` from any page: the site opens on home.\n\n## Home page (`index`)\n\n- The first screen, on a 390 × 844 phone and on a desktop, shows the designer's name, their role, a contact link (`mailto:` or one marked `data-od-contact`) and the top of the first project card. Nothing else has to fit; the check measures these four.\n- One card per case study, in the library's order, each marked `data-od-project-card`: one picture, the title, the designer's role and one outcome line. The whole card links to the case study.\n- No skills bars, no logo walls of tools, no \"Hi, I'm\" hero filling the screen.\n\n## Case study (one per project)\n\nPut `data-od-case-study=\"\u003Cproject slug>\"` on `\u003Cbody>`. The body text (outside navigation and footer) runs 500 to 1,800 words; the check counts it. Sections, in this order, with headings in the designer's voice:\n\n1. **Summary**, marked `data-od-summary`: role, team, dates, platforms and the main outcome (mark it `data-od-outcome`). A reviewer should get the project in ten seconds.\n2. **Problem**: what was wrong and for whom, from the library.\n3. **Constraints**: what limited the work.\n4. **Decisions**: give these the most room. For each, the choice, the options rejected and why, and the trade-off, with the pictures that show it. A rejected option shown beside the chosen one is the strongest thing on the page.\n5. **Outcome**: each outcome exactly as the brief writes it (a measured number as given, an estimate with \"about\", a qualitative one without a number). Never round, combine or invent.\n6. **How I worked** (only when the brief lists records): the explorations, comparisons, edits, review rounds and before\u002Fafter pages the kit has for the project, and the designer's own note. When the brief says there are none, leave the block out.\n7. **Next steps or what I'd do differently**, only if the library or the designer says.\n8. Links: the live product (`data-od-live`), prototypes, write-ups; then the next case study and a way home.\n\nThe outline is an order, not a layout: build the layout from the design system and the work itself, so two designers' sites don't look alike. Vary the picture rhythm (a full-width hero shot, a pair comparing chosen and rejected, a strip of phone screens) instead of repeating one block.\n\n## Pictures\n\n- Use only the pictures the brief lists, with the markup it gives: `src`, `srcset` with the 800\u002F1400\u002F2800 variants, `sizes`, `width` and `height`, the library's alt text and `data-od-asset`. The brief has already left out internal pictures and applied redaction.\n- `loading=\"lazy\"` on every picture below the first screen; the first card's picture loads eagerly.\n- Alt text marked as a draft in the brief must be confirmed by the designer before publishing; the check reports drafts.\n- A page and what it loads stays under 3 MB.\n\n## About page (`about`)\n\nThe designer's own bio from the library, where they are, how to reach them (the same contact link), and their links. No invented testimonials, client logos or years of experience.\n\n## A version for one job or client\n\nWith a target (`portfolio: { target }`), the brief gives its projects in order, its ceiling and its cover note. Build it as its own collection (the target slug as `collectionId`), open the home page with the cover note, mark each project's block `data-od-project=\"\u003Cslug>\"`, and for an unlisted target put `\u003Cmeta name=\"robots\" content=\"noindex\">` in every page's head and don't link it from the public site. A client target can add a \"For you\" section (`data-od-for-you`) linking the redesign concept of their site and its before\u002Fafter page.\n\n## Rules\n\n- Only library facts. When a fact the outline needs is missing, ask, or leave that part out.\n- An `unlisted` project stays off any public list or search page the designer adds later; say so if they ask to share the site widely.\n- Tokens only: every colour, size, radius and shadow comes from the design system's `:root` variables.\n- Real links: every page links to the others with `href=\"\u003Cid>.html\"` and `data-od-goto=\"\u003Cid>\"`, and uses the shared navigation the brief gives.\n",{"od":24,"name":5,"tags":41,"emoji":50,"en_name":51,"zh_name":52,"category":35,"scenario":37,"triggers":53,"description":7,"en_description":7},{"mode":25,"craft":26,"preview":32,"surface":35,"platform":36,"scenario":37,"design_system":38,"example_prompt":40},"prototype",{"requires":27},[28,29,30,31],"typography","accessibility-baseline","anti-ai-slop","ux-writing",{"type":33,"entry":34},"html","index.html","web","desktop","personal",{"requires":39},true,"My product design portfolio from my work library: the checkout redesign, the bank onboarding and the design system, for senior product designer roles.",[42,43,44,45,46,47,48,49],"portfolio","case study","design portfolio","ux portfolio","product designer","job application","作品集","案例","🗂️","Portfolio Site","作品集网站",[54,55,44,45,56,57],"portfolio site","portfolio website","case study page","case studies","main","e38061066b92c298798dbddc1decbae8c026464f","packages\u002Fvscode\u002Fassets\u002Fopen-design\u002Fskills\u002Fportfolio-site",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":67,"prompt":77,"zipAvailable":39},[68,71,74],{"tool":69,"command":70},"npx","npx skills add feimacode\u002Fopen-design-agent-kit --skill portfolio-site",{"tool":72,"command":73},"bunx","bunx skills add feimacode\u002Fopen-design-agent-kit --skill portfolio-site",{"tool":75,"command":76},"pnpm","pnpm dlx skills add feimacode\u002Fopen-design-agent-kit --skill portfolio-site","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Ffeimacode\u002Fopen-design-agent-kit\u002Fblob\u002Fmain\u002Fpackages\u002Fvscode\u002Fassets\u002Fopen-design\u002Fskills\u002Fportfolio-site\u002FSKILL.md",[79],{"path":80,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":83,"sourceHtmlUrl":84},".od-local-overlay","OTHER","其他",82,"https:\u002F\u002Fgithub.com\u002Ffeimacode\u002Fopen-design-agent-kit\u002Fblob\u002Fmain\u002Fpackages\u002Fvscode\u002Fassets\u002Fopen-design\u002Fskills\u002Fportfolio-site\u002F.od-local-overlay",[86,93,100,107,114,121],{"skillNo":87,"name":88,"nameZh":6,"description":89,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":90,"categories":91,"keywords":92,"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":94,"name":95,"nameZh":6,"description":96,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":99,"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":101,"name":102,"nameZh":6,"description":103,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":104,"categories":105,"keywords":106,"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":108,"name":109,"nameZh":6,"description":110,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":111,"categories":112,"keywords":113,"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":115,"name":116,"nameZh":6,"description":117,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":120,"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":122,"name":123,"nameZh":6,"description":124,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":125,"categories":126,"keywords":127,"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",[],[]]