craft-design-engineering

Craft

Gustavo Fior 的设计工程概念集。每个概念都配有简短说明和可直接应用的规则，以及相应的 CSS、Tailwind 或 React 实现。在线网站为每个概念都配有交互式演示。

如何使用此技能

1. 在下方索引中找到与当前工作相符的概念。按钮需要用到悬停、按压和点击区域相关概念；表格或计时器需要使用等宽数字；任何带图片的内容都需要添加图片描边。
2. 编写代码前，先阅读 references/ 中对应的文件。每个概念都包含完整的原理说明、规则和代码片段。不要只依据单行摘要应用概念。
3. 应用规则，并优先采用网站上的具体值（时长、缓动、圆角、透明度），不要自行设定。
4. 检查现有 UI 时，将每项改动作为一行列在表格中，表格列为 Before、After 和 Concept，并链接到相应概念的 URL，方便用户阅读并体验演示。
5. 只引用索引中列出的概念。如果问题不在索引范围内，请明确说明，并依据一般判断处理。

原则

• 无人注意到的细节也会累积产生影响。圆角、间距、缓动和对比度等细节采用正确的默认值，才能让界面显得完善。
• 一致性胜过新奇。整个产品都应重复使用同样的两三种缓动、相同的圆角比例和阴影方案。
• 动效必须有其价值。频繁且有意触发的交互应即时响应；罕见或具有空间感的交互则可以添加动画。
• 遵循物理直觉。任何东西都不会凭空出现；嵌套圆角应共享圆心；光线来自上方。

概念索引

排版

• 等宽数字：让变化的数值保持稳定。(参考，演示)
• 视觉对齐：以视觉为准，而非数学计算。(参考，演示)
• 字体平滑：深色背景上的浅色文字看起来更粗。(参考，演示)

颜色

• 噪点：颗粒感可以掩盖色带并增添纹理。(参考，演示)
• 图片描边：用微弱的内边缘框住图片。(参考，演示)

布局

• 嵌套边框圆角：内层圆角等于外层圆角减去内边距。(参考，演示)
• HTML 背景：为页面下方的画布着色。(参考，演示)
• 滚动渐隐：让可继续滚动的一侧边缘渐隐。(参考，演示)

动效

• 按钮按压：按下时缩小，让按钮更有真实感。(参考，演示)
• 可中断性：让用户能在动效过程中改变主意。(参考，演示)
• 悬停克制：频繁触发的交互应即时响应。(参考，演示)

保持此技能更新

此文件和 references/ 由 Craft 仓库中的 bun run build:skill 根据网站内容生成。请编辑文章，而非参考文件。