附加组件

流式字号计算器

Fluid type scale calculator

生成响应式 clamp 值并实时预览层级

实时预览

提示词正文

Build a fluid type scale calculator with Tailwind CSS: inputs for base size, scale ratio, min and max viewport widths, and the number of steps; output a live hierarchy preview rendering each step at its computed clamp() size, a table of the generated clamp() declarations with copy buttons, and a small viewport-width slider that resizes the preview text so the fluid behavior is visible. Warn when the ratio or step count would push the largest size past a readable measure, and offer presets for common scales (1.2, 1.25, 1.333, 1.5).

提示词保持英文原文——直接粘贴进 Claude、Cursor、v0 或任何 AI 编程工具即可使用。

怎么用

基字号/比率/视口/步数输入;实时层级预览;生成的 clamp() 声明可复制;视口滑块演示流动。

同类提示词 · 附加组件

© 2026 Genisource Vibe · 提示词详情