[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7903H2PHTWD77Z2X69RAZM5":3,"skill-same:01M7903H2PHTWD77Z2X69RAZM5":62},{"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":26,"commitSha":27,"skillDirectory":28,"forksCount":29,"repositoryHtmlUrl":30,"repositoryHomepageUrl":31,"ownerHtmlUrl":32,"ownerBlogUrl":33,"ownerDescription":34,"updatedAt":35,"install":36,"resources":49},"01M7903H2PHTWD77Z2X69RAZM5","design-direction",null,"Choose the visual genre fitting product and audience: editorial, brutalist, swiss, retro, soft-tech. Use when establishing visual direction or moodboards.","poorvith-mp\u002Fskills-design","poorvith-mp","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F277478855?v=4","01M78Z5K0YH1Z3PX815PGQ96ND","Poorvith M P","01M79023NZMHA7EKM9K6KWHEET",0,"MIT","https:\u002F\u002Fgithub.com\u002Fpoorvith-mp\u002Fskills-design\u002Fblob\u002Fmain\u002Fskills\u002Fdesign-direction\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: design-direction\nlast_reviewed: 2026-09-06\ngroup: Direction\ndescription: >-\n  Choose the visual genre fitting product and audience: editorial, brutalist, swiss, retro,\n  soft-tech. Use when establishing visual direction or moodboards.\n---\n\n# design-direction\n\n## Core Philosophy\nVisual design direction is not choosing random colors from a moodboard on Pinterest. Design direction is the deliberate selection of an architectural visual genre that directly reinforces product credibility, audience expectations, and functional utility. Choosing the wrong visual direction—such as wrapping a serious database monitoring tool in a whimsical, pastel cartoon aesthetic—destroys market trust and sabotages conversion.\n\n---\n\n## 4-Step Strategic Design Direction Framework\n\n### Step 1: Visual Genre Taxonomy\n1. **The 5 Contemporary Digital Design Genres**:\n   - *1. Swiss \u002F International Typographic*:\n     - Characteristics: Rigid grid alignment, stark sans-serif typography (`Inter`, `Helvetica`), asymmetrical balance, high contrast, zero ornamental fluff.\n     - Best For: Developer platforms, cloud infra, high-density financial analytics.\n   - *2. Editorial \u002F High-Craft*:\n     - Characteristics: Elegant serifs (`Newsreader`, `Canela`), generous whitespace, rich muted paper tones, journalistic photography.\n     - Best For: Publishing platforms, thought leadership, intellectual tools, boutique SaaS.\n   - *3. Neo-Brutalist*:\n     - Characteristics: High-contrast 2px solid black borders, hard drop shadows (`4px 4px #000`), bold un-rounded buttons, vibrant primary colors, raw exposed structure.\n     - Best For: Developer tools challenging bloated incumbents, Gen-Z creator tools, subversive apps.\n   - *4. Soft-Tech \u002F Minimal Ambient*:\n     - Characteristics: Subtle gradient blurs, deep slate obsidian surfaces, fine 1px translucent borders (`rgba(255,255,255,0.08)`), micro-elevations.\n     - Best For: AI platforms, modern productivity software (Linear, Raycast).\n   - *5. Retro-Computing \u002F Terminal*:\n     - Characteristics: Monospace typography, CRT scan-lines, dark green\u002Famber monochrome palettes, ASCII art box borders.\n     - Best For: Hacker tools, cybersecurity platforms, low-level systems utilities.\n\n### Step 2: Product & Audience Alignment Matrix\n1. **The Persona-to-Genre Fit**:\n   - Who is evaluating the tool?\n     - Enterprise Security Chief -> Swiss or Soft-Tech (Signals rigor and compliance).\n     - Individual Backend Hacker -> Terminal or Neo-Brutalist (Signals speed and anti-corporate posture).\n     - Creative Director -> Editorial or Experimental.\n\n### Step 3: Curated Moodboarding & Token Synthesis\n1. **The Anti-Pinterest Moodboard Discipline**:\n   - Collect 8–12 real-world artifacts: physical architecture, print magazine layouts, vintage computing hardware, and top-tier digital interfaces.\n   - Extract the DNA: Typography weights, surface border radius, color contrast, and spacing density.\n\n### Step 4: Concept Spikes & The Direction Matrix\n1. **Generate 2 Radically Contrasting Concepts**:\n   - Never design just 1 visual direction. Create 2 distinct design spikes for the core screen:\n     - Direction A: Restrained Swiss \u002F Monochromatic.\n     - Direction B: Ambient Soft-Tech \u002F High Contrast.\n   - Put both in front of target users to test comprehension, speed, and trust.\n\n---\n\n## Deliverable Format: Visual Design Direction Brief (`DESIGN-DIRECTION.md`)\n\n```markdown\n# Visual Design Direction Specification: [Product Name]\n\n## 1. Selected Visual Genre: **Swiss Industrial \u002F High-Density**\n- **Core Aesthetic**: Stark, grid-disciplined, utilitarian, high-contrast.\n- **Target Audience**: Infrastructure engineers, database administrators.\n- **Brand Feeling**: Precise, unpretentious, lightning-fast, dependable.\n\n## 2. Foundational Design Primitives\n- **Grid Structure**: 8px baseline grid; 12-column responsive layout.\n- **Border Radius**: Sharp 4px radius on all containers; 0px on tables.\n- **Borders**: 1px solid high-contrast dividers (`#27272A`).\n- **Typography**: Monospace data display (`JetBrains Mono`); Sans-serif labels (`Inter`).\n- **Surface Elevation**: Dark slate `#090D16` canvas with crisp `#18181B` card containers.\n\n## 3. Competitive Visual Differentiation\n- Competitors all use generic light-purple SaaS templates with stock 3D floating icons.\n- Our direction uses authentic terminal captures, dense monospace telemetry tables, and stark black-and-white contrast with single emerald status indicators.\n```\n\n---\n\n## Worked Example: Database Tool Visual Direction Selection\n\n- **Challenge**: Database startup originally used soft pastel purple gradients; customers questioned whether the database could handle high-throughput enterprise workloads.\n- **Pivot**: Shifted visual direction to Swiss Industrial: deep charcoal background, sharp 2px corners, high-density data tables, and stark neon-amber status indicators.\n- **Impact**: Enterprise pilot conversions increased 40%; customers remarked that the software felt \"solid as industrial steel\".\n\n---\n\n## Verification Checklist\n\n- [ ] Chosen visual genre explicitly matches audience persona and cognitive needs.\n- [ ] At least 2 contrasting visual directions were developed and evaluated.\n- [ ] Border radius, border stroke, typography, and spacing density are codified.\n- [ ] Direction provides visible contrast against generic category competitor tropes.\n- [ ] Direction supports high-density information architecture without legibility loss.\n\n---\n\n## Anti-Patterns\n\n- **Designing in a Vacuum**: Picking a trendy aesthetic from Twitter\u002FDribbble that contradicts the software's functional utility.\n- **The Generic Purple Blob**: Defaulting to purple gradients and floating 3D spheres for every B2B application.\n- **Aesthetic Over Density**: Prioritizing huge whitespace and giant typography on an analytics dashboard where users need to see 50 rows of data.\n","# design-direction\n\n## Core Philosophy\nVisual design direction is not choosing random colors from a moodboard on Pinterest. Design direction is the deliberate selection of an architectural visual genre that directly reinforces product credibility, audience expectations, and functional utility. Choosing the wrong visual direction—such as wrapping a serious database monitoring tool in a whimsical, pastel cartoon aesthetic—destroys market trust and sabotages conversion.\n\n---\n\n## 4-Step Strategic Design Direction Framework\n\n### Step 1: Visual Genre Taxonomy\n1. **The 5 Contemporary Digital Design Genres**:\n   - *1. Swiss \u002F International Typographic*:\n     - Characteristics: Rigid grid alignment, stark sans-serif typography (`Inter`, `Helvetica`), asymmetrical balance, high contrast, zero ornamental fluff.\n     - Best For: Developer platforms, cloud infra, high-density financial analytics.\n   - *2. Editorial \u002F High-Craft*:\n     - Characteristics: Elegant serifs (`Newsreader`, `Canela`), generous whitespace, rich muted paper tones, journalistic photography.\n     - Best For: Publishing platforms, thought leadership, intellectual tools, boutique SaaS.\n   - *3. Neo-Brutalist*:\n     - Characteristics: High-contrast 2px solid black borders, hard drop shadows (`4px 4px #000`), bold un-rounded buttons, vibrant primary colors, raw exposed structure.\n     - Best For: Developer tools challenging bloated incumbents, Gen-Z creator tools, subversive apps.\n   - *4. Soft-Tech \u002F Minimal Ambient*:\n     - Characteristics: Subtle gradient blurs, deep slate obsidian surfaces, fine 1px translucent borders (`rgba(255,255,255,0.08)`), micro-elevations.\n     - Best For: AI platforms, modern productivity software (Linear, Raycast).\n   - *5. Retro-Computing \u002F Terminal*:\n     - Characteristics: Monospace typography, CRT scan-lines, dark green\u002Famber monochrome palettes, ASCII art box borders.\n     - Best For: Hacker tools, cybersecurity platforms, low-level systems utilities.\n\n### Step 2: Product & Audience Alignment Matrix\n1. **The Persona-to-Genre Fit**:\n   - Who is evaluating the tool?\n     - Enterprise Security Chief -> Swiss or Soft-Tech (Signals rigor and compliance).\n     - Individual Backend Hacker -> Terminal or Neo-Brutalist (Signals speed and anti-corporate posture).\n     - Creative Director -> Editorial or Experimental.\n\n### Step 3: Curated Moodboarding & Token Synthesis\n1. **The Anti-Pinterest Moodboard Discipline**:\n   - Collect 8–12 real-world artifacts: physical architecture, print magazine layouts, vintage computing hardware, and top-tier digital interfaces.\n   - Extract the DNA: Typography weights, surface border radius, color contrast, and spacing density.\n\n### Step 4: Concept Spikes & The Direction Matrix\n1. **Generate 2 Radically Contrasting Concepts**:\n   - Never design just 1 visual direction. Create 2 distinct design spikes for the core screen:\n     - Direction A: Restrained Swiss \u002F Monochromatic.\n     - Direction B: Ambient Soft-Tech \u002F High Contrast.\n   - Put both in front of target users to test comprehension, speed, and trust.\n\n---\n\n## Deliverable Format: Visual Design Direction Brief (`DESIGN-DIRECTION.md`)\n\n```markdown\n# Visual Design Direction Specification: [Product Name]\n\n## 1. Selected Visual Genre: **Swiss Industrial \u002F High-Density**\n- **Core Aesthetic**: Stark, grid-disciplined, utilitarian, high-contrast.\n- **Target Audience**: Infrastructure engineers, database administrators.\n- **Brand Feeling**: Precise, unpretentious, lightning-fast, dependable.\n\n## 2. Foundational Design Primitives\n- **Grid Structure**: 8px baseline grid; 12-column responsive layout.\n- **Border Radius**: Sharp 4px radius on all containers; 0px on tables.\n- **Borders**: 1px solid high-contrast dividers (`#27272A`).\n- **Typography**: Monospace data display (`JetBrains Mono`); Sans-serif labels (`Inter`).\n- **Surface Elevation**: Dark slate `#090D16` canvas with crisp `#18181B` card containers.\n\n## 3. Competitive Visual Differentiation\n- Competitors all use generic light-purple SaaS templates with stock 3D floating icons.\n- Our direction uses authentic terminal captures, dense monospace telemetry tables, and stark black-and-white contrast with single emerald status indicators.\n```\n\n---\n\n## Worked Example: Database Tool Visual Direction Selection\n\n- **Challenge**: Database startup originally used soft pastel purple gradients; customers questioned whether the database could handle high-throughput enterprise workloads.\n- **Pivot**: Shifted visual direction to Swiss Industrial: deep charcoal background, sharp 2px corners, high-density data tables, and stark neon-amber status indicators.\n- **Impact**: Enterprise pilot conversions increased 40%; customers remarked that the software felt \"solid as industrial steel\".\n\n---\n\n## Verification Checklist\n\n- [ ] Chosen visual genre explicitly matches audience persona and cognitive needs.\n- [ ] At least 2 contrasting visual directions were developed and evaluated.\n- [ ] Border radius, border stroke, typography, and spacing density are codified.\n- [ ] Direction provides visible contrast against generic category competitor tropes.\n- [ ] Direction supports high-density information architecture without legibility loss.\n\n---\n\n## Anti-Patterns\n\n- **Designing in a Vacuum**: Picking a trendy aesthetic from Twitter\u002FDribbble that contradicts the software's functional utility.\n- **The Generic Purple Blob**: Defaulting to purple gradients and floating 3D spheres for every B2B application.\n- **Aesthetic Over Density**: Prioritizing huge whitespace and giant typography on an analytics dashboard where users need to see 50 rows of data.\n",{"name":5,"group":24,"description":7,"last_reviewed":25},"Direction",1788652800000,"main","502b1a762b2c40a4ad7faa6297e2ebf7e4682efc","skills\u002Fdesign-direction",1,"https:\u002F\u002Fgithub.com\u002Fpoorvith-mp\u002Fskills-design","https:\u002F\u002Fgithub.com\u002Fpoorvith-mp\u002Fskillary","https:\u002F\u002Fgithub.com\u002Fpoorvith-mp","poorvithmp.com","Shipping tools for problems people notice too late.","2026-10-02 21:32:17",{"source":8,"skillName":5,"commands":37,"prompt":47,"zipAvailable":48},[38,41,44],{"tool":39,"command":40},"npx","npx skills add poorvith-mp\u002Fskills-design --skill design-direction",{"tool":42,"command":43},"bunx","bunx skills add poorvith-mp\u002Fskills-design --skill design-direction",{"tool":45,"command":46},"pnpm","pnpm dlx skills add poorvith-mp\u002Fskills-design --skill design-direction","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fpoorvith-mp\u002Fskills-design\u002Fblob\u002Fmain\u002Fskills\u002Fdesign-direction\u002FSKILL.md",true,[50,56],{"path":51,"resourceType":52,"resourceTypeDesc":53,"sizeBytes":54,"sourceHtmlUrl":55},"design-direction.skill","OTHER","其他",3616,"https:\u002F\u002Fgithub.com\u002Fpoorvith-mp\u002Fskills-design\u002Fblob\u002Fmain\u002Fskills\u002Fdesign-direction\u002Fdesign-direction.skill",{"path":57,"resourceType":58,"resourceTypeDesc":59,"sizeBytes":60,"sourceHtmlUrl":61},"evals\u002Frouting.yaml","REFERENCE","参考文档",1023,"https:\u002F\u002Fgithub.com\u002Fpoorvith-mp\u002Fskills-design\u002Fblob\u002Fmain\u002Fskills\u002Fdesign-direction\u002Fevals\u002Frouting.yaml",[63,70,76,82,88,95],{"skillNo":64,"name":65,"nameZh":6,"description":66,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":67,"categories":68,"keywords":69,"publishedAt":19},"01M7906MDY214MTS6J24WC9HCM","youtube-thumbnail-maker","Moved to modernized catalog in skillary. Removed in v4.1.","https:\u002F\u002Fgithub.com\u002Fpoorvith-mp\u002Fskills-design\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube-thumbnail-maker\u002FSKILL.md",[],[],{"skillNo":71,"name":72,"nameZh":6,"description":66,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":73,"categories":74,"keywords":75,"publishedAt":19},"01M7906JSPSGETSSTXYTEDN5GT","youtube-popup-graphic","https:\u002F\u002Fgithub.com\u002Fpoorvith-mp\u002Fskills-design\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube-popup-graphic\u002FSKILL.md",[],[],{"skillNo":77,"name":78,"nameZh":6,"description":66,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":81,"publishedAt":19},"01M7906GYHJ8Z846MTA9FPEVE9","whimsy-injector","https:\u002F\u002Fgithub.com\u002Fpoorvith-mp\u002Fskills-design\u002Fblob\u002Fmain\u002Fskills\u002Fwhimsy-injector\u002FSKILL.md",[],[],{"skillNo":83,"name":84,"nameZh":6,"description":66,"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},"01M7906FK39C4JEE36EXD8R8ZC","visual-storyteller","https:\u002F\u002Fgithub.com\u002Fpoorvith-mp\u002Fskills-design\u002Fblob\u002Fmain\u002Fskills\u002Fvisual-storyteller\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},"01M7906D196H7PN42711NX46RE","ux-researcher","Moved to ux-research in skills-design. Removed in v4.1.","https:\u002F\u002Fgithub.com\u002Fpoorvith-mp\u002Fskills-design\u002Fblob\u002Fmain\u002Fskills\u002Fux-researcher\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},"01M7906A5DJYRN1P5MQJPNN53K","ux-research","Plan and run usability studies and behavioural analysis, then turn findings into research-backed personas. Use when running usability tests, journey mapping, or observing user behavior.","https:\u002F\u002Fgithub.com\u002Fpoorvith-mp\u002Fskills-design\u002Fblob\u002Fmain\u002Fskills\u002Fux-research\u002FSKILL.md",[],[]]