[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6C352AF5TP6DD529M6YSF1Q":3,"skill-same:01M6C352AF5TP6DD529M6YSF1Q":95},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":28,"publishedAt":49,"linkOnly":50,"markdownContent":51,"markdownBody":52,"frontMatter":53,"refName":64,"commitSha":65,"skillDirectory":66,"forksCount":67,"repositoryHtmlUrl":68,"repositoryHomepageUrl":6,"ownerHtmlUrl":69,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":70,"install":71,"resources":84},"01M6C352AF5TP6DD529M6YSF1Q","architecture-diagram",null,"Dark-themed SVG architecture\u002Fcloud\u002Finfra diagrams as HTML.","jleechanorg\u002Fjleechan-skills","jleechanorg","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F221404966?v=4","01M6C1VJ99XG950X1DWPEBCBGX","01M6C1VJDK5YVDNT3362RT5WSB",6,"MIT","https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002Fhermes\u002Fskills\u002Fcreative\u002Farchitecture-diagram\u002FSKILL.md",[17,22,25],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48],"architecture","diagram","architecture diagram","excalidraw","dark","concept","SVG","as","infra","diagrams","html","hermes agent","hermes","macos","cloud","visualization","infrastructure","windows","hello","linux","2026-11-10 10:12:30",false,"---\nname: architecture-diagram\ndescription: \"Dark-themed SVG architecture\u002Fcloud\u002Finfra diagrams as HTML.\"\nversion: 1.0.0\nauthor: Cocoon AI (hello@cocoon-ai.com), ported by Hermes Agent\nlicense: MIT\ndependencies: []\nplatforms: [linux, macos, windows]\nmetadata:\n  hermes:\n    tags: [architecture, diagrams, SVG, HTML, visualization, infrastructure, cloud]\n    related_skills: [concept-diagrams, excalidraw]\n---\n\n# Architecture Diagram Skill\n\nGenerate professional, dark-themed technical architecture diagrams as standalone HTML files with inline SVG graphics. No external tools, no API keys, no rendering libraries — just write the HTML file and open it in a browser.\n\n## Scope\n\n**Best suited for:**\n- Software system architecture (frontend \u002F backend \u002F database layers)\n- Cloud infrastructure (VPC, regions, subnets, managed services)\n- Microservice \u002F service-mesh topology\n- Database + API map, deployment diagrams\n- Anything with a tech-infra subject that fits a dark, grid-backed aesthetic\n\n**Look elsewhere first for:**\n- Physics, chemistry, math, biology, or other scientific subjects\n- Physical objects (vehicles, hardware, anatomy, cross-sections)\n- Floor plans, narrative journeys, educational \u002F textbook-style visuals\n- Hand-drawn whiteboard sketches (consider `excalidraw`)\n- Animated explainers (consider an animation skill)\n\nIf a more specialized skill is available for the subject, prefer that. If none fits, this skill can also serve as a general SVG diagram fallback — the output will just carry the dark tech aesthetic described below.\n\nBased on [Cocoon AI's architecture-diagram-generator](https:\u002F\u002Fgithub.com\u002FCocoon-AI\u002Farchitecture-diagram-generator) (MIT).\n\n## Workflow\n\n1. User describes their system architecture (components, connections, technologies)\n2. Generate the HTML file following the design system below\n3. Save with `write_file` to a `.html` file (e.g. `~\u002Farchitecture-diagram.html`)\n4. User opens in any browser — works offline, no dependencies\n\n### Output Location\n\nSave diagrams to a user-specified path, or default to the current working directory:\n```\n.\u002F[project-name]-architecture.html\n```\n\n### Preview\n\nAfter saving, suggest the user open it:\n```bash\n# macOS\nopen .\u002Fmy-architecture.html\n# Linux\nxdg-open .\u002Fmy-architecture.html\n```\n\n## Design System & Visual Language\n\n### Color Palette (Semantic Mapping)\n\nUse specific `rgba` fills and hex strokes to categorize components:\n\n| Component Type | Fill (rgba) | Stroke (Hex) |\n| :--- | :--- | :--- |\n| **Frontend** | `rgba(8, 51, 68, 0.4)` | `#22d3ee` (cyan-400) |\n| **Backend** | `rgba(6, 78, 59, 0.4)` | `#34d399` (emerald-400) |\n| **Database** | `rgba(76, 29, 149, 0.4)` | `#a78bfa` (violet-400) |\n| **AWS\u002FCloud** | `rgba(120, 53, 15, 0.3)` | `#fbbf24` (amber-400) |\n| **Security** | `rgba(136, 19, 55, 0.4)` | `#fb7185` (rose-400) |\n| **Message Bus** | `rgba(251, 146, 60, 0.3)` | `#fb923c` (orange-400) |\n| **External** | `rgba(30, 41, 59, 0.5)` | `#94a3b8` (slate-400) |\n\n### Typography & Background\n- **Font:** JetBrains Mono (Monospace), loaded from Google Fonts\n- **Sizes:** 12px (Names), 9px (Sublabels), 8px (Annotations), 7px (Tiny labels)\n- **Background:** Slate-950 (`#020617`) with a subtle 40px grid pattern\n\n```svg\n\u003C!-- Background Grid Pattern -->\n\u003Cpattern id=\"grid\" width=\"40\" height=\"40\" patternUnits=\"userSpaceOnUse\">\n  \u003Cpath d=\"M 40 0 L 0 0 0 40\" fill=\"none\" stroke=\"#1e293b\" stroke-width=\"0.5\"\u002F>\n\u003C\u002Fpattern>\n```\n\n## Technical Implementation Details\n\n### Component Rendering\nComponents are rounded rectangles (`rx=\"6\"`) with 1.5px strokes. To prevent arrows from showing through semi-transparent fills, use a **double-rect masking technique**:\n1. Draw an opaque background rect (`#0f172a`)\n2. Draw the semi-transparent styled rect on top\n\n### Connection Rules\n- **Z-Order:** Draw arrows *early* in the SVG (after the grid) so they render behind component boxes\n- **Arrowheads:** Defined via SVG markers\n- **Security Flows:** Use dashed lines in rose color (`#fb7185`)\n- **Boundaries:**\n  - *Security Groups:* Dashed (`4,4`), rose color\n  - *Regions:* Large dashed (`8,4`), amber color, `rx=\"12\"`\n\n### Spacing & Layout Logic\n- **Standard Height:** 60px (Services); 80-120px (Large components)\n- **Vertical Gap:** Minimum 40px between components\n- **Message Buses:** Must be placed *in the gap* between services, not overlapping them\n- **Legend Placement:** **CRITICAL.** Must be placed outside all boundary boxes. Calculate the lowest Y-coordinate of all boundaries and place the legend at least 20px below it.\n\n## Document Structure\n\nThe generated HTML file follows a four-part layout:\n1. **Header:** Title with a pulsing dot indicator and subtitle\n2. **Main SVG:** The diagram contained within a rounded border card\n3. **Summary Cards:** A grid of three cards below the diagram for high-level details\n4. **Footer:** Minimal metadata\n\n### Info Card Pattern\n```html\n\u003Cdiv class=\"card\">\n  \u003Cdiv class=\"card-header\">\n    \u003Cdiv class=\"card-dot cyan\">\u003C\u002Fdiv>\n    \u003Ch3>Title\u003C\u002Fh3>\n  \u003C\u002Fdiv>\n  \u003Cul>\n    \u003Cli>• Item one\u003C\u002Fli>\n    \u003Cli>• Item two\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fdiv>\n```\n\n## Output Requirements\n- **Single File:** One self-contained `.html` file\n- **No External Dependencies:** All CSS and SVG must be inline (except Google Fonts)\n- **No JavaScript:** Use pure CSS for any animations (like pulsing dots)\n- **Compatibility:** Must render correctly in any modern web browser\n\n## Template Reference\n\nLoad the full HTML template for the exact structure, CSS, and SVG component examples:\n\n```\nskill_view(name=\"architecture-diagram\", file_path=\"templates\u002Ftemplate.html\")\n```\n\nThe template contains working examples of every component type (frontend, backend, database, cloud, security), arrow styles (standard, dashed, curved), security groups, region boundaries, and the legend — use it as your structural reference when generating diagrams.\n","# Architecture Diagram Skill\n\nGenerate professional, dark-themed technical architecture diagrams as standalone HTML files with inline SVG graphics. No external tools, no API keys, no rendering libraries — just write the HTML file and open it in a browser.\n\n## Scope\n\n**Best suited for:**\n- Software system architecture (frontend \u002F backend \u002F database layers)\n- Cloud infrastructure (VPC, regions, subnets, managed services)\n- Microservice \u002F service-mesh topology\n- Database + API map, deployment diagrams\n- Anything with a tech-infra subject that fits a dark, grid-backed aesthetic\n\n**Look elsewhere first for:**\n- Physics, chemistry, math, biology, or other scientific subjects\n- Physical objects (vehicles, hardware, anatomy, cross-sections)\n- Floor plans, narrative journeys, educational \u002F textbook-style visuals\n- Hand-drawn whiteboard sketches (consider `excalidraw`)\n- Animated explainers (consider an animation skill)\n\nIf a more specialized skill is available for the subject, prefer that. If none fits, this skill can also serve as a general SVG diagram fallback — the output will just carry the dark tech aesthetic described below.\n\nBased on [Cocoon AI's architecture-diagram-generator](https:\u002F\u002Fgithub.com\u002FCocoon-AI\u002Farchitecture-diagram-generator) (MIT).\n\n## Workflow\n\n1. User describes their system architecture (components, connections, technologies)\n2. Generate the HTML file following the design system below\n3. Save with `write_file` to a `.html` file (e.g. `~\u002Farchitecture-diagram.html`)\n4. User opens in any browser — works offline, no dependencies\n\n### Output Location\n\nSave diagrams to a user-specified path, or default to the current working directory:\n```\n.\u002F[project-name]-architecture.html\n```\n\n### Preview\n\nAfter saving, suggest the user open it:\n```bash\n# macOS\nopen .\u002Fmy-architecture.html\n# Linux\nxdg-open .\u002Fmy-architecture.html\n```\n\n## Design System & Visual Language\n\n### Color Palette (Semantic Mapping)\n\nUse specific `rgba` fills and hex strokes to categorize components:\n\n| Component Type | Fill (rgba) | Stroke (Hex) |\n| :--- | :--- | :--- |\n| **Frontend** | `rgba(8, 51, 68, 0.4)` | `#22d3ee` (cyan-400) |\n| **Backend** | `rgba(6, 78, 59, 0.4)` | `#34d399` (emerald-400) |\n| **Database** | `rgba(76, 29, 149, 0.4)` | `#a78bfa` (violet-400) |\n| **AWS\u002FCloud** | `rgba(120, 53, 15, 0.3)` | `#fbbf24` (amber-400) |\n| **Security** | `rgba(136, 19, 55, 0.4)` | `#fb7185` (rose-400) |\n| **Message Bus** | `rgba(251, 146, 60, 0.3)` | `#fb923c` (orange-400) |\n| **External** | `rgba(30, 41, 59, 0.5)` | `#94a3b8` (slate-400) |\n\n### Typography & Background\n- **Font:** JetBrains Mono (Monospace), loaded from Google Fonts\n- **Sizes:** 12px (Names), 9px (Sublabels), 8px (Annotations), 7px (Tiny labels)\n- **Background:** Slate-950 (`#020617`) with a subtle 40px grid pattern\n\n```svg\n\u003C!-- Background Grid Pattern -->\n\u003Cpattern id=\"grid\" width=\"40\" height=\"40\" patternUnits=\"userSpaceOnUse\">\n  \u003Cpath d=\"M 40 0 L 0 0 0 40\" fill=\"none\" stroke=\"#1e293b\" stroke-width=\"0.5\"\u002F>\n\u003C\u002Fpattern>\n```\n\n## Technical Implementation Details\n\n### Component Rendering\nComponents are rounded rectangles (`rx=\"6\"`) with 1.5px strokes. To prevent arrows from showing through semi-transparent fills, use a **double-rect masking technique**:\n1. Draw an opaque background rect (`#0f172a`)\n2. Draw the semi-transparent styled rect on top\n\n### Connection Rules\n- **Z-Order:** Draw arrows *early* in the SVG (after the grid) so they render behind component boxes\n- **Arrowheads:** Defined via SVG markers\n- **Security Flows:** Use dashed lines in rose color (`#fb7185`)\n- **Boundaries:**\n  - *Security Groups:* Dashed (`4,4`), rose color\n  - *Regions:* Large dashed (`8,4`), amber color, `rx=\"12\"`\n\n### Spacing & Layout Logic\n- **Standard Height:** 60px (Services); 80-120px (Large components)\n- **Vertical Gap:** Minimum 40px between components\n- **Message Buses:** Must be placed *in the gap* between services, not overlapping them\n- **Legend Placement:** **CRITICAL.** Must be placed outside all boundary boxes. Calculate the lowest Y-coordinate of all boundaries and place the legend at least 20px below it.\n\n## Document Structure\n\nThe generated HTML file follows a four-part layout:\n1. **Header:** Title with a pulsing dot indicator and subtitle\n2. **Main SVG:** The diagram contained within a rounded border card\n3. **Summary Cards:** A grid of three cards below the diagram for high-level details\n4. **Footer:** Minimal metadata\n\n### Info Card Pattern\n```html\n\u003Cdiv class=\"card\">\n  \u003Cdiv class=\"card-header\">\n    \u003Cdiv class=\"card-dot cyan\">\u003C\u002Fdiv>\n    \u003Ch3>Title\u003C\u002Fh3>\n  \u003C\u002Fdiv>\n  \u003Cul>\n    \u003Cli>• Item one\u003C\u002Fli>\n    \u003Cli>• Item two\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fdiv>\n```\n\n## Output Requirements\n- **Single File:** One self-contained `.html` file\n- **No External Dependencies:** All CSS and SVG must be inline (except Google Fonts)\n- **No JavaScript:** Use pure CSS for any animations (like pulsing dots)\n- **Compatibility:** Must render correctly in any modern web browser\n\n## Template Reference\n\nLoad the full HTML template for the exact structure, CSS, and SVG component examples:\n\n```\nskill_view(name=\"architecture-diagram\", file_path=\"templates\u002Ftemplate.html\")\n```\n\nThe template contains working examples of every component type (frontend, backend, database, cloud, security), arrow styles (standard, dashed, curved), security groups, region boundaries, and the legend — use it as your structural reference when generating diagrams.\n",{"name":5,"author":54,"license":14,"version":55,"metadata":56,"platforms":62,"description":7,"dependencies":63},"Cocoon AI (hello@cocoon-ai.com), ported by Hermes Agent","1.0.0",{"hermes":57},{"tags":58,"related_skills":60},[29,38,35,59,44,45,43],"HTML",[61,32],"concept-diagrams",[48,42,46],[],"main","42ccd02cbf5e8e47839dc3eab6fc754dc6b339cf","hermes\u002Fskills\u002Fcreative\u002Farchitecture-diagram",0,"https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills","https:\u002F\u002Fgithub.com\u002Fjleechanorg","2026-11-14 03:18:13",{"source":8,"skillName":5,"commands":72,"prompt":82,"zipAvailable":83},[73,76,79],{"tool":74,"command":75},"npx","npx skills add jleechanorg\u002Fjleechan-skills --skill architecture-diagram",{"tool":77,"command":78},"bunx","bunx skills add jleechanorg\u002Fjleechan-skills --skill architecture-diagram",{"tool":80,"command":81},"pnpm","pnpm dlx skills add jleechanorg\u002Fjleechan-skills --skill architecture-diagram","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002Fhermes\u002Fskills\u002Fcreative\u002Farchitecture-diagram\u002FSKILL.md",true,[85,91],{"path":86,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":89,"sourceHtmlUrl":90},"references\u002Fbenchmarking.md","REFERENCE","参考文档",2192,"https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-llm-evaluation\u002Freferences\u002Fbenchmarking.md",{"path":92,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":93,"sourceHtmlUrl":94},"templates\u002Ftemplate.html",12483,"https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002Fhermes\u002Fskills\u002Fcreative\u002Farchitecture-diagram\u002Ftemplates\u002Ftemplate.html",[96,114,136,150,164,180],{"skillNo":97,"name":98,"nameZh":6,"description":99,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":100,"categories":101,"keywords":102,"publishedAt":49},"01M716Y5MTJ6GYJZ2ATXCJK8G4","instinct","Use when the user invokes \u002Finstinct or \u002Fin, or asks to \"message Instinct\", \"ask Instinct\", \"tell Instinct\", \"check Instinct\", or read replies from the configured peer assistant. iMessage first, WhatsApp Web as fallback.","https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Finstinct\u002FSKILL.md",[],[98,103,104,105,106,107,108,109,110,111,112,113],"user","when","replies","check","use","identity","whatsapp","gmail","read","message","ask",{"skillNo":115,"name":116,"nameZh":6,"description":117,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":125,"publishedAt":49},"01M716Y4HF7FVVMJSA2CCVN5VF","hr","Compatibility alias for history-resume; produce the same fresh-state, provenance-aware resume briefing.","https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fhr\u002FSKILL.md",[120],{"categoryNo":121,"categoryName":122,"taxonomyType":123,"taxonomyTypeDesc":124},"01JBSEEDCAT000000000000038","人力资源","PROFESSION","适用职业",[116,126,127,128,129,130,131,132,133,134,135],"resume","compatibility","provenance","for","history","produce","alias","briefing","state","fresh",{"skillNo":137,"name":138,"nameZh":6,"description":139,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":140,"categories":141,"keywords":143,"publishedAt":49},"01M716Y1FFNFKFJYYKF8HQA6T8","history-resume","Resume briefing for the current repository branch or worktree using fresh state and admitted history sources.","https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fhistory-resume\u002FSKILL.md",[142],{"categoryNo":121,"categoryName":122,"taxonomyType":123,"taxonomyTypeDesc":124},[130,126,144,145,103,146,133,147,129,148,149,134,135],"history resume","branch","analysis","repository","worktree","sources",{"skillNo":151,"name":152,"nameZh":6,"description":153,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":154,"categories":155,"keywords":156,"publishedAt":49},"01M716XWXJ8EPHK4RH9T14TR85","grok","Alias for the canonical grokbot browser conversation workflow; \u002Fgrok talks to the Grok bot the same way \u002Fdot talks to Dot.","https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fgrok\u002FSKILL.md",[],[152,157,158,159,129,160,132,161,162,163],"dot","bot","workflow","canonical","conversation","browser","grokbot",{"skillNo":165,"name":166,"nameZh":6,"description":167,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":168,"categories":169,"keywords":170,"publishedAt":49},"01M70N9Q07DTE0EW5KFXMMMSJ0","codexa-bench","Compare `codexa` and normal `codex` on a fair split of comparable work by default; use `--strict` for duplicate runs of the exact same task.","https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fcodexa-bench\u002FSKILL.md",[],[171,172,173,107,174,129,175,176,177,178,179],"codexa bench","work","split","default","duplicate","task","compare","normal","codex",{"skillNo":181,"name":182,"nameZh":6,"description":183,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":184,"licenseFileUrl":185,"sourceHtmlUrl":186,"categories":187,"keywords":195,"publishedAt":49},"01M6C24S2X60SP8BBFGAEKPEGW","frontend-design","Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML\u002FCSS layouts, or when styling\u002Fbeautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Ffrontend-design\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Ffrontend-design\u002FSKILL.md",[188,189,192],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":190,"categoryName":191,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":193,"categoryName":194,"taxonomyType":123,"taxonomyTypeDesc":124},"01JBSEEDCAT000000000000032","设计师",[196,197,198,107,199,200,201,103,39,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,104,219],"frontend","design","frontend design","generic","ui design","react","components","code","artifacts","ui","aesthetics","Production","web components","landing","applications","quality","web","css","create","examples","with","react components","web ui","pages"]