前端开发工具【免费下载链接】dillingerThe last Markdown editor, ever.项目地址https://gitcode.com/gh_mirrors/di/dillinger点击查看免费下载导读本文基于开源仓库 DillingerThe last Markdown editor, ever.中内置的 frontend-design 技能文档 及其配套参考体系系统讲解 Web UI 设计中如何思考与决策的完整方法论从 UX 心理学定律、色彩与字体系统、布局与动效原则到反模式规避与审计脚本实战。读完本文你将掌握一套可复用的设计决策流程能够在任何前端项目中包括本仓库的 Next.js Tailwind CSS 技术栈独立完成有依据、有深度的界面设计而非机械套用模板。1. 技能文档的核心哲学THINK, dont memorizefrontend-design SKILL.md 开篇即确立两条核心准则Philosophy:Every pixel has purpose. Restraint is luxury. User psychology drives decisions.Core Principle:THINK, dont memorize. ASK, dont assume.每个像素都有目的设计不是堆砌装饰而是围绕用户心理做出有意图的决策克制是奢侈留白、简洁本身就是高级感不要背诵、不要假设文档通篇强调教原则不教固定数值Teaches principles, not fixed values拒绝给出可照抄的 hex 色值或字体名而是训练设计者根据上下文推导结论。这一点与仓库自身的 Tailwind 配置形成呼应本项目的 tailwind.config.ts 中定义了一套语义化的设计令牌如plum: #35D7BB、text-muted: #A0AABF、bg-sidebar: #2B2F36以及分层级的zIndex从sidebar: 1到modal: 50、toast: 60。这正是设计令牌 语义命名思想的落地——设计师关心的是语义层主色、侧边栏、模态框而非每次硬编码十六进制值。2. 选择性阅读规则MANDATORY该 Skill 采用核心必读 按需选读的知识组织方式避免每次设计任务都重读全部文档文件状态何时阅读ux-psychology.md必读始终最先阅读color-system.md⚪ 可选涉及颜色/调色板决策typography-system.md⚪ 可选字体选择/搭配visual-effects.md⚪ 可选玻璃拟态、阴影、渐变animation-guide.md⚪ 可选需要动画motion-graphics.md⚪ 可选Lottie、GSAP、3Ddecision-trees.md⚪ 可选上下文模板规则ux-psychology.md 永远先读其余文件仅在相关时阅读。这种分级结构与开发者日常面对文档的方式一致先掌握底层心理学规律再针对具体设计子问题查阅专项指南。3. 关键红线ASK BEFORE ASSUMING必读设计任务中最常见的失败模式是 AI 或开发者用个人偏好代替用户需求。该文档对此设立了强制约束当用户需求含糊时必须提问而不是默认颜色未指定→ 询问你偏好什么色系蓝/绿/橙/中性/其他风格未指定→ 询问你想要什么风格极简/大胆/复古/未来/有机布局未指定→ 询问你有布局偏好吗单列/网格/非对称/全宽同时文档明确列出AI 默认倾向反安全区ANTI-SAFE HARBOR这些是生成式 AI 反复产出廉价同质设计的根源AI 默认倾向为什么糟糕应当思考Bento Grids现代俗套每个 AI 设计都在用这个内容真的需要网格吗Hero 左右分栏可预测、无聊巨型排版或纵向叙事如何Mesh/Aurora 渐变新的偷懒背景激进的配色组合如何玻璃拟态GlassmorphismAI 眼中的高级高对比实色扁平如何深青/金融蓝从紫色禁令逃逸的安全港为什么不用红、黑、霓虹绿Orchestrate / EmpowerAI 腔文案人类会怎么说深色背景 霓虹辉光过度使用、AI 脸品牌真正需要什么全部圆角泛化/安全哪里该用锋利的粗野主义边缘每个你选择的安全结构都会让你离通用模板更近一步。要冒险。这条原则在 Dillinger 仓库中有实际印证项目的品牌色选择了青绿色plum: #35D7BB而非千篇一律的蓝紫渐变编辑器区域使用高对比的实色背景分层bg-sidebar: #2B2F36、bg-navbar: #373D49、bg-highlight: #1D212A而非滥用玻璃拟态。4. 第一步永远是约束分析Constraint Analysis在任何设计工作开始前先回答以下问题未确定部分向用户确认约束问题为什么重要时间线有多少时间决定复杂度内容内容就绪还是占位影响布局灵活性品牌有既有规范吗可能决定颜色/字体技术用什么技术栈影响能力边界受众具体是谁驱动所有视觉决策受众 → 设计取向映射受众思考方向Gen Z大胆、快速、移动优先、真实千禧一代干净、极简、价值驱动Gen X熟悉、可信、清晰婴儿潮一代易读、高对比、简单B2B专业、数据导向、信任奢侈品克制优雅、留白decision-trees.md 中进一步将受众决策树细化为颜色/字体/布局/效果/方法五维度矩阵例如 Gen Z 强调大胆鲜艳 大字可变字体 垂直滚动 游戏化交互 真实无公司腔而 B2B 则要求专业调色板 清晰数据友好字体 网格化布局 克制的专业效果 ROI 导向文案。5. UX 心理学核心定律ux-psychology.md 精要ux-psychology.md 是必读文件其核心内容可归纳为五大定律 情绪设计 信任构建5.1 五大核心定律定律原理应用希克定律Hicks Law选择越多决策越慢决策时间 a b × log₂(n1)导航项 ≤ 5-7 个表单分步渐进式披露能默认就默认筛选器优先常用项菲茨定律Fitts Law到达目标的时间 距离与尺寸的函数MT a b × log₂(1 D/W)主按钮更大≥44px 高移动端触控目标 ≥ 44×44px重要操作靠近光标自然位置利用魔法角落无限边缘易命中米勒定律Millers Law工作记忆约容纳 7±2 个组块列表按 5-7 项分组导航 ≤ 7 项长内容用标题切分电话号码分块555-123-4567冯·雷斯托夫效应Von Restorff与众不同的事物更易被记住CTA 按钮与周围颜色显著区分定价页高亮推荐套餐新功能加角标序列位置效应Serial Position列表首尾项最易被记住导航首尾放最重要项长页面顶部hero与底部重复 CTA菲茨定律给出了可直接落地的按钮层级 CSS/* 按重要性定尺寸 */ .btn-primary { height: 48px; padding: 0 24px; } .btn-secondary { height: 40px; padding: 0 16px; } .btn-tertiary { height: 36px; padding: 0 12px; } /* 移动端触控目标 */ media (hover: none) { .btn { min-height: 44px; min-width: 44px; } }5.2 情绪设计三层次唐·诺曼VISCERAL (即时) → 第一印象颜色、图像、整体感受 BEHAVIORAL (使用) → 使用中速度、反馈、效率 REFLECTIVE (记忆) → 使用后我喜欢这个产品所代表的我自己三个层次各有对应的实现手法内脏层用渐变 hero 与微交互动画营造第一眼美感行为层用即时反馈点击 → Saving... → 成功提示确保功能愉悦反思层用品牌故事、价值观与社会认同建立身份连接。5.3 信任构建系统信任信号按类别布局头部信任横幅免运费 | 30 天退货 | 安全结账、Hero 区社会认同10000 用户信赖、产品页评论与安全徽章、结账页支付图标与 SSL 徽章、页脚联系信息与认证。5.4 认知负荷管理认知负荷分三类内在负荷任务固有复杂度需拆解、外在负荷差设计制造必须消除、关联负荷学习所需应支持。五大降载策略简化视觉噪音、信息分块fieldset 分步骤、渐进式披露高级选项 ▼折叠、使用熟悉模式标准导航位置、惯例图标含义、外化信息自动填充 订单摘要不要求用户记忆。5.5 伦理说服设计技巧伦理用法阴暗模式避免稀缺性真实库存虚假倒计时社会认同真实评价伪造证言权威性真实资质误导徽章紧迫性真实截止日期人为制造 FOMO承诺进度保存情感勒索轻推Nudge模式包括智能默认预选推荐套餐单选、锚定效应显示原价$99→ 现价$79 省 20%、实时社会认同来自纽约的 Sarah 刚刚购买、进度承诺60% 完成快好了。6. 布局原则6.1 黄金比例φ 1.618用于比例和谐 ├── 内容 : 侧边栏 ≈ 62% : 38% ├── 每级标题尺寸 上一级 × 1.618戏剧性缩放 ├── 间距可循sm → md → lg每级 × 1.6186.2 8 点网格所有间距与尺寸均为 8 的倍数 ├── 紧凑: 4px微调半步 ├── 小: 8px ├── 中: 16px ├── 大: 24px, 32px ├── 特大: 48px, 64px, 80px └── 按内容密度调整8 点网格思想在 Dillinger 仓库中同样有迹可循其 tailwind.config.ts 定义spacing: { sidebar: 270px, gutter: 32px }gutter: 32px正是 8 的倍数保证页面内边距与内容区域的分隔节奏统一。6.3 关键尺寸原则元素考量触控目标最小舒适点按尺寸按钮高度按重要性层级输入框与按钮等高对齐卡片内边距一致、透气阅读宽度每行 45-75 字符最优7. 色彩原则color-system.md 反复强调不要背 hex 值学会思考颜色。7.1 60-30-10 规则60% → 主色/背景平静、中性基底 30% → 次色支撑区域 10% → 强调色CTA、高亮、注意力实现模式:root { /* 60% - 根据明暗模式与情绪选择 */ --color-bg: /* 中性色: 白、米白或深灰 */ --color-surface: /* 与背景略有差异 */ /* 30% - 根据品牌或上下文 */ --color-secondary: /* 主色的柔和版或中性色 */ /* 10% - 根据目标动作/情绪 */ --color-accent: /* 鲜艳、抓眼 */ }7.2 色彩心理学速查需要……考虑色相避免信任、平静蓝色系激进的红成长、自然绿色系工业灰能量、紧迫橙、红被动的蓝奢华、创意深青、金、祖母绿廉价亮色干净、极简中性色压倒性色彩⚠️紫色被列为 AI 滥用禁色PURPLE BANAI 生成的界面过度使用紫罗兰文档要求改用深青Deep Teal/栗色Maroon/祖母绿Emerald。7.3 HSL 调色板生成法与其记 hex不如操纵 HSL色相 0-360 / 饱和度 0-100% / 亮度 0-100%。给定任意基色即可生成完整色阶亮度阶 50 (最浅) → L: 97% 100 → L: 94% 200 → L: 86% 300 → L: 74% 400 → L: 66% 500 (基准) → L: 50-60% 600 → L: 48% 700 → L: 38% 800 → L: 30% 900 (最深) → L: 20%饱和度调整专业/企业用低饱和40-60%年轻/趣味用高饱和70-90%暗色模式降低 10-20%。7.4 暗色模式原则绝不用纯黑→ 用带轻微色相的深灰绝不用纯白文字→ 用 87-92% 亮度降低饱和度→ 鲜艳色在暗色下刺眼亮度海拔→ 层级越高的元素越亮base → cards → modals → popups 逐层变亮。7.5 WCAG 对比度级别正常文本大文本AA最低4.5:13:1AAA增强7:14.5:1安全模式浅底文字亮度 ≤35%深底文字亮度 ≥85%主色按钮需确保背景与文字对比充足。8. 字体原则typography-system.md 同样拒绝固定值强调理解系统。8.1 模块化比例Modular Scale选定基准字号与比例用基准 × 比例ⁿ生成全部字号比例数值感觉适用小二度 Minor Second1.067极微妙高密度 UI、小屏大二度 Major Second1.125微妙紧凑界面小三度 Minor Third1.2舒适移动应用、卡片大三度 Major Third1.25均衡通用 Web最常见纯四度 Perfect Fourth1.333明显编辑型、博客纯五度 Perfect Fifth1.5戏剧化标题、营销页黄金比例 Golden Ratio1.618冲击力最大Hero、展示区Dillinger 仓库的字体栈设计即是对比 和谐搭配的实例tailwind.config.ts 中sans采用 Source Sans Pro人类主义无衬线用于正文serif采用 Georgia/Cambria 用于阅读场景mono采用 Ubuntu Mono 用于代码与 Markdown 编辑场景——三类字体明确分工且总量控制在 3 个族以内。8.2 字体配对策略策略做法结果对比衬线标题 无衬线正文经典编辑风同族一个可变字体不同字重凝聚、现代同设计师同一字厂出品比例和谐同年代同时代字体历史一致性8.3 行高与行长行高标题 1.1-1.3正文 1.4-1.6长文 1.6-1.8UI 元素 1.2-1.4行长每行 45-75 字符为最佳max-width: 65chch 为 0 字符宽度随字号自适应移动端 35-50 字符、侧边栏文本 30-45 字符。8.4 响应式字体clamp/* 语法: clamp(MIN, PREFERRED, MAX) */ font-size: clamp( MINIMUM_SIZE, FLUID_CALCULATION, /* 通常: base 视口相对单位 */ MAXIMUM_SIZE );缩放策略正文轻微缩放1rem → 1.125rem、副标题中度缩放、标题更大幅、展示文字最大幅。8.5 字重与字距字重对比应至少跨越 2 级400 正文 700 标题为佳400500 太弱每页字重上限 3-4 种字距Tracking展示/大标题 -2% 至 -4%标题 -1% 至 -2%正文 0%小字 1% 至 2%全大写必须加宽 5% 至 10%。8.6 层级与可读性心理用户按F 型阅读模式扫描页面先横读首行、再沿左侧下行、遇副标题再横读。因此关键信息应放左侧与标题位置正文以 3-4 行短段落 清晰小标题 项目符号分块降低认知负担。9. 视觉效果原则visual-effects.md 覆盖玻璃拟态、新拟态、阴影层级、渐变、发光与叠加技术。9.1 玻璃拟态Glassmorphism.glass { /* 透明度: 深底 0.1-0.3, 浅底 0.5-0.8 */ background: rgba(R, G, B, OPACITY); /* 模糊: 8-12px 细腻, 16-24px 强烈 */ backdrop-filter: blur(AMOUNT); /* 边框: 定义边缘 */ border: 1px solid rgba(255, 255, 255, OPACITY); border-radius: YOUR_RADIUS; }适用场景彩色/图片背景之上、模态框与覆盖层、滚动内容后的导航栏。禁用场景文本密集内容可读性差、低对比场景、无障碍关键内容、性能受限设备。文档特别警告标准蓝白玻璃拟态已是现代俗套要么激进地使用要么干脆不用。9.2 阴影层级Shadow Hierarchy阴影表示海拔层级 0 无阴影 → 层级 4 深阴影浮动元素。自然阴影原则Y 偏移大于 X光从上方来低不透明度细腻 5-15%明显 15-25%多层阴影模拟真实环境光 直射光模糊随偏移缩放。暗色模式下阴影可见性差可增加不透明度或改用辉光。9.3 渐变与发光和谐渐变色环相邻色类似色或同一色相不同亮度避免互补对生硬加中间色标使过渡更平滑文本发光多层text-shadow模糊逐层增大脉冲发光动画keyframes glow-pulse在 0/100% 小模糊与 50% 大模糊之间往复。9.4 图片叠加与性能文本置于图片之上时必须加渐变叠加从透明到不透明保证可读性。性能方面transform与opacity是 GPU 廉价动画属性width/height/top/left/margin/padding/box-shadow会触发重排昂贵will-change仅用于重型动画并应慎用每个页面 ≤ 3 处必须支持prefers-reduced-motion。10. 动画原则animation-guide.md 建立动画即沟通的完整时序体系。10.1 时长选择用途范围原因即时反馈50-100ms低于感知阈值微交互100-200ms快但可感知标准过渡200-300ms舒适节奏复杂动画300-500ms有时间跟随页面过渡400-600ms平滑交接Wow/高级效果800ms戏剧化、弹性、分层决策三问元素移动多远变化需要多显眼用户在等待还是后台播放10.2 缓动Easing选择动作缓动原因进入Ease-out减速、落定离开Ease-in加速、退场强调Ease-in-out平滑、刻意趣味Bounce欢乐、有活力10.3 微交互与加载态微交互四职责反馈、引导、状态、愉悦。按钮状态机hover轻微抬升/变色/缩放→ activescale(0.95)按压感→ focus轮廓/光环→ loadingspinner/骨架屏→ success对勾/变色。加载态选择1s 无需指示1-3s 用 spinner3s 用进度条或骨架屏未知时长用不确定指示器。10.4 页面过渡与滚动动画简单规则退场快、进场慢旧内容快速淡出新内容动画进入。方向匹配导航方向前进从右滑入、后退从左滑入、深入从中心放大、回退缩小。滚动触发用 Intersection Observer只动画 transform/opacity并尊重 reduced-motion。11. 高级动效Lottie、GSAP、SVG、3D 与粒子motion-graphics.md 是进阶参考需求工具关键原则复杂品牌动画LottieAfter Effects Bodymovin 导出 JSON文件 100KB循环克制提供静态回退懒加载序列化/滚动触发GSAP ScrollTrigger用 timeline 编排stagger 间隔 0.05-0.15sScrollTrigger 在视口 70-80% 处触发卸载时必须 kill/revert 防内存泄漏Logo/图标动画SVGstroke-dashoffset 描线、路径 morph动态获取路径长度描线 1-3sease-out3D 效果CSS 3Dperspective 500-1500px、preserve-3d、rotateX/Y/Z、translateZ父容器设 perspective翻转需backface-visibility: hiddenSafari 渲染需测试氛围背景tsParticles / Canvas / Three.js默认 30-50 粒子速度 0.5-2透明度 0.3-0.6移动端禁用或降级滚动驱动原生 CSSanimation-timeline: scroll()/view()揭示动画约 25% 入场触发视差用连续进度节流计算动效决策树节选复杂品牌动画 → Lottie 序列化滚动触发 → GSAP ScrollTrigger Logo/图标动画 → SVGstroke 或 morph 交互式 3D 效果 → CSS 3D简单或 Three.js复杂 氛围背景 → tsParticles 或 Canvas 简单入场/悬停 → CSS keyframes 或 Framer Motion12. Wow Factor 检查清单与反模式12.1 高级感指标慷慨的留白奢华 呼吸空间微妙的深度与立体感平滑、有目的的动画细节到位对齐、一致性连贯的视觉节奏定制元素而非全默认12.2 惰性设计反模式❌ 不要做未加考量的系统默认字体不匹配的库存图片不一致的间距过多竞争色无层级的文字墙不可访问的对比度12.3 AI 倾向模式明确规避每个项目同款配色深色 霓虹作为默认紫色/紫罗兰泛滥紫色禁令简单落地页硬套 Bento 网格Mesh 渐变与辉光滥用千篇一律的布局结构Vercel 克隆不询问用户偏好12.4 暗黑模式不道德设计隐藏成本、虚假紧迫感、强制动作、欺骗性 UI、确认羞辱Confirmshaming。13. 决策流程总结每个设计任务的五步法1. 约束 CONSTRAINTS └── 时间线、品牌、技术、受众是什么 └── 不清楚 → 问 2. 内容 CONTENT └── 存在什么内容 └── 层级是什么 3. 风格方向 STYLE DIRECTION └── 什么适合当前上下文 └── 不清楚 → 问不要默认 4. 执行 EXECUTION └── 套用上述原则 └── 对照反模式检查 5. 评审 REVIEW └── 这服务用户了吗 └── 这与我的默认值不同吗 └── 我会为它自豪吗decision-trees.md 还提供了按项目类型展开的上下文模板E-commerce信任优先 行动导向 可扫描性、SaaS Dashboard功能优先 冷静 UI 一致模式、Landing PageHero 中心 单一主 CTA 情绪连接、Portfolio个性 作品说话 令人难忘每个模板都附有对应的心理学定律应用建议与布局结构图。14. 运行时审计脚本把原则变成可执行检查该 Skill 不仅教理论还提供了可直接运行的审计工具脚本用途用法scripts/ux_audit.pyUX 心理学与可访问性审计python scripts/ux_audit.py project_path从源码结构看ux_audit.py 实现了80 项检查横跨十一大类核心心理学定律Hicks/Fitts/Millers/Von Restorff/Serial Position、情绪设计三层次、信任构建、认知负荷管理、伦理说服设计、字体系统 9 项字族上限 3、行长 45-75ch、行高、字距、字重跨度、clamp 响应式、标题层级顺序、模块化比例、长段落切分、视觉特效 10 项玻璃拟态完整性、阴影自然性、渐变数量、will-change 使用、图片叠加、色彩系统 7 项紫色禁令、60-30-10、暗色模式、WCAG 对比、色彩心理学上下文如餐饮场景禁用蓝色、动画 6 项、动效 7 项、可访问性img alt 等。脚本用法要点从 main 函数 可确认# 审计单个文件或整个目录自动跳过 node_modules/.git/dist/build/.next python scripts/ux_audit.py file_or_directory # JSON 输出便于 CI 集成 python scripts/ux_audit.py path --json输出格式ISSUES硬性问题如导航项 7、检测到紫色、缺失 img alt导致整体FAILWARNINGS软性建议如无主 CTA、无 reduced-motion仅提示退出码0表示合规、1表示存在 issues。审计覆盖文件类型为.tsx/.jsx/.html/.vue/.svelte/.css与 Dillinger 的 Next.js React 技术栈完全匹配——这使它成为交付前对组件代码进行设计自检的理想工具。15. 在 Dillinger 仓库中的落地印证本仓库是对这套设计方法论的鲜活案例语义化设计令牌tailwind.config.ts 以bg-primary/bg-sidebar/bg-navbar/text-muted/border-light/icon-default等语义命名代替裸色值正是60-30-10 规则 语义层的工程化表达克制的动画系统同文件只定义了两种动画——slide-in-from-right 0.2s ease-out进入用 ease-out与fade-in 0.15s ease-out完全符合进入 ease-out与微交互 100-300ms的时长/缓动规范transitionTimingFunction.out-quart采用自定义cubic-bezier(0.25, 1, 0.5, 1)体现有目的而非默认reduced-motion 落实app/globals.css 中实现了完整的prefers-reduced-motion兜底将所有动画/过渡时长压至 0.01ms、迭代次数置 1、滚动行为改 auto与文档尊重用户偏好的要求逐条对应层级 zIndex 系统sidebar:1 → page:2 → editor:3 → preview:4 → overlay:5 → navbar:6 → settings:7 → modal:50 → toast:60本身就是海拔 优先级的数值化对应阴影层级的思想。16. 交付前自检清单结合全部参考文档最终交付前逐项核对用户偏好已询问颜色/风格/布局未指定时必须 ASK与上个项目视觉不同避免重复与默认导航 ≤ 7 项Hicks Law主 CTA 大而醒目Fitts Law Von Restorff内容已分块、有层级Millers Law F 型阅读60-30-10 配色分布、无紫色滥用色彩系统字体 ≤ 3 族、行长 45-75ch、字重跨度 ≥ 2 级字体系统WCAG 对比度达标AA 4.5:1可访问性动画只用 transform/opacity、有 reduced-motion 兜底性能与无障碍已运行python scripts/ux_audit.py path --json且无 ISSUES自动化验证Remember:Design is THINKING, not copying. Every project deserves fresh consideration based on its unique context and users.Avoid the Modern SaaS Safe Harbor!赞分享前端开发工具【免费下载链接】dillingerThe last Markdown editor, ever.项目地址https://gitcode.com/gh_mirrors/di/dillinger点击查看免费下载相关推荐Dillinger 前端设计决策树指南基于上下文的界面设计思考框架与实战模板Dillinger 前端设计决策树指南基于上下文的界面设计思考框架与实战模板 本篇指南基于 Dillinger 仓库中 frontend design 技能包前端开发工具MiGPT 部署教程快速把小爱音箱接入大模型MiGPT 部署教程快速把小爱音箱接入大模型 对小爱同学喊完问题音箱只会回答天气、时间这类固定内容再问别的就露怯——这是传统智能音箱最常见的局限。Mi前端开发工具mediago 前端设计品味规范实战High-Agency Frontend Skill 三轴设计系统与抗 AI 平庸化指南mediago 前端设计品味规范实战High Agency Frontend Skill 三轴设计系统与抗 AI 平庸化指南 这篇指南完整解读 mediago音视频桌面应用后端上一篇HttpRouter性能终极指南为什么它比其他Go路由器快3倍下一篇Argon-Theme用户体验设计提升网站可用性的终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 前端设计系统实战指南：基于 Dillinger 仓库 frontend-design Skill 的 UI 设计决策方法论
前端开发工具【免费下载链接】dillingerThe last Markdown editor, ever.项目地址https://gitcode.com/gh_mirrors/di/dillinger点击查看免费下载导读本文基于开源仓库 DillingerThe last Markdown editor, ever.中内置的 frontend-design 技能文档 及其配套参考体系系统讲解 Web UI 设计中如何思考与决策的完整方法论从 UX 心理学定律、色彩与字体系统、布局与动效原则到反模式规避与审计脚本实战。读完本文你将掌握一套可复用的设计决策流程能够在任何前端项目中包括本仓库的 Next.js Tailwind CSS 技术栈独立完成有依据、有深度的界面设计而非机械套用模板。1. 技能文档的核心哲学THINK, dont memorizefrontend-design SKILL.md 开篇即确立两条核心准则Philosophy:Every pixel has purpose. Restraint is luxury. User psychology drives decisions.Core Principle:THINK, dont memorize. ASK, dont assume.每个像素都有目的设计不是堆砌装饰而是围绕用户心理做出有意图的决策克制是奢侈留白、简洁本身就是高级感不要背诵、不要假设文档通篇强调教原则不教固定数值Teaches principles, not fixed values拒绝给出可照抄的 hex 色值或字体名而是训练设计者根据上下文推导结论。这一点与仓库自身的 Tailwind 配置形成呼应本项目的 tailwind.config.ts 中定义了一套语义化的设计令牌如plum: #35D7BB、text-muted: #A0AABF、bg-sidebar: #2B2F36以及分层级的zIndex从sidebar: 1到modal: 50、toast: 60。这正是设计令牌 语义命名思想的落地——设计师关心的是语义层主色、侧边栏、模态框而非每次硬编码十六进制值。2. 选择性阅读规则MANDATORY该 Skill 采用核心必读 按需选读的知识组织方式避免每次设计任务都重读全部文档文件状态何时阅读ux-psychology.md必读始终最先阅读color-system.md⚪ 可选涉及颜色/调色板决策typography-system.md⚪ 可选字体选择/搭配visual-effects.md⚪ 可选玻璃拟态、阴影、渐变animation-guide.md⚪ 可选需要动画motion-graphics.md⚪ 可选Lottie、GSAP、3Ddecision-trees.md⚪ 可选上下文模板规则ux-psychology.md 永远先读其余文件仅在相关时阅读。这种分级结构与开发者日常面对文档的方式一致先掌握底层心理学规律再针对具体设计子问题查阅专项指南。3. 关键红线ASK BEFORE ASSUMING必读设计任务中最常见的失败模式是 AI 或开发者用个人偏好代替用户需求。该文档对此设立了强制约束当用户需求含糊时必须提问而不是默认颜色未指定→ 询问你偏好什么色系蓝/绿/橙/中性/其他风格未指定→ 询问你想要什么风格极简/大胆/复古/未来/有机布局未指定→ 询问你有布局偏好吗单列/网格/非对称/全宽同时文档明确列出AI 默认倾向反安全区ANTI-SAFE HARBOR这些是生成式 AI 反复产出廉价同质设计的根源AI 默认倾向为什么糟糕应当思考Bento Grids现代俗套每个 AI 设计都在用这个内容真的需要网格吗Hero 左右分栏可预测、无聊巨型排版或纵向叙事如何Mesh/Aurora 渐变新的偷懒背景激进的配色组合如何玻璃拟态GlassmorphismAI 眼中的高级高对比实色扁平如何深青/金融蓝从紫色禁令逃逸的安全港为什么不用红、黑、霓虹绿Orchestrate / EmpowerAI 腔文案人类会怎么说深色背景 霓虹辉光过度使用、AI 脸品牌真正需要什么全部圆角泛化/安全哪里该用锋利的粗野主义边缘每个你选择的安全结构都会让你离通用模板更近一步。要冒险。这条原则在 Dillinger 仓库中有实际印证项目的品牌色选择了青绿色plum: #35D7BB而非千篇一律的蓝紫渐变编辑器区域使用高对比的实色背景分层bg-sidebar: #2B2F36、bg-navbar: #373D49、bg-highlight: #1D212A而非滥用玻璃拟态。4. 第一步永远是约束分析Constraint Analysis在任何设计工作开始前先回答以下问题未确定部分向用户确认约束问题为什么重要时间线有多少时间决定复杂度内容内容就绪还是占位影响布局灵活性品牌有既有规范吗可能决定颜色/字体技术用什么技术栈影响能力边界受众具体是谁驱动所有视觉决策受众 → 设计取向映射受众思考方向Gen Z大胆、快速、移动优先、真实千禧一代干净、极简、价值驱动Gen X熟悉、可信、清晰婴儿潮一代易读、高对比、简单B2B专业、数据导向、信任奢侈品克制优雅、留白decision-trees.md 中进一步将受众决策树细化为颜色/字体/布局/效果/方法五维度矩阵例如 Gen Z 强调大胆鲜艳 大字可变字体 垂直滚动 游戏化交互 真实无公司腔而 B2B 则要求专业调色板 清晰数据友好字体 网格化布局 克制的专业效果 ROI 导向文案。5. UX 心理学核心定律ux-psychology.md 精要ux-psychology.md 是必读文件其核心内容可归纳为五大定律 情绪设计 信任构建5.1 五大核心定律定律原理应用希克定律Hicks Law选择越多决策越慢决策时间 a b × log₂(n1)导航项 ≤ 5-7 个表单分步渐进式披露能默认就默认筛选器优先常用项菲茨定律Fitts Law到达目标的时间 距离与尺寸的函数MT a b × log₂(1 D/W)主按钮更大≥44px 高移动端触控目标 ≥ 44×44px重要操作靠近光标自然位置利用魔法角落无限边缘易命中米勒定律Millers Law工作记忆约容纳 7±2 个组块列表按 5-7 项分组导航 ≤ 7 项长内容用标题切分电话号码分块555-123-4567冯·雷斯托夫效应Von Restorff与众不同的事物更易被记住CTA 按钮与周围颜色显著区分定价页高亮推荐套餐新功能加角标序列位置效应Serial Position列表首尾项最易被记住导航首尾放最重要项长页面顶部hero与底部重复 CTA菲茨定律给出了可直接落地的按钮层级 CSS/* 按重要性定尺寸 */ .btn-primary { height: 48px; padding: 0 24px; } .btn-secondary { height: 40px; padding: 0 16px; } .btn-tertiary { height: 36px; padding: 0 12px; } /* 移动端触控目标 */ media (hover: none) { .btn { min-height: 44px; min-width: 44px; } }5.2 情绪设计三层次唐·诺曼VISCERAL (即时) → 第一印象颜色、图像、整体感受 BEHAVIORAL (使用) → 使用中速度、反馈、效率 REFLECTIVE (记忆) → 使用后我喜欢这个产品所代表的我自己三个层次各有对应的实现手法内脏层用渐变 hero 与微交互动画营造第一眼美感行为层用即时反馈点击 → Saving... → 成功提示确保功能愉悦反思层用品牌故事、价值观与社会认同建立身份连接。5.3 信任构建系统信任信号按类别布局头部信任横幅免运费 | 30 天退货 | 安全结账、Hero 区社会认同10000 用户信赖、产品页评论与安全徽章、结账页支付图标与 SSL 徽章、页脚联系信息与认证。5.4 认知负荷管理认知负荷分三类内在负荷任务固有复杂度需拆解、外在负荷差设计制造必须消除、关联负荷学习所需应支持。五大降载策略简化视觉噪音、信息分块fieldset 分步骤、渐进式披露高级选项 ▼折叠、使用熟悉模式标准导航位置、惯例图标含义、外化信息自动填充 订单摘要不要求用户记忆。5.5 伦理说服设计技巧伦理用法阴暗模式避免稀缺性真实库存虚假倒计时社会认同真实评价伪造证言权威性真实资质误导徽章紧迫性真实截止日期人为制造 FOMO承诺进度保存情感勒索轻推Nudge模式包括智能默认预选推荐套餐单选、锚定效应显示原价$99→ 现价$79 省 20%、实时社会认同来自纽约的 Sarah 刚刚购买、进度承诺60% 完成快好了。6. 布局原则6.1 黄金比例φ 1.618用于比例和谐 ├── 内容 : 侧边栏 ≈ 62% : 38% ├── 每级标题尺寸 上一级 × 1.618戏剧性缩放 ├── 间距可循sm → md → lg每级 × 1.6186.2 8 点网格所有间距与尺寸均为 8 的倍数 ├── 紧凑: 4px微调半步 ├── 小: 8px ├── 中: 16px ├── 大: 24px, 32px ├── 特大: 48px, 64px, 80px └── 按内容密度调整8 点网格思想在 Dillinger 仓库中同样有迹可循其 tailwind.config.ts 定义spacing: { sidebar: 270px, gutter: 32px }gutter: 32px正是 8 的倍数保证页面内边距与内容区域的分隔节奏统一。6.3 关键尺寸原则元素考量触控目标最小舒适点按尺寸按钮高度按重要性层级输入框与按钮等高对齐卡片内边距一致、透气阅读宽度每行 45-75 字符最优7. 色彩原则color-system.md 反复强调不要背 hex 值学会思考颜色。7.1 60-30-10 规则60% → 主色/背景平静、中性基底 30% → 次色支撑区域 10% → 强调色CTA、高亮、注意力实现模式:root { /* 60% - 根据明暗模式与情绪选择 */ --color-bg: /* 中性色: 白、米白或深灰 */ --color-surface: /* 与背景略有差异 */ /* 30% - 根据品牌或上下文 */ --color-secondary: /* 主色的柔和版或中性色 */ /* 10% - 根据目标动作/情绪 */ --color-accent: /* 鲜艳、抓眼 */ }7.2 色彩心理学速查需要……考虑色相避免信任、平静蓝色系激进的红成长、自然绿色系工业灰能量、紧迫橙、红被动的蓝奢华、创意深青、金、祖母绿廉价亮色干净、极简中性色压倒性色彩⚠️紫色被列为 AI 滥用禁色PURPLE BANAI 生成的界面过度使用紫罗兰文档要求改用深青Deep Teal/栗色Maroon/祖母绿Emerald。7.3 HSL 调色板生成法与其记 hex不如操纵 HSL色相 0-360 / 饱和度 0-100% / 亮度 0-100%。给定任意基色即可生成完整色阶亮度阶 50 (最浅) → L: 97% 100 → L: 94% 200 → L: 86% 300 → L: 74% 400 → L: 66% 500 (基准) → L: 50-60% 600 → L: 48% 700 → L: 38% 800 → L: 30% 900 (最深) → L: 20%饱和度调整专业/企业用低饱和40-60%年轻/趣味用高饱和70-90%暗色模式降低 10-20%。7.4 暗色模式原则绝不用纯黑→ 用带轻微色相的深灰绝不用纯白文字→ 用 87-92% 亮度降低饱和度→ 鲜艳色在暗色下刺眼亮度海拔→ 层级越高的元素越亮base → cards → modals → popups 逐层变亮。7.5 WCAG 对比度级别正常文本大文本AA最低4.5:13:1AAA增强7:14.5:1安全模式浅底文字亮度 ≤35%深底文字亮度 ≥85%主色按钮需确保背景与文字对比充足。8. 字体原则typography-system.md 同样拒绝固定值强调理解系统。8.1 模块化比例Modular Scale选定基准字号与比例用基准 × 比例ⁿ生成全部字号比例数值感觉适用小二度 Minor Second1.067极微妙高密度 UI、小屏大二度 Major Second1.125微妙紧凑界面小三度 Minor Third1.2舒适移动应用、卡片大三度 Major Third1.25均衡通用 Web最常见纯四度 Perfect Fourth1.333明显编辑型、博客纯五度 Perfect Fifth1.5戏剧化标题、营销页黄金比例 Golden Ratio1.618冲击力最大Hero、展示区Dillinger 仓库的字体栈设计即是对比 和谐搭配的实例tailwind.config.ts 中sans采用 Source Sans Pro人类主义无衬线用于正文serif采用 Georgia/Cambria 用于阅读场景mono采用 Ubuntu Mono 用于代码与 Markdown 编辑场景——三类字体明确分工且总量控制在 3 个族以内。8.2 字体配对策略策略做法结果对比衬线标题 无衬线正文经典编辑风同族一个可变字体不同字重凝聚、现代同设计师同一字厂出品比例和谐同年代同时代字体历史一致性8.3 行高与行长行高标题 1.1-1.3正文 1.4-1.6长文 1.6-1.8UI 元素 1.2-1.4行长每行 45-75 字符为最佳max-width: 65chch 为 0 字符宽度随字号自适应移动端 35-50 字符、侧边栏文本 30-45 字符。8.4 响应式字体clamp/* 语法: clamp(MIN, PREFERRED, MAX) */ font-size: clamp( MINIMUM_SIZE, FLUID_CALCULATION, /* 通常: base 视口相对单位 */ MAXIMUM_SIZE );缩放策略正文轻微缩放1rem → 1.125rem、副标题中度缩放、标题更大幅、展示文字最大幅。8.5 字重与字距字重对比应至少跨越 2 级400 正文 700 标题为佳400500 太弱每页字重上限 3-4 种字距Tracking展示/大标题 -2% 至 -4%标题 -1% 至 -2%正文 0%小字 1% 至 2%全大写必须加宽 5% 至 10%。8.6 层级与可读性心理用户按F 型阅读模式扫描页面先横读首行、再沿左侧下行、遇副标题再横读。因此关键信息应放左侧与标题位置正文以 3-4 行短段落 清晰小标题 项目符号分块降低认知负担。9. 视觉效果原则visual-effects.md 覆盖玻璃拟态、新拟态、阴影层级、渐变、发光与叠加技术。9.1 玻璃拟态Glassmorphism.glass { /* 透明度: 深底 0.1-0.3, 浅底 0.5-0.8 */ background: rgba(R, G, B, OPACITY); /* 模糊: 8-12px 细腻, 16-24px 强烈 */ backdrop-filter: blur(AMOUNT); /* 边框: 定义边缘 */ border: 1px solid rgba(255, 255, 255, OPACITY); border-radius: YOUR_RADIUS; }适用场景彩色/图片背景之上、模态框与覆盖层、滚动内容后的导航栏。禁用场景文本密集内容可读性差、低对比场景、无障碍关键内容、性能受限设备。文档特别警告标准蓝白玻璃拟态已是现代俗套要么激进地使用要么干脆不用。9.2 阴影层级Shadow Hierarchy阴影表示海拔层级 0 无阴影 → 层级 4 深阴影浮动元素。自然阴影原则Y 偏移大于 X光从上方来低不透明度细腻 5-15%明显 15-25%多层阴影模拟真实环境光 直射光模糊随偏移缩放。暗色模式下阴影可见性差可增加不透明度或改用辉光。9.3 渐变与发光和谐渐变色环相邻色类似色或同一色相不同亮度避免互补对生硬加中间色标使过渡更平滑文本发光多层text-shadow模糊逐层增大脉冲发光动画keyframes glow-pulse在 0/100% 小模糊与 50% 大模糊之间往复。9.4 图片叠加与性能文本置于图片之上时必须加渐变叠加从透明到不透明保证可读性。性能方面transform与opacity是 GPU 廉价动画属性width/height/top/left/margin/padding/box-shadow会触发重排昂贵will-change仅用于重型动画并应慎用每个页面 ≤ 3 处必须支持prefers-reduced-motion。10. 动画原则animation-guide.md 建立动画即沟通的完整时序体系。10.1 时长选择用途范围原因即时反馈50-100ms低于感知阈值微交互100-200ms快但可感知标准过渡200-300ms舒适节奏复杂动画300-500ms有时间跟随页面过渡400-600ms平滑交接Wow/高级效果800ms戏剧化、弹性、分层决策三问元素移动多远变化需要多显眼用户在等待还是后台播放10.2 缓动Easing选择动作缓动原因进入Ease-out减速、落定离开Ease-in加速、退场强调Ease-in-out平滑、刻意趣味Bounce欢乐、有活力10.3 微交互与加载态微交互四职责反馈、引导、状态、愉悦。按钮状态机hover轻微抬升/变色/缩放→ activescale(0.95)按压感→ focus轮廓/光环→ loadingspinner/骨架屏→ success对勾/变色。加载态选择1s 无需指示1-3s 用 spinner3s 用进度条或骨架屏未知时长用不确定指示器。10.4 页面过渡与滚动动画简单规则退场快、进场慢旧内容快速淡出新内容动画进入。方向匹配导航方向前进从右滑入、后退从左滑入、深入从中心放大、回退缩小。滚动触发用 Intersection Observer只动画 transform/opacity并尊重 reduced-motion。11. 高级动效Lottie、GSAP、SVG、3D 与粒子motion-graphics.md 是进阶参考需求工具关键原则复杂品牌动画LottieAfter Effects Bodymovin 导出 JSON文件 100KB循环克制提供静态回退懒加载序列化/滚动触发GSAP ScrollTrigger用 timeline 编排stagger 间隔 0.05-0.15sScrollTrigger 在视口 70-80% 处触发卸载时必须 kill/revert 防内存泄漏Logo/图标动画SVGstroke-dashoffset 描线、路径 morph动态获取路径长度描线 1-3sease-out3D 效果CSS 3Dperspective 500-1500px、preserve-3d、rotateX/Y/Z、translateZ父容器设 perspective翻转需backface-visibility: hiddenSafari 渲染需测试氛围背景tsParticles / Canvas / Three.js默认 30-50 粒子速度 0.5-2透明度 0.3-0.6移动端禁用或降级滚动驱动原生 CSSanimation-timeline: scroll()/view()揭示动画约 25% 入场触发视差用连续进度节流计算动效决策树节选复杂品牌动画 → Lottie 序列化滚动触发 → GSAP ScrollTrigger Logo/图标动画 → SVGstroke 或 morph 交互式 3D 效果 → CSS 3D简单或 Three.js复杂 氛围背景 → tsParticles 或 Canvas 简单入场/悬停 → CSS keyframes 或 Framer Motion12. Wow Factor 检查清单与反模式12.1 高级感指标慷慨的留白奢华 呼吸空间微妙的深度与立体感平滑、有目的的动画细节到位对齐、一致性连贯的视觉节奏定制元素而非全默认12.2 惰性设计反模式❌ 不要做未加考量的系统默认字体不匹配的库存图片不一致的间距过多竞争色无层级的文字墙不可访问的对比度12.3 AI 倾向模式明确规避每个项目同款配色深色 霓虹作为默认紫色/紫罗兰泛滥紫色禁令简单落地页硬套 Bento 网格Mesh 渐变与辉光滥用千篇一律的布局结构Vercel 克隆不询问用户偏好12.4 暗黑模式不道德设计隐藏成本、虚假紧迫感、强制动作、欺骗性 UI、确认羞辱Confirmshaming。13. 决策流程总结每个设计任务的五步法1. 约束 CONSTRAINTS └── 时间线、品牌、技术、受众是什么 └── 不清楚 → 问 2. 内容 CONTENT └── 存在什么内容 └── 层级是什么 3. 风格方向 STYLE DIRECTION └── 什么适合当前上下文 └── 不清楚 → 问不要默认 4. 执行 EXECUTION └── 套用上述原则 └── 对照反模式检查 5. 评审 REVIEW └── 这服务用户了吗 └── 这与我的默认值不同吗 └── 我会为它自豪吗decision-trees.md 还提供了按项目类型展开的上下文模板E-commerce信任优先 行动导向 可扫描性、SaaS Dashboard功能优先 冷静 UI 一致模式、Landing PageHero 中心 单一主 CTA 情绪连接、Portfolio个性 作品说话 令人难忘每个模板都附有对应的心理学定律应用建议与布局结构图。14. 运行时审计脚本把原则变成可执行检查该 Skill 不仅教理论还提供了可直接运行的审计工具脚本用途用法scripts/ux_audit.pyUX 心理学与可访问性审计python scripts/ux_audit.py project_path从源码结构看ux_audit.py 实现了80 项检查横跨十一大类核心心理学定律Hicks/Fitts/Millers/Von Restorff/Serial Position、情绪设计三层次、信任构建、认知负荷管理、伦理说服设计、字体系统 9 项字族上限 3、行长 45-75ch、行高、字距、字重跨度、clamp 响应式、标题层级顺序、模块化比例、长段落切分、视觉特效 10 项玻璃拟态完整性、阴影自然性、渐变数量、will-change 使用、图片叠加、色彩系统 7 项紫色禁令、60-30-10、暗色模式、WCAG 对比、色彩心理学上下文如餐饮场景禁用蓝色、动画 6 项、动效 7 项、可访问性img alt 等。脚本用法要点从 main 函数 可确认# 审计单个文件或整个目录自动跳过 node_modules/.git/dist/build/.next python scripts/ux_audit.py file_or_directory # JSON 输出便于 CI 集成 python scripts/ux_audit.py path --json输出格式ISSUES硬性问题如导航项 7、检测到紫色、缺失 img alt导致整体FAILWARNINGS软性建议如无主 CTA、无 reduced-motion仅提示退出码0表示合规、1表示存在 issues。审计覆盖文件类型为.tsx/.jsx/.html/.vue/.svelte/.css与 Dillinger 的 Next.js React 技术栈完全匹配——这使它成为交付前对组件代码进行设计自检的理想工具。15. 在 Dillinger 仓库中的落地印证本仓库是对这套设计方法论的鲜活案例语义化设计令牌tailwind.config.ts 以bg-primary/bg-sidebar/bg-navbar/text-muted/border-light/icon-default等语义命名代替裸色值正是60-30-10 规则 语义层的工程化表达克制的动画系统同文件只定义了两种动画——slide-in-from-right 0.2s ease-out进入用 ease-out与fade-in 0.15s ease-out完全符合进入 ease-out与微交互 100-300ms的时长/缓动规范transitionTimingFunction.out-quart采用自定义cubic-bezier(0.25, 1, 0.5, 1)体现有目的而非默认reduced-motion 落实app/globals.css 中实现了完整的prefers-reduced-motion兜底将所有动画/过渡时长压至 0.01ms、迭代次数置 1、滚动行为改 auto与文档尊重用户偏好的要求逐条对应层级 zIndex 系统sidebar:1 → page:2 → editor:3 → preview:4 → overlay:5 → navbar:6 → settings:7 → modal:50 → toast:60本身就是海拔 优先级的数值化对应阴影层级的思想。16. 交付前自检清单结合全部参考文档最终交付前逐项核对用户偏好已询问颜色/风格/布局未指定时必须 ASK与上个项目视觉不同避免重复与默认导航 ≤ 7 项Hicks Law主 CTA 大而醒目Fitts Law Von Restorff内容已分块、有层级Millers Law F 型阅读60-30-10 配色分布、无紫色滥用色彩系统字体 ≤ 3 族、行长 45-75ch、字重跨度 ≥ 2 级字体系统WCAG 对比度达标AA 4.5:1可访问性动画只用 transform/opacity、有 reduced-motion 兜底性能与无障碍已运行python scripts/ux_audit.py path --json且无 ISSUES自动化验证Remember:Design is THINKING, not copying. Every project deserves fresh consideration based on its unique context and users.Avoid the Modern SaaS Safe Harbor!赞分享前端开发工具【免费下载链接】dillingerThe last Markdown editor, ever.项目地址https://gitcode.com/gh_mirrors/di/dillinger点击查看免费下载相关推荐Dillinger 前端设计决策树指南基于上下文的界面设计思考框架与实战模板Dillinger 前端设计决策树指南基于上下文的界面设计思考框架与实战模板 本篇指南基于 Dillinger 仓库中 frontend design 技能包前端开发工具MiGPT 部署教程快速把小爱音箱接入大模型MiGPT 部署教程快速把小爱音箱接入大模型 对小爱同学喊完问题音箱只会回答天气、时间这类固定内容再问别的就露怯——这是传统智能音箱最常见的局限。Mi前端开发工具mediago 前端设计品味规范实战High-Agency Frontend Skill 三轴设计系统与抗 AI 平庸化指南mediago 前端设计品味规范实战High Agency Frontend Skill 三轴设计系统与抗 AI 平庸化指南 这篇指南完整解读 mediago音视频桌面应用后端上一篇HttpRouter性能终极指南为什么它比其他Go路由器快3倍下一篇Argon-Theme用户体验设计提升网站可用性的终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考