Design Methodology Atlas
Choose how to think before choosing how to style. Pick one discovery methodology, one system methodology, one evaluation methodology. Source: frontend-frontier-pack/codex-skill/frontend-frontier/references/design-methodology-atlas.md
Discovery Methodologies
Human-centered design -- best for new products, unclear user needs, high-risk workflow changes. Core: observe, synthesize, prototype, test. Failure mode: empathy theater with no product conviction.
Design thinking -- best for early-stage exploration, cross-functional workshops. Core: desirability, feasibility, viability. Failure mode: endless workshops without sharper bets.
Double Diamond -- best for structuring ambiguity, forcing divergence before convergence. Core: discover, define, develop, deliver. Failure mode: neat diagrams with weak synthesis.
Jobs to Be Done -- best for messaging, prioritization, positioning. Core: identify the progress the user is trying to make. Failure mode: vague job statements that do not shape design decisions.
Lean UX -- best for shipping under uncertainty. Core: assumptions, hypothesis, smallest experiment, learning. Failure mode: using "lean" as excuse for under-designed work.
System Methodologies
Atomic design -- atoms, molecules, organisms, templates, pages. Best when teams build screens instead of systems. Failure mode: taxonomy obsession.
Design tokens methodology -- primitive, semantic, component tokens. Best for multi-brand systems and design-to-code alignment. Failure mode: tokens without semantics.
Platform-native -- follow host patterns (Apple HIG, Fluent, Polaris, GOV.UK). Best when the ecosystem already trained the user.
Content-first -- structure language and task flow before visual flourish. Best for docs, admin tools, forms, public service.
Information architecture -- organize, label, relate information. Best when users cannot find things in fewer than 3 steps.
Evaluation Methodologies
Heuristic evaluation -- fast reviews against visibility, consistency, user control, error prevention, minimalist design. Best before formal research.
Accessibility-first -- semantic structure, keyboard support, contrast, reduced motion, assistive tech. Best for every product, always.
Performance-first -- define budgets, measure early, cut work that misses experience targets. Best for narrative pages, shader/3D, dashboards, mobile.
Product Critique Workflow
product-design-critic is a useful reference-only skill candidate for product judgment. Its workflow is: user goal -> job to be done -> primary surface -> supporting context -> critical states -> trust/governance -> recommendation with tradeoffs. The emphasis is sharper than generic polish: decide the owning surface, clarify hierarchy, account for trust and governance, review the full state set, then use visual craft after the product call is clear. Source: X/@dhasandev, 2026-03-15; Source: Gist product-design-critic.md, checked 2026-07-02
Keep it as a reference rather than importing it as an active skill for now. Local coverage already exists across Frontend and Design Skills, Frontend and Design Skills, design-engineering-polish, and the taste skill routes, and the gist currently exposes only product-design-critic.md while referencing companion files that are not present in the gist API. Source snapshot on 2026-07-02: gist owner danialhasan, file product-design-critic.md, raw file e145e518e59ce9222f54075f0407e9a5ff182a1d, single history version 62b3ef3e8bd6f2300702c707ab5a9722fe871f9e, created 2026-03-15, updated 2026-06-06. Source: GitHub Gist API, 2026-07-02
Major Design-System Families
| System | Teaches | Best for |
|---|---|---|
| Apple HIG | Hierarchy, harmony, restraint | High-trust consumer/OS-like surfaces |
| Material/Material Web | Systematic tokens, expressive theming | Broad component coverage |
| Fluent 2 | Token layering, elevation, AI/productivity patterns | Enterprise, Copilot-style |
| Carbon | Documentation rigor, a11y baked in | B2B, dashboards, internal tools |
| Atlassian | Tokens + lint + dev tooling | Multi-team governance |
| GOV.UK | Research-backed patterns, content clarity | Forms, task completion, trust-critical |
| Shopify Polaris | Host-native embedding, action hierarchy | Embedded business apps |
Recommended Combinations
Startup product: JTBD + lean UX / atomic + tokens / heuristic + a11y. Enterprise SaaS: human-centered / tokens + IA + platform-native / heuristic + a11y + performance. Docs product: IA + content-first / tokens + component-driven / a11y + searchability. Frontier marketing microsite: JTBD + design thinking / art-direction thesis + motion + tokens / performance + a11y + heuristic.
Timeline
- 2026-07-02 | Added
product-design-criticas a reference-only product critique workflow after inspecting the X bookmark screenshot, raw gist, and gist API snapshot. Decision: candidate only, no active skill import, because local skills already cover the route and the gist references missing companion files. Source: X/@dhasandev, 2026-03-15; Source: GitHub Gist API, 2026-07-02