interface-craft
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseInterface Craft
Interface Craft
By Josh Puckett
A toolkit for building polished, animated interfaces. Write animations you can read like a script, then tune them with live controls.
作者：Josh Puckett
一款用于构建精致动画界面的工具包。你可以像编写脚本一样编写动画，然后通过实时控件进行调整。
Skills
技能
| Skill | When to Use | Invoke |
|---|---|---|
| Storyboard Animation | Writing or refactoring multi-stage animations into a human-readable DSL | |
| DialKit | Adding live control panels to tune animation/style values | |
| Design Critique | Systematic UI critique of a screenshot, component, or page | |
| 技能 | 适用场景 | 调用方式 |
|---|---|---|
| Storyboard Animation | 将多阶段动画编写或重构为易读的DSL | |
| DialKit | 添加实时控制面板以调整动画/样式数值 | |
| Design Critique | 对截图、组件或页面进行系统化UI评审 | |
Quick Start
快速开始
Storyboard Animation
Storyboard Animation
Turn any animation into a readable storyboard with named timing, config objects, and stage-driven sequencing:
tsx
/* ─────────────────────────────────────────────────────────
* ANIMATION STORYBOARD
*
* 0ms waiting for scroll into view
* 300ms card fades in, scale 0.85 → 1.0
* 900ms heading highlights
* 1500ms rows slide up (staggered 200ms)
* ───────────────────────────────────────────────────────── */
const TIMING = {
cardAppear: 300, // card fades in
heading: 900, // heading highlights
rows: 1500, // rows start staggering
};See storyboard-animation.md for the full pattern spec.
将任意动画转换为包含命名时序、配置对象和阶段驱动序列的易读故事板：
tsx
/* ─────────────────────────────────────────────────────────
* ANIMATION STORYBOARD
*
* 0ms 等待滚动进入视图
* 300ms 卡片淡入，缩放从0.85 → 1.0
* 900ms 标题高亮
* 1500ms 行向上滑动（交错200ms）
* ───────────────────────────────────────────────────────── */
const TIMING = {
cardAppear: 300, // 卡片淡入
heading: 900, // 标题高亮
rows: 1500, // 行开始交错
};查看storyboard-animation.md获取完整的模式规范。
DialKit
DialKit
Generate live control panels for tuning values in real time:
tsx
const params = useDialKit('Card', {
scale: [1, 0.5, 2],
blur: [0, 0, 100],
spring: { type: 'spring', visualDuration: 0.3, bounce: 0.2 },
})See dialkit.md for all control types and patterns.
生成实时控制面板以实时调整数值：
tsx
const params = useDialKit('Card', {
scale: [1, 0.5, 2],
blur: [0, 0, 100],
spring: { type: 'spring', visualDuration: 0.3, bounce: 0.2 },
})查看dialkit.md获取所有控件类型和模式。
Sub-Skill Routing
子技能路由
When the user invokes :
/interface-craft- With argument or animation-related context → Load and follow storyboard-animation.md
storyboard - With argument or control-panel-related context → Load and follow dialkit.md
dialkit - With argument, a pasted image, or review-related context → Load and follow design-critique.md
critique - With a file path → Read the file, detect whether it needs storyboard refactoring, dialkit controls, or a design critique, and apply the appropriate skill
- With a plain-English description of an animation → Use storyboard-animation to write it
- Ambiguous → Ask which skill to use
当用户调用时：
/interface-craft- 携带参数或动画相关上下文 → 加载并遵循storyboard-animation.md
storyboard - 携带参数或控制面板相关上下文 → 加载并遵循dialkit.md
dialkit - 携带参数、粘贴的图片或评审相关上下文 → 加载并遵循design-critique.md
critique - 携带文件路径 → 读取文件，检测其是否需要Storyboard重构、DialKit控件或设计评审，然后应用相应技能
- 携带动画的自然语言描述 → 使用Storyboard Animation编写动画
- 模糊请求 → 询问用户需要使用哪项技能
Design Principles
设计原则
- Readable over clever — Anyone should be able to scan the top of a file and understand the animation sequence without reading implementation code
- Tunable by default — Every value that affects timing or appearance should be a named constant, trivially adjustable
- Data-driven — Repeated elements use arrays and , not copy-pasted blocks
.map() - Stage-driven — A single integer state drives the entire sequence; no scattered boolean flags
- Spring-first — Prefer spring physics over duration-based easing for natural motion
- 可读性优先于技巧性 — 任何人都应该能够扫描文件顶部并理解动画序列，而无需阅读实现代码
- 默认支持可调性 — 所有影响时序或外观的数值都应是命名常量，可轻松调整
- 数据驱动 — 重复元素使用数组和，而非复制粘贴的代码块
.map() - 阶段驱动 — 单个整数状态驱动整个序列；无分散的布尔标志
- 优先使用弹簧物理 — 相比基于时长的缓动，更倾向于使用弹簧物理实现自然动效