跳到正文
FunCoding

搜索

搜索文档、Skill 和 MCP

develop-design-rationale

Documents the reasoning behind design decisions including alternatives considered, trade-offs evaluated, and principles applied. Use when making significant UX decisions, aligning with stakeholders on design direction, or preserving design context for future reference.

前端开发715skills/develop-design-rationale/SKILL.md

安装

把这段话发给 Claude Code、Codex 或 Cursor。智能体会先检查安全性,你确认后才安装。

读取 https://funcoding.ai/skills/product-on-purpose/pm-skills/develop-design-rationale/install.md ,按里面的步骤帮我安装这个 Skill。

SKILL.md

Design Rationale

A design rationale document captures the "why" behind design decisions.the context, constraints, alternatives considered, and reasoning that led to a particular solution. While designs themselves show what was built, rationale documents preserve institutional knowledge about why it was built that way.

When to Use

  • When making significant UX decisions that affect user experience
  • Before design reviews to prepare stakeholder discussions
  • When multiple valid approaches exist and the choice needs justification
  • To onboard new team members to existing design decisions
  • When revisiting past decisions to understand original reasoning
  • During design system evolution to document pattern choices

When NOT to Use

  • The decision is architectural or a technology selection -> use develop-adr (Nygard format)
  • You need stakeholder alignment on the overall solution direction -> use develop-solution-brief
  • You are documenting exploration findings rather than a decision -> use develop-spike-summary
  • The decision is trivially reversible and low-stakes: a rationale document adds ceremony; record the reasoning in the PR or ticket instead

Instructions

When asked to document design rationale, follow these steps:

  1. State the Decision Begin with a clear, one-sentence summary of what design decision was made. This becomes the title and reference point for the document.

  2. Describe the Context Explain the situation that prompted this decision. What problem were you solving? What constraints existed? What user needs informed the direction? Include relevant research findings.

  3. List Options Considered Document at least 2-3 alternatives that were evaluated. For each option, describe what it would look like and its key characteristics. Be fair to all options.avoid strawmen.

  4. Define Evaluation Criteria Specify how options were assessed: usability heuristics, technical feasibility, brand alignment, user research findings, business requirements, or design principles.

  5. Explain the Reasoning Walk through why the chosen option best meets the criteria. Be explicit about trade-offs.what you gained and what you sacrificed. Acknowledge where the decision is reversible vs. irreversible.

  6. Document Trade-offs Accepted Every design decision involves trade-offs. Name what you gave up and why it was acceptable. This honesty helps future teams understand constraints.

  7. Note Follow-up Considerations Capture anything that needs attention later: metrics to watch, conditions that might warrant revisiting the decision, or related decisions to make.

Output Format

Use the template in references/TEMPLATE.md to structure the output. A complete rationale fills every template section: Decision Summary; Context; Options Considered; Evaluation; Decision Rationale; Trade-offs Accepted; Reversibility; Follow-up Considerations; Supporting Materials; and Decision History.

Quality Checklist

Before finalizing, verify:

  • Decision is clearly stated in one sentence
  • Context explains the "why now" and constraints
  • Multiple alternatives are documented fairly
  • Evaluation criteria are explicit
  • Reasoning addresses why chosen option beats alternatives
  • Trade-offs are honestly acknowledged
  • A reader who inherits this design can reconstruct why the chosen option won without asking anyone

Examples

See references/EXAMPLE.md for a completed example.

相似的 Skill

frontend-design
anthropics/skills180k

frontend-design

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

前端开发

web-artifacts-builder
anthropics/skills180k

web-artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

前端开发

api-and-interface-design
addyosmani/agent-skills103k

api-and-interface-design

Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.

前端开发

frontend-ui-engineering
addyosmani/agent-skills103k

frontend-ui-engineering

Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.

前端开发

performance-optimization
addyosmani/agent-skills103k

performance-optimization

Optimizes application performance across frontend, backend, queries, and databases. Use when performance requirements exist, when you suspect performance regressions, when Core Web Vitals or load times need improvement, when N+1 query patterns need fixing, or when profiling reveals bottlenecks.

前端开发

html-ppt-graphify-dark-graph
nexu-io/open-design100k

html-ppt-graphify-dark-graph

OpenDesign's feature business case for the plugin marketplace: the user pain, options, tradeoffs, and the measure of success. Built as a decision-grade product management deck for PM, eng, design, leadership.

前端开发